platform: disable more UI controls

- if `hasExternalUI` then undo & redo keyboard shortcuts are disabled.
- if `hasExternalUI` then the marker menu is disabled.

Author: irahopkinson

demos/platform/src/app/app.tsx

@@ -399,10 +399,9 @@ export default function App() {
               </button>
             </div>
           </span>
-          <button onClick={() => setIsNoteEditorVisible(!isNoteEditorVisible)}>
-            {isNoteEditorVisible ? "Hide" : "Show"} note editor
-          </button>
-          <pre style={{ color: "black" }}>{contextMarker}</pre>
+          <pre title="contextMarker" style={{ color: "black" }}>
+            {contextMarker}
+          </pre>
         </div>
         {isOptionsDefined && (
           <>

libs/shared-react/src/plugins/usj/CommandMenuPlugin.tsx

@@ -6,7 +6,6 @@ import { LoggerBasic } from "shared";
 
 /**
  * This plugin prevents the backslash or forward slash key from being typed, or pasted or dragged.
- * Later this plugin will open the command menu to insert USJ elements.
  * @returns `null`. This plugin has no DOM presence.
  */
 export function CommandMenuPlugin({ logger }: { logger?: LoggerBasic }): null {

libs/shared-react/src/plugins/usj/DisableHistoryShortcutsPlugin.tsx

@@ -0,0 +1,34 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { IS_APPLE } from "@lexical/utils";
+import { COMMAND_PRIORITY_CRITICAL, KEY_DOWN_COMMAND } from "lexical";
+import { useEffect } from "react";
+
+/**
+ * Prevent undo and redo keyboard shortcuts while preserving command-based undo/redo.
+ * @returns `null`. This plugin has no DOM presence.
+ */
+export function DisableHistoryShortcutsPlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event: KeyboardEvent) => {
+        const { key, shiftKey, metaKey, ctrlKey, altKey } = event;
+        if (!(IS_APPLE ? metaKey : ctrlKey) || altKey) return false;
+
+        const normalizedKey = key.toLowerCase();
+        const isUndo = normalizedKey === "z" && !shiftKey;
+        const isRedo = normalizedKey === "y" || (normalizedKey === "z" && shiftKey);
+
+        if (!isUndo && !isRedo) return false;
+
+        event.preventDefault();
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor]);
+
+  return null;
+}

libs/shared-react/src/plugins/usj/index.ts

@@ -7,6 +7,7 @@ export * from "./clipboard.utils";
 export * from "./ClipboardPlugin";
 export * from "./CommandMenuPlugin";
 export * from "./ContextMenuPlugin";
+export * from "./DisableHistoryShortcutsPlugin";
 export * from "./EditablePlugin";
 export * from "./LoadStatePlugin";
 export * from "./NoteNodePlugin";

packages/platform/src/editor/Editor.tsx

@@ -64,6 +64,7 @@ import {
   ContextMenuPlugin,
   DeltaOnChangePlugin,
   DeltaOp,
+  DisableHistoryShortcutsPlugin,
   EditablePlugin,
   getDefaultViewOptions,
   getInsertedNodeKey,
@@ -362,11 +363,12 @@ const Editor = forwardRef(function Editor<TLogger extends LoggerBasic>(
             placeholder={<Placeholder />}
             ErrorBoundary={LexicalErrorBoundary}
           />
+          {hasExternalUI && <DisableHistoryShortcutsPlugin />}
           <HistoryPlugin />
           {scrRef && onScrRefChange && (
             <ScriptureReferencePlugin scrRef={scrRef} onScrRefChange={onScrRefChange} />
           )}
-          {scrRef && (
+          {scrRef && !hasExternalUI && (
             <UsjNodesMenuPlugin
               trigger={markerMenuTrigger}
               scrRef={scrRef}