feat: introducing Web-Embeds (alias iframe element) (#6691)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/scene/comparisons.ts

@@ -1,7 +1,12 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
+import { isEmbeddableElement } from "../element/typeChecks";
+import {
+  ExcalidrawEmbeddableElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
 
 export const hasBackground = (type: string) =>
   type === "rectangle" ||
+  type === "embeddable" ||
   type === "ellipse" ||
   type === "diamond" ||
   type === "line" ||
@@ -12,6 +17,7 @@ export const hasStrokeColor = (type: string) =>
 
 export const hasStrokeWidth = (type: string) =>
   type === "rectangle" ||
+  type === "embeddable" ||
   type === "ellipse" ||
   type === "diamond" ||
   type === "freedraw" ||
@@ -20,6 +26,7 @@ export const hasStrokeWidth = (type: string) =>
 
 export const hasStrokeStyle = (type: string) =>
   type === "rectangle" ||
+  type === "embeddable" ||
   type === "ellipse" ||
   type === "diamond" ||
   type === "arrow" ||
@@ -27,6 +34,7 @@ export const hasStrokeStyle = (type: string) =>
 
 export const canChangeRoundness = (type: string) =>
   type === "rectangle" ||
+  type === "embeddable" ||
   type === "arrow" ||
   type === "line" ||
   type === "diamond";
@@ -61,9 +69,21 @@ export const getElementsAtPosition = (
   elements: readonly NonDeletedExcalidrawElement[],
   isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean,
 ) => {
+  const embeddables: ExcalidrawEmbeddableElement[] = [];
   // The parameter elements comes ordered from lower z-index to higher.
   // We want to preserve that order on the returned array.
-  return elements.filter(
-    (element) => !element.isDeleted && isAtPositionFn(element),
-  );
+  // Exception being embeddables which should be on top of everything else in
+  // terms of hit testing.
+  const elsAtPos = elements.filter((element) => {
+    const hit = !element.isDeleted && isAtPositionFn(element);
+    if (hit) {
+      if (isEmbeddableElement(element)) {
+        embeddables.push(element);
+        return false;
+      }
+      return true;
+    }
+    return false;
+  });
+  return elsAtPos.concat(embeddables);
 };

src/scene/export.ts

@@ -96,6 +96,7 @@ export const exportToSvg = async (
   files: BinaryFiles | null,
   opts?: {
     serializeAsJSON?: () => string;
+    renderEmbeddables?: boolean;
   },
 ): Promise<SVGSVGElement> => {
   const {
@@ -212,6 +213,7 @@ export const exportToSvg = async (
     offsetY,
     exportWithDarkMode: appState.exportWithDarkMode,
     exportingFrameId: exportingFrame?.id || null,
+    renderEmbeddables: opts?.renderEmbeddables,
   });
 
   return svgRoot;