feat: Support embed configuration (#3980)

* wip

* stash

* fix: make authenticationId nullable fk

* fix: apply generics to resolve compile time type errors

* fix: loosen integration settings

* chore: refactor into functional component

* feat: pass integrations all the way to embeds

* perf: avoid re-fetching integrations

* fix: change attr name to avoid type overlap

* feat: use hostname from embed settings in matcher

* Revert "feat: use hostname from embed settings in matcher"

This reverts commit e7485d9cda4dcf45104e460465ca104a56c67ddc.

* feat: refactor  into a class

* chore: refactor url regex formation as a util

* fix: escape regex special chars

* fix: remove in-house escapeRegExp in favor of lodash's

* fix: sanitize url

* perf: memoize embeds

* fix: rename hostname to url and allow spreading entire settings instead of just url

* fix: replace diagrams with drawio

* fix: rename

* fix: support self-hosted and saas both

* fix: assert on settings url

* fix: move embed integrations loading to hook

* fix: address review comments

* fix: use observer in favor of explicit state setters

* fix: refactor useEmbedIntegrations into useEmbeds

* fix: use translations for toasts

Co-authored-by: Tom Moor <tom.moor@gmail.com>

shared/editor/embeds/Diagrams.tsx

@@ -3,43 +3,38 @@ import Frame from "../components/Frame";
 import Image from "../components/Image";
 import { EmbedProps as Props } from ".";
 
-const URL_REGEX = /^https:\/\/viewer\.diagrams\.net\/(?!proxy).*(title=\\w+)?/;
+function Diagrams(props: Props) {
+  const { embed } = props;
+  const embedUrl = props.attrs.matches[0];
+  const params = new URL(embedUrl).searchParams;
+  const titlePrefix = embed.settings?.url ? "Draw.io" : "Diagrams.net";
+  const title = params.get("title")
+    ? `${titlePrefix} (${params.get("title")})`
+    : titlePrefix;
 
-export default class Diagrams extends React.Component<Props> {
-  static ENABLED = [URL_REGEX];
-
-  get embedUrl() {
-    return this.props.attrs.matches[0];
-  }
-
-  get title() {
-    let title = "Diagrams.net";
-    const url = new URL(this.embedUrl);
-    const documentTitle = url.searchParams.get("title");
-
-    if (documentTitle) {
-      title += ` (${documentTitle})`;
-    }
-
-    return title;
-  }
-
-  render() {
-    return (
-      <Frame
-        {...this.props}
-        src={this.embedUrl}
-        title={this.title}
-        border
-        icon={
-          <Image
-            src="/images/diagrams.png"
-            alt="Diagrams.net"
-            width={16}
-            height={16}
-          />
-        }
-      />
-    );
-  }
+  return (
+    <Frame
+      {...props}
+      src={embedUrl}
+      icon={
+        <Image
+          src="/images/diagrams.png"
+          alt="Diagrams.net"
+          width={16}
+          height={16}
+        />
+      }
+      canonicalUrl={props.attrs.href}
+      title={title}
+      border
+    />
+  );
 }
+
+Diagrams.ENABLED = [
+  /^https:\/\/viewer\.diagrams\.net\/(?!proxy).*(title=\\w+)?/,
+];
+
+Diagrams.URL_PATH_REGEX = /\/(?!proxy).*(title=\\w+)?/;
+
+export default Diagrams;