move away from core

packages/lexical-playground/src/nodes/ImageComponent.tsx

@@ -8,6 +8,7 @@
 
 import type {
   GridSelection,
+  LexicalCommand,
   LexicalEditor,
   NodeKey,
   NodeSelection,
@@ -35,7 +36,7 @@ import {
   $setSelection,
   CLICK_COMMAND,
   COMMAND_PRIORITY_LOW,
-  CONTEXT_MENU_COMMAND,
+  createCommand,
   DRAGSTART_COMMAND,
   KEY_BACKSPACE_COMMAND,
   KEY_DELETE_COMMAND,
@@ -61,6 +62,9 @@ import {$isImageNode} from './ImageNode';
 
 const imageCache = new Set();
 
+export const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent> =
+  createCommand('RIGHT_CLICK_IMAGE_COMMAND');
+
 function useSuspenseImage(src: string) {
   if (!imageCache.has(src)) {
     throw new Promise((resolve) => {
@@ -208,8 +212,46 @@ export default function ImageComponent({
     [caption, editor, setSelected],
   );
 
+  const onClick = useCallback(
+    (payload: MouseEvent) => {
+      const event = payload;
+
+      if (isResizing) {
+        return true;
+      }
+      if (event.target === imageRef.current) {
+        if (event.shiftKey) {
+          setSelected(!isSelected);
+        } else {
+          clearSelection();
+          setSelected(true);
+        }
+        return true;
+      }
+
+      return false;
+    },
+    [isResizing, isSelected, setSelected, clearSelection],
+  );
+
+  const onRightClick = useCallback(
+    (event: MouseEvent): void => {
+      const latestSelection = $getSelection();
+      const domElement = event.target as HTMLElement;
+      if (
+        domElement.tagName === 'IMG' &&
+        $isRangeSelection(latestSelection) &&
+        latestSelection.getNodes().length === 1
+      ) {
+        editor.dispatchCommand(RIGHT_CLICK_IMAGE_COMMAND, event as MouseEvent);
+      }
+    },
+    [editor],
+  );
+
   useEffect(() => {
     let isMounted = true;
+    const rootElement = editor.getRootElement();
     const unregister = mergeRegister(
       editor.registerUpdateListener(({editorState}) => {
         if (isMounted) {
@@ -226,43 +268,12 @@ export default function ImageComponent({
       ),
       editor.registerCommand<MouseEvent>(
         CLICK_COMMAND,
-        (payload: MouseEvent) => {
-          const event = payload;
-
-          if (isResizing) {
-            return true;
-          }
-          if (event.target === imageRef.current) {
-            if (event.shiftKey) {
-              setSelected(!isSelected);
-            } else {
-              clearSelection();
-              setSelected(true);
-            }
-            return true;
-          }
-
-          return false;
-        },
+        onClick,
         COMMAND_PRIORITY_LOW,
       ),
       editor.registerCommand<MouseEvent>(
-        CONTEXT_MENU_COMMAND,
-        (payload: MouseEvent) => {
-          const event = payload;
-          const latestSelection = $getSelection();
-          const domElement = event.target as HTMLElement;
-
-          if (
-            domElement.tagName === 'IMG' &&
-            $isRangeSelection(latestSelection) &&
-            latestSelection.getNodes().length === 1
-          ) {
-            clearSelection();
-            setSelected(true);
-          }
-          return false;
-        },
+        RIGHT_CLICK_IMAGE_COMMAND,
+        onClick,
         COMMAND_PRIORITY_LOW,
       ),
       editor.registerCommand(
@@ -295,9 +306,13 @@ export default function ImageComponent({
         COMMAND_PRIORITY_LOW,
       ),
     );
+
+    rootElement?.addEventListener('contextmenu', onRightClick);
+
     return () => {
       isMounted = false;
       unregister();
+      rootElement?.removeEventListener('contextmenu', onRightClick);
     };
   }, [
     clearSelection,
@@ -308,6 +323,8 @@ export default function ImageComponent({
     onDelete,
     onEnter,
     onEscape,
+    onClick,
+    onRightClick,
     setSelected,
   ]);
 

packages/lexical/src/LexicalCommands.ts

@@ -19,9 +19,6 @@ export const SELECTION_CHANGE_COMMAND: LexicalCommand<void> = createCommand(
 );
 export const CLICK_COMMAND: LexicalCommand<MouseEvent> =
   createCommand('CLICK_COMMAND');
-export const CONTEXT_MENU_COMMAND: LexicalCommand<MouseEvent> = createCommand(
-  'CONTEXT_MENU_COMMAND',
-);
 export const DELETE_CHARACTER_COMMAND: LexicalCommand<boolean> = createCommand(
   'DELETE_CHARACTER_COMMAND',
 );

packages/lexical/src/LexicalEvents.ts

@@ -31,7 +31,6 @@ import {
   $setCompositionKey,
   BLUR_COMMAND,
   CLICK_COMMAND,
-  CONTEXT_MENU_COMMAND,
   CONTROLLED_TEXT_INSERTION_COMMAND,
   COPY_COMMAND,
   CUT_COMMAND,
@@ -141,7 +140,6 @@ const rootElementEvents: RootElementEvents = [
   ['compositionend', onCompositionEnd],
   ['input', onInput],
   ['click', onClick],
-  ['contextmenu', PASS_THROUGH_COMMAND],
   ['cut', PASS_THROUGH_COMMAND],
   ['copy', PASS_THROUGH_COMMAND],
   ['dragstart', PASS_THROUGH_COMMAND],
@@ -1168,13 +1166,6 @@ export function addRootElementEvents(
             stopLexicalPropagation(event);
             if (editor.isEditable()) {
               switch (eventName) {
-                case 'contextmenu':
-                  return dispatchCommand(
-                    editor,
-                    CONTEXT_MENU_COMMAND,
-                    event as MouseEvent,
-                  );
-
                 case 'cut':
                   return dispatchCommand(
                     editor,

packages/lexical/src/index.ts

@@ -71,7 +71,6 @@ export {
   CLEAR_EDITOR_COMMAND,
   CLEAR_HISTORY_COMMAND,
   CLICK_COMMAND,
-  CONTEXT_MENU_COMMAND,
   CONTROLLED_TEXT_INSERTION_COMMAND,
   COPY_COMMAND,
   createCommand,