FloatingUI Menu Positioning

facebook · Dec 9, 2024 · 9bfcfa3 · 9bfcfa3
1 parent bcaf785
commit 9bfcfa3
Show file tree

Hide file tree

Showing 7 changed files with 271 additions and 76 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-react/package.json b/packages/lexical-react/package.json
@@ -10,6 +10,7 @@
   "license": "MIT",
   "version": "0.21.0",
   "dependencies": {
+    "@floating-ui/react": "^0.27.0",
     "@lexical/clipboard": "0.21.0",
     "@lexical/code": "0.21.0",
     "@lexical/devtools-core": "0.21.0",

diff --git a/packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx b/packages/lexical-react/src/LexicalAutoEmbedPlugin.tsx
@@ -16,7 +16,6 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {
   LexicalNodeMenuPlugin,
   MenuOption,
-  MenuRenderFn,
 } from '@lexical/react/LexicalNodeMenuPlugin';
 import {mergeRegister} from '@lexical/utils';
 import {
@@ -82,15 +81,13 @@ type LexicalAutoEmbedPluginProps<TEmbedConfig extends EmbedConfig> = {
     embedFn: () => void,
     dismissFn: () => void,
   ) => Array<AutoEmbedOption>;
-  menuRenderFn: MenuRenderFn<AutoEmbedOption>;
   menuCommandPriority?: CommandListenerPriority;
 };
 
 export function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({
   embedConfigs,
   onOpenEmbedModalForConfig,
   getMenuOptions,
-  menuRenderFn,
   menuCommandPriority = COMMAND_PRIORITY_LOW,
 }: LexicalAutoEmbedPluginProps<TEmbedConfig>): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
@@ -233,7 +230,6 @@ export function LexicalAutoEmbedPlugin<TEmbedConfig extends EmbedConfig>({
       onClose={reset}
       onSelectOption={onSelectOption}
       options={options}
-      menuRenderFn={menuRenderFn}
       commandPriority={menuCommandPriority}
     />
   ) : null;

diff --git a/packages/lexical-react/src/LexicalContextMenuPlugin.tsx b/packages/lexical-react/src/LexicalContextMenuPlugin.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type {MenuRenderFn, MenuResolution} from './shared/LexicalMenu';
+import type {MenuResolution} from './shared/LexicalMenu';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {calculateZoomLevel} from '@lexical/utils';
@@ -15,8 +15,8 @@ import {
   LexicalNode,
 } from 'lexical';
 import {
-  MutableRefObject,
-  ReactPortal,
+  // MutableRefObject,
+  // ReactPortal,
   useCallback,
   useEffect,
   useState,
@@ -25,19 +25,6 @@ import * as React from 'react';
 
 import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu';
 
-export type ContextMenuRenderFn<TOption extends MenuOption> = (
-  anchorElementRef: MutableRefObject<HTMLElement | null>,
-  itemProps: {
-    selectedIndex: number | null;
-    selectOptionAndCleanUp: (option: TOption) => void;
-    setHighlightedIndex: (index: number) => void;
-    options: Array<TOption>;
-  },
-  menuProps: {
-    setMenuRef: (element: HTMLElement | null) => void;
-  },
-) => ReactPortal | JSX.Element | null;
-
 export type LexicalContextMenuPluginProps<TOption extends MenuOption> = {
   onSelectOption: (
     option: TOption,
@@ -49,7 +36,6 @@ export type LexicalContextMenuPluginProps<TOption extends MenuOption> = {
   onClose?: () => void;
   onWillOpen?: (event: MouseEvent) => void;
   onOpen?: (resolution: MenuResolution) => void;
-  menuRenderFn: ContextMenuRenderFn<TOption>;
   anchorClassName?: string;
   commandPriority?: CommandListenerPriority;
   parent?: HTMLElement;
@@ -63,7 +49,6 @@ export function LexicalContextMenuPlugin<TOption extends MenuOption>({
   onClose,
   onOpen,
   onSelectOption,
-  menuRenderFn: contextMenuRenderFn,
   anchorClassName,
   commandPriority = COMMAND_PRIORITY_LOW,
   parent,
@@ -153,17 +138,10 @@ export function LexicalContextMenuPlugin<TOption extends MenuOption>({
       editor={editor}
       anchorElementRef={anchorElementRef}
       options={options}
-      menuRenderFn={(anchorRef, itemProps) =>
-        contextMenuRenderFn(anchorRef, itemProps, {
-          setMenuRef: (ref) => {
-            menuRef.current = ref;
-          },
-        })
-      }
       onSelectOption={onSelectOption}
       commandPriority={commandPriority}
     />
   );
 }
 
-export {MenuOption, MenuRenderFn, MenuResolution};
+export {MenuOption, MenuResolution};
diff --git a/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx b/packages/lexical-react/src/LexicalNodeMenuPlugin.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import type {MenuRenderFn, MenuResolution} from './shared/LexicalMenu';
+import type {MenuResolution} from './shared/LexicalMenu';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {
@@ -33,7 +33,6 @@ export type NodeMenuPluginProps<TOption extends MenuOption> = {
   nodeKey: NodeKey | null;
   onClose?: () => void;
   onOpen?: (resolution: MenuResolution) => void;
-  menuRenderFn: MenuRenderFn<TOption>;
   anchorClassName?: string;
   commandPriority?: CommandListenerPriority;
   parent?: HTMLElement;
@@ -45,7 +44,6 @@ export function LexicalNodeMenuPlugin<TOption extends MenuOption>({
   onClose,
   onOpen,
   onSelectOption,
-  menuRenderFn,
   anchorClassName,
   commandPriority = COMMAND_PRIORITY_LOW,
   parent,
@@ -119,11 +117,10 @@ export function LexicalNodeMenuPlugin<TOption extends MenuOption>({
       editor={editor}
       anchorElementRef={anchorElementRef}
       options={options}
-      menuRenderFn={menuRenderFn}
       onSelectOption={onSelectOption}
       commandPriority={commandPriority}
     />
   );
 }
 
-export {MenuOption, MenuRenderFn, MenuResolution};
+export {MenuOption, MenuResolution};
diff --git a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
@@ -7,7 +7,6 @@
  */
 
 import type {
-  MenuRenderFn,
   MenuResolution,
   MenuTextMatch,
   TriggerFn,
@@ -20,15 +19,14 @@ import {
   $isTextNode,
   COMMAND_PRIORITY_LOW,
   CommandListenerPriority,
-  createCommand,
+  // createCommand,
   getDOMSelection,
-  LexicalCommand,
+  // LexicalCommand,
   LexicalEditor,
   RangeSelection,
   TextNode,
 } from 'lexical';
 import {useCallback, useEffect, useState} from 'react';
-import * as React from 'react';
 import {startTransition} from 'shared/reactPatches';
 
 import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu';
@@ -140,11 +138,6 @@ export function getScrollParent(
 
 export {useDynamicPositioning} from './shared/LexicalMenu';
 
-export const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
-  index: number;
-  option: MenuOption;
-}> = createCommand('SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND');
-
 export function useBasicTypeaheadTriggerMatch(
   trigger: string,
   {minLength = 1, maxLength = 75}: {minLength?: number; maxLength?: number},
@@ -191,7 +184,6 @@ export type TypeaheadMenuPluginProps<TOption extends MenuOption> = {
     matchingString: string,
   ) => void;
   options: Array<TOption>;
-  menuRenderFn: MenuRenderFn<TOption>;
   triggerFn: TriggerFn;
   onOpen?: (resolution: MenuResolution) => void;
   onClose?: () => void;
@@ -206,7 +198,6 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
   onSelectOption,
   onOpen,
   onClose,
-  menuRenderFn,
   triggerFn,
   anchorClassName,
   commandPriority = COMMAND_PRIORITY_LOW,
@@ -305,12 +296,11 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
       editor={editor}
       anchorElementRef={anchorElementRef}
       options={options}
-      menuRenderFn={menuRenderFn}
       shouldSplitNodeWithQuery={true}
       onSelectOption={onSelectOption}
       commandPriority={commandPriority}
     />
   );
 }
 
-export {MenuOption, MenuRenderFn, MenuResolution, MenuTextMatch, TriggerFn};
+export {MenuOption, MenuResolution, MenuTextMatch, TriggerFn};