Added basic embed link rendering

webapp/components/Editor/index.vue

@@ -169,10 +169,12 @@ import {
   Italic,
   Strike,
   Underline,
-  Link,
+  // Link,
   History,
 } from 'tiptap-extensions'
 import Mention from './nodes/Mention.js'
+import Embed from './nodes/Embed.js'
+import Link from './nodes/Link.js'
 import { mapGetters } from 'vuex'
 
 let throttleInputEvent
@@ -206,6 +208,7 @@ export default {
           new Italic(),
           new Strike(),
           new Underline(),
+          new Embed(),
           new Link(),
           new Heading({ levels: [3, 4] }),
           new ListItem(),

webapp/components/Editor/nodes/Embed.js

@@ -0,0 +1,59 @@
+import { Node } from 'tiptap'
+
+export default class Embed extends Node {
+  get name() {
+    return 'embed'
+  }
+
+  get schema() {
+    return {
+      attrs: {
+        href: {
+          default: null,
+        },
+      },
+      group: 'block',
+      selectable: false,
+      parseDOM: [
+        {
+          tag: 'a[class=embed]',
+          getAttrs: dom => ({
+            href: dom.getAttribute('href'),
+          }),
+        },
+      ],
+      toDOM: node => [
+        'a',
+        {
+          class: 'embed',
+          href: node.attrs.href,
+        },
+      ],
+    }
+  }
+
+  get view() {
+    return {
+      props: ['node', 'updateAttrs', 'view'],
+      data: () => ({
+        title: 'Link Title',
+        description: 'Some Link Description text which talks a bit about the link.',
+      }),
+      computed: {
+        href: {
+          get() {
+            return this.node.attrs.href
+          },
+          set(href) {
+            this.updateAttrs({
+              href,
+            })
+          },
+        },
+      },
+      template: `
+        <a class="embed"><h4>{{ title }}</h4><p>{{ description }}</p><em>{{ href }}</em></a>
+      `,
+    }
+  }
+}

webapp/components/Editor/nodes/Link.js

@@ -0,0 +1,30 @@
+import { Link as TipTapLink } from 'tiptap-extensions'
+
+export default class Link extends TipTapLink {
+  get schema() {
+    return {
+      attrs: {
+        href: {
+          default: null,
+        },
+      },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: 'a[href]:not(.embed)', // do not trigger on embed links
+          getAttrs: dom => ({
+            href: dom.getAttribute('href'),
+          }),
+        },
+      ],
+      toDOM: node => [
+        'a',
+        {
+          ...node.attrs,
+          rel: 'noopener noreferrer nofollow',
+        },
+        0,
+      ],
+    }
+  }
+}