@gientech/modual 2.0.3 → 2.0.5

package/src/modules/search/components/Editor/ui/inline-combobox.tsx

@@ -0,0 +1,368 @@
+import React, {
+  type HTMLAttributes,
+  type ReactNode,
+  type RefObject,
+  createContext,
+  forwardRef,
+  startTransition,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import type { PointRef } from 'slate';
+
+import {
+  Combobox,
+  ComboboxItem,
+  type ComboboxItemProps,
+  ComboboxPopover,
+  ComboboxProvider,
+  Portal,
+  useComboboxContext,
+  useComboboxStore,
+} from '@ariakit/react';
+import { cn } from '@udecode/cn';
+import { filterWords } from '@udecode/plate-combobox';
+import {
+  type UseComboboxInputResult,
+  useComboboxInput,
+  useHTMLInputCursorState,
+} from '@udecode/plate-combobox/react';
+import {
+  type TElement,
+  createPointRef,
+  getPointBefore,
+  insertText,
+  moveSelection,
+} from '@udecode/plate-common';
+import {
+  findNodePath,
+  useComposedRef,
+  useEditorRef,
+} from '@udecode/plate-common/react';
+import { cva } from 'class-variance-authority';
+
+type FilterFn = (
+  item: { keywords?: string[]; value: string },
+  search: string
+) => boolean;
+
+interface InlineComboboxContextValue {
+  filter: FilterFn | false;
+  inputProps: UseComboboxInputResult['props'];
+  inputRef: RefObject<HTMLInputElement>;
+  removeInput: UseComboboxInputResult['removeInput'];
+  setHasEmpty: (hasEmpty: boolean) => void;
+  showTrigger: boolean;
+  trigger: string;
+}
+
+const InlineComboboxContext = createContext<InlineComboboxContextValue>(
+  null as any
+);
+
+export const defaultFilter: FilterFn = ({ keywords = [], value }, search) =>
+  [value, ...keywords].some((keyword) => filterWords(keyword, search));
+
+interface InlineComboboxProps {
+  children: ReactNode;
+  element: TElement;
+  trigger: string;
+  filter?: FilterFn | false;
+  hideWhenNoValue?: boolean;
+  setValue?: (value: string) => void;
+  showTrigger?: boolean;
+  value?: string;
+}
+
+const InlineCombobox = ({
+  children,
+  element,
+  filter = defaultFilter,
+  hideWhenNoValue = false,
+  setValue: setValueProp,
+  showTrigger = true,
+  trigger,
+  value: valueProp,
+}: InlineComboboxProps) => {
+  const editor = useEditorRef();
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const cursorState = useHTMLInputCursorState(inputRef);
+
+  const [valueState, setValueState] = useState('');
+  const hasValueProp = valueProp !== undefined;
+  const value = hasValueProp ? valueProp : valueState;
+
+  const setValue = useCallback(
+    (newValue: string) => {
+      setValueProp?.(newValue);
+
+      if (!hasValueProp) {
+        setValueState(newValue);
+      }
+    },
+    [setValueProp, hasValueProp]
+  );
+
+  /**
+   * Track the point just before the input element so we know where to
+   * insertText if the combobox closes due to a selection change.
+   */
+  const [insertPoint, setInsertPoint] = useState<PointRef | null>(null);
+
+  useEffect(() => {
+    const path = findNodePath(editor, element);
+
+    if (!path) return;
+
+    const point = getPointBefore(editor, path);
+
+    if (!point) return;
+
+    const pointRef = createPointRef(editor, point);
+    setInsertPoint(pointRef);
+
+    return () => {
+      pointRef.unref();
+    };
+  }, [editor, element]);
+
+  const { props: inputProps, removeInput } = useComboboxInput({
+    cancelInputOnBlur: false,
+    cursorState,
+    onCancelInput: (cause) => {
+      if (cause !== 'backspace') {
+        insertText(editor, trigger + value, {
+          at: insertPoint?.current ?? undefined,
+        });
+      }
+      if (cause === 'arrowLeft' || cause === 'arrowRight') {
+        moveSelection(editor, {
+          distance: 1,
+          reverse: cause === 'arrowLeft',
+        });
+      }
+    },
+    ref: inputRef,
+  });
+
+  const [hasEmpty, setHasEmpty] = useState(false);
+
+  const contextValue: InlineComboboxContextValue = useMemo(
+    () => ({
+      filter,
+      inputProps,
+      inputRef,
+      removeInput,
+      setHasEmpty,
+      showTrigger,
+      trigger,
+    }),
+    [
+      trigger,
+      showTrigger,
+      filter,
+      inputRef,
+      inputProps,
+      removeInput,
+      setHasEmpty,
+    ]
+  );
+
+  const store = useComboboxStore({
+    // open: ,
+    setValue: (newValue) => startTransition(() => setValue(newValue)),
+  });
+
+  const items = store.useState('items');
+
+  /**
+   * If there is no active ID and the list of items changes, select the first
+   * item.
+   */
+  useEffect(() => {
+    if (!store.getState().activeId) {
+      store.setActiveId(store.first());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, store]);
+
+  return (
+    <span contentEditable={false}>
+      <ComboboxProvider
+        open={
+          (items.length > 0 || hasEmpty) &&
+          (!hideWhenNoValue || value.length > 0)
+        }
+        store={store}
+      >
+        <InlineComboboxContext.Provider value={contextValue}>
+          {children}
+        </InlineComboboxContext.Provider>
+      </ComboboxProvider>
+    </span>
+  );
+};
+
+const InlineComboboxInput = forwardRef<
+  HTMLInputElement,
+  HTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, propRef) => {
+  const {
+    inputProps,
+    inputRef: contextRef,
+    showTrigger,
+    trigger,
+  } = useContext(InlineComboboxContext);
+
+  const store = useComboboxContext()!;
+  const value = store.useState('value');
+
+  const ref = useComposedRef(propRef, contextRef);
+
+  /**
+   * 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 (
+    <>
+      {showTrigger && trigger}
+
+      <span className="relative min-h-[1lh]">
+        <span
+          aria-hidden="true"
+          className="invisible overflow-hidden text-nowrap"
+        >
+          {value || '\u200B'}
+        </span>
+
+        <Combobox
+          autoSelect
+          className={cn(
+            'absolute left-0 top-0 size-full bg-transparent outline-none',
+            className
+          )}
+          ref={ref}
+          value={value}
+          {...inputProps}
+          {...props}
+        />
+      </span>
+    </>
+  );
+});
+
+InlineComboboxInput.displayName = 'InlineComboboxInput';
+
+const InlineComboboxContent: typeof ComboboxPopover = ({
+  className,
+  ...props
+}) => {
+  // Portal prevents CSS from leaking into popover
+  return (
+    <Portal>
+      <ComboboxPopover
+        className={cn(
+          'z-[500] max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover shadow-md',
+          className
+        )}
+        {...props}
+      />
+    </Portal>
+  );
+};
+
+const comboboxItemVariants = cva(
+  'relative flex h-9 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+  {
+    defaultVariants: {
+      interactive: true,
+    },
+    variants: {
+      interactive: {
+        false: '',
+        true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',
+      },
+    },
+  }
+);
+
+export type InlineComboboxItemProps = {
+  keywords?: string[];
+} & ComboboxItemProps &
+  Required<Pick<ComboboxItemProps, 'value'>>;
+
+const InlineComboboxItem = ({
+  className,
+  keywords,
+  onClick,
+  ...props
+}: InlineComboboxItemProps) => {
+  const { value } = props;
+
+  const { filter, removeInput } = useContext(InlineComboboxContext);
+
+  const store = useComboboxContext()!;
+
+  // Optimization: Do not subscribe to value if filter is false
+  const search = filter && store.useState('value');
+
+  const visible = useMemo(
+    () => !filter || filter({ keywords, value }, search as string),
+    [filter, value, keywords, search]
+  );
+
+  if (!visible) return null;
+
+  return (
+    <ComboboxItem
+      className={cn(comboboxItemVariants(), className)}
+      onClick={(event) => {
+        removeInput(true);
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+};
+
+const InlineComboboxEmpty = ({
+  children,
+  className,
+}: HTMLAttributes<HTMLDivElement>) => {
+  const { setHasEmpty } = useContext(InlineComboboxContext);
+  const store = useComboboxContext()!;
+  const items = store.useState('items');
+
+  useEffect(() => {
+    setHasEmpty(true);
+
+    return () => {
+      setHasEmpty(false);
+    };
+  }, [setHasEmpty]);
+
+  if (items.length > 0) return null;
+
+  return (
+    <div
+      className={cn(comboboxItemVariants({ interactive: false }), className)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxInput,
+  InlineComboboxItem,
+};

package/src/modules/search/components/Editor/ui/input.tsx

@@ -0,0 +1,25 @@
+import { withVariants } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
+
+export const inputVariants = cva(
+  'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    defaultVariants: {
+      h: 'md',
+      variant: 'default',
+    },
+    variants: {
+      h: {
+        md: 'h-10 px-3 py-2',
+        sm: 'h-9 px-3 py-2',
+      },
+      variant: {
+        default:
+          'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        ghost: 'border-none focus-visible:ring-transparent',
+      },
+    },
+  }
+);
+
+export const Input = withVariants('input', inputVariants, ['variant', 'h']);

package/src/modules/search/components/Editor/ui/insert-dropdown-menu.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
+import { ParagraphPlugin, insertEmptyElement } from '@udecode/plate-common';
+import { focusEditor, useEditorRef } from '@udecode/plate-common/react';
+import { HEADING_KEYS } from '@udecode/plate-heading';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+const items = [
+  {
+    items: [
+      {
+        description: 'Paragraph',
+        icon: Icons.paragraph,
+        label: 'Paragraph',
+        value: ParagraphPlugin.key,
+      },
+      {
+        description: 'Heading 1',
+        icon: Icons.h1,
+        label: 'Heading 1',
+        value: HEADING_KEYS.h1,
+      },
+      {
+        description: 'Heading 2',
+        icon: Icons.h2,
+        label: 'Heading 2',
+        value: HEADING_KEYS.h2,
+      },
+      {
+        description: 'Heading 3',
+        icon: Icons.h3,
+        label: 'Heading 3',
+        value: HEADING_KEYS.h3,
+      },
+      {
+        description: 'Quote (⌘+⇧+.)',
+        icon: Icons.blockquote,
+        label: 'Quote',
+        value: BlockquotePlugin.key,
+      },
+      // {
+      //   value: TablePlugin.key,
+      //   label: 'Table',
+      //   description: 'Table',
+      //   icon: Icons.table,
+      // },
+      // {
+      //   value: 'ul',
+      //   label: 'Bulleted list',
+      //   description: 'Bulleted list',
+      //   icon: Icons.ul,
+      // },
+      // {
+      //   value: 'ol',
+      //   label: 'Numbered list',
+      //   description: 'Numbered list',
+      //   icon: Icons.ol,
+      // },
+      // {
+      //   value: HorizontalRulePlugin.key,
+      //   label: 'Divider',
+      //   description: 'Divider (---)',
+      //   icon: Icons.hr,
+      // },
+    ],
+    label: 'Basic blocks',
+  },
+  // {
+  //   label: 'Media',
+  //   items: [
+  //     {
+  //       value: CodeBlockPlugin.key,
+  //       label: 'Code',
+  //       description: 'Code (```)',
+  //       icon: Icons.codeblock,
+  //     },
+  //     {
+  //       value: ImagePlugin.key,
+  //       label: 'Image',
+  //       description: 'Image',
+  //       icon: Icons.image,
+  //     },
+  //     {
+  //       value: MediaEmbedPlugin.key,
+  //       label: 'Embed',
+  //       description: 'Embed',
+  //       icon: Icons.embed,
+  //     },
+  //     {
+  //       value: ExcalidrawPlugin.key,
+  //       label: 'Excalidraw',
+  //       description: 'Excalidraw',
+  //       icon: Icons.excalidraw,
+  //     },
+  //   ],
+  // },
+  // {
+  //   label: 'Inline',
+  //   items: [
+  //     {
+  //       value: LinkPlugin.key,
+  //       label: 'Link',
+  //       description: 'Link',
+  //       icon: Icons.link,
+  //     },
+  //   ],
+  // },
+];
+
+export function InsertDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const openState = useOpenState();
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton isDropdown pressed={openState.open} tooltip="Insert">
+          <Icons.add />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-y-auto"
+      >
+        {items.map(({ items: nestedItems, label }, index) => (
+          <React.Fragment key={label}>
+            {index !== 0 && <DropdownMenuSeparator />}
+
+            <DropdownMenuLabel>{label}</DropdownMenuLabel>
+            {nestedItems.map(
+              ({ icon: Icon, label: itemLabel, value: type }) => (
+                <DropdownMenuItem
+                  className="min-w-[180px]"
+                  key={type}
+                  onSelect={() => {
+                    switch (type) {
+                      // case CodeBlockPlugin.key: {
+                      //   insertEmptyCodeBlock(editor);
+                      //
+                      //   break;
+                      // }
+                      // case ImagePlugin.key: {
+                      //   await insertMedia(editor, { type: ImagePlugin.key });
+                      //
+                      //   break;
+                      // }
+                      // case MediaEmbedPlugin.key: {
+                      //   await insertMedia(editor, {
+                      //     type: MediaEmbedPlugin.key,
+                      //   });
+                      //
+                      //   break;
+                      // }
+                      // case 'ul':
+                      // case 'ol': {
+                      //   insertEmptyElement(editor, ParagraphPlugin.key, {
+                      //     select: true,
+                      //     nextBlock: true,
+                      //   });
+                      //
+                      //   if (settingsStore.get.checkedId(IndentListPlugin.key)) {
+                      //     toggleIndentList(editor, {
+                      //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
+                      //     });
+                      //   } else if (settingsStore.get.checkedId('list')) {
+                      //     toggleList(editor, { type });
+                      //   }
+                      //
+                      //   break;
+                      // }
+                      // case TablePlugin.key: {
+                      //   insertTable(editor);
+                      //
+                      //   break;
+                      // }
+                      // case LinkPlugin.key: {
+                      //   triggerFloatingLink(editor, { focused: true });
+                      //
+                      //   break;
+                      // }
+                      default: {
+                        insertEmptyElement(editor, type, {
+                          nextBlock: true,
+                          select: true,
+                        });
+                      }
+                    }
+
+                    focusEditor(editor);
+                  }}
+                >
+                  <Icon className="mr-2 size-5" />
+                  {itemLabel}
+                </DropdownMenuItem>
+              )
+            )}
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/modules/search/components/Editor/ui/kbd-leaf.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { PlateLeaf } from '@udecode/plate-common/react';
+
+export const KbdLeaf = withRef<typeof PlateLeaf>(
+  ({ children, className, ...props }, ref) => (
+    <PlateLeaf
+      asChild
+      className={cn(
+        'rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <kbd>{children}</kbd>
+    </PlateLeaf>
+  )
+);

package/src/modules/search/components/Editor/ui/link-element.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import type { TLinkElement } from '@udecode/plate-link';
+
+import { cn, withRef } from '@udecode/cn';
+import { PlateElement, useElement } from '@udecode/plate-common/react';
+import { useLink } from '@udecode/plate-link/react';
+
+export const LinkElement = withRef<typeof PlateElement>(
+  ({ children, className, ...props }, ref) => {
+    const element = useElement<TLinkElement>();
+    const { props: linkProps } = useLink({ element });
+
+    return (
+      <PlateElement
+        asChild
+        className={cn(
+          'font-medium text-primary underline decoration-primary underline-offset-4',
+          className
+        )}
+        ref={ref}
+        {...(linkProps as any)}
+        {...props}
+      >
+        <a>{children}</a>
+      </PlateElement>
+    );
+  }
+);