suport iFrame

* feat: Expose `ActionManager` through `ExcalidrawImperativeAPI`

* Only expose `registerAction` instead of `ActionManager`

dev-docs/docs/@excalidraw/excalidraw/faq.mdx

@@ -39,7 +39,7 @@ Since Vite removes env variables by default, you can update the vite config to e
 
 ```
  define: {
-    "process.env.IS_PREACT": JSON.stringify("true"),
+    "process.env.IS_PREACT": process.env.IS_PREACT,
   },
 ```
 

dev-docs/docs/@excalidraw/excalidraw/integration.mdx

@@ -93,7 +93,7 @@ Since Vite removes env variables by default, you can update the vite config to e
 
 ```
  define: {
-    "process.env.IS_PREACT": JSON.stringify("true"),
+    "process.env.IS_PREACT": process.env.IS_PREACT,
   },
 ```
 ::: 

package.json

@@ -96,7 +96,7 @@
     "vitest-canvas-mock": "0.3.2"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": "18.0.0 - 20.x.x"
   },
   "homepage": ".",
   "name": "excalidraw",

src/actions/actionAlign.tsx

@@ -9,6 +9,7 @@ import {
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
@@ -28,7 +29,7 @@ const alignActionsPredicate = (
   return (
     selectedElements.length > 1 &&
     // TODO enable aligning frames when implemented properly
-    !selectedElements.some((el) => el.type === "frame")
+    !selectedElements.some((el) => isFrameLikeElement(el))
   );
 };
 

src/actions/actionCanvas.tsx

@@ -265,7 +265,21 @@ export const zoomToFit = ({
       30.0,
     ) as NormalizedZoomValue;
 
-    scrollX = (appState.width / 2) * (1 / newZoomValue) - centerX;
+    let appStateWidth = appState.width;
+
+    if (appState.openSidebar) {
+      const sidebarDOMElem = document.querySelector(
+        ".sidebar",
+      ) as HTMLElement | null;
+      const sidebarWidth = sidebarDOMElem?.offsetWidth ?? 0;
+      const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+
+      appStateWidth = !isRTL
+        ? appState.width - sidebarWidth
+        : appState.width + sidebarWidth;
+    }
+
+    scrollX = (appStateWidth / 2) * (1 / newZoomValue) - centerX;
     scrollY = (appState.height / 2) * (1 / newZoomValue) - centerY;
   } else {
     newZoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {

src/actions/actionDeleteSelected.tsx

@@ -10,7 +10,7 @@ import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { isBoundToContainer } from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
 
@@ -20,7 +20,7 @@ const deleteSelectedElements = (
 ) => {
   const framesToBeDeleted = new Set(
     getSelectedElements(
-      elements.filter((el) => el.type === "frame"),
+      elements.filter((el) => isFrameLikeElement(el)),
       appState,
     ).map((el) => el.id),
   );

src/actions/actionDistribute.tsx

@@ -5,6 +5,7 @@ import {
 import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
@@ -19,7 +20,7 @@ const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
   return (
     selectedElements.length > 1 &&
     // TODO enable distributing frames when implemented properly
-    !selectedElements.some((el) => el.type === "frame")
+    !selectedElements.some((el) => isFrameLikeElement(el))
   );
 };
 

src/actions/actionDuplicateSelection.tsx

@@ -20,7 +20,7 @@ import {
   bindTextToShapeAfterDuplication,
   getBoundTextElement,
 } from "../element/textElement";
-import { isBoundToContainer, isFrameElement } from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
 import {
@@ -140,11 +140,11 @@ const duplicateElements = (
     }
 
     const boundTextElement = getBoundTextElement(element);
-    const isElementAFrame = isFrameElement(element);
+    const isElementAFrameLike = isFrameLikeElement(element);
 
     if (idsOfElementsToDuplicate.get(element.id)) {
       // if a group or a container/bound-text or frame, duplicate atomically
-      if (element.groupIds.length || boundTextElement || isElementAFrame) {
+      if (element.groupIds.length || boundTextElement || isElementAFrameLike) {
         const groupId = getSelectedGroupForElement(appState, element);
         if (groupId) {
           // TODO:
@@ -154,7 +154,7 @@ const duplicateElements = (
             sortedElements,
             groupId,
           ).flatMap((element) =>
-            isFrameElement(element)
+            isFrameLikeElement(element)
               ? [...getFrameChildren(elements, element.id), element]
               : [element],
           );
@@ -180,7 +180,7 @@ const duplicateElements = (
           );
           continue;
         }
-        if (isElementAFrame) {
+        if (isElementAFrameLike) {
           const elementsInFrame = getFrameChildren(sortedElements, element.id);
 
           elementsWithClones.push(

src/actions/actionElementLock.ts

@@ -1,4 +1,5 @@
 import { newElementWith } from "../element/mutateElement";
+import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
 import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
@@ -51,7 +52,7 @@ export const actionToggleElementLock = register({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: false,
     });
-    if (selected.length === 1 && selected[0].type !== "frame") {
+    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
       return selected[0].locked
         ? "labels.elementLock.unlock"
         : "labels.elementLock.lock";

src/actions/actionFrame.ts

@@ -7,23 +7,27 @@ import { AppClassProperties, AppState } from "../types";
 import { updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { register } from "./register";
+import { isFrameLikeElement } from "../element/typeChecks";
 
 const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
   const selectedElements = app.scene.getSelectedElements(appState);
 
-  return selectedElements.length === 1 && selectedElements[0].type === "frame";
+  return (
+    selectedElements.length === 1 && isFrameLikeElement(selectedElements[0])
+  );
 };
 
 export const actionSelectAllElementsInFrame = register({
   name: "selectAllElementsInFrame",
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
-    const selectedFrame = app.scene.getSelectedElements(appState)[0];
+    const selectedElement =
+      app.scene.getSelectedElements(appState).at(0) || null;
 
-    if (selectedFrame && selectedFrame.type === "frame") {
+    if (isFrameLikeElement(selectedElement)) {
       const elementsInFrame = getFrameChildren(
         getNonDeletedElements(elements),
-        selectedFrame.id,
+        selectedElement.id,
       ).filter((element) => !(element.type === "text" && element.containerId));
 
       return {
@@ -54,15 +58,20 @@ export const actionRemoveAllElementsFromFrame = register({
   name: "removeAllElementsFromFrame",
   trackEvent: { category: "history" },
   perform: (elements, appState, _, app) => {
-    const selectedFrame = app.scene.getSelectedElements(appState)[0];
+    const selectedElement =
+      app.scene.getSelectedElements(appState).at(0) || null;
 
-    if (selectedFrame && selectedFrame.type === "frame") {
+    if (isFrameLikeElement(selectedElement)) {
       return {
-        elements: removeAllElementsFromFrame(elements, selectedFrame, appState),
+        elements: removeAllElementsFromFrame(
+          elements,
+          selectedElement,
+          appState,
+        ),
         appState: {
           ...appState,
           selectedElementIds: {
-            [selectedFrame.id]: true,
+            [selectedElement.id]: true,
           },
         },
         commitToHistory: true,

src/actions/actionGroup.tsx

@@ -22,8 +22,8 @@ import { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
   getElementsInResizingFrame,
-  getFrameElements,
-  groupByFrames,
+  getFrameLikeElements,
+  groupByFrameLikes,
   removeElementsFromFrame,
   replaceAllElementsInFrame,
 } from "../frame";
@@ -102,7 +102,7 @@ export const actionGroup = register({
     // when it happens, we want to remove elements that are in the frame
     // and are going to be grouped from the frame (mouthful, I know)
     if (groupingElementsFromDifferentFrames) {
-      const frameElementsMap = groupByFrames(selectedElements);
+      const frameElementsMap = groupByFrameLikes(selectedElements);
 
       frameElementsMap.forEach((elementsInFrame, frameId) => {
         nextElements = removeElementsFromFrame(
@@ -219,7 +219,7 @@ export const actionUngroup = register({
         .map((element) => element.frameId!),
     );
 
-    const targetFrames = getFrameElements(elements).filter((frame) =>
+    const targetFrames = getFrameLikeElements(elements).filter((frame) =>
       selectedElementFrameIds.has(frame.id),
     );
 

src/actions/actionMenu.tsx

@@ -56,13 +56,18 @@ export const actionShortcuts = register({
   viewMode: true,
   trackEvent: { category: "menu", action: "toggleHelpDialog" },
   perform: (_elements, appState, _, { focusContainer }) => {
-    if (appState.openDialog === "help") {
+    if (appState.openDialog?.name === "help") {
       focusContainer();
     }
     return {
       appState: {
         ...appState,
-        openDialog: appState.openDialog === "help" ? null : "help",
+        openDialog:
+          appState.openDialog?.name === "help"
+            ? null
+            : {
+                name: "help",
+              },
       },
       commitToHistory: false,
     };

src/actions/actionStyles.ts

@@ -20,7 +20,7 @@ import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
   getDefaultRoundnessTypeForElement,
-  isFrameElement,
+  isFrameLikeElement,
   isArrowElement,
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
@@ -138,7 +138,7 @@ export const actionPasteStyles = register({
             });
           }
 
-          if (isFrameElement(element)) {
+          if (isFrameLikeElement(element)) {
             newElement = newElementWith(newElement, {
               roundness: null,
               backgroundColor: "transparent",

src/analytics.ts

@@ -1,3 +1,7 @@
+// place here categories that you want to track. We want to track just a
+// small subset of categories at a given time.
+const ALLOWED_CATEGORIES_TO_TRACK = ["ai"] as string[];
+
 export const trackEvent = (
   category: string,
   action: string,
@@ -5,13 +9,13 @@ export const trackEvent = (
   value?: number,
 ) => {
   try {
-    // place here categories that you want to track as events
-    // KEEP IN MIND THE PRICING
-    const ALLOWED_CATEGORIES_TO_TRACK = [] as string[];
-    // Uncomment the next line to track locally
-    // console.log("Track Event", { category, action, label, value });
-
-    if (typeof window === "undefined" || import.meta.env.VITE_WORKER_ID) {
+    // prettier-ignore
+    if (
+      typeof window === "undefined"
+      || import.meta.env.VITE_WORKER_ID
+      // comment out to debug locally
+      || import.meta.env.PROD
+    ) {
       return;
     }
 
@@ -19,6 +23,10 @@ export const trackEvent = (
       return;
     }
 
+    if (!import.meta.env.PROD) {
+      console.info("trackEvent", { category, action, label, value });
+    }
+
     if (window.sa_event) {
       window.sa_event(action, {
         category,

src/clipboard.ts

@@ -9,7 +9,10 @@ import {
   EXPORT_DATA_TYPES,
   MIME_TYPES,
 } from "./constants";
-import { isInitializedImageElement } from "./element/typeChecks";
+import {
+  isFrameLikeElement,
+  isInitializedImageElement,
+} from "./element/typeChecks";
 import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
@@ -124,7 +127,7 @@ export const serializeAsClipboardJSON = ({
   files: BinaryFiles | null;
 }) => {
   const framesToCopy = new Set(
-    elements.filter((element) => element.type === "frame"),
+    elements.filter((element) => isFrameLikeElement(element)),
   );
   let foundFile = false;
 

src/components/Actions.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawElementType } from "../element/types";
 import { t } from "../i18n";
 import { useDevice } from "../components/App";
 import {
@@ -36,6 +36,8 @@ import {
   frameToolIcon,
   mermaidLogoIcon,
   laserPointerToolIcon,
+  OpenAIIcon,
+  MagicIcon,
 } from "./icons";
 import { KEYS } from "../keys";
 
@@ -79,7 +81,8 @@ export const SelectedShapeActions = ({
   const showLinkIcon =
     targetElements.length === 1 || isSingleElementBoundContainer;
 
-  let commonSelectedType: string | null = targetElements[0]?.type || null;
+  let commonSelectedType: ExcalidrawElementType | null =
+    targetElements[0]?.type || null;
 
   for (const element of targetElements) {
     if (element.type !== commonSelectedType) {
@@ -94,7 +97,8 @@ export const SelectedShapeActions = ({
         {((hasStrokeColor(appState.activeTool.type) &&
           appState.activeTool.type !== "image" &&
           commonSelectedType !== "image" &&
-          commonSelectedType !== "frame") ||
+          commonSelectedType !== "frame" &&
+          commonSelectedType !== "magicframe") ||
           targetElements.some((element) => hasStrokeColor(element.type))) &&
           renderAction("changeStrokeColor")}
       </div>
@@ -331,13 +335,41 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.laser")}
           </DropdownMenu.Item>
+          <div style={{ margin: "6px 0", fontSize: 14, fontWeight: 600 }}>
+            Generate
+          </div>
           <DropdownMenu.Item
-            onSelect={() => app.setOpenDialog("mermaid")}
+            onSelect={() => app.setOpenDialog({ name: "mermaid" })}
             icon={mermaidLogoIcon}
             data-testid="toolbar-embeddable"
           >
             {t("toolBar.mermaidToExcalidraw")}
           </DropdownMenu.Item>
+
+          {app.props.aiEnabled !== false && (
+            <>
+              <DropdownMenu.Item
+                onSelect={() => app.onMagicframeToolSelect()}
+                icon={MagicIcon}
+                data-testid="toolbar-magicframe"
+              >
+                {t("toolBar.magicframe")}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onSelect={() => {
+                  trackEvent("ai", "d2c-settings", "settings");
+                  app.setOpenDialog({
+                    name: "magicSettings",
+                    source: "settings",
+                  });
+                }}
+                icon={OpenAIIcon}
+                data-testid="toolbar-magicSettings"
+              >
+                {t("toolBar.magicSettings")}
+              </DropdownMenu.Item>
+            </>
+          )}
         </DropdownMenu.Content>
       </DropdownMenu>
     </>

src/components/InlineIcon.tsx

@@ -0,0 +1,15 @@
+export const InlineIcon = ({ icon }: { icon: JSX.Element }) => {
+  return (
+    <span
+      style={{
+        width: "1em",
+        margin: "0 0.5ex 0 0.5ex",
+        display: "inline-block",
+        lineHeight: 0,
+        verticalAlign: "middle",
+      }}
+    >
+      {icon}
+    </span>
+  );
+};

src/components/JSONExportDialog.tsx

@@ -117,7 +117,7 @@ export const JSONExportDialog = ({
 
   return (
     <>
-      {appState.openDialog === "jsonExport" && (
+      {appState.openDialog?.name === "jsonExport" && (
         <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <JSONExportModal
             elements={elements}

src/components/LayerUI.tsx

@@ -1,7 +1,12 @@
 import clsx from "clsx";
 import React from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH } from "../constants";
+import {
+  CLASSES,
+  DEFAULT_SIDEBAR,
+  LIBRARY_SIDEBAR_WIDTH,
+  TOOL_TYPE,
+} from "../constants";
 import { showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
@@ -56,6 +61,7 @@ import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserTool/LaserPointerButton";
+import { MagicSettings } from "./MagicSettings";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -77,6 +83,14 @@ interface LayerUIProps {
   children?: React.ReactNode;
   app: AppClassProperties;
   isCollaborating: boolean;
+  openAIKey: string | null;
+  isOpenAIKeyPersisted: boolean;
+  onOpenAIAPIKeyChange: (apiKey: string, shouldPersist: boolean) => void;
+  onMagicSettingsConfirm: (
+    apiKey: string,
+    shouldPersist: boolean,
+    source: "tool" | "generation" | "settings",
+  ) => void;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -133,6 +147,10 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
+  openAIKey,
+  isOpenAIKeyPersisted,
+  onOpenAIAPIKeyChange,
+  onMagicSettingsConfirm,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -163,7 +181,7 @@ const LayerUI = ({
   const renderImageExportDialog = () => {
     if (
       !UIOptions.canvasActions.saveAsImage ||
-      appState.openDialog !== "imageExport"
+      appState.openDialog?.name !== "imageExport"
     ) {
       return null;
     }
@@ -295,9 +313,11 @@ const LayerUI = ({
                         >
                           <LaserPointerButton
                             title={t("toolBar.laser")}
-                            checked={appState.activeTool.type === "laser"}
+                            checked={
+                              appState.activeTool.type === TOOL_TYPE.laser
+                            }
                             onChange={() =>
-                              app.setActiveTool({ type: "laser" })
+                              app.setActiveTool({ type: TOOL_TYPE.laser })
                             }
                             isMobile
                           />
@@ -432,13 +452,32 @@ const LayerUI = ({
           }}
         />
       )}
-      {appState.openDialog === "help" && (
+      {appState.openDialog?.name === "help" && (
         <HelpDialog
           onClose={() => {
             setAppState({ openDialog: null });
           }}
         />
       )}
+      {appState.openDialog?.name === "magicSettings" && (
+        <MagicSettings
+          openAIKey={openAIKey}
+          isPersisted={isOpenAIKeyPersisted}
+          onChange={onOpenAIAPIKeyChange}
+          onConfirm={(apiKey, shouldPersist) => {
+            const source =
+              appState.openDialog?.name === "magicSettings"
+                ? appState.openDialog?.source
+                : "settings";
+            setAppState({ openDialog: null }, () => {
+              onMagicSettingsConfirm(apiKey, shouldPersist, source);
+            });
+          }}
+          onClose={() => {
+            setAppState({ openDialog: null });
+          }}
+        />
+      )}
       <ActiveConfirmDialog />
       <tunnels.OverwriteConfirmDialogTunnel.Out />
       {renderImageExportDialog()}

src/components/MagicButton.tsx

@@ -0,0 +1,38 @@
+import "./ToolIcon.scss";
+
+import clsx from "clsx";
+import { ToolButtonSize } from "./ToolButton";
+
+const DEFAULT_SIZE: ToolButtonSize = "small";
+
+export const ElementCanvasButton = (props: {
+  title?: string;
+  icon: JSX.Element;
+  name?: string;
+  checked: boolean;
+  onChange?(): void;
+  isMobile?: boolean;
+}) => {
+  return (
+    <label
+      className={clsx(
+        "ToolIcon ToolIcon__MagicButton",
+        `ToolIcon_size_${DEFAULT_SIZE}`,
+        {
+          "is-mobile": props.isMobile,
+        },
+      )}
+      title={`${props.title}`}
+    >
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        name={props.name}
+        onChange={props.onChange}
+        checked={props.checked}
+        aria-label={props.title}
+      />
+      <div className="ToolIcon__icon">{props.icon}</div>
+    </label>
+  );
+};

src/components/MagicSettings.scss

@@ -0,0 +1,9 @@
+.excalidraw {
+  .MagicSettings-confirm {
+    padding: 0.5rem 1rem;
+  }
+
+  .MagicSettings__confirm {
+    margin-top: 2rem;
+  }
+}

src/components/MagicSettings.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { Dialog } from "./Dialog";
+import { TextField } from "./TextField";
+import { MagicIcon, OpenAIIcon } from "./icons";
+import { FilledButton } from "./FilledButton";
+import { CheckboxItem } from "./CheckboxItem";
+import { KEYS } from "../keys";
+import { useUIAppState } from "../context/ui-appState";
+import { InlineIcon } from "./InlineIcon";
+import { Paragraph } from "./Paragraph";
+
+import "./MagicSettings.scss";
+
+export const MagicSettings = (props: {
+  openAIKey: string | null;
+  isPersisted: boolean;
+  onChange: (key: string, shouldPersist: boolean) => void;
+  onConfirm: (key: string, shouldPersist: boolean) => void;
+  onClose: () => void;
+}) => {
+  const { theme } = useUIAppState();
+  const [keyInputValue, setKeyInputValue] = useState(props.openAIKey || "");
+  const [shouldPersist, setShouldPersist] = useState<boolean>(
+    props.isPersisted,
+  );
+
+  const onConfirm = () => {
+    props.onConfirm(keyInputValue.trim(), shouldPersist);
+  };
+
+  return (
+    <Dialog
+      onCloseRequest={() => {
+        props.onClose();
+        props.onConfirm(keyInputValue.trim(), shouldPersist);
+      }}
+      title={
+        <div style={{ display: "flex" }}>
+          Diagram to Code (AI){" "}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0.1rem 0.5rem",
+              marginLeft: "1rem",
+              fontSize: 14,
+              borderRadius: "12px",
+              background: theme === "light" ? "#FFCCCC" : "#703333",
+            }}
+          >
+            Experimental
+          </div>
+        </div>
+      }
+      className="MagicSettings"
+      autofocus={false}
+    >
+      <Paragraph
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          marginBottom: 0,
+        }}
+      >
+        For the diagram-to-code feature we use <InlineIcon icon={OpenAIIcon} />
+        OpenAI.
+      </Paragraph>
+      <Paragraph>
+        While the OpenAI API is in beta, its use is strictly limited — as such
+        we require you use your own API key. You can create an{" "}
+        <a
+          href="https://platform.openai.com/login?launch"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          OpenAI account
+        </a>
+        , add a small credit (5 USD minimum), and{" "}
+        <a
+          href="https://platform.openai.com/api-keys"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          generate your own API key
+        </a>
+        .
+      </Paragraph>
+      <Paragraph>
+        Your OpenAI key does not leave the browser, and you can also set your
+        own limit in your OpenAI account dashboard if needed.
+      </Paragraph>
+      <TextField
+        isRedacted
+        value={keyInputValue}
+        placeholder="Paste your API key here"
+        label="OpenAI API key"
+        onChange={(value) => {
+          setKeyInputValue(value);
+          props.onChange(value.trim(), shouldPersist);
+        }}
+        selectOnRender
+        onKeyDown={(event) => event.key === KEYS.ENTER && onConfirm()}
+      />
+      <Paragraph>
+        By default, your API token is not persisted anywhere so you'll need to
+        insert it again after reload. But, you can persist locally in your
+        browser below.
+      </Paragraph>
+
+      <CheckboxItem checked={shouldPersist} onChange={setShouldPersist}>
+        Persist API key in browser storage
+      </CheckboxItem>
+
+      <Paragraph>
+        Once API key is set, you can use the <InlineIcon icon={MagicIcon} />{" "}
+        tool to wrap your elements in a frame that will then allow you to turn
+        it into code. This dialog can be accessed using the <b>AI Settings</b>{" "}
+        <InlineIcon icon={OpenAIIcon} />.
+      </Paragraph>
+
+      <FilledButton
+        className="MagicSettings__confirm"
+        size="large"
+        label="Confirm"
+        onClick={onConfirm}
+      />
+    </Dialog>
+  );
+};

src/components/OverwriteConfirm/OverwriteConfirmActions.tsx

@@ -47,7 +47,7 @@ export const ExportToImage = () => {
       actionLabel={t("overwriteConfirm.action.exportToImage.button")}
       onClick={() => {
         actionManager.executeAction(actionChangeExportEmbedScene, "ui", true);
-        setAppState({ openDialog: "imageExport" });
+        setAppState({ openDialog: { name: "imageExport" } });
       }}
     >
       {t("overwriteConfirm.action.exportToImage.description")}

src/components/Paragraph.tsx

@@ -0,0 +1,10 @@
+export const Paragraph = (props: {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <p className="excalidraw__paragraph" style={props.style}>
+      {props.children}
+    </p>
+  );
+};

src/components/PasteChartDialog.tsx

@@ -94,7 +94,7 @@ export const PasteChartDialog = ({
 
   const handleChartClick = (chartType: ChartType, elements: ChartElements) => {
     onInsertElements(elements);
-    trackEvent("magic", "chart", chartType);
+    trackEvent("paste", "chart", chartType);
     setAppState({
       currentChartType: chartType,
       pasteDialog: {

src/components/PublishLibrary.tsx

@@ -8,6 +8,7 @@ import Trans from "./Trans";
 import { LibraryItems, LibraryItem, UIAppState } from "../types";
 import { exportToCanvas, exportToSvg } from "../packages/utils";
 import {
+  EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
   MIME_TYPES,
@@ -19,6 +20,7 @@ import { chunk } from "../utils";
 import DialogActionButton from "./DialogActionButton";
 import { CloseIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
+import { EditorLocalStorage } from "../data/EditorLocalStorage";
 
 import "./PublishLibrary.scss";
 
@@ -31,34 +33,6 @@ interface PublishLibraryDataParams {
   website: string;
 }
 
-const LOCAL_STORAGE_KEY_PUBLISH_LIBRARY = "publish-library-data";
-
-const savePublishLibDataToStorage = (data: PublishLibraryDataParams) => {
-  try {
-    localStorage.setItem(
-      LOCAL_STORAGE_KEY_PUBLISH_LIBRARY,
-      JSON.stringify(data),
-    );
-  } catch (error: any) {
-    // Unable to access window.localStorage
-    console.error(error);
-  }
-};
-
-const importPublishLibDataFromStorage = () => {
-  try {
-    const data = localStorage.getItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
-    if (data) {
-      return JSON.parse(data);
-    }
-  } catch (error: any) {
-    // Unable to access localStorage
-    console.error(error);
-  }
-
-  return null;
-};
-
 const generatePreviewImage = async (libraryItems: LibraryItems) => {
   const MAX_ITEMS_PER_ROW = 6;
   const BOX_SIZE = 128;
@@ -255,7 +229,9 @@ const PublishLibrary = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   useEffect(() => {
-    const data = importPublishLibDataFromStorage();
+    const data = EditorLocalStorage.get<PublishLibraryDataParams>(
+      EDITOR_LS_KEYS.PUBLISH_LIBRARY,
+    );
     if (data) {
       setLibraryData(data);
     }
@@ -328,7 +304,7 @@ const PublishLibrary = ({
           if (response.ok) {
             return response.json().then(({ url }) => {
               // flush data from local storage
-              localStorage.removeItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
+              EditorLocalStorage.delete(EDITOR_LS_KEYS.PUBLISH_LIBRARY);
               onSuccess({
                 url,
                 authorName: libraryData.authorName,
@@ -384,7 +360,7 @@ const PublishLibrary = ({
 
   const onDialogClose = useCallback(() => {
     updateItemsInStorage(clonedLibItems);
-    savePublishLibDataToStorage(libraryData);
+    EditorLocalStorage.set(EDITOR_LS_KEYS.PUBLISH_LIBRARY, libraryData);
     onClose();
   }, [clonedLibItems, onClose, updateItemsInStorage, libraryData]);
 

src/components/TextField.tsx

@@ -4,12 +4,15 @@ import {
   useImperativeHandle,
   KeyboardEvent,
   useLayoutEffect,
+  useState,
 } from "react";
 import clsx from "clsx";
 
 import "./TextField.scss";
+import { Button } from "./Button";
+import { eyeIcon, eyeClosedIcon } from "./icons";
 
-export type TextFieldProps = {
+type TextFieldProps = {
   value?: string;
 
   onChange?: (value: string) => void;
@@ -22,6 +25,7 @@ export type TextFieldProps = {
 
   label?: string;
   placeholder?: string;
+  isRedacted?: boolean;
 };
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -35,6 +39,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       readonly,
       selectOnRender,
       onKeyDown,
+      isRedacted = false,
     },
     ref,
   ) => {
@@ -48,6 +53,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       }
     }, [selectOnRender]);
 
+    const [isTemporarilyUnredacted, setIsTemporarilyUnredacted] =
+      useState<boolean>(false);
+
     return (
       <div
         className={clsx("ExcTextField", {
@@ -64,14 +72,26 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           })}
         >
           <input
+            className={clsx({
+              "is-redacted": value && isRedacted && !isTemporarilyUnredacted,
+            })}
             readOnly={readonly}
-            type="text"
             value={value}
             placeholder={placeholder}
             ref={innerRef}
             onChange={(event) => onChange?.(event.target.value)}
             onKeyDown={onKeyDown}
           />
+          {isRedacted && (
+            <Button
+              onSelect={() =>
+                setIsTemporarilyUnredacted(!isTemporarilyUnredacted)
+              }
+              style={{ border: 0, userSelect: "none" }}
+            >
+              {isTemporarilyUnredacted ? eyeClosedIcon : eyeIcon}
+            </Button>
+          )}
         </div>
       </div>
     );

src/components/ToolIcon.scss

@@ -175,7 +175,8 @@
       }
     }
 
-    .ToolIcon__LaserPointer .ToolIcon__icon {
+    .ToolIcon__LaserPointer .ToolIcon__icon,
+    .ToolIcon__MagicButton .ToolIcon__icon {
       width: var(--default-button-size);
       height: var(--default-button-size);
     }

src/components/canvases/InteractiveCanvas.tsx

@@ -189,8 +189,6 @@ const getRelevantAppStateProps = (
   suggestedBindings: appState.suggestedBindings,
   isRotating: appState.isRotating,
   elementsToHighlight: appState.elementsToHighlight,
-  openSidebar: appState.openSidebar,
-  showHyperlinkPopup: appState.showHyperlinkPopup,
   collaborators: appState.collaborators, // Necessary for collab. sessions
   activeEmbeddable: appState.activeEmbeddable,
   snapLines: appState.snapLines,

src/components/icons.tsx

@@ -1688,3 +1688,57 @@ export const laserPointerToolIcon = createIcon(
 
   20,
 );
+
+export const MagicIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <path d="M6 21l15 -15l-3 -3l-15 15l3 3" />
+    <path d="M15 6l3 3" />
+    <path d="M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" />
+    <path d="M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" />
+  </g>,
+  tablerIconProps,
+);
+
+export const OpenAIIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35" />
+    <path d="M5.214 15.014a3.501 3.501 0 0 0 4.446 5.266l4.34 -2.534v-6.946" />
+    <path d="M6 7.63c-1.391 -.236 -2.787 .395 -3.534 1.689a3.474 3.474 0 0 0 1.271 4.745l4.263 2.514l6 -3.348" />
+    <path d="M12.783 4.616a3.501 3.501 0 0 0 -6.783 1.217v5.067l6 3.45" />
+    <path d="M18.786 8.986a3.501 3.501 0 0 0 -4.446 -5.266l-4.34 2.534v6.946" />
+    <path d="M18 16.302c1.391 .236 2.787 -.395 3.534 -1.689a3.474 3.474 0 0 0 -1.271 -4.745l-4.308 -2.514l-5.955 3.42" />
+  </g>,
+  tablerIconProps,
+);
+
+export const fullscreenIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+    <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+    <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+    <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+  </g>,
+  tablerIconProps,
+);
+
+export const eyeIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+    <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+  </g>,
+  tablerIconProps,
+);
+
+export const eyeClosedIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+    <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+    <path d="M3 3l18 18" />
+  </g>,
+  tablerIconProps,
+);

src/components/main-menu/DefaultItems.tsx

@@ -107,7 +107,7 @@ export const SaveAsImage = () => {
     <DropdownMenuItem
       icon={ExportImageIcon}
       data-testid="image-export-button"
-      onSelect={() => setAppState({ openDialog: "imageExport" })}
+      onSelect={() => setAppState({ openDialog: { name: "imageExport" } })}
       shortcut={getShortcutFromShortcutName("imageExport")}
       aria-label={t("buttons.exportImage")}
     >
@@ -230,7 +230,7 @@ export const Export = () => {
     <DropdownMenuItem
       icon={ExportIcon}
       onSelect={() => {
-        setAppState({ openDialog: "jsonExport" });
+        setAppState({ openDialog: { name: "jsonExport" } });
       }}
       data-testid="json-export-button"
       aria-label={t("buttons.export")}

src/constants.ts

@@ -80,6 +80,7 @@ export enum EVENT {
   EXCALIDRAW_LINK = "excalidraw-link",
   MENU_ITEM_SELECT = "menu.itemSelect",
   MESSAGE = "message",
+  FULLSCREENCHANGE = "fullscreenchange",
 }
 
 export const YOUTUBE_STATES = {
@@ -344,4 +345,33 @@ export const DEFAULT_SIDEBAR = {
   defaultTab: LIBRARY_SIDEBAR_TAB,
 } as const;
 
-export const LIBRARY_DISABLED_TYPES = new Set(["embeddable", "image"] as const);
+export const LIBRARY_DISABLED_TYPES = new Set([
+  "iframe",
+  "embeddable",
+  "image",
+] as const);
+
+// use these constants to easily identify reference sites
+export const TOOL_TYPE = {
+  selection: "selection",
+  rectangle: "rectangle",
+  diamond: "diamond",
+  ellipse: "ellipse",
+  arrow: "arrow",
+  line: "line",
+  freedraw: "freedraw",
+  text: "text",
+  image: "image",
+  eraser: "eraser",
+  hand: "hand",
+  frame: "frame",
+  magicframe: "magicframe",
+  embeddable: "embeddable",
+  laser: "laser",
+} as const;
+
+export const EDITOR_LS_KEYS = {
+  OAI_API_KEY: "excalidraw-oai-api-key",
+  // legacy naming (non)scheme
+  PUBLISH_LIBRARY: "publish-library-data",
+} as const;

src/css/styles.scss

@@ -5,9 +5,11 @@
   --zIndex-canvas: 1;
   --zIndex-interactiveCanvas: 2;
   --zIndex-wysiwyg: 3;
+  --zIndex-canvasButtons: 3;
   --zIndex-layerUI: 4;
   --zIndex-eyeDropperBackdrop: 5;
   --zIndex-eyeDropperPreview: 6;
+  --zIndex-hyperlinkContainer: 7;
 
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;
@@ -531,6 +533,12 @@
     }
   }
 
+  input.is-redacted {
+    // we don't use type=password because browsers (chrome?) prompt
+    // you to save it which is annoying
+    -webkit-text-security: disc;
+  }
+
   input[type="text"],
   textarea:not(.excalidraw-wysiwyg) {
     color: var(--text-primary-color);
@@ -726,4 +734,8 @@
     letter-spacing: 0.6px;
     font-family: "Assistant";
   }
+
+  .excalidraw__paragraph {
+    margin: 1rem 0;
+  }
 }

src/data/EditorLocalStorage.ts

@@ -0,0 +1,51 @@
+import { EDITOR_LS_KEYS } from "../constants";
+import { JSONValue } from "../types";
+
+export class EditorLocalStorage {
+  static has(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]) {
+    try {
+      return !!window.localStorage.getItem(key);
+    } catch (error: any) {
+      console.warn(`localStorage.getItem error: ${error.message}`);
+      return false;
+    }
+  }
+
+  static get<T extends JSONValue>(
+    key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS],
+  ) {
+    try {
+      const value = window.localStorage.getItem(key);
+      if (value) {
+        return JSON.parse(value) as T;
+      }
+      return null;
+    } catch (error: any) {
+      console.warn(`localStorage.getItem error: ${error.message}`);
+      return null;
+    }
+  }
+
+  static set = (
+    key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS],
+    value: JSONValue,
+  ) => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      return true;
+    } catch (error: any) {
+      console.warn(`localStorage.setItem error: ${error.message}`);
+      return false;
+    }
+  };
+
+  static delete = (
+    name: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS],
+  ) => {
+    try {
+      window.localStorage.removeItem(name);
+    } catch (error: any) {
+      console.warn(`localStorage.removeItem error: ${error.message}`);
+    }
+  };
+}

src/data/__snapshots__/transform.test.ts.snap

@@ -14,7 +14,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
       "type": "arrow",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -50,7 +49,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
       "type": "arrow",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -81,7 +79,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
@@ -135,7 +132,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "ellipse-1",
@@ -194,7 +190,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
       "type": "arrow",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -232,7 +227,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
     },
   ],
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -277,7 +271,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
     },
   ],
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -320,7 +313,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
       "type": "text",
     },
   ],
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "text-2",
@@ -376,7 +368,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "baseline": 0,
   "boundElements": null,
   "containerId": "id48",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -419,7 +410,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
       "type": "text",
     },
   ],
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id40",
@@ -475,7 +465,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "baseline": 0,
   "boundElements": null,
   "containerId": "id37",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -518,7 +507,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
       "type": "arrow",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -554,7 +542,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
       "type": "arrow",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -590,7 +577,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
       "type": "text",
     },
   ],
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": {
     "elementId": "id44",
@@ -646,7 +632,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "baseline": 0,
   "boundElements": null,
   "containerId": "id41",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -691,7 +676,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
     },
   ],
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -736,7 +720,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
     },
   ],
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -774,7 +757,6 @@ exports[`Test Transform > should not allow duplicate ids 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -805,7 +787,6 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -851,7 +832,6 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": "triangle",
   "endBinding": null,
   "fillStyle": "solid",
@@ -897,7 +877,6 @@ exports[`Test Transform > should transform linear elements 3`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
@@ -943,7 +922,6 @@ exports[`Test Transform > should transform linear elements 4`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
@@ -989,7 +967,6 @@ exports[`Test Transform > should transform regular shapes 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1020,7 +997,6 @@ exports[`Test Transform > should transform regular shapes 2`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1051,7 +1027,6 @@ exports[`Test Transform > should transform regular shapes 3`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1082,7 +1057,6 @@ exports[`Test Transform > should transform regular shapes 4`] = `
   "angle": 0,
   "backgroundColor": "#c0eb75",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1113,7 +1087,6 @@ exports[`Test Transform > should transform regular shapes 5`] = `
   "angle": 0,
   "backgroundColor": "#ffc9c9",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1144,7 +1117,6 @@ exports[`Test Transform > should transform regular shapes 6`] = `
   "angle": 0,
   "backgroundColor": "#a5d8ff",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [],
@@ -1177,7 +1149,6 @@ exports[`Test Transform > should transform text element 1`] = `
   "baseline": 0,
   "boundElements": null,
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1217,7 +1188,6 @@ exports[`Test Transform > should transform text element 2`] = `
   "baseline": 0,
   "boundElements": null,
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1260,7 +1230,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -1311,7 +1280,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -1362,7 +1330,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -1413,7 +1380,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -1461,7 +1427,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id25",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1501,7 +1466,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id26",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1541,7 +1505,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id27",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1582,7 +1545,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id28",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1626,7 +1588,6 @@ exports[`Test Transform > should transform to text containers when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1662,7 +1623,6 @@ exports[`Test Transform > should transform to text containers when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1698,7 +1658,6 @@ exports[`Test Transform > should transform to text containers when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1734,7 +1693,6 @@ exports[`Test Transform > should transform to text containers when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1770,7 +1728,6 @@ exports[`Test Transform > should transform to text containers when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1806,7 +1763,6 @@ exports[`Test Transform > should transform to text containers when label provide
       "type": "text",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1839,7 +1795,6 @@ exports[`Test Transform > should transform to text containers when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id13",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1879,7 +1834,6 @@ exports[`Test Transform > should transform to text containers when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id14",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1920,7 +1874,6 @@ exports[`Test Transform > should transform to text containers when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id15",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -1963,7 +1916,6 @@ exports[`Test Transform > should transform to text containers when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id16",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -2004,7 +1956,6 @@ exports[`Test Transform > should transform to text containers when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id17",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
@@ -2046,7 +1997,6 @@ exports[`Test Transform > should transform to text containers when label provide
   "baseline": 0,
   "boundElements": null,
   "containerId": "id18",
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,

src/data/ai/types.ts

@@ -0,0 +1,300 @@
+export namespace OpenAIInput {
+  type ChatCompletionContentPart =
+    | ChatCompletionContentPartText
+    | ChatCompletionContentPartImage;
+
+  interface ChatCompletionContentPartImage {
+    image_url: ChatCompletionContentPartImage.ImageURL;
+
+    /**
+     * The type of the content part.
+     */
+    type: "image_url";
+  }
+
+  namespace ChatCompletionContentPartImage {
+    export interface ImageURL {
+      /**
+       * Either a URL of the image or the base64 encoded image data.
+       */
+      url: string;
+
+      /**
+       * Specifies the detail level of the image.
+       */
+      detail?: "auto" | "low" | "high";
+    }
+  }
+
+  interface ChatCompletionContentPartText {
+    /**
+     * The text content.
+     */
+    text: string;
+
+    /**
+     * The type of the content part.
+     */
+    type: "text";
+  }
+
+  interface ChatCompletionUserMessageParam {
+    /**
+     * The contents of the user message.
+     */
+    content: string | Array<ChatCompletionContentPart> | null;
+
+    /**
+     * The role of the messages author, in this case `user`.
+     */
+    role: "user";
+  }
+
+  interface ChatCompletionSystemMessageParam {
+    /**
+     * The contents of the system message.
+     */
+    content: string | null;
+
+    /**
+     * The role of the messages author, in this case `system`.
+     */
+    role: "system";
+  }
+
+  export interface ChatCompletionCreateParamsBase {
+    /**
+     * A list of messages comprising the conversation so far.
+     * [Example Python code](https://cookbook.openai.com/examples/how_to_format_inputs_to_chatgpt_models).
+     */
+    messages: Array<
+      ChatCompletionUserMessageParam | ChatCompletionSystemMessageParam
+    >;
+
+    /**
+     * ID of the model to use. See the
+     * [model endpoint compatibility](https://platform.openai.com/docs/models/model-endpoint-compatibility)
+     * table for details on which models work with the Chat API.
+     */
+    model:
+      | (string & {})
+      | "gpt-4-1106-preview"
+      | "gpt-4-vision-preview"
+      | "gpt-4"
+      | "gpt-4-0314"
+      | "gpt-4-0613"
+      | "gpt-4-32k"
+      | "gpt-4-32k-0314"
+      | "gpt-4-32k-0613"
+      | "gpt-3.5-turbo"
+      | "gpt-3.5-turbo-16k"
+      | "gpt-3.5-turbo-0301"
+      | "gpt-3.5-turbo-0613"
+      | "gpt-3.5-turbo-16k-0613";
+
+    /**
+     * Number between -2.0 and 2.0. Positive values penalize new tokens based on their
+     * existing frequency in the text so far, decreasing the model's likelihood to
+     * repeat the same line verbatim.
+     *
+     * [See more information about frequency and presence penalties.](https://platform.openai.com/docs/guides/gpt/parameter-details)
+     */
+    frequency_penalty?: number | null;
+
+    /**
+     * Modify the likelihood of specified tokens appearing in the completion.
+     *
+     * Accepts a JSON object that maps tokens (specified by their token ID in the
+     * tokenizer) to an associated bias value from -100 to 100. Mathematically, the
+     * bias is added to the logits generated by the model prior to sampling. The exact
+     * effect will vary per model, but values between -1 and 1 should decrease or
+     * increase likelihood of selection; values like -100 or 100 should result in a ban
+     * or exclusive selection of the relevant token.
+     */
+    logit_bias?: Record<string, number> | null;
+
+    /**
+     * The maximum number of [tokens](/tokenizer) to generate in the chat completion.
+     *
+     * The total length of input tokens and generated tokens is limited by the model's
+     * context length.
+     * [Example Python code](https://cookbook.openai.com/examples/how_to_count_tokens_with_tiktoken)
+     * for counting tokens.
+     */
+    max_tokens?: number | null;
+
+    /**
+     * How many chat completion choices to generate for each input message.
+     */
+    n?: number | null;
+
+    /**
+     * Number between -2.0 and 2.0. Positive values penalize new tokens based on
+     * whether they appear in the text so far, increasing the model's likelihood to
+     * talk about new topics.
+     *
+     * [See more information about frequency and presence penalties.](https://platform.openai.com/docs/guides/gpt/parameter-details)
+     */
+    presence_penalty?: number | null;
+
+    /**
+     * This feature is in Beta. If specified, our system will make a best effort to
+     * sample deterministically, such that repeated requests with the same `seed` and
+     * parameters should return the same result. Determinism is not guaranteed, and you
+     * should refer to the `system_fingerprint` response parameter to monitor changes
+     * in the backend.
+     */
+    seed?: number | null;
+
+    /**
+     * Up to 4 sequences where the API will stop generating further tokens.
+     */
+    stop?: string | null | Array<string>;
+
+    /**
+     * If set, partial message deltas will be sent, like in ChatGPT. Tokens will be
+     * sent as data-only
+     * [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#Event_stream_format)
+     * as they become available, with the stream terminated by a `data: [DONE]`
+     * message.
+     * [Example Python code](https://cookbook.openai.com/examples/how_to_stream_completions).
+     */
+    stream?: boolean | null;
+
+    /**
+     * What sampling temperature to use, between 0 and 2. Higher values like 0.8 will
+     * make the output more random, while lower values like 0.2 will make it more
+     * focused and deterministic.
+     *
+     * We generally recommend altering this or `top_p` but not both.
+     */
+    temperature?: number | null;
+
+    /**
+     * An alternative to sampling with temperature, called nucleus sampling, where the
+     * model considers the results of the tokens with top_p probability mass. So 0.1
+     * means only the tokens comprising the top 10% probability mass are considered.
+     *
+     * We generally recommend altering this or `temperature` but not both.
+     */
+    top_p?: number | null;
+
+    /**
+     * A unique identifier representing your end-user, which can help OpenAI to monitor
+     * and detect abuse.
+     * [Learn more](https://platform.openai.com/docs/guides/safety-best-practices/end-user-ids).
+     */
+    user?: string;
+  }
+}
+
+export namespace OpenAIOutput {
+  export interface ChatCompletion {
+    /**
+     * A unique identifier for the chat completion.
+     */
+    id: string;
+
+    /**
+     * A list of chat completion choices. Can be more than one if `n` is greater
+     * than 1.
+     */
+    choices: Array<Choice>;
+
+    /**
+     * The Unix timestamp (in seconds) of when the chat completion was created.
+     */
+    created: number;
+
+    /**
+     * The model used for the chat completion.
+     */
+    model: string;
+
+    /**
+     * The object type, which is always `chat.completion`.
+     */
+    object: "chat.completion";
+
+    /**
+     * This fingerprint represents the backend configuration that the model runs with.
+     *
+     * Can be used in conjunction with the `seed` request parameter to understand when
+     * backend changes have been made that might impact determinism.
+     */
+    system_fingerprint?: string;
+
+    /**
+     * Usage statistics for the completion request.
+     */
+    usage?: CompletionUsage;
+  }
+  export interface Choice {
+    /**
+     * The reason the model stopped generating tokens. This will be `stop` if the model
+     * hit a natural stop point or a provided stop sequence, `length` if the maximum
+     * number of tokens specified in the request was reached, `content_filter` if
+     * content was omitted due to a flag from our content filters, `tool_calls` if the
+     * model called a tool, or `function_call` (deprecated) if the model called a
+     * function.
+     */
+    finish_reason:
+      | "stop"
+      | "length"
+      | "tool_calls"
+      | "content_filter"
+      | "function_call";
+
+    /**
+     * The index of the choice in the list of choices.
+     */
+    index: number;
+
+    /**
+     * A chat completion message generated by the model.
+     */
+    message: ChatCompletionMessage;
+  }
+
+  interface ChatCompletionMessage {
+    /**
+     * The contents of the message.
+     */
+    content: string | null;
+
+    /**
+     * The role of the author of this message.
+     */
+    role: "assistant";
+  }
+
+  /**
+   * Usage statistics for the completion request.
+   */
+  interface CompletionUsage {
+    /**
+     * Number of tokens in the generated completion.
+     */
+    completion_tokens: number;
+
+    /**
+     * Number of tokens in the prompt.
+     */
+    prompt_tokens: number;
+
+    /**
+     * Total number of tokens used in the request (prompt + completion).
+     */
+    total_tokens: number;
+  }
+
+  export interface APIError {
+    readonly status: 400 | 401 | 403 | 404 | 409 | 422 | 429 | 500 | undefined;
+    readonly headers: Headers | undefined;
+    readonly error: { message: string } | undefined;
+
+    readonly code: string | null | undefined;
+    readonly param: string | null | undefined;
+    readonly type: string | undefined;
+  }
+}

src/data/index.ts

@@ -3,10 +3,11 @@ import {
   copyTextToSystemClipboard,
 } from "../clipboard";
 import { DEFAULT_EXPORT_PADDING, isFirefox, MIME_TYPES } from "../constants";
-import { getNonDeletedElements, isFrameElement } from "../element";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
 import {
   ExcalidrawElement,
-  ExcalidrawFrameElement,
+  ExcalidrawFrameLikeElement,
   NonDeletedExcalidrawElement,
 } from "../element/types";
 import { t } from "../i18n";
@@ -38,7 +39,7 @@ export const prepareElementsForExport = (
     exportSelectionOnly &&
     isSomeElementSelected(elements, { selectedElementIds });
 
-  let exportingFrame: ExcalidrawFrameElement | null = null;
+  let exportingFrame: ExcalidrawFrameLikeElement | null = null;
   let exportedElements = isExportingSelection
     ? getSelectedElements(
         elements,
@@ -50,7 +51,10 @@ export const prepareElementsForExport = (
     : elements;
 
   if (isExportingSelection) {
-    if (exportedElements.length === 1 && isFrameElement(exportedElements[0])) {
+    if (
+      exportedElements.length === 1 &&
+      isFrameLikeElement(exportedElements[0])
+    ) {
       exportingFrame = exportedElements[0];
       exportedElements = elementsOverlappingBBox({
         elements,
@@ -93,7 +97,7 @@ export const exportCanvas = async (
     viewBackgroundColor: string;
     name: string;
     fileHandle?: FileSystemHandle | null;
-    exportingFrame: ExcalidrawFrameElement | null;
+    exportingFrame: ExcalidrawFrameLikeElement | null;
   },
 ) => {
   if (elements.length === 0) {

src/data/magic.ts

@@ -0,0 +1,104 @@
+import { Theme } from "../element/types";
+import { DataURL } from "../types";
+import { OpenAIInput, OpenAIOutput } from "./ai/types";
+
+export type MagicCacheData =
+  | {
+      status: "pending";
+    }
+  | { status: "done"; html: string }
+  | {
+      status: "error";
+      message?: string;
+      code: "ERR_GENERATION_INTERRUPTED" | string;
+    };
+
+const SYSTEM_PROMPT = `You are a skilled front-end developer who builds interactive prototypes from wireframes, and is an expert at CSS Grid and Flex design.
+Your role is to transform low-fidelity wireframes into working front-end HTML code.
+
+YOU MUST FOLLOW FOLLOWING RULES:
+
+- Use HTML, CSS, JavaScript to build a responsive, accessible, polished prototype
+- Leverage Tailwind for styling and layout (import as script <script src="https://cdn.tailwindcss.com"></script>)
+- Inline JavaScript when needed
+- Fetch dependencies from CDNs when needed (using unpkg or skypack)
+- Source images from Unsplash or create applicable placeholders
+- Interpret annotations as intended vs literal UI
+- Fill gaps using your expertise in UX and business logic
+- generate primarily for desktop UI, but make it responsive.
+- Use grid and flexbox wherever applicable.
+- Convert the wireframe in its entirety, don't omit elements if possible.
+
+If the wireframes, diagrams, or text is unclear or unreadable, refer to provided text for clarification.
+
+Your goal is a production-ready prototype that brings the wireframes to life.
+
+Please output JUST THE HTML file containing your best attempt at implementing the provided wireframes.`;
+
+export async function diagramToHTML({
+  image,
+  apiKey,
+  text,
+  theme = "light",
+}: {
+  image: DataURL;
+  apiKey: string;
+  text: string;
+  theme?: Theme;
+}) {
+  const body: OpenAIInput.ChatCompletionCreateParamsBase = {
+    model: "gpt-4-vision-preview",
+    // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently
+    max_tokens: 4096,
+    temperature: 0.1,
+    messages: [
+      {
+        role: "system",
+        content: SYSTEM_PROMPT,
+      },
+      {
+        role: "user",
+        content: [
+          {
+            type: "image_url",
+            image_url: {
+              url: image,
+              detail: "high",
+            },
+          },
+          {
+            type: "text",
+            text: `Above is the reference wireframe. Please make a new website based on these and return just the HTML file. Also, please make it for the ${theme} theme. What follows are the wireframe's text annotations (if any)...`,
+          },
+          {
+            type: "text",
+            text,
+          },
+        ],
+      },
+    ],
+  };
+
+  let result:
+    | ({ ok: true } & OpenAIOutput.ChatCompletion)
+    | ({ ok: false } & OpenAIOutput.APIError);
+
+  const resp = await fetch("https://api.openai.com/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (resp.ok) {
+    const json: OpenAIOutput.ChatCompletion = await resp.json();
+    result = { ...json, ok: true };
+  } else {
+    const json: OpenAIOutput.APIError = await resp.json();
+    result = { ...json, ok: false };
+  }
+
+  return result;
+}

src/data/restore.ts

@@ -1,5 +1,6 @@
 import {
   ExcalidrawElement,
+  ExcalidrawElementType,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
   FontFamilyValues,
@@ -68,6 +69,7 @@ export const AllowedExcalidrawActiveTools: Record<
   embeddable: true,
   hand: true,
   laser: false,
+  magicframe: false,
 };
 
 export type RestoredDataState = {
@@ -111,7 +113,7 @@ const restoreElementWithProperties = <
     // @ts-ignore TS complains here but type checks the call sites fine.
     keyof K
   > &
-    Partial<Pick<ExcalidrawElement, "type" | "x" | "y">>,
+    Partial<Pick<ExcalidrawElement, "type" | "x" | "y" | "customData">>,
 ): T => {
   const base: Pick<T, keyof ExcalidrawElement> & {
     [PRECEDING_ELEMENT_KEY]?: string;
@@ -159,8 +161,9 @@ const restoreElementWithProperties = <
     locked: element.locked ?? false,
   };
 
-  if ("customData" in element) {
-    base.customData = element.customData;
+  if ("customData" in element || "customData" in extra) {
+    base.customData =
+      "customData" in extra ? extra.customData : element.customData;
   }
 
   if (PRECEDING_ELEMENT_KEY in element) {
@@ -273,7 +276,7 @@ const restoreElement = (
 
       return restoreElementWithProperties(element, {
         type:
-          (element.type as ExcalidrawElement["type"] | "draw") === "draw"
+          (element.type as ExcalidrawElementType | "draw") === "draw"
             ? "line"
             : element.type,
         startBinding: repairBinding(element.startBinding),
@@ -289,15 +292,19 @@ const restoreElement = (
 
     // generic elements
     case "ellipse":
-      return restoreElementWithProperties(element, {});
     case "rectangle":
-      return restoreElementWithProperties(element, {});
     case "diamond":
       return restoreElementWithProperties(element, {});
+    case "iframe":
+      return restoreElementWithProperties(element, {
+        scale: element.scale ?? [1, 1],
+      });
     case "embeddable":
       return restoreElementWithProperties(element, {
         validated: null,
+        scale: element.scale ?? [1, 1],
       });
+    case "magicframe":
     case "frame":
       return restoreElementWithProperties(element, {
         name: element.name ?? null,

src/data/transform.test.ts

@@ -822,22 +822,4 @@ describe("Test Transform", () => {
       "Duplicate id found for rect-1",
     );
   });
-
-  it("should contains customData if provided", () => {
-    const rawData = [
-      {
-        type: "rectangle",
-        x: 100,
-        y: 100,
-        customData: { createdBy: "user01" },
-      },
-    ];
-    const convertedElements = convertToExcalidrawElements(
-      rawData as ExcalidrawElementSkeleton[],
-      opts,
-    );
-    expect(convertedElements[0].customData).toStrictEqual({
-      createdBy: "user01",
-    });
-  });
 });

src/data/transform.ts

@@ -15,6 +15,7 @@ import {
   ElementConstructorOpts,
   newFrameElement,
   newImageElement,
+  newMagicFrameElement,
   newTextElement,
 } from "../element/newElement";
 import {
@@ -26,12 +27,13 @@ import {
   ExcalidrawArrowElement,
   ExcalidrawBindableElement,
   ExcalidrawElement,
-  ExcalidrawEmbeddableElement,
   ExcalidrawFrameElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawGenericElement,
+  ExcalidrawIframeLikeElement,
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
+  ExcalidrawMagicFrameElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
   FileId,
@@ -61,7 +63,12 @@ export type ValidLinearElement = {
             | {
                 type: Exclude<
                   ExcalidrawBindableElement["type"],
-                  "image" | "text" | "frame" | "embeddable"
+                  | "image"
+                  | "text"
+                  | "frame"
+                  | "magicframe"
+                  | "embeddable"
+                  | "iframe"
                 >;
                 id?: ExcalidrawGenericElement["id"];
               }
@@ -69,7 +76,12 @@ export type ValidLinearElement = {
                 id: ExcalidrawGenericElement["id"];
                 type?: Exclude<
                   ExcalidrawBindableElement["type"],
-                  "image" | "text" | "frame" | "embeddable"
+                  | "image"
+                  | "text"
+                  | "frame"
+                  | "magicframe"
+                  | "embeddable"
+                  | "iframe"
                 >;
               }
           )
@@ -93,7 +105,12 @@ export type ValidLinearElement = {
             | {
                 type: Exclude<
                   ExcalidrawBindableElement["type"],
-                  "image" | "text" | "frame" | "embeddable"
+                  | "image"
+                  | "text"
+                  | "frame"
+                  | "magicframe"
+                  | "embeddable"
+                  | "iframe"
                 >;
                 id?: ExcalidrawGenericElement["id"];
               }
@@ -101,7 +118,12 @@ export type ValidLinearElement = {
                 id: ExcalidrawGenericElement["id"];
                 type?: Exclude<
                   ExcalidrawBindableElement["type"],
-                  "image" | "text" | "frame" | "embeddable"
+                  | "image"
+                  | "text"
+                  | "frame"
+                  | "magicframe"
+                  | "embeddable"
+                  | "iframe"
                 >;
               }
           )
@@ -137,7 +159,7 @@ export type ValidContainer =
 export type ExcalidrawElementSkeleton =
   | Extract<
       Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-      ExcalidrawEmbeddableElement | ExcalidrawFreeDrawElement
+      ExcalidrawIframeLikeElement | ExcalidrawFreeDrawElement
     >
   | ({
       type: Extract<ExcalidrawLinearElement["type"], "line">;
@@ -163,7 +185,12 @@ export type ExcalidrawElementSkeleton =
       type: "frame";
       children: readonly ExcalidrawElement["id"][];
       name?: string;
-    } & Partial<ExcalidrawFrameElement>);
+    } & Partial<ExcalidrawFrameElement>)
+  | ({
+      type: "magicframe";
+      children: readonly ExcalidrawElement["id"][];
+      name?: string;
+    } & Partial<ExcalidrawMagicFrameElement>);
 
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
   width: 100,
@@ -547,7 +574,16 @@ export const convertToExcalidrawElements = (
         });
         break;
       }
+      case "magicframe": {
+        excalidrawElement = newMagicFrameElement({
+          x: 0,
+          y: 0,
+          ...element,
+        });
+        break;
+      }
       case "freedraw":
+      case "iframe":
       case "embeddable": {
         excalidrawElement = element;
         break;
@@ -656,7 +692,7 @@ export const convertToExcalidrawElements = (
   // need to calculate coordinates and dimensions of frame which is possibe after all
   // frame children are processed.
   for (const [id, element] of elementsWithIds) {
-    if (element.type !== "frame") {
+    if (element.type !== "frame" && element.type !== "magicframe") {
       continue;
     }
     const frame = elementStore.getElement(id);

src/data/url.ts

@@ -1,15 +1,11 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
 
-export const sanitizeHTMLAttribute = (html: string) => {
-  return html.replace(/"/g, """);
-};
-
 export const normalizeLink = (link: string) => {
   link = link.trim();
   if (!link) {
     return link;
   }
-  return sanitizeUrl(sanitizeHTMLAttribute(link));
+  return sanitizeUrl(link);
 };
 
 export const isLocalLink = (link: string | null) => {

src/element/ElementCanvasButtons.scss

@@ -0,0 +1,14 @@
+.excalidraw {
+  .excalidraw-canvas-buttons {
+    position: absolute;
+
+    box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
+    z-index: var(--zIndex-canvasButtons);
+    background: var(--island-bg-color);
+    border-radius: var(--border-radius-lg);
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+}

src/element/ElementCanvasButtons.tsx

@@ -0,0 +1,60 @@
+import { AppState } from "../types";
+import { sceneCoordsToViewportCoords } from "../utils";
+import { NonDeletedExcalidrawElement } from "./types";
+import { getElementAbsoluteCoords } from ".";
+import { useExcalidrawAppState } from "../components/App";
+
+import "./ElementCanvasButtons.scss";
+
+const CONTAINER_PADDING = 5;
+
+const getContainerCoords = (
+  element: NonDeletedExcalidrawElement,
+  appState: AppState,
+) => {
+  const [x1, y1] = getElementAbsoluteCoords(element);
+  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
+    { sceneX: x1 + element.width, sceneY: y1 },
+    appState,
+  );
+  const x = viewportX - appState.offsetLeft + 10;
+  const y = viewportY - appState.offsetTop;
+  return { x, y };
+};
+
+export const ElementCanvasButtons = ({
+  children,
+  element,
+}: {
+  children: React.ReactNode;
+  element: NonDeletedExcalidrawElement;
+}) => {
+  const appState = useExcalidrawAppState();
+
+  if (
+    appState.contextMenu ||
+    appState.draggingElement ||
+    appState.resizingElement ||
+    appState.isRotating ||
+    appState.openMenu ||
+    appState.viewModeEnabled
+  ) {
+    return null;
+  }
+
+  const { x, y } = getContainerCoords(element, appState);
+
+  return (
+    <div
+      className="excalidraw-canvas-buttons"
+      style={{
+        top: `${y}px`,
+        left: `${x}px`,
+        // width: CONTAINER_WIDTH,
+        padding: CONTAINER_PADDING,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

src/element/Hyperlink.scss

@@ -6,7 +6,7 @@
   justify-content: space-between;
   position: absolute;
   box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
-  z-index: 100;
+  z-index: var(--zIndex-hyperlinkContainer);
   background: var(--island-bg-color);
   border-radius: var(--border-radius-md);
   box-sizing: border-box;

src/element/Hyperlink.tsx

@@ -121,7 +121,7 @@ export const Hyperlink = ({
           setToast({ message: embedLink.warning, closable: true });
         }
         const ar = embedLink
-          ? embedLink.aspectRatio.w / embedLink.aspectRatio.h
+          ? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h
           : 1;
         const hasLinkChanged =
           embeddableLinkCache.get(element.id) !== element.link;
@@ -210,6 +210,7 @@ export const Hyperlink = ({
   };
   const { x, y } = getCoordsForPopover(element, appState);
   if (
+    appState.contextMenu ||
     appState.draggingElement ||
     appState.resizingElement ||
     appState.isRotating ||

src/element/bounds.ts

@@ -13,7 +13,6 @@ import { Point } from "../types";
 import { generateRoughOptions } from "../scene/Shape";
 import {
   isArrowElement,
-  isBoundToContainer,
   isFreeDrawElement,
   isLinearElement,
   isTextElement,
@@ -55,13 +54,7 @@ export class ElementBounds {
   static getBounds(element: ExcalidrawElement) {
     const cachedBounds = ElementBounds.boundsCache.get(element);
 
-    if (
-      cachedBounds?.version &&
-      cachedBounds.version === element.version &&
-      // we don't invalidate cache when we update containers and not labels,
-      // which is causing problems down the line. Fix TBA.
-      !isBoundToContainer(element)
-    ) {
+    if (cachedBounds?.version && cachedBounds.version === element.version) {
       return cachedBounds.bounds;
     }
 

src/element/collision.ts

@@ -18,7 +18,6 @@ import {
   ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawRectangleElement,
-  ExcalidrawEmbeddableElement,
   ExcalidrawDiamondElement,
   ExcalidrawTextElement,
   ExcalidrawEllipseElement,
@@ -27,7 +26,8 @@ import {
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
   StrokeRoundness,
-  ExcalidrawFrameElement,
+  ExcalidrawFrameLikeElement,
+  ExcalidrawIframeLikeElement,
 } from "./types";
 
 import {
@@ -41,7 +41,8 @@ import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import {
   hasBoundTextElement,
-  isEmbeddableElement,
+  isFrameLikeElement,
+  isIframeLikeElement,
   isImageElement,
 } from "./typeChecks";
 import { isTextElement } from ".";
@@ -64,7 +65,7 @@ const isElementDraggableFromInside = (
   const isDraggableFromInside =
     !isTransparent(element.backgroundColor) ||
     hasBoundTextElement(element) ||
-    isEmbeddableElement(element);
+    isIframeLikeElement(element);
   if (element.type === "line") {
     return isDraggableFromInside && isPathALoop(element.points);
   }
@@ -186,7 +187,7 @@ export const isPointHittingElementBoundingBox = (
   // by its frame, whether it has been selected or not
   // this logic here is not ideal
   // TODO: refactor it later...
-  if (element.type === "frame") {
+  if (isFrameLikeElement(element)) {
     return hitTestPointAgainstElement({
       element,
       point: [x, y],
@@ -255,6 +256,7 @@ type HitTestArgs = {
 const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
   switch (args.element.type) {
     case "rectangle":
+    case "iframe":
     case "embeddable":
     case "image":
     case "text":
@@ -282,7 +284,8 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
         "This should not happen, we need to investigate why it does.",
       );
       return false;
-    case "frame": {
+    case "frame":
+    case "magicframe": {
       // check distance to frame element first
       if (
         args.check(
@@ -314,8 +317,10 @@ export const distanceToBindableElement = (
     case "rectangle":
     case "image":
     case "text":
+    case "iframe":
     case "embeddable":
     case "frame":
+    case "magicframe":
       return distanceToRectangle(element, point);
     case "diamond":
       return distanceToDiamond(element, point);
@@ -346,8 +351,8 @@ const distanceToRectangle = (
     | ExcalidrawTextElement
     | ExcalidrawFreeDrawElement
     | ExcalidrawImageElement
-    | ExcalidrawEmbeddableElement
-    | ExcalidrawFrameElement,
+    | ExcalidrawIframeLikeElement
+    | ExcalidrawFrameLikeElement,
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
@@ -662,8 +667,10 @@ export const determineFocusDistance = (
     case "rectangle":
     case "image":
     case "text":
+    case "iframe":
     case "embeddable":
     case "frame":
+    case "magicframe":
       ret = c / (hwidth * (nabs + q * mabs));
       break;
     case "diamond":
@@ -700,8 +707,10 @@ export const determineFocusPoint = (
     case "image":
     case "text":
     case "diamond":
+    case "iframe":
     case "embeddable":
     case "frame":
+    case "magicframe":
       point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
       break;
     case "ellipse":
@@ -752,8 +761,10 @@ const getSortedElementLineIntersections = (
     case "image":
     case "text":
     case "diamond":
+    case "iframe":
     case "embeddable":
     case "frame":
+    case "magicframe":
       const corners = getCorners(element);
       intersections = corners
         .flatMap((point, i) => {
@@ -788,8 +799,8 @@ const getCorners = (
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
     | ExcalidrawTextElement
-    | ExcalidrawEmbeddableElement
-    | ExcalidrawFrameElement,
+    | ExcalidrawIframeLikeElement
+    | ExcalidrawFrameLikeElement,
   scale: number = 1,
 ): GA.Point[] => {
   const hx = (scale * element.width) / 2;
@@ -798,8 +809,10 @@ const getCorners = (
     case "rectangle":
     case "image":
     case "text":
+    case "iframe":
     case "embeddable":
     case "frame":
+    case "magicframe":
       return [
         GA.point(hx, hy),
         GA.point(hx, -hy),
@@ -948,8 +961,8 @@ export const findFocusPointForRectangulars = (
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
     | ExcalidrawTextElement
-    | ExcalidrawEmbeddableElement
-    | ExcalidrawFrameElement,
+    | ExcalidrawIframeLikeElement
+    | ExcalidrawFrameLikeElement,
   // Between -1 and 1 for how far away should the focus point be relative
   // to the size of the element. Sign determines orientation.
   relativeDistance: number,

src/element/dragElements.ts

@@ -11,7 +11,7 @@ import Scene from "../scene/Scene";
 import {
   isArrowElement,
   isBoundToContainer,
-  isFrameElement,
+  isFrameLikeElement,
 } from "./typeChecks";
 
 export const dragSelectedElements = (
@@ -33,7 +33,7 @@ export const dragSelectedElements = (
     selectedElements,
   );
   const frames = selectedElements
-    .filter((e) => isFrameElement(e))
+    .filter((e) => isFrameLikeElement(e))
     .map((f) => f.id);
 
   if (frames.length > 0) {

src/element/embeddable.ts

@@ -6,47 +6,38 @@ import { getFontString, updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { getContainerElement, wrapText } from "./textElement";
-import { isEmbeddableElement } from "./typeChecks";
+import {
+  isFrameLikeElement,
+  isIframeElement,
+  isIframeLikeElement,
+} from "./typeChecks";
 import {
   ExcalidrawElement,
-  ExcalidrawEmbeddableElement,
+  ExcalidrawIframeLikeElement,
+  IframeData,
   NonDeletedExcalidrawElement,
-  Theme,
 } from "./types";
-import { sanitizeHTMLAttribute } from "../data/url";
 
-type EmbeddedLink =
-  | ({
-      aspectRatio: { w: number; h: number };
-      warning?: string;
-      sandbox: { allowSameOrigin?: boolean };
-    } & (
-      | { type: "video" | "generic"; link: string }
-      | { type: "document"; srcdoc: (theme: Theme) => string }
-    ))
-  | null;
-
-const embeddedLinkCache = new Map<string, EmbeddedLink>();
+const embeddedLinkCache = new Map<string, IframeData>();
 
 const RE_YOUTUBE =
-  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
+  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|.*&t=|\?start=|.*&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
 
 const RE_VIMEO =
-  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
+  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
 
-const RE_GH_GIST = /^https:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)/;
+const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
 const RE_GH_GIST_EMBED =
-  /^<script[\s\S]*?\ssrc=["'](https:\/\/gist\.github\.com\/.*?)\.js["']/i;
+  /^<script[\s\S]*?\ssrc=["'](https:\/\/gist.github.com\/.*?)\.js["']/i;
 
 // not anchored to start to allow <blockquote> twitter embeds
-const RE_TWITTER =
-  /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com\/[^/]+\/status\/(\d+)/;
+const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?twitter.com/;
 const RE_TWITTER_EMBED =
-  /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:twitter|x)\.com\/[^"']*)/i;
+  /^<blockquote[\s\S]*?\shref=["'](https:\/\/twitter.com\/[^"']*)/i;
 
 const RE_VALTOWN =
-  /^https:\/\/(?:www\.)?val\.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
+  /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
 
 const RE_GENERIC_EMBED =
   /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
@@ -67,25 +58,16 @@ const ALLOWED_DOMAINS = new Set([
   "stackblitz.com",
   "val.town",
   "giphy.com",
+  "dddice.com",
 ]);
 
-const ALLOW_SAME_ORIGIN = new Set([
-  "youtube.com",
-  "youtu.be",
-  "vimeo.com",
-  "player.vimeo.com",
-  "figma.com",
-  "twitter.com",
-  "x.com",
-  "*.simplepdf.eu",
-  "stackblitz.com",
-]);
-
-const createSrcDoc = (body: string) => {
+export const createSrcDoc = (body: string) => {
   return `<html><body>${body}</body></html>`;
 };
 
-export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
+export const getEmbedLink = (
+  link: string | null | undefined,
+): IframeData | null => {
   if (!link) {
     return null;
   }
@@ -96,10 +78,6 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
 
   const originalLink = link;
 
-  const allowSameOrigin = ALLOW_SAME_ORIGIN.has(
-    matchHostname(link, ALLOW_SAME_ORIGIN) || "",
-  );
-
   let type: "video" | "generic" = "generic";
   let aspectRatio = { w: 560, h: 840 };
   const ytLink = link.match(RE_YOUTUBE);
@@ -124,16 +102,10 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
     aspectRatio = isPortrait ? { w: 315, h: 560 } : { w: 560, h: 315 };
     embeddedLinkCache.set(originalLink, {
       link,
-      aspectRatio,
+      intrinsicSize: aspectRatio,
       type,
-      sandbox: { allowSameOrigin },
     });
-    return {
-      link,
-      aspectRatio,
-      type,
-      sandbox: { allowSameOrigin },
-    };
+    return { link, intrinsicSize: aspectRatio, type };
   }
 
   const vimeoLink = link.match(RE_VIMEO);
@@ -149,11 +121,10 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
     //same link next time will be served from cache
     embeddedLinkCache.set(originalLink, {
       link,
-      aspectRatio,
+      intrinsicSize: aspectRatio,
       type,
-      sandbox: { allowSameOrigin },
     });
-    return { link, aspectRatio, type, warning, sandbox: { allowSameOrigin } };
+    return { link, intrinsicSize: aspectRatio, type, warning };
   }
 
   const figmaLink = link.match(RE_FIGMA);
@@ -165,11 +136,10 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
     aspectRatio = { w: 550, h: 550 };
     embeddedLinkCache.set(originalLink, {
       link,
-      aspectRatio,
+      intrinsicSize: aspectRatio,
       type,
-      sandbox: { allowSameOrigin },
     });
-    return { link, aspectRatio, type, sandbox: { allowSameOrigin } };
+    return { link, intrinsicSize: aspectRatio, type };
   }
 
   const valLink = link.match(RE_VALTOWN);
@@ -178,77 +148,80 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
       valLink[1] === "embed" ? valLink[0] : valLink[0].replace("/v", "/embed");
     embeddedLinkCache.set(originalLink, {
       link,
-      aspectRatio,
+      intrinsicSize: aspectRatio,
       type,
-      sandbox: { allowSameOrigin },
     });
-    return { link, aspectRatio, type, sandbox: { allowSameOrigin } };
+    return { link, intrinsicSize: aspectRatio, type };
   }
 
   if (RE_TWITTER.test(link)) {
-    const postId = link.match(RE_TWITTER)![1];
-    // the embed srcdoc still supports twitter.com domain only.
-    // Note that we don't attempt to parse the username as it can consist of
-    // non-latin1 characters, and the username in the url can be set to anything
-    // without affecting the embed.
-    const safeURL = sanitizeHTMLAttribute(
-      `https://twitter.com/x/status/${postId}`,
-    );
-
-    const ret: EmbeddedLink = {
-      type: "document",
-      srcdoc: (theme: string) =>
-        createSrcDoc(
-          `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${safeURL}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
-        ),
-      aspectRatio: { w: 480, h: 480 },
-      sandbox: { allowSameOrigin },
-    };
+    let ret: IframeData;
+    // assume embed code
+    if (/<blockquote/.test(link)) {
+      const srcDoc = createSrcDoc(link);
+      ret = {
+        type: "document",
+        srcdoc: () => srcDoc,
+        intrinsicSize: { w: 480, h: 480 },
+      };
+      // assume regular tweet url
+    } else {
+      ret = {
+        type: "document",
+        srcdoc: (theme: string) =>
+          createSrcDoc(
+            `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
+          ),
+        intrinsicSize: { w: 480, h: 480 },
+      };
+    }
     embeddedLinkCache.set(originalLink, ret);
     return ret;
   }
 
   if (RE_GH_GIST.test(link)) {
-    const [, user, gistId] = link.match(RE_GH_GIST)!;
-    const safeURL = sanitizeHTMLAttribute(
-      `https://gist.github.com/${user}/${gistId}`,
-    );
-    const ret: EmbeddedLink = {
-      type: "document",
-      srcdoc: () =>
-        createSrcDoc(`
-          <script src="${safeURL}.js"></script>
+    let ret: IframeData;
+    // assume embed code
+    if (/<script>/.test(link)) {
+      const srcDoc = createSrcDoc(link);
+      ret = {
+        type: "document",
+        srcdoc: () => srcDoc,
+        intrinsicSize: { w: 550, h: 720 },
+      };
+      // assume regular url
+    } else {
+      ret = {
+        type: "document",
+        srcdoc: () =>
+          createSrcDoc(`
+          <script src="${link}.js"></script>
           <style type="text/css">
             * { margin: 0px; }
             table, .gist { height: 100%; }
             .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
           </style>
         `),
-      aspectRatio: { w: 550, h: 720 },
-      sandbox: { allowSameOrigin },
-    };
+        intrinsicSize: { w: 550, h: 720 },
+      };
+    }
     embeddedLinkCache.set(link, ret);
     return ret;
   }
 
-  embeddedLinkCache.set(link, {
-    link,
-    aspectRatio,
-    type,
-    sandbox: { allowSameOrigin },
-  });
-  return { link, aspectRatio, type, sandbox: { allowSameOrigin } };
+  embeddedLinkCache.set(link, { link, intrinsicSize: aspectRatio, type });
+  return { link, intrinsicSize: aspectRatio, type };
 };
 
-export const isEmbeddableOrLabel = (
+export const isIframeLikeOrItsLabel = (
   element: NonDeletedExcalidrawElement,
 ): Boolean => {
-  if (isEmbeddableElement(element)) {
+  if (isIframeLikeElement(element)) {
     return true;
   }
   if (element.type === "text") {
     const container = getContainerElement(element);
-    if (container && isEmbeddableElement(container)) {
+    if (container && isFrameLikeElement(container)) {
       return true;
     }
   }
@@ -256,10 +229,16 @@ export const isEmbeddableOrLabel = (
 };
 
 export const createPlaceholderEmbeddableLabel = (
-  element: ExcalidrawEmbeddableElement,
+  element: ExcalidrawIframeLikeElement,
 ): ExcalidrawElement => {
-  const text =
-    !element.link || element?.link === "" ? "Empty Web-Embed" : element.link;
+  let text: string;
+  if (isIframeElement(element)) {
+    text = "IFrame element";
+  } else {
+    text =
+      !element.link || element?.link === "" ? "Empty Web-Embed" : element.link;
+  }
+
   const fontSize = Math.max(
     Math.min(element.width / 2, element.width / text.length),
     element.width / 30,
@@ -312,39 +291,34 @@ export const actionSetEmbeddableAsActiveTool = register({
   },
 });
 
-const matchHostname = (
+const validateHostname = (
   url: string,
   /** using a Set assumes it already contains normalized bare domains */
   allowedHostnames: Set<string> | string,
-): string | null => {
+): boolean => {
   try {
     const { hostname } = new URL(url);
 
     const bareDomain = hostname.replace(/^www\./, "");
+    const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(
+      /^([^.]+)/,
+      "*",
+    );
 
     if (allowedHostnames instanceof Set) {
-      if (ALLOWED_DOMAINS.has(bareDomain)) {
-        return bareDomain;
-      }
-
-      const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(
-        /^([^.]+)/,
-        "*",
+      return (
+        ALLOWED_DOMAINS.has(bareDomain) ||
+        ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded)
       );
-      if (ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded)) {
-        return bareDomainWithFirstSubdomainWildcarded;
-      }
-      return null;
     }
 
-    const bareAllowedHostname = allowedHostnames.replace(/^www\./, "");
-    if (bareDomain === bareAllowedHostname) {
-      return bareAllowedHostname;
+    if (bareDomain === allowedHostnames.replace(/^www\./, "")) {
+      return true;
     }
   } catch (error) {
     // ignore
   }
-  return null;
+  return false;
 };
 
 export const extractSrc = (htmlString: string): string => {
@@ -393,7 +367,7 @@ export const embeddableURLValidator = (
           if (url.match(domain)) {
             return true;
           }
-        } else if (matchHostname(url, domain)) {
+        } else if (validateHostname(url, domain)) {
           return true;
         }
       }
@@ -401,5 +375,5 @@ export const embeddableURLValidator = (
     }
   }
 
-  return !!matchHostname(url, ALLOWED_DOMAINS);
+  return validateHostname(url, ALLOWED_DOMAINS);
 };

src/element/index.ts

@@ -2,7 +2,6 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
-  ExcalidrawFrameElement,
 } from "./types";
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
@@ -50,11 +49,7 @@ export {
   getDragOffsetXY,
   dragNewElement,
 } from "./dragElements";
-export {
-  isTextElement,
-  isExcalidrawElement,
-  isFrameElement,
-} from "./typeChecks";
+export { isTextElement, isExcalidrawElement } from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export {
@@ -74,17 +69,10 @@ export const getVisibleElements = (elements: readonly ExcalidrawElement[]) =>
     (el) => !el.isDeleted && !isInvisiblySmallElement(el),
   ) as readonly NonDeletedExcalidrawElement[];
 
-export const getNonDeletedElements = (elements: readonly ExcalidrawElement[]) =>
-  elements.filter(
-    (element) => !element.isDeleted,
-  ) as readonly NonDeletedExcalidrawElement[];
-
-export const getNonDeletedFrames = (
-  frames: readonly ExcalidrawFrameElement[],
+export const getNonDeletedElements = <T extends ExcalidrawElement>(
+  elements: readonly T[],
 ) =>
-  frames.filter(
-    (frame) => !frame.isDeleted,
-  ) as readonly NonDeleted<ExcalidrawFrameElement>[];
+  elements.filter((element) => !element.isDeleted) as readonly NonDeleted<T>[];
 
 export const isNonDeletedElement = <T extends ExcalidrawElement>(
   element: T,

src/element/newElement.ts

@@ -14,6 +14,8 @@ import {
   ExcalidrawTextContainer,
   ExcalidrawFrameElement,
   ExcalidrawEmbeddableElement,
+  ExcalidrawMagicFrameElement,
+  ExcalidrawIframeElement,
 } from "../element/types";
 import {
   arrayToMap,
@@ -67,7 +69,6 @@ export type ElementConstructorOpts = MarkOptional<
   | "roundness"
   | "locked"
   | "opacity"
-  | "customData"
 >;
 
 const _newElementBase = <T extends ExcalidrawElement>(
@@ -121,7 +122,6 @@ const _newElementBase = <T extends ExcalidrawElement>(
     updated: getUpdatedTimestamp(),
     link,
     locked,
-    customData: rest.customData,
   };
   return element;
 };
@@ -142,6 +142,18 @@ export const newEmbeddableElement = (
   return {
     ..._newElementBase<ExcalidrawEmbeddableElement>("embeddable", opts),
     validated: opts.validated,
+    scale: [1, 1],
+  };
+};
+
+export const newIframeElement = (
+  opts: {
+    type: "iframe";
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawIframeElement> => {
+  return {
+    ..._newElementBase<ExcalidrawIframeElement>("iframe", opts),
+    scale: [1, 1],
   };
 };
 
@@ -162,6 +174,23 @@ export const newFrameElement = (
   return frameElement;
 };
 
+export const newMagicFrameElement = (
+  opts: {
+    name?: string;
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawMagicFrameElement> => {
+  const frameElement = newElementWith(
+    {
+      ..._newElementBase<ExcalidrawMagicFrameElement>("magicframe", opts),
+      type: "magicframe",
+      name: opts?.name || null,
+    },
+    {},
+  );
+
+  return frameElement;
+};
+
 /** computes element x/y offset based on textAlign/verticalAlign */
 const getTextElementPositionOffsets = (
   opts: {

src/element/resizeElements.ts

@@ -27,7 +27,8 @@ import {
 import {
   isArrowElement,
   isBoundToContainer,
-  isFrameElement,
+  isIframeLikeElement,
+  isFrameLikeElement,
   isFreeDrawElement,
   isImageElement,
   isLinearElement,
@@ -163,7 +164,7 @@ const rotateSingleElement = (
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   let angle: number;
-  if (isFrameElement(element)) {
+  if (isFrameLikeElement(element)) {
     angle = 0;
   } else {
     angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
@@ -586,15 +587,31 @@ export const resizeSingleElement = (
   };
 
   if ("scale" in element && "scale" in stateAtResizeStart) {
-    mutateElement(element, {
-      scale: [
-        // defaulting because scaleX/Y can be 0/-0
-        (Math.sign(newBoundsX2 - stateAtResizeStart.x) ||
-          stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0],
-        (Math.sign(newBoundsY2 - stateAtResizeStart.y) ||
-          stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1],
-      ],
-    });
+    if (isIframeLikeElement(element)) {
+      if (shouldMaintainAspectRatio) {
+        const scale: [number, number] = [
+          Math.abs(
+            eleNewWidth /
+              (stateAtResizeStart.width / stateAtResizeStart.scale[0]),
+          ),
+          Math.abs(
+            eleNewHeight /
+              (stateAtResizeStart.height / stateAtResizeStart.scale[1]),
+          ),
+        ];
+        mutateElement(element, { scale });
+      }
+    } else {
+      mutateElement(element, {
+        scale: [
+          // defaulting because scaleX/Y can be 0/-0
+          (Math.sign(newBoundsX2 - stateAtResizeStart.x) ||
+            stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0],
+          (Math.sign(newBoundsY2 - stateAtResizeStart.y) ||
+            stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1],
+        ],
+      });
+    }
   }
 
   if (
@@ -900,7 +917,7 @@ const rotateMultipleElements = (
   }
 
   elements
-    .filter((element) => element.type !== "frame")
+    .filter((element) => !isFrameLikeElement(element))
     .forEach((element) => {
       const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
       const cx = (x1 + x2) / 2;

src/element/textElement.ts

@@ -1,6 +1,7 @@
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
   ExcalidrawElement,
+  ExcalidrawElementType,
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,
@@ -867,7 +868,7 @@ const VALID_CONTAINER_TYPES = new Set([
 ]);
 
 export const isValidTextContainer = (element: {
-  type: ExcalidrawElement["type"];
+  type: ExcalidrawElementType;
 }) => VALID_CONTAINER_TYPES.has(element.type);
 
 export const computeContainerDimensionForBoundText = (

src/element/transformHandles.ts

@@ -8,7 +8,7 @@ import { Bounds, getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { InteractiveCanvasAppState, Zoom } from "../types";
 import { isTextElement } from ".";
-import { isFrameElement, isLinearElement } from "./typeChecks";
+import { isFrameLikeElement, isLinearElement } from "./typeChecks";
 import { DEFAULT_SPACING } from "../renderer/renderScene";
 
 export type TransformHandleDirection =
@@ -257,7 +257,7 @@ export const getTransformHandles = (
     }
   } else if (isTextElement(element)) {
     omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-  } else if (isFrameElement(element)) {
+  } else if (isFrameLikeElement(element)) {
     omitSides = {
       rotation: true,
     };

src/element/typeChecks.ts

@@ -1,5 +1,5 @@
 import { ROUNDNESS } from "../constants";
-import { AppState } from "../types";
+import { ElementOrToolType } from "../types";
 import { MarkNonNullable } from "../utility-types";
 import { assertNever } from "../utils";
 import {
@@ -8,7 +8,6 @@ import {
   ExcalidrawEmbeddableElement,
   ExcalidrawLinearElement,
   ExcalidrawBindableElement,
-  ExcalidrawGenericElement,
   ExcalidrawFreeDrawElement,
   InitializedExcalidrawImageElement,
   ExcalidrawImageElement,
@@ -16,21 +15,13 @@ import {
   ExcalidrawTextContainer,
   ExcalidrawFrameElement,
   RoundnessType,
+  ExcalidrawFrameLikeElement,
+  ExcalidrawElementType,
+  ExcalidrawIframeElement,
+  ExcalidrawIframeLikeElement,
+  ExcalidrawMagicFrameElement,
 } from "./types";
 
-export const isGenericElement = (
-  element: ExcalidrawElement | null,
-): element is ExcalidrawGenericElement => {
-  return (
-    element != null &&
-    (element.type === "selection" ||
-      element.type === "rectangle" ||
-      element.type === "diamond" ||
-      element.type === "ellipse" ||
-      element.type === "embeddable")
-  );
-};
-
 export const isInitializedImageElement = (
   element: ExcalidrawElement | null,
 ): element is InitializedExcalidrawImageElement => {
@@ -49,6 +40,20 @@ export const isEmbeddableElement = (
   return !!element && element.type === "embeddable";
 };
 
+export const isIframeElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawIframeElement => {
+  return !!element && element.type === "iframe";
+};
+
+export const isIframeLikeElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawIframeLikeElement => {
+  return (
+    !!element && (element.type === "iframe" || element.type === "embeddable")
+  );
+};
+
 export const isTextElement = (
   element: ExcalidrawElement | null,
 ): element is ExcalidrawTextElement => {
@@ -61,6 +66,21 @@ export const isFrameElement = (
   return element != null && element.type === "frame";
 };
 
+export const isMagicFrameElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawMagicFrameElement => {
+  return element != null && element.type === "magicframe";
+};
+
+export const isFrameLikeElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawFrameLikeElement => {
+  return (
+    element != null &&
+    (element.type === "frame" || element.type === "magicframe")
+  );
+};
+
 export const isFreeDrawElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawFreeDrawElement => {
@@ -68,7 +88,7 @@ export const isFreeDrawElement = (
 };
 
 export const isFreeDrawElementType = (
-  elementType: ExcalidrawElement["type"],
+  elementType: ExcalidrawElementType,
 ): boolean => {
   return elementType === "freedraw";
 };
@@ -86,7 +106,7 @@ export const isArrowElement = (
 };
 
 export const isLinearElementType = (
-  elementType: AppState["activeTool"]["type"],
+  elementType: ElementOrToolType,
 ): boolean => {
   return (
     elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
@@ -105,7 +125,7 @@ export const isBindingElement = (
 };
 
 export const isBindingElementType = (
-  elementType: AppState["activeTool"]["type"],
+  elementType: ElementOrToolType,
 ): boolean => {
   return elementType === "arrow";
 };
@@ -121,8 +141,10 @@ export const isBindableElement = (
       element.type === "diamond" ||
       element.type === "ellipse" ||
       element.type === "image" ||
+      element.type === "iframe" ||
       element.type === "embeddable" ||
       element.type === "frame" ||
+      element.type === "magicframe" ||
       (element.type === "text" && !element.containerId))
   );
 };
@@ -144,7 +166,7 @@ export const isTextBindableContainer = (
 export const isExcalidrawElement = (
   element: any,
 ): element is ExcalidrawElement => {
-  const type: ExcalidrawElement["type"] | undefined = element?.type;
+  const type: ExcalidrawElementType | undefined = element?.type;
   if (!type) {
     return false;
   }
@@ -152,12 +174,14 @@ export const isExcalidrawElement = (
     case "text":
     case "diamond":
     case "rectangle":
+    case "iframe":
     case "embeddable":
     case "ellipse":
     case "arrow":
     case "freedraw":
     case "line":
     case "frame":
+    case "magicframe":
     case "image":
     case "selection": {
       return true;
@@ -190,7 +214,7 @@ export const isBoundToContainer = (
 };
 
 export const isUsingAdaptiveRadius = (type: string) =>
-  type === "rectangle" || type === "embeddable";
+  type === "rectangle" || type === "embeddable" || type === "iframe";
 
 export const isUsingProportionalRadius = (type: string) =>
   type === "line" || type === "arrow" || type === "diamond";

src/element/types.ts

@@ -7,6 +7,7 @@ import {
   VERTICAL_ALIGN,
 } from "../constants";
 import { MarkNonNullable, ValueOf } from "../utility-types";
+import { MagicCacheData } from "../data/magic";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
@@ -95,8 +96,30 @@ export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase &
      * may not have access to host-app supplied url validator during restore.
      */
     validated: boolean | null;
+    scale: [number, number];
   }>;
 
+export type ExcalidrawIframeElement = _ExcalidrawElementBase &
+  Readonly<{
+    type: "iframe";
+    // TODO move later to AI-specific frame
+    customData?: { generationData?: MagicCacheData };
+    scale: [number, number];
+  }>;
+
+export type ExcalidrawIframeLikeElement =
+  | ExcalidrawIframeElement
+  | ExcalidrawEmbeddableElement;
+
+export type IframeData =
+  | {
+      intrinsicSize: { w: number; h: number };
+      warning?: string;
+    } & (
+      | { type: "video" | "generic"; link: string }
+      | { type: "document"; srcdoc: (theme: Theme) => string }
+    );
+
 export type ExcalidrawImageElement = _ExcalidrawElementBase &
   Readonly<{
     type: "image";
@@ -117,6 +140,15 @@ export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
   name: string | null;
 };
 
+export type ExcalidrawMagicFrameElement = _ExcalidrawElementBase & {
+  type: "magicframe";
+  name: string | null;
+};
+
+export type ExcalidrawFrameLikeElement =
+  | ExcalidrawFrameElement
+  | ExcalidrawMagicFrameElement;
+
 /**
  * These are elements that don't have any additional properties.
  */
@@ -138,6 +170,8 @@ export type ExcalidrawElement =
   | ExcalidrawFreeDrawElement
   | ExcalidrawImageElement
   | ExcalidrawFrameElement
+  | ExcalidrawMagicFrameElement
+  | ExcalidrawIframeElement
   | ExcalidrawEmbeddableElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
@@ -170,8 +204,10 @@ export type ExcalidrawBindableElement =
   | ExcalidrawEllipseElement
   | ExcalidrawTextElement
   | ExcalidrawImageElement
+  | ExcalidrawIframeElement
   | ExcalidrawEmbeddableElement
-  | ExcalidrawFrameElement;
+  | ExcalidrawFrameElement
+  | ExcalidrawMagicFrameElement;
 
 export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement
@@ -217,3 +253,5 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
   }>;
 
 export type FileId = string & { _brand: "FileId" };
+
+export type ExcalidrawElementType = ExcalidrawElement["type"];

src/frame.ts

@@ -5,7 +5,7 @@ import {
 } from "./element";
 import {
   ExcalidrawElement,
-  ExcalidrawFrameElement,
+  ExcalidrawFrameLikeElement,
   NonDeleted,
   NonDeletedExcalidrawElement,
 } from "./element/types";
@@ -18,11 +18,11 @@ import { arrayToMap } from "./utils";
 import { mutateElement } from "./element/mutateElement";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
-import { isFrameElement } from "./element";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
 import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 import { getElementLineSegments } from "./element/bounds";
 import { doLineSegmentsIntersect } from "./packages/utils";
+import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
 
 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (
@@ -58,7 +58,7 @@ export const bindElementsToFramesAfterDuplication = (
 
 export function isElementIntersectingFrame(
   element: ExcalidrawElement,
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) {
   const frameLineSegments = getElementLineSegments(frame);
 
@@ -75,20 +75,20 @@ export function isElementIntersectingFrame(
 
 export const getElementsCompletelyInFrame = (
   elements: readonly ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) =>
-  omitGroupsContainingFrames(
+  omitGroupsContainingFrameLikes(
     getElementsWithinSelection(elements, frame, false),
   ).filter(
     (element) =>
-      (element.type !== "frame" && !element.frameId) ||
+      (!isFrameLikeElement(element) && !element.frameId) ||
       element.frameId === frame.id,
   );
 
 export const isElementContainingFrame = (
   elements: readonly ExcalidrawElement[],
   element: ExcalidrawElement,
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => {
   return getElementsWithinSelection(elements, element).some(
     (e) => e.id === frame.id,
@@ -97,12 +97,12 @@ export const isElementContainingFrame = (
 
 export const getElementsIntersectingFrame = (
   elements: readonly ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => elements.filter((element) => isElementIntersectingFrame(element, frame));
 
 export const elementsAreInFrameBounds = (
   elements: readonly ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => {
   const [selectionX1, selectionY1, selectionX2, selectionY2] =
     getElementAbsoluteCoords(frame);
@@ -120,7 +120,7 @@ export const elementsAreInFrameBounds = (
 
 export const elementOverlapsWithFrame = (
   element: ExcalidrawElement,
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => {
   return (
     elementsAreInFrameBounds([element], frame) ||
@@ -134,7 +134,7 @@ export const isCursorInFrame = (
     x: number;
     y: number;
   },
-  frame: NonDeleted<ExcalidrawFrameElement>,
+  frame: NonDeleted<ExcalidrawFrameLikeElement>,
 ) => {
   const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
 
@@ -148,7 +148,7 @@ export const isCursorInFrame = (
 export const groupsAreAtLeastIntersectingTheFrame = (
   elements: readonly NonDeletedExcalidrawElement[],
   groupIds: readonly string[],
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => {
   const elementsInGroup = groupIds.flatMap((groupId) =>
     getElementsInGroup(elements, groupId),
@@ -168,7 +168,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (
 export const groupsAreCompletelyOutOfFrame = (
   elements: readonly NonDeletedExcalidrawElement[],
   groupIds: readonly string[],
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => {
   const elementsInGroup = groupIds.flatMap((groupId) =>
     getElementsInGroup(elements, groupId),
@@ -192,14 +192,14 @@ export const groupsAreCompletelyOutOfFrame = (
 /**
  * Returns a map of frameId to frame elements. Includes empty frames.
  */
-export const groupByFrames = (elements: readonly ExcalidrawElement[]) => {
+export const groupByFrameLikes = (elements: readonly ExcalidrawElement[]) => {
   const frameElementsMap = new Map<
     ExcalidrawElement["id"],
     ExcalidrawElement[]
   >();
 
   for (const element of elements) {
-    const frameId = isFrameElement(element) ? element.id : element.frameId;
+    const frameId = isFrameLikeElement(element) ? element.id : element.frameId;
     if (frameId && !frameElementsMap.has(frameId)) {
       frameElementsMap.set(frameId, getFrameChildren(elements, frameId));
     }
@@ -213,12 +213,12 @@ export const getFrameChildren = (
   frameId: string,
 ) => allElements.filter((element) => element.frameId === frameId);
 
-export const getFrameElements = (
+export const getFrameLikeElements = (
   allElements: ExcalidrawElementsIncludingDeleted,
-): ExcalidrawFrameElement[] => {
-  return allElements.filter((element) =>
-    isFrameElement(element),
-  ) as ExcalidrawFrameElement[];
+): ExcalidrawFrameLikeElement[] => {
+  return allElements.filter((element): element is ExcalidrawFrameLikeElement =>
+    isFrameLikeElement(element),
+  );
 };
 
 /**
@@ -232,7 +232,7 @@ export const getFrameElements = (
 export const getRootElements = (
   allElements: ExcalidrawElementsIncludingDeleted,
 ) => {
-  const frameElements = arrayToMap(getFrameElements(allElements));
+  const frameElements = arrayToMap(getFrameLikeElements(allElements));
   return allElements.filter(
     (element) =>
       frameElements.has(element.id) ||
@@ -243,7 +243,7 @@ export const getRootElements = (
 
 export const getElementsInResizingFrame = (
   allElements: ExcalidrawElementsIncludingDeleted,
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
   appState: AppState,
 ): ExcalidrawElement[] => {
   const prevElementsInFrame = getFrameChildren(allElements, frame.id);
@@ -336,9 +336,9 @@ export const getElementsInResizingFrame = (
 
 export const getElementsInNewFrame = (
   allElements: ExcalidrawElementsIncludingDeleted,
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => {
-  return omitGroupsContainingFrames(
+  return omitGroupsContainingFrameLikes(
     allElements,
     getElementsCompletelyInFrame(allElements, frame),
   );
@@ -356,12 +356,12 @@ export const getContainingFrame = (
   if (element.frameId) {
     if (elementsMap) {
       return (elementsMap.get(element.frameId) ||
-        null) as null | ExcalidrawFrameElement;
+        null) as null | ExcalidrawFrameLikeElement;
     }
     return (
       (Scene.getScene(element)?.getElement(
         element.frameId,
-      ) as ExcalidrawFrameElement) || null
+      ) as ExcalidrawFrameLikeElement) || null
     );
   }
   return null;
@@ -377,7 +377,7 @@ export const getContainingFrame = (
 export const addElementsToFrame = (
   allElements: ExcalidrawElementsIncludingDeleted,
   elementsToAdd: NonDeletedExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
 ) => {
   const { currTargetFrameChildrenMap } = allElements.reduce(
     (acc, element, index) => {
@@ -397,7 +397,7 @@ export const addElementsToFrame = (
 
   // - add bound text elements if not already in the array
   // - filter out elements that are already in the frame
-  for (const element of omitGroupsContainingFrames(
+  for (const element of omitGroupsContainingFrameLikes(
     allElements,
     elementsToAdd,
   )) {
@@ -438,7 +438,7 @@ export const removeElementsFromFrame = (
   >();
 
   const toRemoveElementsByFrame = new Map<
-    ExcalidrawFrameElement["id"],
+    ExcalidrawFrameLikeElement["id"],
     ExcalidrawElement[]
   >();
 
@@ -474,7 +474,7 @@ export const removeElementsFromFrame = (
 
 export const removeAllElementsFromFrame = (
   allElements: ExcalidrawElementsIncludingDeleted,
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
   appState: AppState,
 ) => {
   const elementsInFrame = getFrameChildren(allElements, frame.id);
@@ -484,7 +484,7 @@ export const removeAllElementsFromFrame = (
 export const replaceAllElementsInFrame = (
   allElements: ExcalidrawElementsIncludingDeleted,
   nextElementsInFrame: ExcalidrawElement[],
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
   appState: AppState,
 ) => {
   return addElementsToFrame(
@@ -524,7 +524,7 @@ export const updateFrameMembershipOfSelectedElements = (
   elementsToFilter.forEach((element) => {
     if (
       element.frameId &&
-      !isFrameElement(element) &&
+      !isFrameLikeElement(element) &&
       !isElementInFrame(element, allElements, appState)
     ) {
       elementsToRemove.add(element);
@@ -540,7 +540,7 @@ export const updateFrameMembershipOfSelectedElements = (
  * filters out elements that are inside groups that contain a frame element
  * anywhere in the group tree
  */
-export const omitGroupsContainingFrames = (
+export const omitGroupsContainingFrameLikes = (
   allElements: ExcalidrawElementsIncludingDeleted,
   /** subset of elements you want to filter. Optional perf optimization so we
    * don't have to filter all elements unnecessarily
@@ -558,7 +558,9 @@ export const omitGroupsContainingFrames = (
   const rejectedGroupIds = new Set<string>();
   for (const groupId of uniqueGroupIds) {
     if (
-      getElementsInGroup(allElements, groupId).some((el) => isFrameElement(el))
+      getElementsInGroup(allElements, groupId).some((el) =>
+        isFrameLikeElement(el),
+      )
     ) {
       rejectedGroupIds.add(groupId);
     }
@@ -636,7 +638,7 @@ export const isElementInFrame = (
     }
 
     for (const elementInGroup of allElementsInGroup) {
-      if (isFrameElement(elementInGroup)) {
+      if (isFrameLikeElement(elementInGroup)) {
         return false;
       }
     }
@@ -650,3 +652,15 @@ export const isElementInFrame = (
 
   return false;
 };
+
+export const getFrameLikeTitle = (
+  element: ExcalidrawFrameLikeElement,
+  frameIdx: number,
+) => {
+  const existingName = element.name?.trim();
+  if (existingName) {
+    return existingName;
+  }
+  // TODO name frames AI only is specific to AI frames
+  return isFrameElement(element) ? `Frame ${frameIdx}` : `AI Frame ${frameIdx}`;
+};

src/locales/en.json

@@ -11,6 +11,8 @@
     "copyAsPng": "Copy to clipboard as PNG",
     "copyAsSvg": "Copy to clipboard as SVG",
     "copyText": "Copy to clipboard as text",
+    "copySource": "Copy source to clipboard",
+    "convertToCode": "Convert to code",
     "bringForward": "Bring forward",
     "sendToBack": "Send to back",
     "bringToFront": "Bring to front",
@@ -218,6 +220,7 @@
     },
     "libraryElementTypeError": {
       "embeddable": "Embeddable elements cannot be added to the library.",
+      "iframe": "IFrame elements cannot be added to the library.",
       "image": "Support for adding images to the library coming soon!"
     },
     "asyncPasteFailedOnRead": "Couldn't paste (couldn't read from system clipboard).",
@@ -240,11 +243,13 @@
     "link": "Add/ Update link for a selected shape",
     "eraser": "Eraser",
     "frame": "Frame tool",
+    "magicframe": "Wireframe to code",
     "embeddable": "Web Embed",
     "laser": "Laser pointer",
     "hand": "Hand (panning tool)",
     "extraTools": "More tools",
-    "mermaidToExcalidraw": "Mermaid to Excalidraw"
+    "mermaidToExcalidraw": "Mermaid to Excalidraw",
+    "magicSettings": "AI settings"
   },
   "headings": {
     "canvasActions": "Canvas actions",

src/packages/excalidraw/.size-limit.json

@@ -1,7 +1,7 @@
 [
   {
     "path": "dist/excalidraw.production.min.js",
-    "limit": "335 kB"
+    "limit": "325 kB"
   },
   {
     "path": "dist/excalidraw-assets/locales",

src/packages/excalidraw/CHANGELOG.md

@@ -13,66 +13,6 @@ Please add the latest change on the top under the correct section.
 
 ## Unreleased
 
-### Features
-
-- Add `onPointerUp` prop [#7638](https://github.com/excalidraw/excalidraw/pull/7638).
-
-- Expose `getVisibleSceneBounds` helper to get scene bounds of visible canvas area. [#7450](https://github.com/excalidraw/excalidraw/pull/7450)
-
-### Fixes
-
-- Keep customData when converting to ExcalidrawElement. [#7656](https://github.com/excalidraw/excalidraw/pull/7656)
-
-### Breaking Changes
-
-- `ExcalidrawEmbeddableElement.validated` was removed and moved to private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)
-
-- Create an `ESM` build for `@excalidraw/excalidraw`. The API is in progress and subject to change before stable release. There are some changes on how the package will be consumed
-
-  #### Bundler
-
-  - CSS needs to be imported so you will need to import the css along with the excalidraw component
-
-  ```js
-  import { Excalidraw } from "@excalidraw/excalidraw";
-  import "@excalidraw/excalidraw/index.css";
-  ```
-
-  - The `types` path is updated
-
-  Instead of importing from `@excalidraw/excalidraw/types/`, you will need to import from `@excalidraw/excalidraw/dist/excalidraw` or `@excalidraw/excalidraw/dist/utils` depending on the types you are using.
-
-  However this we will be fixing before stable release, so in case you want to try it out you will need to update the types for now.
-
-  #### Browser
-
-  - Since its `ESM` so now script type `module` can be used to load it and css needs to be loaded as well.
-
-  ```html
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/@excalidraw/excalidraw@next/dist/browser/dev/index.css"
-  />
-  <script type="module">
-    import * as ExcalidrawLib from "https://unpkg.com/@excalidraw/excalidraw@next/dist/browser/dev/index.js";
-    window.ExcalidrawLib = ExcalidrawLib;
-  </script>
-  ```
-
-- `appState.openDialog` type was changed from `null | string` to `null | { name: string }`. [#7336](https://github.com/excalidraw/excalidraw/pull/7336)
-
-## 0.17.1 (2023-11-28)
-
-### Fixes
-
-- Umd build for browser since it was breaking in v0.17.0 [#7349](https://github.com/excalidraw/excalidraw/pull/7349). Also make sure that when using `Vite`, the `process.env.IS_PREACT` is set as `"true"` (string) and not a boolean.
-
-```
-define: {
-  "process.env.IS_PREACT": JSON.stringify("true"),
-}
-```
-
 ### Breaking Changes
 
 - `appState.openDialog` type was changed from `null | string` to `null | { name: string }`. [#7336](https://github.com/excalidraw/excalidraw/pull/7336)

src/packages/excalidraw/index.tsx

@@ -44,6 +44,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     children,
     validateEmbeddable,
     renderEmbeddable,
+    aiEnabled,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -122,6 +123,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onScrollChange={onScrollChange}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}
+          aiEnabled={aiEnabled !== false}
         >
           {children}
         </App>

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.17.6",
+  "version": "0.17.0",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

src/packages/excalidraw/webpack.preact.config.js

@@ -1,3 +1,5 @@
+const { merge } = require("webpack-merge");
+
 const prodConfig = require("./webpack.prod.config");
 const devConfig = require("./webpack.dev.config");
 
@@ -9,7 +11,6 @@ const outputFile = isProd
   : "excalidraw-with-preact.development";
 
 const preactWebpackConfig = {
-  ...config,
   entry: {
     [outputFile]: "./entry.js",
   },
@@ -29,4 +30,4 @@ const preactWebpackConfig = {
     },
   },
 };
-module.exports = preactWebpackConfig;
+module.exports = merge(config, preactWebpackConfig);

src/packages/utils.ts

@@ -6,7 +6,7 @@ import { getDefaultAppState } from "../appState";
 import { AppState, BinaryFiles } from "../types";
 import {
   ExcalidrawElement,
-  ExcalidrawFrameElement,
+  ExcalidrawFrameLikeElement,
   NonDeleted,
 } from "../element/types";
 import { restore } from "../data/restore";
@@ -26,7 +26,7 @@ type ExportOpts = {
   appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
   files: BinaryFiles | null;
   maxWidthOrHeight?: number;
-  exportingFrame?: ExcalidrawFrameElement | null;
+  exportingFrame?: ExcalidrawFrameLikeElement | null;
   getDimensions?: (
     width: number,
     height: number,

src/renderer/renderElement.ts

@@ -13,6 +13,8 @@ import {
   isInitializedImageElement,
   isArrowElement,
   hasBoundTextElement,
+  isIframeLikeElement,
+  isMagicFrameElement,
 } from "../element/typeChecks";
 import { getElementAbsoluteCoords } from "../element/bounds";
 import type { RoughCanvas } from "roughjs/bin/canvas";
@@ -272,6 +274,7 @@ const drawElementOnCanvas = (
     ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
   switch (element.type) {
     case "rectangle":
+    case "iframe":
     case "embeddable":
     case "diamond":
     case "ellipse": {
@@ -518,7 +521,8 @@ const drawElementFromCanvas = (
 
     if (
       "scale" in elementWithCanvas.element &&
-      !isPendingImageElement(element, renderConfig)
+      !isPendingImageElement(element, renderConfig) &&
+      !isIframeLikeElement(element)
     ) {
       context.scale(
         elementWithCanvas.element.scale[0],
@@ -594,6 +598,7 @@ export const renderElement = (
   appState: StaticCanvasAppState,
 ) => {
   switch (element.type) {
+    case "magicframe":
     case "frame": {
       if (appState.frameRendering.enabled && appState.frameRendering.outline) {
         context.save();
@@ -606,6 +611,12 @@ export const renderElement = (
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
         context.strokeStyle = FRAME_STYLE.strokeColor;
 
+        // TODO change later to only affect AI frames
+        if (isMagicFrameElement(element)) {
+          context.strokeStyle =
+            appState.theme === "light" ? "#7affd7" : "#1d8264";
+        }
+
         if (FRAME_STYLE.radius && context.roundRect) {
           context.beginPath();
           context.roundRect(
@@ -666,6 +677,7 @@ export const renderElement = (
     case "arrow":
     case "image":
     case "text":
+    case "iframe":
     case "embeddable": {
       // TODO investigate if we can do this in situ. Right now we need to call
       // beforehand because math helpers (such as getElementAbsoluteCoords)
@@ -951,6 +963,7 @@ export const renderElementToSvg = (
       addToRoot(g || node, element);
       break;
     }
+    case "iframe":
     case "embeddable": {
       // render placeholder rectangle
       const shape = ShapeCache.generateElementShape(element, true);
@@ -985,6 +998,8 @@ export const renderElementToSvg = (
         renderConfig,
       );
 
+      const scaleX = element.scale?.[0] || 1;
+      const scaleY = element.scale?.[1] || 1;
       // render embeddable element + iframe
       const embeddableNode = roughSVGDrawWithPrecision(
         rsvg,
@@ -996,7 +1011,7 @@ export const renderElementToSvg = (
         "transform",
         `translate(${offsetX || 0} ${
           offsetY || 0
-        }) rotate(${degree} ${cx} ${cy})`,
+        }) rotate(${degree} ${cx} ${cy}) scale(${scaleX}, ${scaleY})`,
       );
       while (embeddableNode.firstChild) {
         embeddableNode.removeChild(embeddableNode.firstChild);
@@ -1027,8 +1042,8 @@ export const renderElementToSvg = (
           SVG_NS,
           "foreignObject",
         );
-        foreignObject.style.width = `${element.width}px`;
-        foreignObject.style.height = `${element.height}px`;
+        foreignObject.style.width = `${element.width / scaleX}px`;
+        foreignObject.style.height = `${element.height / scaleY}px`;
         foreignObject.style.border = "none";
         const div = foreignObject.ownerDocument!.createElementNS(SVG_NS, "div");
         div.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
@@ -1252,7 +1267,8 @@ export const renderElementToSvg = (
       break;
     }
     // frames are not rendered and only acts as a container
-    case "frame": {
+    case "frame":
+    case "magicframe": {
       if (
         renderConfig.frameRendering.enabled &&
         renderConfig.frameRendering.outline

src/renderer/renderScene.ts

@@ -16,7 +16,7 @@ import {
   NonDeleted,
   GroupId,
   ExcalidrawBindableElement,
-  ExcalidrawFrameElement,
+  ExcalidrawFrameLikeElement,
 } from "../element/types";
 import {
   getElementAbsoluteCoords,
@@ -70,11 +70,12 @@ import {
 import { renderSnaps } from "./renderSnaps";
 import {
   isEmbeddableElement,
-  isFrameElement,
+  isFrameLikeElement,
+  isIframeLikeElement,
   isLinearElement,
 } from "../element/typeChecks";
 import {
-  isEmbeddableOrLabel,
+  isIframeLikeOrItsLabel,
   createPlaceholderEmbeddableLabel,
 } from "../element/embeddable";
 import {
@@ -362,7 +363,7 @@ const renderLinearElementPointHighlight = (
 };
 
 const frameClip = (
-  frame: ExcalidrawFrameElement,
+  frame: ExcalidrawFrameLikeElement,
   context: CanvasRenderingContext2D,
   renderConfig: StaticCanvasRenderConfig,
   appState: StaticCanvasAppState,
@@ -515,7 +516,7 @@ const _renderInteractiveScene = ({
   }
 
   const isFrameSelected = selectedElements.some((element) =>
-    isFrameElement(element),
+    isFrameLikeElement(element),
   );
 
   // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to
@@ -963,7 +964,7 @@ const _renderStaticScene = ({
 
   // Paint visible elements
   visibleElements
-    .filter((el) => !isEmbeddableOrLabel(el))
+    .filter((el) => !isIframeLikeOrItsLabel(el))
     .forEach((element) => {
       try {
         const frameId = element.frameId || appState.frameToHighlight?.id;
@@ -996,15 +997,16 @@ const _renderStaticScene = ({
 
   // render embeddables on top
   visibleElements
-    .filter((el) => isEmbeddableOrLabel(el))
+    .filter((el) => isIframeLikeOrItsLabel(el))
     .forEach((element) => {
       try {
         const render = () => {
           renderElement(element, rc, context, renderConfig, appState);
 
           if (
-            isEmbeddableElement(element) &&
-            (isExporting || !element.validated) &&
+            isIframeLikeElement(element) &&
+            (isExporting ||
+              (isEmbeddableElement(element) && !element.validated)) &&
             element.width &&
             element.height
           ) {
@@ -1242,8 +1244,10 @@ const renderBindingHighlightForBindableElement = (
     case "rectangle":
     case "text":
     case "image":
+    case "iframe":
     case "embeddable":
     case "frame":
+    case "magicframe":
       strokeRectWithRotation(
         context,
         x1 - padding,
@@ -1284,7 +1288,7 @@ const renderBindingHighlightForBindableElement = (
 const renderFrameHighlight = (
   context: CanvasRenderingContext2D,
   appState: InteractiveCanvasAppState,
-  frame: NonDeleted<ExcalidrawFrameElement>,
+  frame: NonDeleted<ExcalidrawFrameLikeElement>,
 ) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame);
   const width = x2 - x1;
@@ -1469,7 +1473,7 @@ export const renderSceneToSvg = (
   };
   // render elements
   elements
-    .filter((el) => !isEmbeddableOrLabel(el))
+    .filter((el) => !isIframeLikeOrItsLabel(el))
     .forEach((element) => {
       if (!element.isDeleted) {
         try {
@@ -1490,7 +1494,7 @@ export const renderSceneToSvg = (
 
   // render embeddables on top
   elements
-    .filter((el) => isEmbeddableElement(el))
+    .filter((el) => isIframeLikeElement(el))
     .forEach((element) => {
       if (!element.isDeleted) {
         try {

src/scene/Scene.ts

@@ -2,15 +2,11 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
-  ExcalidrawFrameElement,
+  ExcalidrawFrameLikeElement,
 } from "../element/types";
-import {
-  getNonDeletedElements,
-  getNonDeletedFrames,
-  isNonDeletedElement,
-} from "../element";
+import { getNonDeletedElements, isNonDeletedElement } from "../element";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { isFrameElement } from "../element/typeChecks";
+import { isFrameLikeElement } from "../element/typeChecks";
 import { getSelectedElements } from "./selection";
 import { AppState } from "../types";
 import { Assert, SameType } from "../utility-types";
@@ -107,8 +103,9 @@ class Scene {
 
   private nonDeletedElements: readonly NonDeletedExcalidrawElement[] = [];
   private elements: readonly ExcalidrawElement[] = [];
-  private nonDeletedFrames: readonly NonDeleted<ExcalidrawFrameElement>[] = [];
-  private frames: readonly ExcalidrawFrameElement[] = [];
+  private nonDeletedFramesLikes: readonly NonDeleted<ExcalidrawFrameLikeElement>[] =
+    [];
+  private frames: readonly ExcalidrawFrameLikeElement[] = [];
   private elementsMap = new Map<ExcalidrawElement["id"], ExcalidrawElement>();
   private selectedElementsCache: {
     selectedElementIds: AppState["selectedElementIds"] | null;
@@ -179,8 +176,8 @@ class Scene {
     return selectedElements;
   }
 
-  getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[] {
-    return this.nonDeletedFrames;
+  getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[] {
+    return this.nonDeletedFramesLikes;
   }
 
   getElement<T extends ExcalidrawElement>(id: T["id"]): T | null {
@@ -235,18 +232,18 @@ class Scene {
     mapElementIds = true,
   ) {
     this.elements = nextElements;
-    const nextFrames: ExcalidrawFrameElement[] = [];
+    const nextFrameLikes: ExcalidrawFrameLikeElement[] = [];
     this.elementsMap.clear();
     nextElements.forEach((element) => {
-      if (isFrameElement(element)) {
-        nextFrames.push(element);
+      if (isFrameLikeElement(element)) {
+        nextFrameLikes.push(element);
       }
       this.elementsMap.set(element.id, element);
       Scene.mapElementToScene(element, this);
     });
     this.nonDeletedElements = getNonDeletedElements(this.elements);
-    this.frames = nextFrames;
-    this.nonDeletedFrames = getNonDeletedFrames(this.frames);
+    this.frames = nextFrameLikes;
+    this.nonDeletedFramesLikes = getNonDeletedElements(this.frames);
 
     this.informMutation();
   }
@@ -277,7 +274,7 @@ class Scene {
   destroy() {
     this.nonDeletedElements = [];
     this.elements = [];
-    this.nonDeletedFrames = [];
+    this.nonDeletedFramesLikes = [];
     this.frames = [];
     this.elementsMap.clear();
     this.selectedElementsCache.selectedElementIds = null;

src/scene/Shape.ts

@@ -14,7 +14,12 @@ import { generateFreeDrawShape } from "../renderer/renderElement";
 import { isTransparent, assertNever } from "../utils";
 import { simplify } from "points-on-curve";
 import { ROUGHNESS } from "../constants";
-import { isLinearElement } from "../element/typeChecks";
+import {
+  isEmbeddableElement,
+  isIframeElement,
+  isIframeLikeElement,
+  isLinearElement,
+} from "../element/typeChecks";
 import { canChangeRoundness } from "./comparisons";
 
 const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
@@ -78,6 +83,7 @@ export const generateRoughOptions = (
 
   switch (element.type) {
     case "rectangle":
+    case "iframe":
     case "embeddable":
     case "diamond":
     case "ellipse": {
@@ -109,13 +115,13 @@ export const generateRoughOptions = (
   }
 };
 
-const modifyEmbeddableForRoughOptions = (
+const modifyIframeLikeForRoughOptions = (
   element: NonDeletedExcalidrawElement,
   isExporting: boolean,
 ) => {
   if (
-    element.type === "embeddable" &&
-    (isExporting || !element.validated) &&
+    isIframeLikeElement(element) &&
+    (isExporting || (isEmbeddableElement(element) && !element.validated)) &&
     isTransparent(element.backgroundColor) &&
     isTransparent(element.strokeColor)
   ) {
@@ -125,6 +131,16 @@ const modifyEmbeddableForRoughOptions = (
       backgroundColor: "#d3d3d3",
       fillStyle: "solid",
     } as const;
+  } else if (isIframeElement(element)) {
+    return {
+      ...element,
+      strokeColor: isTransparent(element.strokeColor)
+        ? "#000000"
+        : element.strokeColor,
+      backgroundColor: isTransparent(element.backgroundColor)
+        ? "#f4f4f6"
+        : element.backgroundColor,
+    };
   }
   return element;
 };
@@ -143,6 +159,7 @@ export const _generateElementShape = (
 ): Drawable | Drawable[] | null => {
   switch (element.type) {
     case "rectangle":
+    case "iframe":
     case "embeddable": {
       let shape: ElementShapes[typeof element.type];
       // this is for rendering the stroke/bg of the embeddable, especially
@@ -159,7 +176,7 @@ export const _generateElementShape = (
             h - r
           } L 0 ${r} Q 0 0, ${r} 0`,
           generateRoughOptions(
-            modifyEmbeddableForRoughOptions(element, isExporting),
+            modifyIframeLikeForRoughOptions(element, isExporting),
             true,
           ),
         );
@@ -170,7 +187,7 @@ export const _generateElementShape = (
           element.width,
           element.height,
           generateRoughOptions(
-            modifyEmbeddableForRoughOptions(element, isExporting),
+            modifyIframeLikeForRoughOptions(element, isExporting),
             false,
           ),
         );
@@ -373,6 +390,7 @@ export const _generateElementShape = (
       return shape;
     }
     case "frame":
+    case "magicframe":
     case "text":
     case "image": {
       const shape: ElementShapes[typeof element.type] = null;

src/scene/comparisons.ts

@@ -1,22 +1,25 @@
-import { isEmbeddableElement } from "../element/typeChecks";
+import { isIframeElement } from "../element/typeChecks";
 import {
-  ExcalidrawEmbeddableElement,
+  ExcalidrawIframeElement,
   NonDeletedExcalidrawElement,
 } from "../element/types";
+import { ElementOrToolType } from "../types";
 
-export const hasBackground = (type: string) =>
+export const hasBackground = (type: ElementOrToolType) =>
   type === "rectangle" ||
+  type === "iframe" ||
   type === "embeddable" ||
   type === "ellipse" ||
   type === "diamond" ||
   type === "line" ||
   type === "freedraw";
 
-export const hasStrokeColor = (type: string) =>
-  type !== "image" && type !== "frame";
+export const hasStrokeColor = (type: ElementOrToolType) =>
+  type !== "image" && type !== "frame" && type !== "magicframe";
 
-export const hasStrokeWidth = (type: string) =>
+export const hasStrokeWidth = (type: ElementOrToolType) =>
   type === "rectangle" ||
+  type === "iframe" ||
   type === "embeddable" ||
   type === "ellipse" ||
   type === "diamond" ||
@@ -24,22 +27,24 @@ export const hasStrokeWidth = (type: string) =>
   type === "arrow" ||
   type === "line";
 
-export const hasStrokeStyle = (type: string) =>
+export const hasStrokeStyle = (type: ElementOrToolType) =>
   type === "rectangle" ||
+  type === "iframe" ||
   type === "embeddable" ||
   type === "ellipse" ||
   type === "diamond" ||
   type === "arrow" ||
   type === "line";
 
-export const canChangeRoundness = (type: string) =>
+export const canChangeRoundness = (type: ElementOrToolType) =>
   type === "rectangle" ||
+  type === "iframe" ||
   type === "embeddable" ||
   type === "arrow" ||
   type === "line" ||
   type === "diamond";
 
-export const canHaveArrowheads = (type: string) => type === "arrow";
+export const canHaveArrowheads = (type: ElementOrToolType) => type === "arrow";
 
 export const getElementAtPosition = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -67,7 +72,7 @@ export const getElementsAtPosition = (
   elements: readonly NonDeletedExcalidrawElement[],
   isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean,
 ) => {
-  const embeddables: ExcalidrawEmbeddableElement[] = [];
+  const iframeLikes: ExcalidrawIframeElement[] = [];
   // The parameter elements comes ordered from lower z-index to higher.
   // We want to preserve that order on the returned array.
   // Exception being embeddables which should be on top of everything else in
@@ -75,13 +80,13 @@ export const getElementsAtPosition = (
   const elsAtPos = elements.filter((element) => {
     const hit = !element.isDeleted && isAtPositionFn(element);
     if (hit) {
-      if (isEmbeddableElement(element)) {
-        embeddables.push(element);
+      if (isIframeElement(element)) {
+        iframeLikes.push(element);
         return false;
       }
       return true;
     }
     return false;
   });
-  return elsAtPos.concat(embeddables);
+  return elsAtPos.concat(iframeLikes);
 };

src/scene/export.ts

@@ -1,7 +1,7 @@
 import rough from "roughjs/bin/rough";
 import {
   ExcalidrawElement,
-  ExcalidrawFrameElement,
+  ExcalidrawFrameLikeElement,
   ExcalidrawTextElement,
   NonDeletedExcalidrawElement,
 } from "../element/types";
@@ -27,11 +27,16 @@ import {
   updateImageCache,
 } from "../element/image";
 import { elementsOverlappingBBox } from "../packages/withinBounds";
-import { getFrameElements, getRootElements } from "../frame";
-import { isFrameElement, newTextElement } from "../element";
+import {
+  getFrameLikeElements,
+  getFrameLikeTitle,
+  getRootElements,
+} from "../frame";
+import { newTextElement } from "../element";
 import { Mutable } from "../utility-types";
 import { newElementWith } from "../element/mutateElement";
 import Scene from "./Scene";
+import { isFrameElement, isFrameLikeElement } from "../element/typeChecks";
 
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -100,10 +105,15 @@ const addFrameLabelsAsTextElements = (
   opts: Pick<AppState, "exportWithDarkMode">,
 ) => {
   const nextElements: NonDeletedExcalidrawElement[] = [];
-  let frameIdx = 0;
+  let frameIndex = 0;
+  let magicFrameIndex = 0;
   for (const element of elements) {
-    if (isFrameElement(element)) {
-      frameIdx++;
+    if (isFrameLikeElement(element)) {
+      if (isFrameElement(element)) {
+        frameIndex++;
+      } else {
+        magicFrameIndex++;
+      }
       let textElement: Mutable<ExcalidrawTextElement> = newTextElement({
         x: element.x,
         y: element.y - FRAME_STYLE.nameOffsetY,
@@ -114,7 +124,10 @@ const addFrameLabelsAsTextElements = (
         strokeColor: opts.exportWithDarkMode
           ? FRAME_STYLE.nameColorDarkTheme
           : FRAME_STYLE.nameColorLightTheme,
-        text: element.name || `Frame ${frameIdx}`,
+        text: getFrameLikeTitle(
+          element,
+          isFrameElement(element) ? frameIndex : magicFrameIndex,
+        ),
       });
       textElement.y -= textElement.height;
 
@@ -129,7 +142,7 @@ const addFrameLabelsAsTextElements = (
 };
 
 const getFrameRenderingConfig = (
-  exportingFrame: ExcalidrawFrameElement | null,
+  exportingFrame: ExcalidrawFrameLikeElement | null,
   frameRendering: AppState["frameRendering"] | null,
 ): AppState["frameRendering"] => {
   frameRendering = frameRendering || getDefaultAppState().frameRendering;
@@ -148,7 +161,7 @@ const prepareElementsForRender = ({
   exportWithDarkMode,
 }: {
   elements: readonly ExcalidrawElement[];
-  exportingFrame: ExcalidrawFrameElement | null | undefined;
+  exportingFrame: ExcalidrawFrameLikeElement | null | undefined;
   frameRendering: AppState["frameRendering"];
   exportWithDarkMode: AppState["exportWithDarkMode"];
 }) => {
@@ -184,7 +197,7 @@ export const exportToCanvas = async (
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
-    exportingFrame?: ExcalidrawFrameElement | null;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
   },
   createCanvas: (
     width: number,
@@ -274,7 +287,7 @@ export const exportToSvg = async (
   files: BinaryFiles | null,
   opts?: {
     renderEmbeddables?: boolean;
-    exportingFrame?: ExcalidrawFrameElement | null;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
   },
 ): Promise<SVGSVGElement> => {
   const tempScene = __createSceneForElementsHack__(elements);
@@ -360,7 +373,7 @@ export const exportToSvg = async (
   const offsetX = -minX + exportPadding;
   const offsetY = -minY + exportPadding;
 
-  const frameElements = getFrameElements(elements);
+  const frameElements = getFrameLikeElements(elements);
 
   let exportingFrameClipPath = "";
   for (const frame of frameElements) {

src/scene/selection.ts

@@ -4,7 +4,7 @@ import {
 } from "../element/types";
 import { getElementAbsoluteCoords, getElementBounds } from "../element";
 import { AppState, InteractiveCanvasAppState } from "../types";
-import { isBoundToContainer } from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import {
   elementOverlapsWithFrame,
   getContainingFrame,
@@ -27,7 +27,7 @@ export const excludeElementsInFramesFromSelection = <
   const framesInSelection = new Set<T["id"]>();
 
   selectedElements.forEach((element) => {
-    if (element.type === "frame") {
+    if (isFrameLikeElement(element)) {
       framesInSelection.add(element.id);
     }
   });
@@ -190,7 +190,7 @@ export const getSelectedElements = (
   if (opts?.includeElementsInFrames) {
     const elementsToInclude: ExcalidrawElement[] = [];
     selectedElements.forEach((element) => {
-      if (element.type === "frame") {
+      if (isFrameLikeElement(element)) {
         getFrameChildren(elements, element.id).forEach((e) =>
           elementsToInclude.push(e),
         );

src/scene/types.ts

@@ -98,6 +98,7 @@ export type ElementShapes = {
   rectangle: Drawable;
   ellipse: Drawable;
   diamond: Drawable;
+  iframe: Drawable;
   embeddable: Drawable;
   freedraw: Drawable | null;
   arrow: Drawable[];
@@ -105,4 +106,5 @@ export type ElementShapes = {
   text: null;
   image: null;
   frame: null;
+  magicframe: null;
 };

src/shapes.tsx

@@ -83,14 +83,6 @@ export const SHAPES = [
     numericKey: KEYS["0"],
     fillable: false,
   },
-  // TODO: frame, create icon and set up numeric key
-  // {
-  //   icon: RectangleIcon,
-  //   value: "frame",
-  //   key: KEYS.F,
-  //   numericKey: KEYS.SUBTRACT,
-  //   fillable: false,
-  // },
 ] as const;
 
 export const findShapeByKey = (key: string) => {

src/snapping.ts

@@ -1,3 +1,4 @@
+import { TOOL_TYPE } from "./constants";
 import {
   Bounds,
   getCommonBounds,
@@ -5,7 +6,7 @@ import {
   getElementAbsoluteCoords,
 } from "./element/bounds";
 import { MaybeTransformHandleType } from "./element/transformHandles";
-import { isBoundToContainer, isFrameElement } from "./element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "./element/typeChecks";
 import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
@@ -262,7 +263,7 @@ const getReferenceElements = (
   appState: AppState,
 ) => {
   const selectedFrames = selectedElements
-    .filter((element) => isFrameElement(element))
+    .filter((element) => isFrameLikeElement(element))
     .map((frame) => frame.id);
 
   return getVisibleAndNonSelectedElements(
@@ -1352,10 +1353,11 @@ export const isActiveToolNonLinearSnappable = (
   activeToolType: AppState["activeTool"]["type"],
 ) => {
   return (
-    activeToolType === "rectangle" ||
-    activeToolType === "ellipse" ||
-    activeToolType === "diamond" ||
-    activeToolType === "frame" ||
-    activeToolType === "image"
+    activeToolType === TOOL_TYPE.rectangle ||
+    activeToolType === TOOL_TYPE.ellipse ||
+    activeToolType === TOOL_TYPE.diamond ||
+    activeToolType === TOOL_TYPE.frame ||
+    activeToolType === TOOL_TYPE.magicframe ||
+    activeToolType === TOOL_TYPE.image
   );
 };

src/tests/MermaidToExcalidraw.test.tsx

@@ -102,7 +102,7 @@ describe("Test <MermaidToExcalidraw/>", () => {
       <Excalidraw
         initialData={{
           appState: {
-            openDialog: "mermaid",
+            openDialog: { name: "mermaid" },
           },
         }}
       />,

src/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -385,7 +385,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "angle": 0,
   "backgroundColor": "red",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [
@@ -420,7 +419,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "angle": 0,
   "backgroundColor": "red",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [
@@ -582,7 +580,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -642,7 +639,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -784,7 +780,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -817,7 +812,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -877,7 +871,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -921,7 +914,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -951,7 +943,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -995,7 +986,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1025,7 +1015,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1167,7 +1156,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1200,7 +1188,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1260,7 +1247,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1304,7 +1290,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1334,7 +1319,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1378,7 +1362,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1408,7 +1391,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1552,7 +1534,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1612,7 +1593,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1752,7 +1732,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -1812,7 +1791,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1854,7 +1832,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -1996,7 +1973,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -2029,7 +2005,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -2089,7 +2064,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2133,7 +2107,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2163,7 +2136,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2310,7 +2282,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [
@@ -2345,7 +2316,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [
@@ -2407,7 +2377,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2451,7 +2420,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2481,7 +2449,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2528,7 +2495,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [
@@ -2560,7 +2526,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [
@@ -2706,7 +2671,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "angle": 0,
   "backgroundColor": "#a5d8ff",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [],
@@ -2739,7 +2703,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "angle": 0,
   "backgroundColor": "#a5d8ff",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [],
@@ -2799,7 +2762,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2843,7 +2805,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2873,7 +2834,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2917,7 +2877,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2947,7 +2906,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -2991,7 +2949,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3021,7 +2978,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3065,7 +3021,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3095,7 +3050,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
@@ -3139,7 +3093,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3169,7 +3122,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
@@ -3213,7 +3165,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3243,7 +3194,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
@@ -3287,7 +3237,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3317,7 +3266,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
@@ -3361,7 +3309,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
@@ -3391,7 +3338,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "angle": 0,
           "backgroundColor": "#a5d8ff",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
@@ -3533,7 +3479,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -3566,7 +3511,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -3626,7 +3570,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3670,7 +3613,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3700,7 +3642,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3744,7 +3685,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3774,7 +3714,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -3916,7 +3855,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -3949,7 +3887,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -4009,7 +3946,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4053,7 +3989,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4083,7 +4018,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4127,7 +4061,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4157,7 +4090,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4302,7 +4234,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -4335,7 +4266,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -4395,7 +4325,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4439,7 +4368,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4469,7 +4397,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4516,7 +4443,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [
@@ -4548,7 +4474,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [
@@ -4595,7 +4520,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -4625,7 +4549,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -5043,7 +4966,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -5076,7 +4998,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -5136,7 +5057,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -5180,7 +5100,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -5210,7 +5129,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -5630,7 +5548,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [
@@ -5665,7 +5582,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [
@@ -5727,7 +5643,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -5771,7 +5686,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -5801,7 +5715,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],
@@ -5848,7 +5761,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [
@@ -5880,7 +5792,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [
@@ -6927,7 +6838,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] el
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -6960,7 +6870,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] el
   "angle": 0,
   "backgroundColor": "red",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -6993,7 +6902,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] el
   "angle": 0,
   "backgroundColor": "red",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -7053,7 +6961,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] hi
           "angle": 0,
           "backgroundColor": "transparent",
           "boundElements": null,
-          "customData": undefined,
           "fillStyle": "solid",
           "frameId": null,
           "groupIds": [],

src/tests/__snapshots__/dragCreate.test.tsx.snap

@@ -7,7 +7,6 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -57,7 +56,6 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -92,7 +90,6 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -125,7 +122,6 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
@@ -175,7 +171,6 @@ exports[`Test dragCreate > add element to the scene when pointer dragging long e
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],

src/tests/__snapshots__/move.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`duplicate element on move when ALT is clicked > rectangle 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -38,7 +37,6 @@ exports[`duplicate element on move when ALT is clicked > rectangle 2`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -71,7 +69,6 @@ exports[`move element > rectangle 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -109,7 +106,6 @@ exports[`move element > rectangles with binding arrow 1`] = `
       "type": "arrow",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -147,7 +143,6 @@ exports[`move element > rectangles with binding arrow 2`] = `
       "type": "arrow",
     },
   ],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -180,7 +175,6 @@ exports[`move element > rectangles with binding arrow 3`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": {
     "elementId": "id1",

src/tests/__snapshots__/multiPointCreate.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`multi point mode in linear elements > arrow 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -60,7 +59,6 @@ exports[`multi point mode in linear elements > line 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",

src/tests/__snapshots__/selection.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`select single element on the scene > arrow 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
@@ -53,7 +52,6 @@ exports[`select single element on the scene > arrow escape 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
@@ -101,7 +99,6 @@ exports[`select single element on the scene > diamond 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -134,7 +131,6 @@ exports[`select single element on the scene > ellipse 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -167,7 +163,6 @@ exports[`select single element on the scene > rectangle 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],

src/tests/data/__snapshots__/restore.test.ts.snap

@@ -5,7 +5,6 @@ exports[`restoreElements > should restore arrow element correctly 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": [],
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
@@ -53,7 +52,6 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
   "angle": 0,
   "backgroundColor": "blue",
   "boundElements": [],
-  "customData": undefined,
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [
@@ -90,7 +88,6 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
   "angle": 0,
   "backgroundColor": "blue",
   "boundElements": [],
-  "customData": undefined,
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [
@@ -127,7 +124,6 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
   "angle": 0,
   "backgroundColor": "blue",
   "boundElements": [],
-  "customData": undefined,
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [
@@ -164,7 +160,6 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": [],
-  "customData": undefined,
   "fillStyle": "solid",
   "frameId": null,
   "groupIds": [],
@@ -201,7 +196,6 @@ exports[`restoreElements > should restore line and draw elements correctly 1`] =
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": [],
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
@@ -249,7 +243,6 @@ exports[`restoreElements > should restore line and draw elements correctly 2`] =
   "angle": 0,
   "backgroundColor": "transparent",
   "boundElements": [],
-  "customData": undefined,
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
@@ -299,7 +292,6 @@ exports[`restoreElements > should restore text element correctly passing value f
   "baseline": 0,
   "boundElements": [],
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 14,
@@ -341,7 +333,6 @@ exports[`restoreElements > should restore text element correctly with unknown fo
   "baseline": 0,
   "boundElements": [],
   "containerId": null,
-  "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 10,

src/tests/fixtures/elementFixture.ts

@@ -35,6 +35,7 @@ export const embeddableFixture: ExcalidrawElement = {
   ...elementBase,
   type: "embeddable",
   validated: null,
+  scale: [1, 1],
 };
 export const ellipseFixture: ExcalidrawElement = {
   ...elementBase,

src/tests/helpers/api.ts

@@ -7,6 +7,8 @@ import {
   ExcalidrawImageElement,
   FileId,
   ExcalidrawFrameElement,
+  ExcalidrawElementType,
+  ExcalidrawMagicFrameElement,
 } from "../../element/types";
 import { newElement, newTextElement, newLinearElement } from "../../element";
 import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS } from "../../constants";
@@ -20,7 +22,9 @@ import {
   newEmbeddableElement,
   newFrameElement,
   newFreeDrawElement,
+  newIframeElement,
   newImageElement,
+  newMagicFrameElement,
 } from "../../element/newElement";
 import { Point } from "../../types";
 import { getSelectedElements } from "../../scene/selection";
@@ -74,7 +78,7 @@ export class API {
   };
 
   static createElement = <
-    T extends Exclude<ExcalidrawElement["type"], "selection"> = "rectangle",
+    T extends Exclude<ExcalidrawElementType, "selection"> = "rectangle",
   >({
     // @ts-ignore
     type = "rectangle",
@@ -139,6 +143,8 @@ export class API {
     ? ExcalidrawImageElement
     : T extends "frame"
     ? ExcalidrawFrameElement
+    : T extends "magicframe"
+    ? ExcalidrawMagicFrameElement
     : ExcalidrawGenericElement => {
     let element: Mutable<ExcalidrawElement> = null!;
 
@@ -202,6 +208,12 @@ export class API {
           validated: null,
         });
         break;
+      case "iframe":
+        element = newIframeElement({
+          type: "iframe",
+          ...base,
+        });
+        break;
       case "text":
         const fontSize = rest.fontSize ?? appState.currentItemFontSize;
         const fontFamily = rest.fontFamily ?? appState.currentItemFontFamily;
@@ -253,6 +265,9 @@ export class API {
       case "frame":
         element = newFrameElement({ ...base, width, height });
         break;
+      case "magicframe":
+        element = newMagicFrameElement({ ...base, width, height });
+        break;
       default:
         assertNever(
           type,

src/tests/helpers/ui.ts

@@ -1,4 +1,4 @@
-import type { Point } from "../../types";
+import type { Point, ToolType } from "../../types";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -20,15 +20,14 @@ import {
   type TransformHandleDirection,
 } from "../../element/transformHandles";
 import { KEYS } from "../../keys";
-import { type ToolName } from "../queries/toolQueries";
 import { fireEvent, GlobalTestState, screen } from "../test-utils";
 import { mutateElement } from "../../element/mutateElement";
 import { API } from "./api";
 import {
-  isFrameElement,
   isLinearElement,
   isFreeDrawElement,
   isTextElement,
+  isFrameLikeElement,
 } from "../../element/typeChecks";
 import { getCommonBounds, getElementPointsCoords } from "../../element/bounds";
 import { rotatePoint } from "../../math";
@@ -290,7 +289,7 @@ const transform = (
     ];
   } else {
     const [x1, y1, x2, y2] = getCommonBounds(elements);
-    const isFrameSelected = elements.some(isFrameElement);
+    const isFrameSelected = elements.some(isFrameLikeElement);
     const transformHandles = getTransformHandlesFromCoords(
       [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2],
       0,
@@ -345,7 +344,7 @@ const proxy = <T extends ExcalidrawElement>(
 };
 
 /** Tools that can be used to draw shapes */
-type DrawingToolName = Exclude<ToolName, "lock" | "selection" | "eraser">;
+type DrawingToolName = Exclude<ToolType, "lock" | "selection" | "eraser">;
 
 type Element<T extends DrawingToolName> = T extends "line" | "freedraw"
   ? ExcalidrawLinearElement
@@ -362,7 +361,7 @@ type Element<T extends DrawingToolName> = T extends "line" | "freedraw"
   : ExcalidrawElement;
 
 export class UI {
-  static clickTool = (toolName: ToolName) => {
+  static clickTool = (toolName: ToolType | "lock") => {
     fireEvent.click(GlobalTestState.renderResult.getByToolName(toolName));
   };
 

src/tests/queries/toolQueries.ts

@@ -1,23 +1,9 @@
 import { queries, buildQueries } from "@testing-library/react";
+import { ToolType } from "../../types";
+import { TOOL_TYPE } from "../../constants";
 
-const toolMap = {
-  lock: "lock",
-  selection: "selection",
-  rectangle: "rectangle",
-  diamond: "diamond",
-  ellipse: "ellipse",
-  arrow: "arrow",
-  line: "line",
-  freedraw: "freedraw",
-  text: "text",
-  eraser: "eraser",
-  frame: "frame",
-};
-
-export type ToolName = keyof typeof toolMap;
-
-const _getAllByToolName = (container: HTMLElement, tool: string) => {
-  const toolTitle = toolMap[tool as ToolName];
+const _getAllByToolName = (container: HTMLElement, tool: ToolType | "lock") => {
+  const toolTitle = tool === "lock" ? "lock" : TOOL_TYPE[tool];
   return queries.getAllByTestId(container, `toolbar-${toolTitle}`);
 };
 
@@ -32,7 +18,7 @@ export const [
   getByToolName,
   findAllByToolName,
   findByToolName,
-] = buildQueries<string[]>(
+] = buildQueries<(ToolType | "lock")[]>(
   _getAllByToolName,
   getMultipleError,
   getMissingError,

src/types.ts

@@ -15,9 +15,12 @@ import {
   ExcalidrawImageElement,
   Theme,
   StrokeRoundness,
-  ExcalidrawFrameElement,
   ExcalidrawEmbeddableElement,
+  ExcalidrawMagicFrameElement,
+  ExcalidrawFrameLikeElement,
+  ExcalidrawElementType,
 } from "./element/types";
+import { Action } from "./actions/types";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
@@ -101,9 +104,12 @@ export type ToolType =
   | "eraser"
   | "hand"
   | "frame"
+  | "magicframe"
   | "embeddable"
   | "laser";
 
+export type ElementOrToolType = ExcalidrawElementType | ToolType | "custom";
+
 export type ActiveTool =
   | {
       type: ToolType;
@@ -158,9 +164,6 @@ export type InteractiveCanvasAppState = Readonly<
     suggestedBindings: AppState["suggestedBindings"];
     isRotating: AppState["isRotating"];
     elementsToHighlight: AppState["elementsToHighlight"];
-    // App
-    openSidebar: AppState["openSidebar"];
-    showHyperlinkPopup: AppState["showHyperlinkPopup"];
     // Collaborators
     collaborators: AppState["collaborators"];
     // SnapLines
@@ -169,7 +172,7 @@ export type InteractiveCanvasAppState = Readonly<
   }
 >;
 
-export type AppState = {
+export interface AppState {
   contextMenu: {
     items: ContextMenuItems;
     top: number;
@@ -189,7 +192,7 @@ export type AppState = {
   isBindingEnabled: boolean;
   startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
   suggestedBindings: SuggestedBinding[];
-  frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
+  frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
   frameRendering: {
     enabled: boolean;
     name: boolean;
@@ -241,7 +244,16 @@ export type AppState = {
   openMenu: "canvas" | "shape" | null;
   openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
   openSidebar: { name: SidebarName; tab?: SidebarTabName } | null;
-  openDialog: "imageExport" | "help" | "jsonExport" | "mermaid" | null;
+  openDialog:
+    | null
+    | { name: "imageExport" | "help" | "jsonExport" | "mermaid" }
+    | {
+        name: "magicSettings";
+        source:
+          | "tool" // when magicframe tool is selected
+          | "generation" // when magicframe generate button is clicked
+          | "settings"; // when AI settings dialog is explicitly invoked
+      };
   /**
    * Reflects user preference for whether the default sidebar should be docked.
    *
@@ -296,7 +308,7 @@ export type AppState = {
     y: number;
   } | null;
   objectsSnapModeEnabled: boolean;
-};
+}
 
 export type UIAppState = Omit<
   AppState,
@@ -436,6 +448,7 @@ export interface ExcalidrawProps {
     element: NonDeleted<ExcalidrawEmbeddableElement>,
     appState: AppState,
   ) => JSX.Element | null;
+  aiEnabled?: boolean;
 }
 
 export type SceneData = {
@@ -504,6 +517,7 @@ export type AppProps = Merge<
     handleKeyboardGlobally: boolean;
     isCollaborating: boolean;
     children?: React.ReactNode;
+    aiEnabled: boolean;
   }
 >;
 
@@ -537,6 +551,8 @@ export type AppClassProperties = {
   togglePenMode: App["togglePenMode"];
   setActiveTool: App["setActiveTool"];
   setOpenDialog: App["setOpenDialog"];
+  insertEmbeddableElement: App["insertEmbeddableElement"];
+  onMagicframeToolSelect: App["onMagicframeToolSelect"];
 };
 
 export type PointerDownState = Readonly<{
@@ -621,6 +637,7 @@ export type ExcalidrawImperativeAPI = {
   getSceneElements: InstanceType<typeof App>["getSceneElements"];
   getAppState: () => InstanceType<typeof App>["state"];
   getFiles: () => InstanceType<typeof App>["files"];
+  registerAction: (action: Action) => void;
   refresh: InstanceType<typeof App>["refresh"];
   setToast: InstanceType<typeof App>["setToast"];
   addFiles: (data: BinaryFileData[]) => void;
@@ -679,12 +696,14 @@ type FrameNameBounds = {
 };
 
 export type FrameNameBoundsCache = {
-  get: (frameElement: ExcalidrawFrameElement) => FrameNameBounds | null;
+  get: (
+    frameElement: ExcalidrawFrameLikeElement | ExcalidrawMagicFrameElement,
+  ) => FrameNameBounds | null;
   _cache: Map<
     string,
     FrameNameBounds & {
       zoom: AppState["zoom"]["value"];
-      versionNonce: ExcalidrawFrameElement["versionNonce"];
+      versionNonce: ExcalidrawFrameLikeElement["versionNonce"];
     }
   >;
 };
@@ -704,3 +723,5 @@ export type Primitive =
   | symbol
   | null
   | undefined;
+
+export type JSONValue = string | number | boolean | null | object;

src/utils.ts

@@ -6,11 +6,7 @@ import {
   isDarwin,
   WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
-import {
-  FontFamilyValues,
-  FontString,
-  NonDeletedExcalidrawElement,
-} from "./element/types";
+import { FontFamilyValues, FontString } from "./element/types";
 import { ActiveTool, AppState, ToolType, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { ResolutionType } from "./utility-types";
@@ -77,7 +73,9 @@ export const isWritableElement = (
   target instanceof HTMLBRElement || // newline in wysiwyg
   target instanceof HTMLTextAreaElement ||
   (target instanceof HTMLInputElement &&
-    (target.type === "text" || target.type === "number"));
+    (target.type === "text" ||
+      target.type === "number" ||
+      target.type === "password"));
 
 export const getFontFamilyString = ({
   fontFamily,
@@ -821,19 +819,6 @@ export const composeEventHandlers = <E>(
   };
 };
 
-export const isOnlyExportingSingleFrame = (
-  elements: readonly NonDeletedExcalidrawElement[],
-) => {
-  const frames = elements.filter((element) => element.type === "frame");
-
-  return (
-    frames.length === 1 &&
-    elements.every(
-      (element) => element.type === "frame" || element.frameId === frames[0].id,
-    )
-  );
-};
-
 /**
  * supply `null` as message if non-never value is valid, you just need to
  * typecheck against it

src/zindex.ts

@@ -1,6 +1,6 @@
 import { bumpVersion } from "./element/mutateElement";
-import { isFrameElement } from "./element/typeChecks";
-import { ExcalidrawElement, ExcalidrawFrameElement } from "./element/types";
+import { isFrameLikeElement } from "./element/typeChecks";
+import { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./element/types";
 import { getElementsInGroup } from "./groups";
 import { getSelectedElements } from "./scene";
 import Scene from "./scene/Scene";
@@ -107,7 +107,7 @@ const getTargetIndexAccountingForBinding = (
 
 const getContiguousFrameRangeElements = (
   allElements: readonly ExcalidrawElement[],
-  frameId: ExcalidrawFrameElement["id"],
+  frameId: ExcalidrawFrameLikeElement["id"],
 ) => {
   let rangeStart = -1;
   let rangeEnd = -1;
@@ -138,7 +138,7 @@ const getTargetIndex = (
    * Frame id if moving frame children.
    * If whole frame (including all children) is being moved, supply `null`.
    */
-  containingFrame: ExcalidrawFrameElement["id"] | null,
+  containingFrame: ExcalidrawFrameLikeElement["id"] | null,
 ) => {
   const sourceElement = elements[boundaryIndex];
 
@@ -189,7 +189,7 @@ const getTargetIndex = (
 
   if (
     !containingFrame &&
-    (nextElement.frameId || nextElement.type === "frame")
+    (nextElement.frameId || isFrameLikeElement(nextElement))
   ) {
     const frameElements = getContiguousFrameRangeElements(
       elements,
@@ -252,9 +252,9 @@ const shiftElementsByOne = (
     groupedIndices = groupedIndices.reverse();
   }
 
-  const selectedFrames = new Set<ExcalidrawFrameElement["id"]>(
+  const selectedFrames = new Set<ExcalidrawFrameLikeElement["id"]>(
     indicesToMove
-      .filter((idx) => elements[idx].type === "frame")
+      .filter((idx) => isFrameLikeElement(elements[idx]))
       .map((idx) => elements[idx].id),
   );
 
@@ -324,7 +324,7 @@ const shiftElementsToEnd = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   direction: "left" | "right",
-  containingFrame: ExcalidrawFrameElement["id"] | null,
+  containingFrame: ExcalidrawFrameLikeElement["id"] | null,
   elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
   const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
@@ -413,7 +413,7 @@ function shiftElementsAccountingForFrames(
     elements: readonly ExcalidrawElement[],
     appState: AppState,
     direction: "left" | "right",
-    containingFrame: ExcalidrawFrameElement["id"] | null,
+    containingFrame: ExcalidrawFrameLikeElement["id"] | null,
     elementsToBeMoved?: readonly ExcalidrawElement[],
   ) => ExcalidrawElement[] | readonly ExcalidrawElement[],
 ) {
@@ -426,13 +426,13 @@ function shiftElementsAccountingForFrames(
 
   const frameAwareContiguousElementsToMove: {
     regularElements: ExcalidrawElement[];
-    frameChildren: Map<ExcalidrawFrameElement["id"], ExcalidrawElement[]>;
+    frameChildren: Map<ExcalidrawFrameLikeElement["id"], ExcalidrawElement[]>;
   } = { regularElements: [], frameChildren: new Map() };
 
-  const fullySelectedFrames = new Set<ExcalidrawFrameElement["id"]>();
+  const fullySelectedFrames = new Set<ExcalidrawFrameLikeElement["id"]>();
 
   for (const element of allElements) {
-    if (elementsToMove.has(element.id) && isFrameElement(element)) {
+    if (elementsToMove.has(element.id) && isFrameLikeElement(element)) {
       fullySelectedFrames.add(element.id);
     }
   }
@@ -440,7 +440,7 @@ function shiftElementsAccountingForFrames(
   for (const element of allElements) {
     if (elementsToMove.has(element.id)) {
       if (
-        isFrameElement(element) ||
+        isFrameLikeElement(element) ||
         (element.frameId && fullySelectedFrames.has(element.frameId))
       ) {
         frameAwareContiguousElementsToMove.regularElements.push(element);