fix: Disabling editor embeds should work with collaborative editing (#2968)

* fix: Disabling editor embeds should work with collaborative editing

* Design tweaks, fixed dragging

shared/editor/nodes/Embed.tsx

@@ -2,6 +2,7 @@ import Token from "markdown-it/lib/token";
 import { NodeSpec, NodeType, Node as ProsemirrorNode } from "prosemirror-model";
 import { EditorState, Transaction } from "prosemirror-state";
 import * as React from "react";
+import Simple from "../embeds/components/Simple";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import embedsRule from "../rules/embeds";
 import { ComponentProps } from "../types";
@@ -24,7 +25,7 @@ export default class Embed extends Node {
       },
       parseDOM: [
         {
-          tag: "iframe[class=embed]",
+          tag: "iframe.embed",
           getAttrs: (dom: HTMLIFrameElement) => {
             const { embeds } = this.editor.props;
             const href = dom.getAttribute("src") || "";
@@ -43,6 +44,14 @@ export default class Embed extends Node {
             return {};
           },
         },
+        {
+          tag: "a.disabled-embed",
+          getAttrs: (dom: HTMLAnchorElement) => {
+            return {
+              href: dom.getAttribute("href") || "",
+            };
+          },
+        },
       ],
       toDOM: (node) => [
         "iframe",
@@ -57,22 +66,24 @@ export default class Embed extends Node {
   }
 
   component({ isEditable, isSelected, theme, node }: ComponentProps) {
-    const { embeds } = this.editor.props;
+    const { embeds, embedsDisabled } = this.editor.props;
 
     // matches are cached in module state to avoid re running loops and regex
-    // here. Unfortuantely this function is not compatible with React.memo or
+    // here. Unfortunately this function is not compatible with React.memo or
     // we would use that instead.
     const hit = cache[node.attrs.href];
     let Component = hit ? hit.Component : undefined;
     let matches = hit ? hit.matches : undefined;
+    let embed = hit ? hit.embed : undefined;
 
     if (!Component) {
-      for (const embed of embeds) {
-        const m = embed.matcher(node.attrs.href);
+      for (const e of embeds) {
+        const m = e.matcher(node.attrs.href);
         if (m) {
-          Component = embed.component;
+          Component = e.component;
           matches = m;
-          cache[node.attrs.href] = { Component, matches };
+          embed = e;
+          cache[node.attrs.href] = { Component, embed, matches };
         }
       }
     }
@@ -81,6 +92,18 @@ export default class Embed extends Node {
       return null;
     }
 
+    if (embedsDisabled) {
+      return (
+        <Simple
+          attrs={{ href: node.attrs.href, matches }}
+          embed={embed}
+          isEditable={isEditable}
+          isSelected={isSelected}
+          theme={theme}
+        />
+      );
+    }
+
     return (
       <Component
         attrs={{ ...node.attrs, matches }}