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

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}