diff --git a/src/ui/component/common/markdown-preview-internal.jsx b/src/ui/component/common/markdown-preview-internal.jsx
index 78af2273d..04701cc6d 100644
--- a/src/ui/component/common/markdown-preview-internal.jsx
+++ b/src/ui/component/common/markdown-preview-internal.jsx
@@ -1,8 +1,9 @@
// @flow
import * as React from 'react';
import remark from 'remark';
-import reactRenderer from 'remark-react';
+import remarkLBRY from 'util/remark-lbry';
import remarkEmoji from 'remark-emoji';
+import reactRenderer from 'remark-react';
import ExternalLink from 'component/externalLink';
import defaultSchema from 'hast-util-sanitize/lib/github.json';
@@ -30,7 +31,7 @@ const SimpleLink = (props: SimpleLinkProps) => {
const schema = { ...defaultSchema };
// Extend sanitation schema to support lbry protocol
-schema.protocols.href[3] = 'lbry';
+schema.protocols.href.push('lbry');
const MarkdownPreview = (props: MarkdownProps) => {
const { content, promptLinks } = props;
@@ -44,6 +45,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
{
remark()
+ .use(remarkLBRY)
.use(remarkEmoji)
.use(reactRenderer, remarkOptions)
.processSync(content).contents
diff --git a/src/ui/component/externalLink/view.jsx b/src/ui/component/externalLink/view.jsx
index ccab6ad27..632339842 100644
--- a/src/ui/component/externalLink/view.jsx
+++ b/src/ui/component/externalLink/view.jsx
@@ -20,14 +20,11 @@ class ExternalLink extends React.PureComponent
{
createLink() {
const { href, title, children, openModal } = this.props;
-
// Regex for url protocol
const protocolRegex = new RegExp('^(https?|lbry)+:', 'i');
const protocol = href ? protocolRegex.exec(href) : null;
-
// Return plain text if no valid url
let element = {children};
-
// Return external link if protocol is http or https
if (protocol && (protocol[0] === 'http:' || protocol[0] === 'https:')) {
element = (
@@ -41,7 +38,6 @@ class ExternalLink extends React.PureComponent {
/>
);
}
-
// Return local link if protocol is lbry uri
if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
element = ;
diff --git a/src/ui/util/remark-lbry.js b/src/ui/util/remark-lbry.js
new file mode 100644
index 000000000..28cf90f87
--- /dev/null
+++ b/src/ui/util/remark-lbry.js
@@ -0,0 +1,68 @@
+import { parseURI } from 'lbry-redux';
+
+const protocol = 'lbry://';
+const locateURI = (value, fromIndex) => value.indexOf(protocol, fromIndex);
+const locateMention = (value, fromIndex) => value.indexOf('@', fromIndex);
+
+// Generate a valid markdown link
+const createURI = (text, uri, addProtocol = true) => ({
+ type: 'link',
+ url: (addProtocol ? protocol : '') + uri,
+ children: [{ type: 'text', value: text }],
+});
+
+// Generate a markdown link from channel name
+function tokenizeMention(eat, value, silent) {
+ const match = /^@(\w+)/.exec(value);
+
+ if (match) {
+ const text = match[0];
+ const href = match[0];
+ return silent ? true : eat(text)(createURI(text, href));
+ }
+}
+
+// Generate a markdown link from lbry url
+function tokenizeURI(eat, value, silent) {
+ const match = /^(lbry:\/\/)+([A-z0-9-_#@])+/.exec(value);
+
+ if (match) {
+ try {
+ const text = match[0];
+ const uri = parseURI(text, true);
+ // Create channel link
+ if (uri.isChannel) {
+ return eat(text)(createURI(uri.claimName, uri.claimName));
+ }
+ // Create uri link
+ return eat(text)(createURI(text, text, false));
+ } catch (err) {
+ // Silent errors: console.error(err)
+ }
+ }
+}
+
+// Configure tokenizer for lbry urls
+tokenizeURI.locator = locateURI;
+tokenizeURI.notInLink = true;
+tokenizeURI.notInBlock = true;
+
+// Configure tokenizer for lbry channels
+tokenizeMention.locator = locateMention;
+tokenizeMention.notInLink = true;
+tokenizeMention.notInBlock = true;
+
+// Main module
+export default function remarkLBRY() {
+ const Parser = this.Parser;
+ const tokenizers = Parser.prototype.inlineTokenizers;
+ const methods = Parser.prototype.inlineMethods;
+
+ // Add an inline tokenizer (defined in the following example).
+ tokenizers.uri = tokenizeURI;
+ tokenizers.mention = tokenizeMention;
+
+ // Run it just before `text`.
+ methods.splice(methods.indexOf('text'), 0, 'uri');
+ methods.splice(methods.indexOf('text'), 0, 'mention');
+}