simplify auto-embed syntax

src/ui/component/common/markdown-preview-internal.jsx

@@ -43,7 +43,7 @@ const schema = { ...defaultSchema };
 
 // Extend sanitation schema to support lbry protocol
 schema.protocols.href.push('lbry');
-schema.attributes.a.push('data-preview');
+schema.attributes.a.push('embed');
 
 const MarkdownPreview = (props: MarkdownProps) => {
   const { content, strip, promptLinks } = props;
@@ -61,7 +61,7 @@ const MarkdownPreview = (props: MarkdownProps) => {
   const remarkAttrOpts = {
     scope: 'extended',
     elements: ['link'],
-    extend: { link: ['data-preview'] },
+    extend: { link: ['embed'] },
     defaultValue: true,
   };
 

src/ui/component/externalLink/view.jsx

@@ -9,19 +9,20 @@ import ClaimLink from 'component/claimLink';
 type Props = {
   href: string,
   title?: string,
+  embed?: boolean,
   children: React.Node,
   openModal: (id: string, { uri: string }) => void,
-  'data-preview'?: boolean,
 };
 
 class ExternalLink extends React.PureComponent<Props> {
   static defaultProps = {
     href: null,
     title: null,
+    embed: false,
   };
 
   createLink() {
-    const { href, title, children, openModal } = this.props;
+    const { href, title, embed, children, openModal } = this.props;
     // Regex for url protocol
     const protocolRegex = new RegExp('^(https?|lbry|mailto)+:', 'i');
     const protocol = href ? protocolRegex.exec(href) : null;
@@ -43,7 +44,7 @@ class ExternalLink extends React.PureComponent<Props> {
     // Return local link if protocol is lbry uri
     if (protocol && protocol[0] === 'lbry:' && isURIValid(href)) {
       element = (
-        <ClaimLink uri={href} autoEmbed={this.props['data-preview']}>
+        <ClaimLink uri={href} autoEmbed={embed}>
           {children}
         </ClaimLink>
       );

src/ui/util/remark-lbry.js

@@ -6,12 +6,12 @@ const locateURI = (value, fromIndex) => value.indexOf(protocol, fromIndex);
 const locateMention = (value, fromIndex) => value.indexOf('@', fromIndex);
 
 // Generate a valid markdown link
-const createURI = (text, uri, autoEmbed = false) => ({
+const createURI = (text, uri, embed = false) => ({
   type: 'link',
   url: (uri.startsWith(protocol) ? '' : protocol) + uri,
   data: {
     // Custom attribute
-    hProperties: { 'data-preview': autoEmbed },
+    hProperties: { embed },
   },
   children: [{ type: 'text', value: text }],
 });
@@ -21,12 +21,17 @@ const validateURI = (match, eat) => {
     try {
       const text = match[0];
       const uri = parseURI(text);
-      // Create channel link
+      const isValid = uri && uri.claimName;
-      if (uri.isChannel && !uri.path) {
+      const isChannel = uri.isChannel && !uri.path;
-        return eat(text)(createURI(uri.claimName, text, false));
+
+      if (isValid) {
+        // Create channel link
+        if (isChannel) {
+          return eat(text)(createURI(uri.claimName, text, false));
+        }
+        // Create claim link
+        return eat(text)(createURI(text, text, true));
       }
-      // Create uri link
-      return eat(text)(createURI(text, text, true));
     } catch (err) {
       // Silent errors: console.error(err)
     }
@@ -60,13 +65,20 @@ tokenizeMention.notInBlock = true;
 const visitor = (node, index, parent) => {
   if (node.type === 'link' && parent && parent.type === 'paragraph') {
     try {
-      const url = parseURI(node.url);
+      const uri = parseURI(node.url);
-      // Handle lbry link
+      const isValid = uri && uri.claimName;
-      if (!url.isChannel || (url.isChannel && url.path)) {
+      const isChannel = uri.isChannel && !uri.path;
-        // Auto-embed lbry url
+      if (isValid && !isChannel) {
-        if (!node.data) {
+        if (!node.data || !node.data.hProperties) {
+          // Create new node data
           node.data = {
-            hProperties: { 'data-preview': true },
+            hProperties: { embed: true },
+          };
+        } else if (node.data.hProperties) {
+          // Don't overwrite current attributes
+          node.data.hProperties = {
+            embed: true,
+            ...node.data.hProperties,
           };
         }
       }