feat: Support LaTeX and AsciiMath via MathJax on stem.excalidraw.com

src/actions/actionBoundText.tsx

@@ -3,7 +3,7 @@ import { getNonDeletedElements, isTextElement } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import {
   getBoundTextElement,
-  measureText,
+  measureTextElement,
   redrawTextBoundingBox,
 } from "../element/textElement";
 import {
@@ -19,7 +19,6 @@ import {
   ExcalidrawTextElement,
 } from "../element/types";
 import { getSelectedElements } from "../scene";
-import { getFontString } from "../utils";
 import { register } from "./register";
 
 export const actionUnbindText = register({
@@ -38,9 +37,9 @@ export const actionUnbindText = register({
     selectedElements.forEach((element) => {
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
-        const { width, height, baseline } = measureText(
-          boundTextElement.originalText,
-          getFontString(boundTextElement),
+        const { width, height, baseline } = measureTextElement(
+          boundTextElement,
+          { text: boundTextElement.originalText },
         );
         const originalContainerHeight = getOriginalContainerHeightFromCache(
           element.id,

src/actions/actionProperties.tsx

@@ -86,7 +86,7 @@ import { register } from "./register";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
-const changeProperty = (
+export const changeProperty = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   callback: (element: ExcalidrawElement) => ExcalidrawElement,
@@ -106,7 +106,7 @@ const changeProperty = (
   });
 };
 
-const getFormValue = function <T>(
+export const getFormValue = function <T>(
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   getAttribute: (element: ExcalidrawElement) => T,

src/actions/guards.ts

@@ -0,0 +1,25 @@
+import { Action, ActionName, DisableFn, EnableFn } from "./types";
+
+const disablers = {} as Record<ActionName, DisableFn[]>;
+const enablers = {} as Record<Action["name"], EnableFn[]>;
+
+export const getActionDisablers = () => disablers;
+export const getActionEnablers = () => enablers;
+
+export const registerDisableFn = (name: ActionName, disabler: DisableFn) => {
+  if (!(name in disablers)) {
+    disablers[name] = [] as DisableFn[];
+  }
+  if (!disablers[name].includes(disabler)) {
+    disablers[name].push(disabler);
+  }
+};
+
+export const registerEnableFn = (name: Action["name"], enabler: EnableFn) => {
+  if (!(name in enablers)) {
+    enablers[name] = [] as EnableFn[];
+  }
+  if (!enablers[name].includes(enabler)) {
+    enablers[name].push(enabler);
+  }
+};

src/actions/manager.tsx

@@ -6,7 +6,11 @@ import {
   ActionResult,
   PanelComponentProps,
   ActionSource,
+  DisableFn,
+  EnableFn,
+  isActionName,
 } from "./types";
+import { getActionDisablers, getActionEnablers } from "./guards";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { trackEvent } from "../analytics";
@@ -40,7 +44,10 @@ const trackAction = (
 };
 
 export class ActionManager {
-  actions = {} as Record<ActionName, Action>;
+  actions = {} as Record<ActionName | Action["name"], Action>;
+
+  disablers = {} as Record<ActionName, DisableFn[]>;
+  enablers = {} as Record<Action["name"], EnableFn[]>;
 
   updater: (actionResult: ActionResult | Promise<ActionResult>) => void;
 
@@ -68,6 +75,58 @@ export class ActionManager {
     this.app = app;
   }
 
+  public registerActionGuards() {
+    const disablers = getActionDisablers();
+    for (const d in disablers) {
+      const dName = d as ActionName;
+      disablers[dName].forEach((disabler) =>
+        this.registerDisableFn(dName, disabler),
+      );
+    }
+    const enablers = getActionEnablers();
+    for (const e in enablers) {
+      const eName = e as Action["name"];
+      enablers[e].forEach((enabler) => this.registerEnableFn(eName, enabler));
+    }
+  }
+
+  private registerDisableFn(name: ActionName, disabler: DisableFn) {
+    if (!(name in this.disablers)) {
+      this.disablers[name] = [] as DisableFn[];
+    }
+    if (!this.disablers[name].includes(disabler)) {
+      this.disablers[name].push(disabler);
+    }
+  }
+
+  private registerEnableFn(name: Action["name"], enabler: EnableFn) {
+    if (!(name in this.enablers)) {
+      this.enablers[name] = [] as EnableFn[];
+    }
+    if (!this.enablers[name].includes(enabler)) {
+      this.enablers[name].push(enabler);
+    }
+  }
+
+  public isActionEnabled(
+    elements: readonly ExcalidrawElement[],
+    appState: AppState,
+    actionName: Action["name"],
+  ): boolean {
+    if (isActionName(actionName)) {
+      return !(
+        actionName in this.disablers &&
+        this.disablers[actionName].some((fn) =>
+          fn(elements, appState, actionName),
+        )
+      );
+    }
+    return (
+      actionName in this.enablers &&
+      this.enablers[actionName].some((fn) => fn(elements, appState, actionName))
+    );
+  }
+
   registerAction(action: Action) {
     this.actions[action.name] = action;
   }
@@ -84,7 +143,11 @@ export class ActionManager {
         (action) =>
           (action.name in canvasActions
             ? canvasActions[action.name as keyof typeof canvasActions]
-            : true) &&
+            : this.isActionEnabled(
+                this.getElementsIncludingDeleted(),
+                this.getAppState(),
+                action.name,
+              )) &&
           action.keyTest &&
           action.keyTest(
             event,
@@ -132,7 +195,7 @@ export class ActionManager {
    * @param data additional data sent to the PanelComponent
    */
   renderAction = (
-    name: ActionName,
+    name: ActionName | Action["name"],
     data?: PanelComponentProps["data"],
     isInHamburgerMenu = false,
   ) => {
@@ -143,7 +206,11 @@ export class ActionManager {
       "PanelComponent" in this.actions[name] &&
       (name in canvasActions
         ? canvasActions[name as keyof typeof canvasActions]
-        : true)
+        : this.isActionEnabled(
+            this.getElementsIncludingDeleted(),
+            this.getAppState(),
+            name,
+          ))
     ) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
@@ -165,6 +232,7 @@ export class ActionManager {
 
       return (
         <PanelComponent
+          key={name}
           elements={this.getElementsIncludingDeleted()}
           appState={this.getAppState()}
           updateData={updateData}

src/actions/register.ts

@@ -1,8 +1,14 @@
-import { Action } from "./types";
+import { Action, isActionName } from "./types";
 
-export let actions: readonly Action[] = [];
+let actions: readonly Action[] = [];
+let customActions: readonly Action[] = [];
+export const getCustomActions = () => customActions;
+export const getActions = () => actions;
 
 export const register = <T extends Action>(action: T) => {
+  if (!isActionName(action.name)) {
+    customActions = customActions.concat(action);
+  }
   actions = actions.concat(action);
   return action as T & {
     keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];

src/actions/shortcuts.ts

@@ -80,8 +80,23 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   toggleLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };
 
-export const getShortcutFromShortcutName = (name: ShortcutName) => {
-  const shortcuts = shortcutMap[name];
+export type CustomShortcutName = string;
+
+let customShortcutMap: Record<CustomShortcutName, string[]> = {};
+
+export const registerCustomShortcuts = (
+  shortcuts: Record<CustomShortcutName, string[]>,
+) => {
+  customShortcutMap = { ...customShortcutMap, ...shortcuts };
+};
+
+export const getShortcutFromShortcutName = (
+  name: ShortcutName | CustomShortcutName,
+) => {
+  const shortcuts =
+    name in customShortcutMap
+      ? customShortcutMap[name as CustomShortcutName]
+      : shortcutMap[name as ShortcutName];
   // if multiple shortcuts available, take the first one
   return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };

src/actions/types.ts

@@ -31,88 +31,110 @@ type ActionFn = (
   app: AppClassProperties,
 ) => ActionResult | Promise<ActionResult>;
 
+// Return `true` to indicate the standard Action with name `actionName`
+// should be disabled given `elements` and `appState`.
+export type DisableFn = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  actionName: ActionName,
+) => boolean;
+
+// Return `true` to indicate the custom Action with name `actionName`
+// should be enabled given `elements` and `appState`.
+export type EnableFn = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  actionName: Action["name"],
+) => boolean;
+
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
 
-export type ActionName =
-  | "copy"
-  | "cut"
-  | "paste"
-  | "copyAsPng"
-  | "copyAsSvg"
-  | "copyText"
-  | "sendBackward"
-  | "bringForward"
-  | "sendToBack"
-  | "bringToFront"
-  | "copyStyles"
-  | "selectAll"
-  | "pasteStyles"
-  | "gridMode"
-  | "zenMode"
-  | "stats"
-  | "changeStrokeColor"
-  | "changeBackgroundColor"
-  | "changeFillStyle"
-  | "changeStrokeWidth"
-  | "changeStrokeShape"
-  | "changeSloppiness"
-  | "changeStrokeStyle"
-  | "changeArrowhead"
-  | "changeOpacity"
-  | "changeFontSize"
-  | "toggleCanvasMenu"
-  | "toggleEditMenu"
-  | "undo"
-  | "redo"
-  | "finalize"
-  | "changeProjectName"
-  | "changeExportBackground"
-  | "changeExportEmbedScene"
-  | "changeExportScale"
-  | "saveToActiveFile"
-  | "saveFileToDisk"
-  | "loadScene"
-  | "duplicateSelection"
-  | "deleteSelectedElements"
-  | "changeViewBackgroundColor"
-  | "clearCanvas"
-  | "zoomIn"
-  | "zoomOut"
-  | "resetZoom"
-  | "zoomToFit"
-  | "zoomToSelection"
-  | "changeFontFamily"
-  | "changeTextAlign"
-  | "changeVerticalAlign"
-  | "toggleFullScreen"
-  | "toggleShortcuts"
-  | "group"
-  | "ungroup"
-  | "goToCollaborator"
-  | "addToLibrary"
-  | "changeRoundness"
-  | "alignTop"
-  | "alignBottom"
-  | "alignLeft"
-  | "alignRight"
-  | "alignVerticallyCentered"
-  | "alignHorizontallyCentered"
-  | "distributeHorizontally"
-  | "distributeVertically"
-  | "flipHorizontal"
-  | "flipVertical"
-  | "viewMode"
-  | "exportWithDarkMode"
-  | "toggleTheme"
-  | "increaseFontSize"
-  | "decreaseFontSize"
-  | "unbindText"
-  | "hyperlink"
-  | "eraser"
-  | "bindText"
-  | "toggleLock"
-  | "toggleLinearEditor";
+const actionNames = [
+  "copy",
+  "cut",
+  "paste",
+  "copyAsPng",
+  "copyAsSvg",
+  "copyText",
+  "sendBackward",
+  "bringForward",
+  "sendToBack",
+  "bringToFront",
+  "copyStyles",
+  "selectAll",
+  "pasteStyles",
+  "gridMode",
+  "zenMode",
+  "stats",
+  "changeStrokeColor",
+  "changeBackgroundColor",
+  "changeFillStyle",
+  "changeStrokeWidth",
+  "changeStrokeShape",
+  "changeSloppiness",
+  "changeStrokeStyle",
+  "changeArrowhead",
+  "changeOpacity",
+  "changeFontSize",
+  "toggleCanvasMenu",
+  "toggleEditMenu",
+  "undo",
+  "redo",
+  "finalize",
+  "changeProjectName",
+  "changeExportBackground",
+  "changeExportEmbedScene",
+  "changeExportScale",
+  "saveToActiveFile",
+  "saveFileToDisk",
+  "loadScene",
+  "duplicateSelection",
+  "deleteSelectedElements",
+  "changeViewBackgroundColor",
+  "clearCanvas",
+  "zoomIn",
+  "zoomOut",
+  "resetZoom",
+  "zoomToFit",
+  "zoomToSelection",
+  "changeFontFamily",
+  "changeTextAlign",
+  "changeVerticalAlign",
+  "toggleFullScreen",
+  "toggleShortcuts",
+  "group",
+  "ungroup",
+  "goToCollaborator",
+  "addToLibrary",
+  "changeRoundness",
+  "alignTop",
+  "alignBottom",
+  "alignLeft",
+  "alignRight",
+  "alignVerticallyCentered",
+  "alignHorizontallyCentered",
+  "distributeHorizontally",
+  "distributeVertically",
+  "flipHorizontal",
+  "flipVertical",
+  "viewMode",
+  "exportWithDarkMode",
+  "toggleTheme",
+  "increaseFontSize",
+  "decreaseFontSize",
+  "unbindText",
+  "hyperlink",
+  "eraser",
+  "bindText",
+  "toggleLock",
+  "toggleLinearEditor",
+] as const;
+
+// So we can have the `isActionName` type guard
+export type ActionName = typeof actionNames[number];
+export const isActionName = (n: any): n is ActionName =>
+  actionNames.includes(n);
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
@@ -123,10 +145,14 @@ export type PanelComponentProps = {
 };
 
 export interface Action {
-  name: ActionName;
+  name: string;
   PanelComponent?: React.FC<
     PanelComponentProps & { isInHamburgerMenu: boolean }
   >;
+  panelComponentPredicate?: (
+    elements: readonly ExcalidrawElement[],
+    appState: AppState,
+  ) => boolean;
   perform: ActionFn;
   keyPriority?: number;
   keyTest?: (
@@ -134,6 +160,11 @@ export interface Action {
     appState: AppState,
     elements: readonly ExcalidrawElement[],
   ) => boolean;
+  shapeConfigPredicate?: (
+    elements: readonly ExcalidrawElement[],
+    appState: AppState,
+    data?: Record<string, any>,
+  ) => boolean;
   contextItemLabel?:
     | string
     | ((