feat: move contextMenu into the component tree and control via appState (#6021)

2 years ago · 7e135c4e22
parent b704705ed8
commit 7e135c4e22
15 changed files with 1750 additions and 396 deletions
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@ -3,6 +3,7 @@ import { register } from "./register";
 import {
  copyTextToSystemClipboard,
  copyToClipboard,
+  probablySupportsClipboardBlob,
  probablySupportsClipboardWriteText,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
@ -23,11 +24,31 @@ export const actionCopy = register({
      commitToHistory: false,
    };
  },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
  contextItemLabel: "labels.copy",
  // don't supply a shortcut since we handle this conditionally via onCopy event
  keyTest: undefined,
 });

+export const actionPaste = register({
+  name: "paste",
+  trackEvent: { category: "element" },
+  perform: (elements: any, appStates: any, data, app) => {
+    app.pasteFromClipboard(null);
+    return {
+      commitToHistory: false,
+    };
+  },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
+  contextItemLabel: "labels.paste",
+  // don't supply a shortcut since we handle this conditionally via onCopy event
+  keyTest: undefined,
+});
+
 export const actionCut = register({
  name: "cut",
  trackEvent: { category: "element" },
@ -35,6 +56,9 @@ export const actionCut = register({
    actionCopy.perform(elements, appState, data, app);
    return actionDeleteSelected.perform(elements, appState);
  },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
  contextItemLabel: "labels.cut",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
@ -77,6 +101,9 @@ export const actionCopyAsSvg = register({
      };
    }
  },
+  contextItemPredicate: (elements) => {
+    return probablySupportsClipboardWriteText && elements.length > 0;
+  },
  contextItemLabel: "labels.copyAsSvg",
 });

@ -131,6 +158,9 @@ export const actionCopyAsPng = register({
      };
    }
  },
+  contextItemPredicate: (elements) => {
+    return probablySupportsClipboardBlob && elements.length > 0;
+  },
  contextItemLabel: "labels.copyAsPng",
  keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });
--- a/src/actions/actionToggleGridMode.tsx
+++ b/src/actions/actionToggleGridMode.tsx
@ -20,6 +20,9 @@ export const actionToggleGridMode = register({
    };
  },
  checked: (appState: AppState) => appState.gridSize !== null,
+  contextItemPredicate: (element, appState, props) => {
+    return typeof props.gridModeEnabled === "undefined";
+  },
  contextItemLabel: "labels.showGrid",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });
--- a/src/actions/actionToggleLock.ts
+++ b/src/actions/actionToggleLock.ts
@ -41,15 +41,9 @@ export const actionToggleLock = register({
        : "labels.elementLock.lock";
    }

-    if (selected.length > 1) {
-      return getOperation(selected) === "lock"
-        ? "labels.elementLock.lockAll"
-        : "labels.elementLock.unlockAll";
-    }
-
-    throw new Error(
-      "Unexpected zero elements to lock/unlock. This should never happen.",
-    );
+    return getOperation(selected) === "lock"
+      ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
  },
  keyTest: (event, appState, elements) => {
    return (
--- a/src/actions/actionToggleViewMode.tsx
+++ b/src/actions/actionToggleViewMode.tsx
@ -18,6 +18,9 @@ export const actionToggleViewMode = register({
    };
  },
  checked: (appState) => appState.viewModeEnabled,
+  contextItemPredicate: (elements, appState, appProps) => {
+    return typeof appProps.viewModeEnabled === "undefined";
+  },
  contextItemLabel: "labels.viewMode",
  keyTest: (event) =>
    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,
--- a/src/actions/actionToggleZenMode.tsx
+++ b/src/actions/actionToggleZenMode.tsx
@ -18,6 +18,9 @@ export const actionToggleZenMode = register({
    };
  },
  checked: (appState) => appState.zenModeEnabled,
+  contextItemPredicate: (elements, appState, appProps) => {
+    return typeof appProps.zenModeEnabled === "undefined";
+  },
  contextItemLabel: "buttons.zenMode",
  keyTest: (event) =>
    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@ -143,6 +143,8 @@ export interface Action {
  contextItemPredicate?: (
    elements: readonly ExcalidrawElement[],
    appState: AppState,
+    appProps: ExcalidrawProps,
+    app: AppClassProperties,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => boolean;
  trackEvent:
--- a/src/appState.ts
+++ b/src/appState.ts
@ -64,6 +64,7 @@ export const getDefaultAppState = (): Omit<
    lastPointerDownWith: "mouse",
    multiElement: null,
    name: `${t("labels.untitled")}-${getDateTime()}`,
+    contextMenu: null,
    openMenu: null,
    openPopup: null,
    openSidebar: null,
@ -157,6 +158,7 @@ const APP_STATE_STORAGE_CONF = (<
  name: { browser: true, export: false, server: false },
  offsetLeft: { browser: false, export: false, server: false },
  offsetTop: { browser: false, export: false, server: false },
+  contextMenu: { browser: false, export: false, server: false },
  openMenu: { browser: true, export: false, server: false },
  openPopup: { browser: false, export: false, server: false },
  openSidebar: { browser: true, export: false, server: false },
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -42,11 +42,7 @@ import { actions } from "../actions/register";
 import { ActionResult } from "../actions/types";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState, isEraserActive } from "../appState";
-import {
-  parseClipboard,
-  probablySupportsClipboardBlob,
-  probablySupportsClipboardWriteText,
-} from "../clipboard";
+import { parseClipboard } from "../clipboard";
 import {
  APP_NAME,
  CURSOR_TYPE,
@ -227,7 +223,11 @@ import {
  updateActiveTool,
  getShortcutKey,
 } from "../utils";
-import ContextMenu, { ContextMenuOption } from "./ContextMenu";
+import {
+  ContextMenu,
+  ContextMenuItems,
+  CONTEXT_MENU_SEPARATOR,
+} from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
@ -274,6 +274,7 @@ import {
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { atom } from "jotai";
 import { Fonts } from "../scene/Fonts";
+import { actionPaste } from "../actions/actionClipboard";

 export const isMenuOpenAtom = atom(false);
 export const isDropdownOpenAtom = atom(false);
@ -383,7 +384,6 @@ class App extends React.Component<AppProps, AppState> {
  hitLinkElement?: NonDeletedExcalidrawElement;
  lastPointerDown: React.PointerEvent<HTMLCanvasElement> | null = null;
  lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null = null;
-  contextMenuOpen: boolean = false;
  lastScenePointer: { x: number; y: number } | null = null;

  constructor(props: AppProps) {
@ -602,6 +602,7 @@ class App extends React.Component<AppProps, AppState> {
                  <div className="excalidraw-textEditorContainer" />
                  <div className="excalidraw-contextMenuContainer" />
                  {selectedElement.length === 1 &&
+                    !this.state.contextMenu &&
                    this.state.showHyperlinkPopup && (
                      <Hyperlink
                        key={selectedElement[0].id}
@ -618,6 +619,14 @@ class App extends React.Component<AppProps, AppState> {
                      closable={this.state.toast.closable}
                    />
                  )}
+                  {this.state.contextMenu && (
+                    <ContextMenu
+                      items={this.state.contextMenu.items}
+                      top={this.state.contextMenu.top}
+                      left={this.state.contextMenu.left}
+                      actionManager={this.actionManager}
+                    />
+                  )}
                  <main>{this.renderCanvas()}</main>
                </ExcalidrawElementsContext.Provider>{" "}
              </ExcalidrawAppStateContext.Provider>
@ -644,8 +653,6 @@ class App extends React.Component<AppProps, AppState> {

  private syncActionResult = withBatchedUpdates(
    (actionResult: ActionResult) => {
-      // Since context menu closes when action triggered so setting to false
-      this.contextMenuOpen = false;
      if (this.unmounted || actionResult === false) {
        return;
      }
@ -674,7 +681,7 @@ class App extends React.Component<AppProps, AppState> {
        this.addNewImagesToImageCache();
      }

-      if (actionResult.appState || editingElement) {
+      if (actionResult.appState || editingElement || this.state.contextMenu) {
        if (actionResult.commitToHistory) {
          this.history.resumeRecording();
        }
@ -700,12 +707,17 @@ class App extends React.Component<AppProps, AppState> {
        if (typeof this.props.name !== "undefined") {
          name = this.props.name;
        }
+
        this.setState(
          (state) => {
            // using Object.assign instead of spread to fool TS 4.2.2+ into
            // regarding the resulting type as not containing undefined
            // (which the following expression will never contain)
            return Object.assign(actionResult.appState || {}, {
+              // NOTE this will prevent opening context menu using an action
+              // or programmatically from the host, so it will need to be
+              // rewritten later
+              contextMenu: null,
              editingElement:
                editingElement || actionResult.appState?.editingElement || null,
              viewModeEnabled,
@ -1462,7 +1474,7 @@ class App extends React.Component<AppProps, AppState> {
    }
  };

-  private pasteFromClipboard = withBatchedUpdates(
+  public pasteFromClipboard = withBatchedUpdates(
    async (event: ClipboardEvent | null) => {
      const isPlainPaste = !!(IS_PLAIN_PASTE && event);

@ -1470,7 +1482,7 @@ class App extends React.Component<AppProps, AppState> {
      const target = document.activeElement;
      const isExcalidrawActive =
        this.excalidrawContainerRef.current?.contains(target);
-      if (!isExcalidrawActive) {
+      if (event && !isExcalidrawActive) {
        return;
      }

@ -1744,10 +1756,11 @@ class App extends React.Component<AppProps, AppState> {
    this.history.resumeRecording();
  }

-  // Collaboration
-
-  setAppState: React.Component<any, AppState>["setState"] = (state) => {
-    this.setState(state);
+  setAppState: React.Component<any, AppState>["setState"] = (
+    state,
+    callback,
+  ) => {
+    this.setState(state, callback);
  };

  removePointer = (event: React.PointerEvent<HTMLElement> | PointerEvent) => {
@ -3101,7 +3114,7 @@ class App extends React.Component<AppProps, AppState> {
        hitElement &&
        hitElement.link &&
        this.state.selectedElementIds[hitElement.id] &&
-        !this.contextMenuOpen &&
+        !this.state.contextMenu &&
        !this.state.showHyperlinkPopup
      ) {
        this.setState({ showHyperlinkPopup: "info" });
@ -3323,6 +3336,14 @@ class App extends React.Component<AppProps, AppState> {
  private handleCanvasPointerDown = (
    event: React.PointerEvent<HTMLCanvasElement>,
  ) => {
+    // since contextMenu options are potentially evaluated on each render,
+    // and an contextMenu action may depend on selection state, we must
+    // close the contextMenu before we update the selection on pointerDown
+    // (e.g. resetting selection)
+    if (this.state.contextMenu) {
+      this.setState({ contextMenu: null });
+    }
+
    // remove any active selection when we start to interact with canvas
    // (mainly, we care about removing selection outside the component which
    //  would prevent our copy handling otherwise)
@ -3389,8 +3410,6 @@ class App extends React.Component<AppProps, AppState> {
      return;
    }

-    // Since context menu closes on pointer down so setting to false
-    this.contextMenuOpen = false;
    this.clearSelectionIfNotUsingSelection();
    this.updateBindingEnabledOnPointerMove(event);

@ -5949,7 +5968,17 @@ class App extends React.Component<AppProps, AppState> {
      includeLockedElements: true,
    });

-    const type = element ? "element" : "canvas";
+    const selectedElements = getSelectedElements(
+      this.scene.getNonDeletedElements(),
+      this.state,
+    );
+    const isHittignCommonBoundBox =
+      this.isHittingCommonBoundingBoxOfSelectedElements(
+        { x, y },
+        selectedElements,
+      );
+
+    const type = element || isHittignCommonBoundBox ? "element" : "canvas";

    const container = this.excalidrawContainerRef.current!;
    const { top: offsetTop, left: offsetLeft } =
@ -5957,25 +5986,30 @@ class App extends React.Component<AppProps, AppState> {
    const left = event.clientX - offsetLeft;
    const top = event.clientY - offsetTop;

-    if (element && !this.state.selectedElementIds[element.id]) {
-      this.setState(
-        selectGroupsForSelectedElements(
-          {
-            ...this.state,
-            selectedElementIds: { [element.id]: true },
-            selectedLinearElement: isLinearElement(element)
-              ? new LinearElementEditor(element, this.scene)
-              : null,
-          },
-          this.scene.getNonDeletedElements(),
-        ),
-        () => {
-          this._openContextMenu({ top, left }, type);
-        },
-      );
-    } else {
-      this._openContextMenu({ top, left }, type);
-    }
+    trackEvent("contextMenu", "openContextMenu", type);
+
+    this.setState(
+      {
+        ...(element && !this.state.selectedElementIds[element.id]
+          ? selectGroupsForSelectedElements(
+              {
+                ...this.state,
+                selectedElementIds: { [element.id]: true },
+                selectedLinearElement: isLinearElement(element)
+                  ? new LinearElementEditor(element, this.scene)
+                  : null,
+              },
+              this.scene.getNonDeletedElements(),
+            )
+          : this.state),
+        showHyperlinkPopup: false,
+      },
+      () => {
+        this.setState({
+          contextMenu: { top, left, items: this.getContextMenuItems(type) },
+        });
+      },
+    );
  };

  private maybeDragNewGenericElement = (
@ -6083,215 +6117,84 @@ class App extends React.Component<AppProps, AppState> {
    return false;
  };

-  /** @private use this.handleCanvasContextMenu */
-  private _openContextMenu = (
-    {
-      left,
-      top,
-    }: {
-      left: number;
-      top: number;
-    },
+  private getContextMenuItems = (
    type: "canvas" | "element",
-  ) => {
-    trackEvent("contextMenu", "openContextMenu", type);
-    if (this.state.showHyperlinkPopup) {
-      this.setState({ showHyperlinkPopup: false });
-    }
-    this.contextMenuOpen = true;
-    const maybeGroupAction = actionGroup.contextItemPredicate!(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
-
-    const maybeUngroupAction = actionUngroup.contextItemPredicate!(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
+  ): ContextMenuItems => {
+    const options: ContextMenuItems = [];

-    const maybeFlipHorizontal = actionFlipHorizontal.contextItemPredicate!(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
-
-    const maybeFlipVertical = actionFlipVertical.contextItemPredicate!(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
+    options.push(actionCopyAsPng, actionCopyAsSvg);

-    const mayBeAllowUnbinding = actionUnbindText.contextItemPredicate(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
+    // canvas contextMenu
+    // -------------------------------------------------------------------------

-    const mayBeAllowBinding = actionBindText.contextItemPredicate(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
-
-    const mayBeAllowToggleLineEditing =
-      actionToggleLinearEditor.contextItemPredicate(
-        this.actionManager.getElementsIncludingDeleted(),
-        this.actionManager.getAppState(),
-      );
-
-    const separator = "separator";
-
-    const elements = this.scene.getNonDeletedElements();
-
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
-
-    const options: ContextMenuOption[] = [];
-    if (probablySupportsClipboardBlob && elements.length > 0) {
-      options.push(actionCopyAsPng);
-    }
-
-    if (probablySupportsClipboardWriteText && elements.length > 0) {
-      options.push(actionCopyAsSvg);
-    }
-
-    if (
-      type === "element" &&
-      copyText.contextItemPredicate(elements, this.state) &&
-      probablySupportsClipboardWriteText
-    ) {
-      options.push(copyText);
-    }
    if (type === "canvas") {
-      const viewModeOptions = [
-        ...options,
-        typeof this.props.gridModeEnabled === "undefined" &&
+      if (this.state.viewModeEnabled) {
+        return [
+          ...options,
          actionToggleGridMode,
-        typeof this.props.zenModeEnabled === "undefined" && actionToggleZenMode,
-        typeof this.props.viewModeEnabled === "undefined" &&
+          actionToggleZenMode,
          actionToggleViewMode,
+          actionToggleStats,
+        ];
+      }
+
+      return [
+        actionPaste,
+        CONTEXT_MENU_SEPARATOR,
+        actionCopyAsPng,
+        actionCopyAsSvg,
+        copyText,
+        CONTEXT_MENU_SEPARATOR,
+        actionSelectAll,
+        CONTEXT_MENU_SEPARATOR,
+        actionToggleGridMode,
+        actionToggleZenMode,
+        actionToggleViewMode,
        actionToggleStats,
      ];
-
-      if (this.state.viewModeEnabled) {
-        ContextMenu.push({
-          options: viewModeOptions,
-          top,
-          left,
-          actionManager: this.actionManager,
-          appState: this.state,
-          container: this.excalidrawContainerRef.current!,
-          elements,
-        });
-      } else {
-        ContextMenu.push({
-          options: [
-            this.device.isMobile &&
-              navigator.clipboard && {
-                trackEvent: false,
-                name: "paste",
-                perform: (elements, appStates) => {
-                  this.pasteFromClipboard(null);
-                  return {
-                    commitToHistory: false,
-                  };
-                },
-                contextItemLabel: "labels.paste",
-              },
-            this.device.isMobile && navigator.clipboard && separator,
-            probablySupportsClipboardBlob &&
-              elements.length > 0 &&
-              actionCopyAsPng,
-            probablySupportsClipboardWriteText &&
-              elements.length > 0 &&
-              actionCopyAsSvg,
-            probablySupportsClipboardWriteText &&
-              selectedElements.length > 0 &&
-              copyText,
-            ((probablySupportsClipboardBlob && elements.length > 0) ||
-              (probablySupportsClipboardWriteText && elements.length > 0)) &&
-              separator,
-            actionSelectAll,
-            separator,
-            typeof this.props.gridModeEnabled === "undefined" &&
-              actionToggleGridMode,
-            typeof this.props.zenModeEnabled === "undefined" &&
-              actionToggleZenMode,
-            typeof this.props.viewModeEnabled === "undefined" &&
-              actionToggleViewMode,
-            actionToggleStats,
-          ],
-          top,
-          left,
-          actionManager: this.actionManager,
-          appState: this.state,
-          container: this.excalidrawContainerRef.current!,
-          elements,
-        });
-      }
-    } else if (type === "element") {
-      if (this.state.viewModeEnabled) {
-        ContextMenu.push({
-          options: [navigator.clipboard && actionCopy, ...options],
-          top,
-          left,
-          actionManager: this.actionManager,
-          appState: this.state,
-          container: this.excalidrawContainerRef.current!,
-          elements,
-        });
-      } else {
-        ContextMenu.push({
-          options: [
-            this.device.isMobile && actionCut,
-            this.device.isMobile && navigator.clipboard && actionCopy,
-            this.device.isMobile &&
-              navigator.clipboard && {
-                name: "paste",
-                trackEvent: false,
-                perform: (elements, appStates) => {
-                  this.pasteFromClipboard(null);
-                  return {
-                    commitToHistory: false,
-                  };
-                },
-                contextItemLabel: "labels.paste",
-              },
-            this.device.isMobile && separator,
-            ...options,
-            separator,
-            actionCopyStyles,
-            actionPasteStyles,
-            separator,
-            maybeGroupAction && actionGroup,
-            mayBeAllowUnbinding && actionUnbindText,
-            mayBeAllowBinding && actionBindText,
-            maybeUngroupAction && actionUngroup,
-            (maybeGroupAction || maybeUngroupAction) && separator,
-            actionAddToLibrary,
-            separator,
-            actionSendBackward,
-            actionBringForward,
-            actionSendToBack,
-            actionBringToFront,
-            separator,
-            maybeFlipHorizontal && actionFlipHorizontal,
-            maybeFlipVertical && actionFlipVertical,
-            (maybeFlipHorizontal || maybeFlipVertical) && separator,
-            mayBeAllowToggleLineEditing && actionToggleLinearEditor,
-            actionLink.contextItemPredicate(elements, this.state) && actionLink,
-            actionDuplicateSelection,
-            actionToggleLock,
-            separator,
-            actionDeleteSelected,
-          ],
-          top,
-          left,
-          actionManager: this.actionManager,
-          appState: this.state,
-          container: this.excalidrawContainerRef.current!,
-          elements,
-        });
-      }
    }
+
+    // element contextMenu
+    // -------------------------------------------------------------------------
+
+    options.push(copyText);
+
+    if (this.state.viewModeEnabled) {
+      return [actionCopy, ...options];
+    }
+
+    return [
+      actionCut,
+      actionCopy,
+      actionPaste,
+      CONTEXT_MENU_SEPARATOR,
+      ...options,
+      CONTEXT_MENU_SEPARATOR,
+      actionCopyStyles,
+      actionPasteStyles,
+      CONTEXT_MENU_SEPARATOR,
+      actionGroup,
+      actionUnbindText,
+      actionBindText,
+      actionUngroup,
+      CONTEXT_MENU_SEPARATOR,
+      actionAddToLibrary,
+      CONTEXT_MENU_SEPARATOR,
+      actionSendBackward,
+      actionBringForward,
+      actionSendToBack,
+      actionBringToFront,
+      CONTEXT_MENU_SEPARATOR,
+      actionFlipHorizontal,
+      actionFlipVertical,
+      CONTEXT_MENU_SEPARATOR,
+      actionToggleLinearEditor,
+      actionLink,
+      actionDuplicateSelection,
+      actionToggleLock,
+      CONTEXT_MENU_SEPARATOR,
+      actionDeleteSelected,
+    ];
  };

  private handleWheel = withBatchedUpdates((event: WheelEvent) => {
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@ -19,7 +19,7 @@
    color: var(--popup-text-color);
  }

-  .context-menu-option {
+  .context-menu-item {
    position: relative;
    width: 100%;
    min-width: 9.5rem;
@ -43,16 +43,16 @@
    }

    &.dangerous {
-      .context-menu-option__label {
+      .context-menu-item__label {
        color: $oc-red-7;
      }
    }

-    .context-menu-option__label {
+    .context-menu-item__label {
      justify-self: start;
      margin-inline-end: 20px;
    }
-    .context-menu-option__shortcut {
+    .context-menu-item__shortcut {
      justify-self: end;
      opacity: 0.6;
      font-family: inherit;
@ -60,37 +60,37 @@
    }
  }

-  .context-menu-option:hover {
+  .context-menu-item:hover {
    color: var(--popup-bg-color);
    background-color: var(--select-highlight-color);

    &.dangerous {
-      .context-menu-option__label {
+      .context-menu-item__label {
        color: var(--popup-bg-color);
      }
      background-color: $oc-red-6;
    }
  }

-  .context-menu-option:focus {
+  .context-menu-item:focus {
    z-index: 1;
  }

  @include isMobile {
-    .context-menu-option {
+    .context-menu-item {
      display: block;

-      .context-menu-option__label {
+      .context-menu-item__label {
        margin-inline-end: 0;
      }

-      .context-menu-option__shortcut {
+      .context-menu-item__shortcut {
        display: none;
      }
    }
  }

-  .context-menu-option-separator {
+  .context-menu-item-separator {
    border: none;
    border-top: 1px solid $oc-gray-5;
  }
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@ -1,4 +1,3 @@
-import { createRoot, Root } from "react-dom/client";
 import clsx from "clsx";
 import { Popover } from "./Popover";
 import { t } from "../i18n";
@ -10,135 +9,116 @@ import {
 } from "../actions/shortcuts";
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import {
+  useExcalidrawAppState,
+  useExcalidrawElements,
+  useExcalidrawSetAppState,
+} from "./App";
+import React from "react";
+
+export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;

-export type ContextMenuOption = "separator" | Action;
+export type ContextMenuItems = (ContextMenuItem | false | null | undefined)[];

 type ContextMenuProps = {
-  options: ContextMenuOption[];
-  onCloseRequest?(): void;
+  actionManager: ActionManager;
+  items: ContextMenuItems;
  top: number;
  left: number;
-  actionManager: ActionManager;
-  appState: Readonly<AppState>;
-  elements: readonly NonDeletedExcalidrawElement[];
 };

-const ContextMenu = ({
-  options,
-  onCloseRequest,
-  top,
-  left,
-  actionManager,
-  appState,
-  elements,
-}: ContextMenuProps) => {
-  return (
-    <Popover
-      onCloseRequest={onCloseRequest}
-      top={top}
-      left={left}
-      fitInViewport={true}
-      offsetLeft={appState.offsetLeft}
-      offsetTop={appState.offsetTop}
-      viewportWidth={appState.width}
-      viewportHeight={appState.height}
-    >
-      <ul
-        className="context-menu"
-        onContextMenu={(event) => event.preventDefault()}
-      >
-        {options.map((option, idx) => {
-          if (option === "separator") {
-            return <hr key={idx} className="context-menu-option-separator" />;
-          }
+export const CONTEXT_MENU_SEPARATOR = "separator";

-          const actionName = option.name;
-          let label = "";
-          if (option.contextItemLabel) {
-            if (typeof option.contextItemLabel === "function") {
-              label = t(option.contextItemLabel(elements, appState));
-            } else {
-              label = t(option.contextItemLabel);
-            }
-          }
-          return (
-            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
-              <button
-                className={clsx("context-menu-option", {
-                  dangerous: actionName === "deleteSelectedElements",
-                  checkmark: option.checked?.(appState),
-                })}
-                onClick={() =>
-                  actionManager.executeAction(option, "contextMenu")
-                }
-              >
-                <div className="context-menu-option__label">{label}</div>
-                <kbd className="context-menu-option__shortcut">
-                  {actionName
-                    ? getShortcutFromShortcutName(actionName as ShortcutName)
-                    : ""}
-                </kbd>
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-    </Popover>
-  );
-};
+export const ContextMenu = React.memo(
+  ({ actionManager, items, top, left }: ContextMenuProps) => {
+    const appState = useExcalidrawAppState();
+    const setAppState = useExcalidrawSetAppState();
+    const elements = useExcalidrawElements();

-const contextMenuRoots = new WeakMap<HTMLElement, Root>();
+    const filteredItems = items.reduce((acc: ContextMenuItem[], item) => {
+      if (
+        item &&
+        (item === CONTEXT_MENU_SEPARATOR ||
+          !item.contextItemPredicate ||
+          item.contextItemPredicate(
+            elements,
+            appState,
+            actionManager.app.props,
+            actionManager.app,
+          ))
+      ) {
+        acc.push(item);
+      }
+      return acc;
+    }, []);

-const getContextMenuRoot = (container: HTMLElement): Root => {
-  let contextMenuRoot = contextMenuRoots.get(container);
-  if (contextMenuRoot) {
-    return contextMenuRoot;
-  }
-  contextMenuRoot = createRoot(
-    container.querySelector(".excalidraw-contextMenuContainer")!,
-  );
-  contextMenuRoots.set(container, contextMenuRoot);
-  return contextMenuRoot;
-};
+    return (
+      <Popover
+        onCloseRequest={() => setAppState({ contextMenu: null })}
+        top={top}
+        left={left}
+        fitInViewport={true}
+        offsetLeft={appState.offsetLeft}
+        offsetTop={appState.offsetTop}
+        viewportWidth={appState.width}
+        viewportHeight={appState.height}
+      >
+        <ul
+          className="context-menu"
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          {filteredItems.map((item, idx) => {
+            if (item === CONTEXT_MENU_SEPARATOR) {
+              if (
+                !filteredItems[idx - 1] ||
+                filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR
+              ) {
+                return null;
+              }
+              return <hr key={idx} className="context-menu-item-separator" />;
+            }

-const handleClose = (container: HTMLElement) => {
-  const contextMenuRoot = contextMenuRoots.get(container);
-  if (contextMenuRoot) {
-    contextMenuRoot.unmount();
-    contextMenuRoots.delete(container);
-  }
-};
+            const actionName = item.name;
+            let label = "";
+            if (item.contextItemLabel) {
+              if (typeof item.contextItemLabel === "function") {
+                label = t(item.contextItemLabel(elements, appState));
+              } else {
+                label = t(item.contextItemLabel);
+              }
+            }

-export default {
-  push(params: {
-    options: (ContextMenuOption | false | null | undefined)[];
-    top: ContextMenuProps["top"];
-    left: ContextMenuProps["left"];
-    actionManager: ContextMenuProps["actionManager"];
-    appState: Readonly<AppState>;
-    container: HTMLElement;
-    elements: readonly NonDeletedExcalidrawElement[];
-  }) {
-    const options = Array.of<ContextMenuOption>();
-    params.options.forEach((option) => {
-      if (option) {
-        options.push(option);
-      }
-    });
-    if (options.length) {
-      getContextMenuRoot(params.container).render(
-        <ContextMenu
-          top={params.top}
-          left={params.left}
-          options={options}
-          onCloseRequest={() => handleClose(params.container)}
-          actionManager={params.actionManager}
-          appState={params.appState}
-          elements={params.elements}
-        />,
-      );
-    }
+            return (
+              <li
+                key={idx}
+                data-testid={actionName}
+                onClick={() => {
+                  // we need update state before executing the action in case
+                  // the action uses the appState it's being passed (that still
+                  // contains a defined contextMenu) to return the next state.
+                  setAppState({ contextMenu: null }, () => {
+                    actionManager.executeAction(item, "contextMenu");
+                  });
+                }}
+              >
+                <button
+                  className={clsx("context-menu-item", {
+                    dangerous: actionName === "deleteSelectedElements",
+                    checkmark: item.checked?.(appState),
+                  })}
+                >
+                  <div className="context-menu-item__label">{label}</div>
+                  <kbd className="context-menu-item__shortcut">
+                    {actionName
+                      ? getShortcutFromShortcutName(actionName as ShortcutName)
+                      : ""}
+                  </kbd>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </Popover>
+    );
  },
-};
+);
--- a/src/tests/snapshots/contextmenu.test.tsx.snap
+++ b/src/tests/snapshots/contextmenu.test.tsx.snap
--- a/src/tests/snapshots/regressionTests.test.tsx.snap
+++ b/src/tests/snapshots/regressionTests.test.tsx.snap
@ -9,6 +9,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -544,6 +545,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -1085,6 +1087,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -1991,6 +1994,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -2220,6 +2224,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -2752,6 +2757,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -3040,6 +3046,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -3223,6 +3230,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -3738,6 +3746,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "#fa5252",
  "currentItemEndArrowhead": "arrow",
@ -4005,6 +4014,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -4234,6 +4244,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -4509,6 +4520,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -4796,6 +4808,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -5213,6 +5226,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -5553,6 +5567,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -5866,6 +5881,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -6103,6 +6119,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -6288,6 +6305,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -6815,6 +6833,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -7179,6 +7198,7 @@ Object {
    "type": "freedraw",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -9530,6 +9550,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -9948,6 +9969,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "#fa5252",
  "currentItemEndArrowhead": "arrow",
@ -10236,6 +10258,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -10483,6 +10506,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -10803,6 +10827,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -10986,6 +11011,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -11169,6 +11195,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -11352,6 +11379,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -11588,6 +11616,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -11824,6 +11853,7 @@ Object {
    "type": "freedraw",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -12051,6 +12081,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -12287,6 +12318,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -12470,6 +12502,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -12706,6 +12739,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -12889,6 +12923,7 @@ Object {
    "type": "freedraw",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -13116,6 +13151,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -13299,6 +13335,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -14137,6 +14174,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -14425,6 +14463,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -14535,6 +14574,7 @@ Object {
    "type": "rectangle",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -14643,6 +14683,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -14829,6 +14870,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -15196,6 +15238,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -15826,6 +15869,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "#fa5252",
  "currentItemEndArrowhead": "arrow",
@ -16051,6 +16095,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -17013,6 +17058,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -17121,6 +17167,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -17979,6 +18026,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -18450,6 +18498,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -18790,6 +18839,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -18900,6 +18950,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -19470,6 +19521,7 @@ Object {
    "type": "text",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
@ -19578,6 +19630,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
--- a/src/tests/elementLocking.test.tsx
+++ b/src/tests/elementLocking.test.tsx
@ -152,7 +152,7 @@ describe("element locking", () => {
    expect(contextMenu).not.toBeNull();
    expect(
      contextMenu?.querySelector(
-        `li[data-testid="toggleLock"] .context-menu-option__label`,
+        `li[data-testid="toggleLock"] .context-menu-item__label`,
      ),
    ).toHaveTextContent(t("labels.elementLock.unlock"));
  });
--- a/src/tests/packages/snapshots/utils.test.ts.snap
+++ b/src/tests/packages/snapshots/utils.test.ts.snap
@ -9,6 +9,7 @@ Object {
    "type": "selection",
  },
  "collaborators": Map {},
+  "contextMenu": null,
  "currentChartType": "bar",
  "currentItemBackgroundColor": "transparent",
  "currentItemEndArrowhead": "arrow",
--- a/src/types.ts
+++ b/src/types.ts
@ -30,6 +30,7 @@ import { MaybeTransformHandleType } from "./element/transformHandles";
 import Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
+import { ContextMenuItems } from "./components/ContextMenu";

 export type Point = Readonly<RoughPoint>;

@ -92,6 +93,11 @@ export type LastActiveToolBeforeEraser =
  | null;

 export type AppState = {
+  contextMenu: {
+    items: ContextMenuItems;
+    top: number;
+    left: number;
+  } | null;
  showWelcomeScreen: boolean;
  isLoading: boolean;
  errorMessage: string | null;
@ -147,6 +153,7 @@ export type AppState = {
  isResizing: boolean;
  isRotating: boolean;
  zoom: Zoom;
+  // mobile-only
  openMenu: "canvas" | "shape" | null;
  openPopup:
    | "canvasColorPicker"
@ -407,6 +414,7 @@ export type AppClassProperties = {
  files: BinaryFiles;
  device: App["device"];
  scene: App["scene"];
+  pasteFromClipboard: App["pasteFromClipboard"];
 };

 export type PointerDownState = Readonly<{