Add contenteditable people picker prototypes

change/@fluentui-react-components-7470075f-b93d-4527-8daa-b2bca22b7cd1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Picker prototype",
+  "packageName": "@fluentui/react-components",
+  "email": "asamec@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-components/package.json

@@ -86,7 +86,9 @@
     "@fluentui/react-rating": "^9.0.10",
     "@fluentui/react-search": "^9.0.6",
     "@fluentui/react-teaching-popover": "^9.1.6",
-    "@fluentui/react-tag-picker": "^9.0.4"
+    "@fluentui/react-tag-picker": "^9.0.4",
+    "lexical": "^0.15.0",
+    "@lexical/react": "^0.15.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",

packages/react-components/react-components/stories/ContentEditableTags/LexicalEditor/AutocompletePlugin.tsx

@@ -0,0 +1,126 @@
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
+import * as React from 'react';
+import { people } from '../data';
+import { AutocompletePluginCore } from './AutocompletePluginCore';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    ...shorthands.gap('2px'),
+    maxWidth: '400px',
+  },
+  hidden: {
+    display: 'none',
+  },
+  item: {
+    cursor: 'pointer',
+  },
+  selected: {
+    fontWeight: 'bold',
+  },
+});
+
+const options = people;
+
+const useFilteredList = (filter: string) => {
+  return React.useMemo(
+    () => (filter.length ? options.filter(option => option.toLowerCase().includes(filter.toLowerCase())) : []),
+    [filter],
+  );
+};
+
+export const AutocompletePlugin = ({ id }: { id: string }) => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [query, setQuery] = React.useState('');
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+  const styles = useStyles();
+  const filtered = useFilteredList(query);
+
+  React.useEffect(() => {
+    setSelectedIndex(0);
+    setIsOpen(!!filtered.length);
+  }, [filtered]);
+
+  const selectedItem = React.useMemo(() => filtered[selectedIndex], [selectedIndex, filtered]);
+
+  React.useEffect(() => {}, [selectedItem]);
+
+  const onArrowKeyUp = React.useCallback(
+    event => {
+      if (isOpen) {
+        setSelectedIndex(currentIndex => {
+          return Math.max(0, currentIndex - 1);
+        });
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return true;
+      }
+      return false;
+    },
+    [isOpen, selectedIndex],
+  );
+
+  const onArrowKeyDown = React.useCallback(
+    event => {
+      if (isOpen) {
+        setSelectedIndex(currentIndex => {
+          return Math.min(currentIndex + 1, filtered.length - 1);
+        });
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return true;
+      }
+      return false;
+    },
+    [isOpen, selectedIndex],
+  );
+
+  return (
+    <AutocompletePluginCore
+      id={id}
+      isOpen={isOpen}
+      query={query}
+      onQueryChange={newQuery => setQuery(newQuery)}
+      autocompleteItem={isOpen ? selectedItem : undefined}
+      onArrowKeyUp={onArrowKeyUp}
+      onArrowKeyDown={onArrowKeyDown}
+      onEscape={() => {
+        if (isOpen) {
+          setIsOpen(false);
+          return true;
+        }
+        return false;
+      }}
+    >
+      {({ onClick, getItemId }) => {
+        return (
+          <div
+            className={mergeClasses(styles.root, !isOpen && styles.hidden)}
+            id={id}
+            role="listbox"
+            aria-expanded={isOpen}
+          >
+            {filtered.map((option, index) => (
+              <div
+                id={getItemId(id, option)}
+                aria-label={option}
+                role="option"
+                key={option}
+                className={mergeClasses(styles.item, index === selectedIndex && styles.selected)}
+                onMouseOver={() => {
+                  setSelectedIndex(index);
+                }}
+                onClick={onClick}
+              >
+                {option}
+              </div>
+            ))}
+          </div>
+        );
+      }}
+    </AutocompletePluginCore>
+  );
+};

packages/react-components/react-components/stories/ContentEditableTags/LexicalEditor/AutocompletePluginCore.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $getSelection,
+  $isDecoratorNode,
+  $isNodeSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_CRITICAL,
+  COMMAND_PRIORITY_EDITOR,
+  INSERT_PARAGRAPH_COMMAND,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+} from 'lexical';
+import { $createNamePillNode } from './NamePillNode';
+
+const getAutocompleteItemId = (autocompleteId: string, value: string) => {
+  return `${autocompleteId}_item-${value}`;
+};
+
+type AutocompletePluginCoreProps = {
+  id: string;
+  isOpen: boolean;
+  onQueryChange: (newQuery: string) => void;
+  children: (renderProps: { onClick: () => void; getItemId: typeof getAutocompleteItemId }) => React.ReactElement;
+  autocompleteItem?: string;
+  onArrowKeyUp?: (event: KeyboardEvent) => boolean;
+  onArrowKeyDown?: (event: KeyboardEvent) => boolean;
+  onEscape?: (event: KeyboardEvent) => boolean;
+  query?: string;
+};
+
+export const AutocompletePluginCore: React.FC<AutocompletePluginCoreProps> = ({
+  id,
+  isOpen,
+  onQueryChange,
+  autocompleteItem,
+  children,
+  onArrowKeyUp,
+  onArrowKeyDown,
+  onEscape,
+  query,
+}) => {
+  const [editor] = useLexicalComposerContext();
+
+  const appendSelectedItem = React.useCallback(() => {
+    const sel = $getSelection();
+
+    // handle deletion of single selected node
+    if ($isNodeSelection(sel) && sel.getNodes().length === 1) {
+      const selectedNode = sel.getNodes()[0];
+      selectedNode.remove();
+      return true;
+    }
+
+    // handle adding of new node from selection
+    if ($isRangeSelection(sel) && sel.getNodes().length === 1) {
+      if (autocompleteItem) {
+        const node = sel.getNodes()[0];
+        const newNode = $createNamePillNode(autocompleteItem);
+        node.replace(newNode);
+        newNode.selectEnd();
+        return true;
+      }
+    }
+    return false;
+  }, [autocompleteItem]);
+
+  const onBackspace = React.useCallback(() => {
+    const sel = $getSelection();
+
+    if ($isNodeSelection(sel) && sel.getNodes().length === 1) {
+      const selectedNode = sel.getNodes()[0];
+      if ($isDecoratorNode(selectedNode)) {
+        // Have to move the selection at the end and let the native capslock handle the deletion
+        // otherwise 2 of the nodes will be deleted for some reason. This feels like a bug in lexical.
+        selectedNode.selectEnd();
+      }
+    }
+    return false;
+  }, []);
+
+  const onDelete = React.useCallback(() => {
+    const sel = $getSelection();
+
+    if ($isNodeSelection(sel) && sel.getNodes().length === 1) {
+      const selectedNode = sel.getNodes()[0];
+      if ($isDecoratorNode(selectedNode)) {
+        // Have to move the selection at the start and let the native delete handle the deletion
+        // otherwise 2 of the nodes will be deleted for some reason. This feels like a bug in lexical.
+        selectedNode.selectStart();
+      }
+    }
+
+    return false;
+  }, []);
+
+  React.useEffect(() => {
+    return editor.registerCommand(KEY_ENTER_COMMAND, appendSelectedItem, COMMAND_PRIORITY_CRITICAL);
+  });
+
+  React.useEffect(() => {
+    return editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_CRITICAL);
+  });
+  React.useEffect(() => {
+    return editor.registerCommand(KEY_BACKSPACE_COMMAND, onBackspace, COMMAND_PRIORITY_CRITICAL);
+  });
+  React.useEffect(() => {
+    return editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_CRITICAL);
+  });
+
+  // Update the activedescendant on the parent element to the currently selected item
+  React.useEffect(() => {
+    const editorElement = editor.getRootElement();
+    if (editorElement && autocompleteItem) {
+      editorElement.setAttribute('aria-activedescendant', getAutocompleteItemId(id, autocompleteItem));
+    }
+  }, [autocompleteItem, editor, id, query]);
+
+  React.useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        const sel = $getSelection();
+        if (!sel) {
+          return;
+        }
+
+        const editorElement = editor.getRootElement();
+
+        const nodes = sel.getNodes();
+        if ($isRangeSelection(sel) && nodes.length === 1) {
+          onQueryChange(nodes[0].getTextContent());
+          if (!isOpen) {
+            editorElement?.setAttribute('aria-activedescendant', '');
+          }
+        }
+
+        if ($isNodeSelection(sel)) {
+          const htmlElement = editor.getElementByKey(nodes[0].__key);
+
+          if (editorElement && htmlElement) {
+            editorElement.setAttribute('aria-activedescendant', htmlElement.id);
+          }
+          // when node is selected, clear query so that the autocomplete is not shown
+          onQueryChange('');
+        }
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor, isOpen, autocompleteItem, query, onQueryChange]);
+
+  React.useEffect(() => {
+    return editor.registerCommand(
+      INSERT_PARAGRAPH_COMMAND,
+      () => {
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor]);
+
+  React.useEffect(() => {
+    return editor.registerCommand(
+      KEY_ARROW_LEFT_COMMAND,
+      () => {
+        editor.getRootElement()?.setAttribute('aria-activedescendant', '');
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor]);
+  React.useEffect(() => {
+    return editor.registerCommand(
+      KEY_ARROW_RIGHT_COMMAND,
+      () => {
+        editor.getRootElement()?.setAttribute('aria-activedescendant', '');
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor]);
+
+  React.useEffect(() => {
+    return editor.registerCommand(
+      KEY_ARROW_UP_COMMAND,
+      payload => {
+        return onArrowKeyUp?.(payload) ?? false;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor, onArrowKeyUp]);
+
+  React.useEffect(() => {
+    return editor.registerCommand(
+      KEY_ARROW_DOWN_COMMAND,
+      payload => {
+        return onArrowKeyDown?.(payload) ?? false;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor, onArrowKeyDown]);
+
+  const onClick = React.useCallback(() => {
+    editor.update(appendSelectedItem);
+  }, [appendSelectedItem, editor]);
+
+  return children({ onClick, getItemId: getAutocompleteItemId });
+};