@gientech/modual 2.0.8 → 2.0.9

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

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import {
+  focusEditor,
+  useEditorReadOnly,
+  useEditorRef,
+  usePlateStore,
+} from '@udecode/plate-common/react';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function ModeDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const setReadOnly = usePlateStore().set.readOnly();
+  const readOnly = useEditorReadOnly();
+  const openState = useOpenState();
+
+  let value = 'editing';
+
+  if (readOnly) value = 'viewing';
+
+  const item: any = {
+    editing: (
+      <>
+        <Icons.editing className="mr-2 size-5" />
+        <span className="hidden lg:inline">Editing</span>
+      </>
+    ),
+    viewing: (
+      <>
+        <Icons.viewing className="mr-2 size-5" />
+        <span className="hidden lg:inline">Viewing</span>
+      </>
+    ),
+  };
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton
+          className="min-w-[auto] lg:min-w-[130px]"
+          isDropdown
+          pressed={openState.open}
+          tooltip="Editing mode"
+        >
+          {item[value]}
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" className="min-w-[180px]">
+        <DropdownMenuRadioGroup
+          className="flex flex-col gap-0.5"
+          onValueChange={(newValue) => {
+            if (newValue !== 'viewing') {
+              setReadOnly(false);
+            }
+            if (newValue === 'viewing') {
+              setReadOnly(true);
+
+              return;
+            }
+            if (newValue === 'editing') {
+              focusEditor(editor);
+
+              return;
+            }
+          }}
+          value={value}
+        >
+          <DropdownMenuRadioItem value="editing">
+            {item.editing}
+          </DropdownMenuRadioItem>
+
+          <DropdownMenuRadioItem value="viewing">
+            {item.viewing}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import {
+  SubscriptPlugin,
+  SuperscriptPlugin,
+} from '@udecode/plate-basic-marks/react';
+import { focusEditor, useEditorRef } from '@udecode/plate-common/react';
+
+import { Icons } from './icons';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  useOpenState,
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
+
+export function MoreDropdownMenu(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const openState = useOpenState();
+
+  return (
+    <DropdownMenu modal={false} {...openState} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={openState.open} tooltip="Insert">
+          <Icons.more />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className="flex max-h-[500px] min-w-[180px] flex-col gap-0.5 overflow-y-auto"
+      >
+        <DropdownMenuItem
+          onSelect={() => {
+            editor.tf.toggle.mark({
+              clear: [SubscriptPlugin.key, SuperscriptPlugin.key],
+              key: SuperscriptPlugin.key,
+            });
+            focusEditor(editor);
+          }}
+        >
+          <Icons.superscript className="mr-2 size-5" />
+          Superscript
+          {/* (⌘+,) */}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => {
+            editor.tf.toggle.mark({
+              clear: [SuperscriptPlugin.key, SubscriptPlugin.key],
+              key: SubscriptPlugin.key,
+            });
+            focusEditor(editor);
+          }}
+        >
+          <Icons.subscript className="mr-2 size-5" />
+          Subscript
+          {/* (⌘+.) */}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,4 @@
+import { withCn } from '@udecode/cn';
+import { PlateElement } from '@udecode/plate-common/react';
+
+export const ParagraphElement = withCn(PlateElement, 'm-0 px-0 py-1');

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { cn } from "@udecode/cn";
+import { ParagraphPlugin } from "@udecode/plate-common/react";
+import {
+  type PlaceholderProps,
+  createNodeHOC,
+  createNodesHOC,
+  usePlaceholderState
+} from "@udecode/plate-common/react";
+import { HEADING_KEYS } from "@udecode/plate-heading";
+
+export const Placeholder = (props: PlaceholderProps) => {
+  const { children, nodeProps, placeholder } = props;
+
+  const { enabled } = usePlaceholderState(props);
+
+  return React.Children.map(children, (child) => {
+    return React.cloneElement(child, {
+      className: child.props.className,
+      nodeProps: {
+        ...nodeProps,
+        className: cn(
+          enabled &&
+            "before:absolute before:cursor-text before:opacity-30 before:content-[attr(placeholder)]"
+        ),
+        placeholder
+      }
+    });
+  });
+};
+
+export const withPlaceholder = createNodeHOC(Placeholder);
+
+export const withPlaceholdersPrimitive = createNodesHOC(Placeholder);
+
+export const withPlaceholders = (components: any) =>
+  withPlaceholdersPrimitive(components, [
+    {
+      hideOnBlur: true,
+      key: ParagraphPlugin.key,
+      placeholder: "",
+      query: {
+        maxLevel: 1
+      }
+    },
+    {
+      hideOnBlur: false,
+      key: HEADING_KEYS.h1,
+      placeholder: "Untitled"
+    }
+  ]);

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

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn, withRef } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
+
+export const Popover = PopoverPrimitive.Root;
+
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export const popoverVariants = cva(
+  'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 print:hidden'
+);
+
+export const PopoverContent = withRef<typeof PopoverPrimitive.Content>(
+  ({ align = 'center', className, sideOffset = 4, style, ...props }, ref) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        className={cn(popoverVariants(), className)}
+        ref={ref}
+        sideOffset={sideOffset}
+        style={{ zIndex: 1000, ...style }}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+);

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

@@ -0,0 +1,66 @@
+'use client';
+
+import React from 'react';
+
+import { cn, withRef, withVariants } from '@udecode/cn';
+import {
+  Resizable as ResizablePrimitive,
+  ResizeHandle as ResizeHandlePrimitive,
+} from '@udecode/plate-resizable';
+import { cva } from 'class-variance-authority';
+
+export const mediaResizeHandleVariants = cva(
+  cn(
+    'top-0 flex w-6 select-none flex-col justify-center',
+    "after:flex after:h-16 after:w-[3px] after:rounded-[6px] after:bg-ring after:opacity-0 after:content-['_'] group-hover:after:opacity-100"
+  ),
+  {
+    variants: {
+      direction: {
+        left: '-left-3 -ml-3 pl-3',
+        right: '-right-3 -mr-3 items-end pr-3',
+      },
+    },
+  }
+);
+
+const resizeHandleVariants = cva(cn('absolute z-40'), {
+  variants: {
+    direction: {
+      bottom: 'w-full cursor-row-resize',
+      left: 'h-full cursor-col-resize',
+      right: 'h-full cursor-col-resize',
+      top: 'w-full cursor-row-resize',
+    },
+  },
+});
+
+const ResizeHandleVariants = withVariants(
+  ResizeHandlePrimitive,
+  resizeHandleVariants,
+  ['direction']
+);
+
+export const ResizeHandle = withRef<typeof ResizeHandlePrimitive>(
+  (props, ref) => (
+    <ResizeHandleVariants
+      direction={props.options?.direction}
+      ref={ref}
+      {...props}
+    />
+  )
+);
+
+const resizableVariants = cva('', {
+  variants: {
+    align: {
+      center: 'mx-auto',
+      left: 'mr-auto',
+      right: 'ml-auto',
+    },
+  },
+});
+
+export const Resizable = withVariants(ResizablePrimitive, resizableVariants, [
+  'align',
+]);

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

@@ -0,0 +1,25 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { withProps, withVariants } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
+
+const separatorVariants = cva('shrink-0 bg-border', {
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+  variants: {
+    orientation: {
+      horizontal: 'h-px w-full',
+      vertical: 'h-full w-px',
+    },
+  },
+});
+
+export const Separator = withVariants(
+  withProps(SeparatorPrimitive.Root, {
+    decorative: true,
+    orientation: 'horizontal',
+  }),
+  separatorVariants
+);

package/src/modules/search/components/Editor/ui/style.less

@@ -0,0 +1,12 @@
+#plateTableValue {
+  th,
+  td {
+    border: 1px solid #e5e7eb !important;
+  }
+  tbody tr:first-child {
+    background-color: #f0f0f0;
+  }
+  table {
+    width: calc(100% - 3px) !important;
+  }
+}

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

@@ -0,0 +1,143 @@
+import React from 'react';
+
+import { cn, withProps, withRef } from '@udecode/cn';
+import { PlateElement } from '@udecode/plate-common/react';
+import {
+  useTableCellElement,
+  useTableCellElementResizable,
+  useTableCellElementResizableState,
+  useTableCellElementState,
+} from '@udecode/plate-table/react';
+
+import { ResizeHandle } from './resizable';
+
+export const TableCellElement = withRef<
+  typeof PlateElement,
+  {
+    hideBorder?: boolean;
+    isHeader?: boolean;
+  }
+>(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {
+  const { element } = props;
+
+  const {
+    borders,
+    colIndex,
+    colSpan,
+    hovered,
+    hoveredLeft,
+    isSelectingCell,
+    readOnly,
+    rowIndex,
+    rowSize,
+    selected,
+  } = useTableCellElementState();
+  const { props: cellProps } = useTableCellElement({ element: props.element });
+  const resizableState = useTableCellElementResizableState({
+    colIndex,
+    colSpan,
+    rowIndex,
+  });
+
+  const { bottomProps, hiddenLeft, leftProps, rightProps } =
+    useTableCellElementResizable(resizableState);
+
+  const Cell = isHeader ? 'th' : 'td';
+
+  return (
+    <PlateElement
+      asChild
+      className={cn(
+        'relative h-full overflow-visible border-none bg-background p-0',
+        hideBorder && 'before:border-none',
+        element.background ? 'bg-[--cellBackground]' : 'bg-background',
+        !hideBorder &&
+          cn(
+            isHeader && 'text-left [&_>_*]:m-0',
+            'before:size-full',
+            selected && 'before:z-10 before:bg-muted',
+            "before:absolute before:box-border before:select-none before:content-['']",
+            borders &&
+              cn(
+                borders.bottom?.size &&
+                  `before:border-b before:border-b-border`,
+                borders.right?.size && `before:border-r before:border-r-border`,
+                borders.left?.size && `before:border-l before:border-l-border`,
+                borders.top?.size && `before:border-t before:border-t-border`
+              )
+          ),
+        className
+      )}
+      ref={ref}
+      {...cellProps}
+      {...props}
+      style={
+        {
+          '--cellBackground': element.background,
+          ...style,
+        } as React.CSSProperties
+      }
+    >
+      <Cell>
+        <div
+          className="relative z-20 box-border h-full px-3 py-2"
+          style={{
+            minHeight: rowSize,
+          }}
+        >
+          {children}
+        </div>
+
+        {!isSelectingCell && (
+          <div
+            className="group absolute top-0 size-full select-none"
+            contentEditable={false}
+            suppressContentEditableWarning={true}
+          >
+            {!readOnly && (
+              <>
+                <ResizeHandle
+                  {...rightProps}
+                  className="-top-3 right-[-5px] w-[10px]"
+                />
+                <ResizeHandle
+                  {...bottomProps}
+                  className="bottom-[-5px] h-[10px]"
+                />
+                {!hiddenLeft && (
+                  <ResizeHandle
+                    {...leftProps}
+                    className="-top-3 left-[-5px] w-[10px]"
+                  />
+                )}
+
+                {hovered && (
+                  <div
+                    className={cn(
+                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
+                      'right-[-1.5px]'
+                    )}
+                  />
+                )}
+                {hoveredLeft && (
+                  <div
+                    className={cn(
+                      'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
+                      'left-[-1.5px]'
+                    )}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </Cell>
+    </PlateElement>
+  );
+});
+
+TableCellElement.displayName = 'TableCellElement';
+
+export const TableCellHeaderElement = withProps(TableCellElement, {
+  isHeader: true,
+});