Added configurable context menu to editor (#451)

* Added configurable context menu to editor

* Moved contextMenu above experimental properties, built API docs

Author: tjcouch-sil

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

@@ -10,6 +10,20 @@ import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from
 import * as ReactDOM from "react-dom";
 import { isImmutableChapterElement } from "shared";
 
+/**
+ * A context menu option to add to the editor context menu.
+ *
+ * @public
+ */
+export interface ContextMenuOptionConfig {
+  /** Display title of the menu item. */
+  title: string;
+  /** Callback invoked when the menu item is selected. */
+  onSelect: () => void;
+  /** Whether the menu item is disabled. */
+  isDisabled?: boolean;
+}
+
 function ContextMenuItem({
   index,
   isSelected,
@@ -111,15 +125,19 @@ function isEditorInput(
   return element.classList.contains(editorInputClassName);
 }
 
-export function ContextMenuPlugin(): ReactElement {
+export function ContextMenuPlugin({
+  options: extraOptions,
+}: {
+  options?: ContextMenuOptionConfig[];
+} = {}): ReactElement {
   const [editor] = useLexicalComposerContext();
   const [isReadonly, setIsReadonly] = useState(() => !editor.isEditable());
   const targetRef = useRef<HTMLElement | undefined>(undefined);
   const editorInputClassNameRef = useRef<string | undefined>(undefined);
   const closeMenuFnRef = useRef<(() => void) | undefined>(undefined);
 
   const options = useMemo(() => {
-    return [
+    const builtIn = [
       new ContextMenuOption(`Cut`, {
         onSelect: () => {
           editor.dispatchCommand(CUT_COMMAND, null);
@@ -144,7 +162,12 @@ export function ContextMenuPlugin(): ReactElement {
         isDisabled: isReadonly,
       }),
     ];
-  }, [editor, isReadonly]);
+    const extra = (extraOptions ?? []).map(
+      (opt) =>
+        new ContextMenuOption(opt.title, { onSelect: opt.onSelect, isDisabled: opt.isDisabled }),
+    );
+    return [...builtIn, ...extra];
+  }, [editor, isReadonly, extraOptions]);
 
   const onSelectOption = useCallback(
     (selectedOption: ContextMenuOption, targetNode: LexicalNode | null, closeMenu: () => void) => {

packages/platform/etc/platform-editor.api.md

@@ -35,6 +35,13 @@ export interface CommentBase {
 // @public
 export type Comments = (Thread | CommentBase)[];
 
+// @public
+export interface ContextMenuOptionConfig {
+    isDisabled?: boolean;
+    onSelect: () => void;
+    title: string;
+}
+
 // @public
 export type DeltaOp = Op;
 
@@ -61,6 +68,7 @@ export const Editorial: ForwardRefExoticComponent<EditorProps<LoggerBasic> & Ref
 
 // @public
 export interface EditorOptions {
+    contextMenu?: ContextMenuOptionConfig[];
     debug?: boolean;
     hasExternalUI?: boolean;
     hasSpellCheck?: boolean;

packages/platform/src/editor/Editor.tsx

@@ -154,6 +154,7 @@ const Editor = forwardRef(function Editor<TLogger extends LoggerBasic>(
     view: viewOptions = defaultViewOptions,
     nodes: nodeOptions = defaultNodeOptions,
     debug = false,
+    contextMenu: contextMenuOptions,
   } = options ?? defaultOptions;
 
   editorConfig.editable = !isReadonly;
@@ -379,7 +380,7 @@ const Editor = forwardRef(function Editor<TLogger extends LoggerBasic>(
           <CharNodePlugin />
           <ClipboardPlugin />
           <CommandMenuPlugin logger={logger} />
-          <ContextMenuPlugin />
+          <ContextMenuPlugin options={contextMenuOptions} />
           <NoteNodePlugin
             expandedNoteKeyRef={expandedNoteKeyRef}
             nodeOptions={nodeOptions}

packages/platform/src/editor/editor.model.ts

@@ -4,6 +4,7 @@ import { RefObject } from "react";
 import { LoggerBasic, TypedMarkOnClick, TypedMarkOnRemove } from "shared";
 import {
   AnnotationRange,
+  ContextMenuOptionConfig,
   DeltaOp,
   DeltaSource,
   SelectionRange,
@@ -154,6 +155,8 @@ export interface EditorOptions {
   markerMenuTrigger?: string;
   /** Options for some editor nodes. */
   nodes?: UsjNodeOptions;
+  /** Additional items to append to the editor context menu. */
+  contextMenu?: ContextMenuOptionConfig[];
   /**
    * EXPERIMENTAL: View options. Defaults to the formatted view mode which is currently the only
    * functional option.

packages/platform/src/index.ts

@@ -60,6 +60,7 @@ export type {
 export type {
   AddMissingComments,
   AnnotationRange,
+  ContextMenuOptionConfig,
   DeltaOp,
   DeltaOpInsertNoteEmbed,
   DeltaSource,