Merge pull request #2328 from Human-Connection/2259-embeds-not-displayed

Add LegacyEmbeds component to fix bug

webapp/components/Editor/defaultExtensions.js

@@ -1,4 +1,5 @@
 import Embed from '~/components/Editor/nodes/Embed.js'
+import LegacyEmbed from '~/components/Editor/nodes/LegacyEmbed.js'
 import Link from '~/components/Editor/nodes/Link.js'
 import Strike from '~/components/Editor/marks/Strike'
 import Italic from '~/components/Editor/marks/Italic'
@@ -44,5 +45,13 @@ export default function defaultExtensions(component) {
         return embed
       },
     }),
+    new LegacyEmbed({
+      onEmbed: async ({ url }) => {
+        const {
+          data: { embed },
+        } = await $apollo.query({ query: EmbedQuery(), variables: { url } })
+        return embed
+      },
+    }),
   ]
 }

webapp/components/Editor/defaultExtensions.spec.js

@@ -66,19 +66,24 @@ describe('defaultExtensions', () => {
         type: 'doc',
         content: [
           {
-            type: 'paragraph',
             content: [
               {
                 text: 'Baby loves cat:',
                 type: 'text',
               },
             ],
+            type: 'paragraph',
           },
           {
-            type: 'embed',
-            attrs: {
-              dataEmbedUrl: 'https://www.youtube.com/watch?v=qkdXAtO40Fo',
-            },
+            content: [
+              {
+                attrs: {
+                  dataEmbedUrl: 'https://www.youtube.com/watch?v=qkdXAtO40Fo',
+                },
+                type: 'embed',
+              },
+            ],
+            type: 'paragraph',
           },
         ],
       }

webapp/components/Editor/nodes/LegacyEmbed.js

@@ -0,0 +1,93 @@
+import { Node } from 'tiptap'
+import pasteRule from '../commands/pasteRule'
+import { compileToFunctions } from 'vue-template-compiler'
+import Vue from 'vue'
+import EmbedComponent from '~/components/Embed/EmbedComponent'
+
+Vue.component(EmbedComponent)
+const template = `<component :dataEmbedUrl="dataEmbedUrl" :embedData="embedData" :is="componentType" />`
+
+const compiledTemplate = compileToFunctions(template)
+
+export default class Embed extends Node {
+  get name() {
+    return 'embed'
+  }
+
+  get defaultOptions() {
+    return {
+      onEmbed: () => ({}),
+    }
+  }
+
+  pasteRules({ type, schema }) {
+    return [
+      pasteRule(
+        // source: https://stackoverflow.com/a/3809435
+        /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g,
+        type,
+        url => ({ dataEmbedUrl: url }),
+      ),
+    ]
+  }
+
+  get schema() {
+    return {
+      attrs: {
+        dataEmbedUrl: {
+          default: null,
+        },
+      },
+      group: 'inline',
+      inline: true,
+      parseDOM: [
+        {
+          tag: 'a[href].embed',
+          getAttrs: dom => ({
+            dataEmbedUrl: dom.getAttribute('href'),
+          }),
+        },
+      ],
+      toDOM: node => [
+        'a',
+        {
+          href: node.attrs.dataEmbedUrl,
+          class: 'embed',
+          target: '_blank',
+        },
+      ],
+    }
+  }
+
+  get view() {
+    return {
+      props: ['node', 'updateAttrs', 'options'],
+      data: () => ({
+        embedData: {},
+      }),
+      async created() {
+        if (this.options) {
+          this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl })
+        }
+      },
+      computed: {
+        componentType() {
+          return EmbedComponent
+        },
+        dataEmbedUrl: {
+          get() {
+            return this.node.attrs.dataEmbedUrl
+          },
+          set(dataEmbedUrl) {
+            this.updateAttrs({
+              dataEmbedUrl,
+            })
+          },
+        },
+      },
+      render(createElement) {
+        return compiledTemplate.render.call(this, createElement)
+      },
+    }
+  }
+}