@gientech/modual 1.3.2 → 1.3.3

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

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

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

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

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

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

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

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

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