@gientech/modual 1.3.3 → 1.3.4

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

@@ -1,177 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import type { ClassNames, TEditor } from '@udecode/plate-common';
-import type { DropTargetMonitor } from 'react-dnd';
-
-import { cn, withRef } from '@udecode/cn';
-import {
-  type PlateElementProps,
-  useEditorRef,
-} from '@udecode/plate-common/react';
-import {
-  type DragItemNode,
-  useDraggable,
-  useDraggableState,
-} from '@udecode/plate-dnd';
-import { BlockSelectionPlugin } from '@udecode/plate-selection/react';
-
-import { Icons } from './icons';
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipPortal,
-  TooltipTrigger,
-} from './tooltip';
-
-export interface DraggableProps
-  extends PlateElementProps,
-  ClassNames<{
-    /** Block. */
-    block: string;
-
-    /** Block and gutter. */
-    blockAndGutter: string;
-
-    /** Block toolbar in the gutter. */
-    blockToolbar: string;
-
-    /**
-     * Block toolbar wrapper in the gutter left. It has the height of a line
-     * of the block.
-     */
-    blockToolbarWrapper: string;
-
-    blockWrapper: string;
-
-    /** Button to dnd the block, in the block toolbar. */
-    dragHandle: string;
-
-    /** Icon of the drag button, in the drag icon. */
-    dragIcon: string;
-
-    /** Show a dropline above or below the block when dragging a block. */
-    dropLine: string;
-
-    /** Gutter at the left side of the editor. It has the height of the block */
-    gutterLeft: string;
-  }> {
-  /**
-   * Intercepts the drop handling. If `false` is returned, the default drop
-   * behavior is called after. If `true` is returned, the default behavior is
-   * not called.
-   */
-  onDropHandler?: (
-    editor: TEditor,
-    props: {
-      dragItem: DragItemNode;
-      id: string;
-      monitor: DropTargetMonitor<DragItemNode, unknown>;
-      nodeRef: any;
-    }
-  ) => boolean;
-}
-
-const DragHandle = () => {
-  const editor = useEditorRef();
-
-  return (
-    <Tooltip>
-      <TooltipTrigger type="button">
-        <Icons.dragHandle
-          className="size-4 text-muted-foreground"
-          onClick={(event) => {
-            event.stopPropagation();
-            event.preventDefault();
-
-            // if (element.id) {
-            //   editor.getApi(BlockSelectionPlugin).blockSelection.addSelectedRow(element.id as string);
-            //   api.blockContextMenu.show(editor.id, event as any);
-            // }
-          }}
-          onMouseDown={() => {
-            editor
-              .getApi(BlockSelectionPlugin)
-              .blockSelection.resetSelectedIds();
-          }}
-        />
-      </TooltipTrigger>
-      <TooltipPortal>
-        <TooltipContent>Drag to move</TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
-  );
-};
-
-export const Draggable = withRef<'div', DraggableProps>(
-  ({ className, classNames = {}, onDropHandler, ...props }, ref) => {
-    const { children, element } = props;
-
-    const state = useDraggableState({ element, onDropHandler });
-    const { dropLine, isDragging, isHovered } = state;
-    const {
-      droplineProps,
-      groupProps,
-      gutterLeftProps,
-      handleRef,
-      previewRef,
-    } = useDraggable(state);
-
-    return (
-      <div
-        className={cn(
-          'relative',
-          isDragging && 'opacity-50',
-          'group',
-          className
-        )}
-        ref={ref}
-        {...groupProps}
-      >
-        <div
-          className={cn(
-            'pointer-events-none absolute -top-px z-50 flex h-full -translate-x-full cursor-text opacity-0 group-hover:opacity-100',
-            classNames.gutterLeft
-          )}
-          {...gutterLeftProps}
-        >
-          <div className={cn('flex h-[1.5em]', classNames.blockToolbarWrapper)}>
-            <div
-              className={cn(
-                'pointer-events-auto mr-1 flex items-center',
-                classNames.blockToolbar
-              )}
-            >
-              <div
-                className="size-4"
-                data-key={element.id as string}
-                ref={handleRef}
-              >
-                {isHovered && <DragHandle />}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className={classNames.blockWrapper} ref={previewRef}>
-          {children}
-
-          {!!dropLine && (
-            <div
-              className={cn(
-                'absolute inset-x-0 h-0.5 opacity-100',
-                'bg-ring',
-                dropLine === 'top' && '-top-px',
-                dropLine === 'bottom' && '-bottom-px',
-                classNames.dropLine
-              )}
-              {...droplineProps}
-            />
-          )}
-        </div>
-      </div>
-    );
-  }
-);

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

@@ -1,180 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useCallback, useState } from 'react';
-
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import {
-  cn,
-  createPrimitiveElement,
-  withCn,
-  withProps,
-  withRef,
-  withVariants,
-} from '@udecode/cn';
-import { cva } from 'class-variance-authority';
-
-import { Icons } from './icons';
-
-export const DropdownMenu = DropdownMenuPrimitive.Root;
-
-export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-export const DropdownMenuSubTrigger = withRef<
-  typeof DropdownMenuPrimitive.SubTrigger,
-  {
-    inset?: boolean;
-  }
->(({ children, className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className
-    )}
-    ref={ref}
-    {...props}
-  >
-    {children}
-    <Icons.chevronRight className="ml-auto size-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-
-export const DropdownMenuSubContent = withCn(
-  DropdownMenuPrimitive.SubContent,
-  'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'
-);
-
-const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, {
-  className: cn(
-    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'
-  ),
-  sideOffset: 4,
-});
-
-export const DropdownMenuContent = withRef<
-  typeof DropdownMenuPrimitive.Content
->(({ ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuContentVariants ref={ref} {...props} />
-  </DropdownMenuPrimitive.Portal>
-));
-
-const menuItemVariants = cva(
-  cn(
-    'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
-    'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
-  ),
-  {
-    variants: {
-      inset: {
-        true: 'pl-8',
-      },
-    },
-  }
-);
-
-export const DropdownMenuItem = withVariants(
-  DropdownMenuPrimitive.Item,
-  menuItemVariants,
-  ['inset']
-);
-
-export const DropdownMenuCheckboxItem = withRef<
-  typeof DropdownMenuPrimitive.CheckboxItem
->(({ children, className, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    className={cn(
-      'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      'cursor-pointer',
-      className
-    )}
-    ref={ref}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Icons.check className="size-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-
-export const DropdownMenuRadioItem = withRef<
-  typeof DropdownMenuPrimitive.RadioItem,
-  {
-    hideIcon?: boolean;
-  }
->(({ children, className, hideIcon, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    className={cn(
-      'relative flex select-none items-center rounded-sm pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      'h-9 cursor-pointer px-2 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',
-      className
-    )}
-    ref={ref}
-    {...props}
-  >
-    {!hideIcon && (
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <Icons.check className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-    )}
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-
-const dropdownMenuLabelVariants = cva(
-  cn('select-none px-2 py-1.5 text-sm font-semibold'),
-  {
-    variants: {
-      inset: {
-        true: 'pl-8',
-      },
-    },
-  }
-);
-
-export const DropdownMenuLabel = withVariants(
-  DropdownMenuPrimitive.Label,
-  dropdownMenuLabelVariants,
-  ['inset']
-);
-
-export const DropdownMenuSeparator = withCn(
-  DropdownMenuPrimitive.Separator,
-  '-mx-1 my-1 h-px bg-muted'
-);
-
-export const DropdownMenuShortcut = withCn(
-  createPrimitiveElement('span'),
-  'ml-auto text-xs tracking-widest opacity-60'
-);
-
-export const useOpenState = () => {
-  const [open, setOpen] = useState(false);
-
-  const onOpenChange = useCallback(
-    (_value = !open) => {
-      setOpen(_value);
-    },
-    [open]
-  );
-
-  return {
-    onOpenChange,
-    open,
-  };
-};

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

@@ -1,85 +0,0 @@
-import React, { useMemo, useState } from 'react';
-
-import { withRef } from '@udecode/cn';
-import { PlateElement } from '@udecode/plate-common/react';
-import { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';
-
-import {
-  InlineCombobox,
-  InlineComboboxContent,
-  InlineComboboxEmpty,
-  InlineComboboxInput,
-  InlineComboboxItem,
-} from './inline-combobox';
-
-export const EmojiInputElement = withRef<typeof PlateElement>(
-  ({ className, ...props }, ref) => {
-    const { children, editor, element } = props;
-    const [value, setValue] = useState('');
-    const debouncedValue = useDebounce(value, 100);
-    const isPending = value !== debouncedValue;
-
-    const filteredEmojis = useMemo(() => {
-      if (debouncedValue.trim().length === 0) return [];
-
-      return EmojiInlineIndexSearch.getInstance()
-        .search(debouncedValue.replace(/:$/, ''))
-        .get();
-    }, [debouncedValue]);
-
-    return (
-      <PlateElement
-        as="span"
-        data-slate-value={element.value}
-        ref={ref}
-        {...props}
-      >
-        <InlineCombobox
-          element={element}
-          filter={false}
-          hideWhenNoValue
-          setValue={setValue}
-          trigger=":"
-          value={value}
-        >
-          <InlineComboboxInput />
-
-          <InlineComboboxContent>
-            {!isPending && (
-              <InlineComboboxEmpty>No matching emoji found</InlineComboboxEmpty>
-            )}
-
-            {filteredEmojis.map((emoji) => (
-              <InlineComboboxItem
-                key={emoji.id}
-                onClick={() => insertEmoji(editor, emoji)}
-                value={emoji.name}
-              >
-                {emoji.skins[0].native} {emoji.name}
-              </InlineComboboxItem>
-            ))}
-          </InlineComboboxContent>
-        </InlineCombobox>
-
-        {children}
-      </PlateElement>
-    );
-  }
-);
-
-const useDebounce = (value: any, delay = 500) => {
-  const [debouncedValue, setDebouncedValue] = React.useState(value);
-
-  React.useEffect(() => {
-    const handler: NodeJS.Timeout = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    // Cancel the timeout if value changes (also on delay change or unmount)
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-};

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

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { withRef } from '@udecode/cn';
-import { PlateElement } from '@udecode/plate-common/react';
-import { useExcalidrawElement } from '@udecode/plate-excalidraw/react';
-
-export const ExcalidrawElement = withRef<typeof PlateElement>(
-  ({ nodeProps, ...props }, ref) => {
-    const { children, element } = props;
-
-    const { Excalidraw, excalidrawProps } = useExcalidrawElement({
-      element,
-    });
-
-    return (
-      <PlateElement ref={ref} {...props}>
-        <div contentEditable={false}>
-          <div className="h-[600px]">
-            {Excalidraw && (
-              <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />
-            )}
-          </div>
-        </div>
-        {children}
-      </PlateElement>
-    );
-  }
-);

package/src/modules/search/components/Editor/ui/fixed-toolbar-buttons.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-import {
-  BoldPlugin,
-  CodePlugin,
-  ItalicPlugin,
-  StrikethroughPlugin,
-  UnderlinePlugin,
-} from '@udecode/plate-basic-marks/react';
-import { useEditorReadOnly } from '@udecode/plate-common/react';
-
-import { Icons } from './icons';
-
-import { InsertDropdownMenu } from './insert-dropdown-menu';
-import { MarkToolbarButton } from './mark-toolbar-button';
-import { ModeDropdownMenu } from './mode-dropdown-menu';
-import { ToolbarGroup } from './toolbar';
-import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
-
-export function FixedToolbarButtons() {
-  const readOnly = useEditorReadOnly();
-
-  return (
-    <div className="w-full overflow-hidden">
-      <div
-        className="flex flex-wrap"
-        style={{
-          transform: 'translateX(calc(-1px))',
-        }}
-      >
-        {!readOnly && (
-          <>
-            <ToolbarGroup noSeparator>
-              <InsertDropdownMenu />
-              <TurnIntoDropdownMenu />
-            </ToolbarGroup>
-
-            <ToolbarGroup>
-              <MarkToolbarButton nodeType={BoldPlugin.key} tooltip="Bold (⌘+B)">
-                <Icons.bold />
-              </MarkToolbarButton>
-              <MarkToolbarButton
-                nodeType={ItalicPlugin.key}
-                tooltip="Italic (⌘+I)"
-              >
-                <Icons.italic />
-              </MarkToolbarButton>
-              <MarkToolbarButton
-                nodeType={UnderlinePlugin.key}
-                tooltip="Underline (⌘+U)"
-              >
-                <Icons.underline />
-              </MarkToolbarButton>
-
-              <MarkToolbarButton
-                nodeType={StrikethroughPlugin.key}
-                tooltip="Strikethrough (⌘+⇧+M)"
-              >
-                <Icons.strikethrough />
-              </MarkToolbarButton>
-              <MarkToolbarButton nodeType={CodePlugin.key} tooltip="Code (⌘+E)">
-                <Icons.code />
-              </MarkToolbarButton>
-            </ToolbarGroup>
-          </>
-        )}
-
-        <div className="grow" />
-
-        <ToolbarGroup noSeparator>
-          <ModeDropdownMenu />
-        </ToolbarGroup>
-      </div>
-    </div>
-  );
-}

package/src/modules/search/components/Editor/ui/fixed-toolbar.tsx

@@ -1,8 +0,0 @@
-import { withCn } from '@udecode/cn';
-
-import { Toolbar } from './toolbar';
-
-export const FixedToolbar = withCn(
-  Toolbar,
-  'supports-backdrop-blur:bg-background/60 sticky left-0 top-0 z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur'
-);

package/src/modules/search/components/Editor/ui/floating-toolbar-buttons.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import {
-  BoldPlugin,
-  CodePlugin,
-  ItalicPlugin,
-  StrikethroughPlugin,
-  UnderlinePlugin,
-} from '@udecode/plate-basic-marks/react';
-import { useEditorReadOnly } from '@udecode/plate-common/react';
-
-import { Icons } from './icons';
-
-import { MarkToolbarButton } from './mark-toolbar-button';
-import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
-
-export function FloatingToolbarButtons() {
-  const readOnly = useEditorReadOnly();
-
-  return (
-    <>
-      {!readOnly && (
-        <>
-          <TurnIntoDropdownMenu />
-
-          <MarkToolbarButton nodeType={BoldPlugin.key} tooltip="Bold (⌘+B)">
-            <Icons.bold />
-          </MarkToolbarButton>
-          <MarkToolbarButton nodeType={ItalicPlugin.key} tooltip="Italic (⌘+I)">
-            <Icons.italic />
-          </MarkToolbarButton>
-          <MarkToolbarButton
-            nodeType={UnderlinePlugin.key}
-            tooltip="Underline (⌘+U)"
-          >
-            <Icons.underline />
-          </MarkToolbarButton>
-          <MarkToolbarButton
-            nodeType={StrikethroughPlugin.key}
-            tooltip="Strikethrough (⌘+⇧+M)"
-          >
-            <Icons.strikethrough />
-          </MarkToolbarButton>
-          <MarkToolbarButton nodeType={CodePlugin.key} tooltip="Code (⌘+E)">
-            <Icons.code />
-          </MarkToolbarButton>
-        </>
-      )}
-    </>
-  );
-}

package/src/modules/search/components/Editor/ui/floating-toolbar.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { cn, withRef } from '@udecode/cn';
-import {
-  PortalBody,
-  useComposedRef,
-  useEditorId,
-  useEventEditorSelectors,
-} from '@udecode/plate-common/react';
-import {
-  type FloatingToolbarState,
-  flip,
-  offset,
-  useFloatingToolbar,
-  useFloatingToolbarState,
-} from '@udecode/plate-floating';
-
-import { Toolbar } from './toolbar';
-
-export const FloatingToolbar = withRef<
-  typeof Toolbar,
-  {
-    state?: FloatingToolbarState;
-  }
->(({ children, state, ...props }, componentRef) => {
-  const editorId = useEditorId();
-  const focusedEditorId = useEventEditorSelectors.focus();
-
-  const floatingToolbarState = useFloatingToolbarState({
-    editorId,
-    focusedEditorId,
-    ...state,
-    floatingOptions: {
-      middleware: [
-        offset(12),
-        flip({
-          fallbackPlacements: [
-            'top-start',
-            'top-end',
-            'bottom-start',
-            'bottom-end',
-          ],
-          padding: 12,
-        }),
-      ],
-      placement: 'top',
-      ...state?.floatingOptions,
-    },
-  });
-
-  const {
-    hidden,
-    props: rootProps,
-    ref: floatingRef,
-  } = useFloatingToolbar(floatingToolbarState);
-
-  const ref = useComposedRef<HTMLDivElement>(componentRef, floatingRef);
-
-  if (hidden) return null;
-
-  return (
-    <PortalBody>
-      <Toolbar
-        className={cn(
-          'absolute z-50 whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden'
-        )}
-        ref={ref}
-        {...rootProps}
-        {...props}
-      >
-        {children}
-      </Toolbar>
-    </PortalBody>
-  );
-});