Combobox rework

apps/www/package.json

@@ -17,6 +17,7 @@
     "typecheck": "yarn prebuild && tsc --noEmit"
   },
   "dependencies": {
+    "@ariakit/react": "0.4.6",
     "@faker-js/faker": "^8.4.1",
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-accessible-icon": "^1.0.3",
@@ -135,7 +136,6 @@
     "slate": "0.102.0",
     "slate-history": "0.100.0",
     "slate-hyperscript": "0.100.0",
-    "slate-react": "0.102.0",
     "slate-test-utils": "1.3.2",
     "sonner": "^1.4.32",
     "tailwind-merge": "^2.2.2",

apps/www/src/registry/default/example/playground-demo.tsx

@@ -112,7 +112,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 
 import { ValueId } from '@/config/customizer-plugins';
 import { captionPlugin } from '@/lib/plate/demo/plugins/captionPlugin';
-import { SLASH_RULES } from '@/lib/plate/demo/values/slashRules';
 import { settingsStore } from '@/components/context/settings-store';
 import { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons';
 import { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons';
@@ -130,7 +129,6 @@ import {
   TodoMarker,
 } from '@/registry/default/plate-ui/indent-todo-marker-component';
 import { MentionCombobox } from '@/registry/default/plate-ui/mention-combobox';
-import { SlashCombobox } from '@/registry/default/plate-ui/slash-combobox';
 
 export const usePlaygroundPlugins = ({
   id,
@@ -179,11 +177,7 @@ export const usePlaygroundPlugins = ({
               triggerPreviousCharPattern: /^$|^[\s"']$/,
             },
           }),
-          createSlashPlugin({
-            options: {
-              rules: SLASH_RULES,
-            },
-          }),
+          createSlashPlugin(),
           createTablePlugin({
             enabled: !!enabled.table,
             options: {
@@ -439,8 +433,6 @@ export default function PlaygroundDemo({ id }: { id?: ValueId }) {
                   <MentionCombobox items={MENTIONABLES} />
                 )}
 
-                <SlashCombobox items={SLASH_RULES} />
-
                 {isEnabled('cursoroverlay', id) && (
                   <CursorOverlay containerRef={containerRef} />
                 )}

apps/www/src/registry/default/plate-ui/inline-combobox.tsx

@@ -0,0 +1,132 @@
+import React, { ReactNode, startTransition, useMemo, useState } from 'react';
+import {
+  Combobox,
+  ComboboxItem,
+  ComboboxPopover,
+  ComboboxProvider,
+  Portal,
+} from '@ariakit/react';
+import { cn } from '@udecode/cn';
+import {
+  BaseComboboxItemWithEditor,
+  matchWords,
+  useComboboxInput,
+  useHTMLInputCursorState,
+} from '@udecode/plate-combobox';
+import { insertText, moveSelection, useEditorRef } from '@udecode/plate-common';
+
+const comboboxItemClassName =
+  'relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none';
+const comboboxItemInteractiveClassName =
+  'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground';
+
+const defaultMatchItem = (
+  { label, aliases = [] }: BaseComboboxItemWithEditor,
+  query: string
+) => [label, ...aliases].some((alias) => matchWords(alias, query));
+
+interface InlineComboboxProps<TItem extends BaseComboboxItemWithEditor> {
+  trigger: string;
+  items: TItem[];
+  matchItem?: (item: TItem, query: string) => boolean;
+  renderItem?: (item: TItem) => ReactNode;
+  renderEmpty?: ReactNode;
+  onSelectItem?: (item: TItem) => void;
+}
+
+export const InlineCombobox = <TItem extends BaseComboboxItemWithEditor>({
+  trigger,
+  items,
+  matchItem = defaultMatchItem,
+  renderItem = ({ label }) => label,
+  renderEmpty,
+  onSelectItem,
+}: InlineComboboxProps<TItem>) => {
+  const editor = useEditorRef();
+  const [value, setValue] = useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const cursorState = useHTMLInputCursorState(inputRef);
+
+  const filteredItems = useMemo(
+    () => items.filter((item) => matchItem(item, value)),
+    [items, matchItem, value]
+  );
+
+  const { removeInput, props: inputProps } = useComboboxInput({
+    ref: inputRef,
+    cursorState,
+    onCancelInput: (cause) => {
+      if (cause !== 'backspace') {
+        insertText(editor, trigger + value);
+      }
+
+      if (cause === 'arrowLeft' || cause === 'arrowRight') {
+        moveSelection(editor, {
+          distance: 1,
+          reverse: cause === 'arrowLeft',
+        });
+      }
+    },
+  });
+
+  /**
+   * To create an auto-resizing input, we render a visually hidden span
+   * containing the input value and position the input element on top of it.
+   * This works well for all cases except when input exceeds the width of the
+   * container.
+   */
+
+  return (
+    <span contentEditable={false}>
+      {trigger}
+
+      <ComboboxProvider
+        open={filteredItems.length > 0 || renderEmpty !== undefined}
+        setValue={(newValue) => startTransition(() => setValue(newValue))}
+      >
+        <span className="relative">
+          <span
+            aria-hidden="true"
+            className="invisible overflow-hidden text-nowrap"
+          >
+            {value}
+          </span>
+
+          <Combobox
+            ref={inputRef}
+            autoSelect
+            value={value}
+            className="absolute left-0 top-0 size-full bg-transparent outline-none"
+            {...inputProps}
+          />
+        </span>
+
+        {/* Portal prevents CSS from leaking into popover */}
+        <Portal>
+          <ComboboxPopover className="z-[500] max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover shadow-md">
+            {filteredItems.map((item) => (
+              <ComboboxItem
+                key={item.value}
+                className={cn(
+                  comboboxItemClassName,
+                  comboboxItemInteractiveClassName
+                )}
+                onClick={() => {
+                  removeInput(true);
+                  item.onSelect?.(editor);
+                  onSelectItem?.(item);
+                }}
+              >
+                {renderItem(item)}
+              </ComboboxItem>
+            ))}
+
+            {filteredItems.length === 0 && renderEmpty && (
+              <div className={comboboxItemClassName}>{renderEmpty}</div>
+            )}
+          </ComboboxPopover>
+        </Portal>
+      </ComboboxProvider>
+    </span>
+  );
+};

apps/www/src/registry/default/plate-ui/slash-input-element.tsx

@@ -1,33 +1,92 @@
-import React from 'react';
-import { cn, withRef } from '@udecode/cn';
-import { getHandler, PlateElement } from '@udecode/plate-common';
-import { useFocused, useSelected } from 'slate-react';
+import React, { ComponentType, SVGProps } from 'react';
+import { withRef } from '@udecode/cn';
+import { BaseComboboxItemWithEditor } from '@udecode/plate-combobox';
+import { PlateElement, toggleNodeType } from '@udecode/plate-common';
+import { ELEMENT_H1, ELEMENT_H2, ELEMENT_H3 } from '@udecode/plate-heading';
+import { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list';
 
-export const SlashInputElement = withRef<
-  typeof PlateElement,
+import { Icons } from '@/components/icons';
+
+import { InlineCombobox } from './inline-combobox';
+
+export type SlashCommandRule = BaseComboboxItemWithEditor & {
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+};
+
+const rules: SlashCommandRule[] = [
   {
-    onClick?: (slashNode: any) => void;
-  }
->(({ className, onClick, ...props }, ref) => {
-  const { children, element } = props;
+    value: ELEMENT_H1,
+    label: 'Heading 1',
+    icon: Icons.h1,
+    onSelect: (editor) => {
+      toggleNodeType(editor, { activeType: ELEMENT_H1 });
+    },
+  },
+  {
+    value: ELEMENT_H2,
+    label: 'Heading 2',
+    icon: Icons.h2,
+    onSelect: (editor) => {
+      toggleNodeType(editor, { activeType: ELEMENT_H2 });
+    },
+  },
+  {
+    value: ELEMENT_H3,
+    label: 'Heading 3',
+    icon: Icons.h3,
+    onSelect: (editor) => {
+      toggleNodeType(editor, { activeType: ELEMENT_H3 });
+    },
+  },
+  {
+    value: ListStyleType.Disc,
+    label: 'Bulleted list',
+    icon: Icons.ul,
+    aliases: ['ul', 'ordered list'],
+    onSelect: (editor) => {
+      toggleIndentList(editor, {
+        listStyleType: ListStyleType.Disc,
+      });
+    },
+  },
+  {
+    value: ListStyleType.Decimal,
+    label: 'Numbered list',
+    icon: Icons.ol,
+    aliases: ['ol', 'unordered list'],
+    onSelect: (editor) => {
+      toggleIndentList(editor, {
+        listStyleType: ListStyleType.Decimal,
+      });
+    },
+  },
+];
 
-  const selected = useSelected();
-  const focused = useFocused();
+export const SlashInputElement = withRef<typeof PlateElement>(
+  ({ className, ...props }, ref) => {
+    const { children, element } = props;
 
-  return (
-    <PlateElement
-      ref={ref}
-      asChild
-      data-slate-value={element.value}
-      className={cn(
-        'inline-block rounded-md px-1.5 py-0.5 align-baseline text-sm',
-        selected && focused && 'ring-2 ring-ring',
-        className
-      )}
-      onClick={getHandler(onClick, element)}
-      {...props}
-    >
-      <span>/{children}</span>
-    </PlateElement>
-  );
-});
+    return (
+      <PlateElement
+        as="span"
+        ref={ref}
+        data-slate-value={element.value}
+        {...props}
+      >
+        <InlineCombobox
+          trigger="/"
+          items={rules}
+          renderItem={({ icon: Icon, label }) => (
+            <>
+              <Icon className="mr-2 size-4" aria-hidden />
+              {label}
+            </>
+          )}
+          renderEmpty="No matching commands found"
+        />
+
+        {children}
+      </PlateElement>
+    );
+  }
+);