[0.6] More Typeahead Changes (facebook#3112)

acusti · Oct 5, 2022 · 312161b · 312161b
1 parent 66c1910
commit 312161b
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 44 deletions.
diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css
@@ -302,7 +302,6 @@ pre::-webkit-scrollbar-thumb {
   background-color: #fff;
   border-radius: 8px;
   border: 0;
-  max-width: 250px;
 }
 
 .typeahead-popover li.active {
@@ -341,6 +340,18 @@ pre::-webkit-scrollbar-thumb {
   background-size: contain;
 }
 
+.component-picker-menu {
+  width: 200px;
+}
+
+.mentions-menu {
+  width: 250px;
+}
+
+.auto-embed-menu {
+  width: 150px;
+}
+
 i.palette {
   background-image: url(images/icons/palette.svg);
 }

diff --git a/packages/lexical-playground/src/plugins/AutoEmbedPlugin/index.tsx b/packages/lexical-playground/src/plugins/AutoEmbedPlugin/index.tsx
@@ -292,23 +292,29 @@ export default function AutoEmbedPlugin(): JSX.Element {
         onOpenEmbedModalForConfig={openEmbedModal}
         getMenuOptions={getMenuOptions}
         menuRenderFn={(
-          anchorElement,
+          anchorElementRef,
           {selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex},
         ) =>
-          anchorElement
+          anchorElementRef.current
             ? ReactDOM.createPortal(
-                <AutoEmbedMenu
-                  options={options}
-                  selectedItemIndex={selectedIndex}
-                  onOptionClick={(option: AutoEmbedOption, index: number) => {
-                    setHighlightedIndex(index);
-                    selectOptionAndCleanUp(option);
-                  }}
-                  onOptionMouseEnter={(index: number) => {
-                    setHighlightedIndex(index);
-                  }}
-                />,
-                anchorElement,
+                <div
+                  className="typeahead-popover auto-embed-menu"
+                  style={{
+                    marginLeft: anchorElementRef.current.style.width,
+                  }}>
+                  <AutoEmbedMenu
+                    options={options}
+                    selectedItemIndex={selectedIndex}
+                    onOptionClick={(option: AutoEmbedOption, index: number) => {
+                      setHighlightedIndex(index);
+                      selectOptionAndCleanUp(option);
+                    }}
+                    onOptionMouseEnter={(index: number) => {
+                      setHighlightedIndex(index);
+                    }}
+                  />
+                </div>,
+                anchorElementRef.current,
               )
             : null
         }

diff --git a/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx b/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
@@ -370,12 +370,12 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
         triggerFn={checkForTriggerMatch}
         options={options}
         menuRenderFn={(
-          anchorElement,
+          anchorElementRef,
           {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
         ) =>
-          anchorElement && options.length
+          anchorElementRef.current && options.length
             ? ReactDOM.createPortal(
-                <div className="typeahead-popover">
+                <div className="typeahead-popover component-picker-menu">
                   <ul>
                     {options.map((option, i: number) => (
                       <ComponentPickerMenuItem
@@ -394,7 +394,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
                     ))}
                   </ul>
                 </div>,
-                anchorElement,
+                anchorElementRef.current,
               )
             : null
         }

diff --git a/packages/lexical-playground/src/plugins/MentionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/MentionsPlugin/index.tsx
@@ -688,12 +688,12 @@ export default function NewMentionsPlugin(): JSX.Element | null {
       triggerFn={checkForMentionMatch}
       options={options}
       menuRenderFn={(
-        anchorElement,
+        anchorElementRef,
         {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
       ) =>
-        anchorElement && results.length
+        anchorElementRef.current && results.length
           ? ReactDOM.createPortal(
-              <div className="typeahead-popover">
+              <div className="typeahead-popover mentions-menu">
                 <ul>
                   {options.map((option, i: number) => (
                     <MentionsTypeaheadMenuItem
@@ -712,7 +712,7 @@ export default function NewMentionsPlugin(): JSX.Element | null {
                   ))}
                 </ul>
               </div>,
-              anchorElement,
+              anchorElementRef.current,
             )
           : null
       }

diff --git a/packages/lexical-react/flow/LexicalTypeaheadMenuPlugin.js.flow b/packages/lexical-react/flow/LexicalTypeaheadMenuPlugin.js.flow
@@ -37,7 +37,7 @@ declare export var SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
 }>;
 
 export type MenuRenderFn<TOption> = (
-  anchorElement: HTMLElement | null,
+  anchorElementRef: React$ElementRef<HTMLElement | null>,
   itemProps: {
     selectedIndex: number | null,
     selectOptionAndCleanUp: (option: TOption) => void,

diff --git a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
@@ -47,7 +47,6 @@ export type QueryMatch = {
 
 export type Resolution = {
   match: QueryMatch;
-  position: 'start' | 'end';
   getRect: () => DOMRect;
 };
 
@@ -70,7 +69,7 @@ export class TypeaheadOption {
 }
 
 export type MenuRenderFn<TOption extends TypeaheadOption> = (
-  anchorElement: HTMLElement | null,
+  anchorElementRef: MutableRefObject<HTMLElement | null>,
   itemProps: {
     selectedIndex: number | null;
     selectOptionAndCleanUp: (option: TOption) => void;
@@ -331,15 +330,15 @@ export const SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND: LexicalCommand<{
 function LexicalPopoverMenu<TOption extends TypeaheadOption>({
   close,
   editor,
-  anchorElement,
+  anchorElementRef,
   resolution,
   options,
   menuRenderFn,
   onSelectOption,
 }: {
   close: () => void;
   editor: LexicalEditor;
-  anchorElement: HTMLElement;
+  anchorElementRef: MutableRefObject<HTMLElement>;
   resolution: Resolution;
   options: Array<TOption>;
   menuRenderFn: MenuRenderFn<TOption>;
@@ -538,7 +537,7 @@ function LexicalPopoverMenu<TOption extends TypeaheadOption>({
   );
 
   return menuRenderFn(
-    anchorElement,
+    anchorElementRef,
     listItemProps,
     resolution.match.matchingString,
   );
@@ -595,12 +594,9 @@ function useMenuAnchorRef(
     if (rootElement !== null && resolution !== null) {
       const {left, top, width, height} = resolution.getRect();
       containerDiv.style.top = `${top + window.pageYOffset}px`;
-      containerDiv.style.left = `${
-        left +
-        (resolution.position === 'start' ? 0 : width) +
-        window.pageXOffset
-      }px`;
+      containerDiv.style.left = `${left + window.pageXOffset}px`;
       containerDiv.style.height = `${height}px`;
+      containerDiv.style.width = `${width}px`;
 
       if (!containerDiv.isConnected) {
         containerDiv.setAttribute('aria-label', 'Typeahead menu');
@@ -623,6 +619,11 @@ function useMenuAnchorRef(
         if (rootElement !== null) {
           rootElement.removeAttribute('aria-controls');
         }
+
+        const containerDiv = anchorElementRef.current;
+        if (containerDiv !== null && containerDiv.isConnected) {
+          containerDiv.remove();
+        }
       };
     }
   }, [editor, positionMenu, resolution]);
@@ -659,7 +660,6 @@ export type TypeaheadMenuPluginProps<TOption extends TypeaheadOption> = {
   options: Array<TOption>;
   menuRenderFn: MenuRenderFn<TOption>;
   triggerFn: TriggerFn;
-  position?: 'start' | 'end';
   onOpen?: (resolution: Resolution) => void;
   onClose?: () => void;
 };
@@ -677,7 +677,6 @@ export function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({
   onClose,
   menuRenderFn,
   triggerFn,
-  position = 'start',
 }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
   const [resolution, setResolution] = useState<Resolution | null>(null);
@@ -732,7 +731,6 @@ export function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({
               openTypeahead({
                 getRect: () => range.getBoundingClientRect(),
                 match,
-                position,
               }),
             );
             return;
@@ -753,7 +751,6 @@ export function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({
     triggerFn,
     onQueryChange,
     resolution,
-    position,
     closeTypeahead,
     openTypeahead,
   ]);
@@ -763,7 +760,7 @@ export function LexicalTypeaheadMenuPlugin<TOption extends TypeaheadOption>({
       close={closeTypeahead}
       resolution={resolution}
       editor={editor}
-      anchorElement={anchorElementRef.current}
+      anchorElementRef={anchorElementRef}
       options={options}
       menuRenderFn={menuRenderFn}
       onSelectOption={onSelectOption}
@@ -782,14 +779,12 @@ type NodeMenuPluginProps<TOption extends TypeaheadOption> = {
   nodeKey: NodeKey | null;
   onClose?: () => void;
   onOpen?: (resolution: Resolution) => void;
-  position?: 'start' | 'end';
   menuRenderFn: MenuRenderFn<TOption>;
 };
 
 export function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({
   options,
   nodeKey,
-  position = 'end',
   onClose,
   onOpen,
   onSelectOption,
@@ -832,22 +827,21 @@ export function LexicalNodeMenuPlugin<TOption extends TypeaheadOption>({
                 matchingString: text,
                 replaceableString: text,
               },
-              position,
             }),
           );
         }
       });
     } else if (nodeKey == null && resolution != null) {
       closeNodeMenu();
     }
-  }, [closeNodeMenu, editor, nodeKey, openNodeMenu, position, resolution]);
+  }, [closeNodeMenu, editor, nodeKey, openNodeMenu, resolution]);
 
   return resolution === null || editor === null ? null : (
     <LexicalPopoverMenu
       close={closeNodeMenu}
       resolution={resolution}
       editor={editor}
-      anchorElement={anchorElementRef.current}
+      anchorElementRef={anchorElementRef}
       options={options}
       menuRenderFn={menuRenderFn}
       onSelectOption={onSelectOption}