@gientech/modual 1.9.4-fix.1 → 1.9.4-fix.2

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

@@ -1,368 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,218 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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>
-    );
-  }
-);