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/embeds/components/Simple.tsx

@@ -0,0 +1,70 @@
+import { OpenIcon } from "outline-icons";
+import * as React from "react";
+import styled, { DefaultTheme, ThemeProps } from "styled-components";
+import { EmbedProps as Props } from "../";
+
+export default function Simple(props: Props & ThemeProps<DefaultTheme>) {
+  return (
+    <Wrapper
+      className={
+        props.isSelected
+          ? "ProseMirror-selectednode disabled-embed"
+          : "disabled-embed"
+      }
+      href={props.attrs.href}
+      target="_blank"
+      rel="noreferrer nofollow"
+    >
+      {props.embed.icon(undefined)}
+      <Preview>
+        <Title>{props.embed.title}</Title>
+        <Subtitle>{props.attrs.href.replace(/^https?:\/\//, "")}</Subtitle>
+        <StyledOpenIcon color="currentColor" size={20} />
+      </Preview>
+    </Wrapper>
+  );
+}
+
+const StyledOpenIcon = styled(OpenIcon)`
+  margin-left: auto;
+`;
+
+const Title = styled.strong`
+  font-weight: 500;
+  font-size: 14px;
+  color: ${(props) => props.theme.text};
+`;
+
+const Preview = styled.div`
+  gap: 8px;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: center;
+  color: ${(props) => props.theme.textTertiary};
+`;
+
+const Subtitle = styled.span`
+  font-size: 13px;
+  color: ${(props) => props.theme.textTertiary} !important;
+`;
+
+const Wrapper = styled.a`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+  color: ${(props) => props.theme.text} !important;
+  background: ${(props) => props.theme.secondaryBackground};
+  white-space: nowrap;
+  border-radius: 8px;
+  padding: 6px 8px;
+  max-width: 840px;
+  width: 100%;
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  &:hover {
+    outline: 2px solid ${(props) => props.theme.divider};
+  }
+`;

shared/editor/embeds/index.tsx

@@ -38,6 +38,8 @@ import Image from "./components/Image";
 
 export type EmbedProps = {
   isSelected: boolean;
+  isEditable: boolean;
+  embed: EmbedDescriptor;
   attrs: {
     href: string;
     matches: RegExpMatchArray;

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 }}

shared/editor/types/index.ts

@@ -22,6 +22,7 @@ export type MenuItem = {
 };
 
 export type EmbedDescriptor = MenuItem & {
+  icon: React.FC<any>;
   matcher: (url: string) => boolean | [] | RegExpMatchArray;
   component: typeof React.Component | React.FC<any>;
 };