@gientech/modual 1.3.2 → 1.3.3

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

@@ -0,0 +1,243 @@
+import React from "react";
+
+import type * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import type { TTableElement } from "@udecode/plate-table";
+
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { cn, withRef } from "@udecode/cn";
+import { isSelectionExpanded } from "@udecode/plate-common";
+import {
+  PlateElement,
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useRemoveNodeButton,
+  withHOC
+} from "@udecode/plate-common/react";
+import {
+  TableProvider,
+  mergeTableCells,
+  unmergeTableCells,
+  useTableBordersDropdownMenuContentState,
+  useTableElement,
+  useTableElementState,
+  useTableMergeState
+} from "@udecode/plate-table/react";
+import { useReadOnly, useSelected } from "slate-react";
+
+import { Icons, iconVariants } from "./icons";
+
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuTrigger
+} from "./dropdown-menu";
+import { Popover, PopoverContent, popoverVariants } from "./popover";
+import { Separator } from "./separator";
+
+export const TableBordersDropdownMenuContent = withRef<
+  typeof DropdownMenuPrimitive.Content
+>((props, ref) => {
+  const {
+    getOnSelectTableBorder,
+    hasBottomBorder,
+    hasLeftBorder,
+    hasNoBorders,
+    hasOuterBorders,
+    hasRightBorder,
+    hasTopBorder
+  } = useTableBordersDropdownMenuContentState();
+
+  return (
+    <DropdownMenuContent
+      align="start"
+      className={cn("min-w-[220px]")}
+      ref={ref}
+      side="right"
+      sideOffset={0}
+      {...props}
+    >
+      <DropdownMenuCheckboxItem
+        checked={hasBottomBorder}
+        onCheckedChange={getOnSelectTableBorder("bottom")}
+      >
+        <Icons.borderBottom className={iconVariants({ size: "sm" })} />
+        <div>Bottom Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasTopBorder}
+        onCheckedChange={getOnSelectTableBorder("top")}
+      >
+        <Icons.borderTop className={iconVariants({ size: "sm" })} />
+        <div>Top Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasLeftBorder}
+        onCheckedChange={getOnSelectTableBorder("left")}
+      >
+        <Icons.borderLeft className={iconVariants({ size: "sm" })} />
+        <div>Left Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasRightBorder}
+        onCheckedChange={getOnSelectTableBorder("right")}
+      >
+        <Icons.borderRight className={iconVariants({ size: "sm" })} />
+        <div>Right Border</div>
+      </DropdownMenuCheckboxItem>
+
+      <Separator />
+
+      <DropdownMenuCheckboxItem
+        checked={hasNoBorders}
+        onCheckedChange={getOnSelectTableBorder("none")}
+      >
+        <Icons.borderNone className={iconVariants({ size: "sm" })} />
+        <div>No Border</div>
+      </DropdownMenuCheckboxItem>
+      <DropdownMenuCheckboxItem
+        checked={hasOuterBorders}
+        onCheckedChange={getOnSelectTableBorder("outer")}
+      >
+        <Icons.borderAll className={iconVariants({ size: "sm" })} />
+        <div>Outside Borders</div>
+      </DropdownMenuCheckboxItem>
+    </DropdownMenuContent>
+  );
+});
+
+export const TableFloatingToolbar = withRef<typeof PopoverContent>(
+  ({ children, ...props }, ref) => {
+    const element = useElement<TTableElement>();
+    const { props: buttonProps } = useRemoveNodeButton({ element });
+
+    const selectionCollapsed = useEditorSelector(
+      (editor) => !isSelectionExpanded(editor),
+      []
+    );
+
+    const readOnly = useReadOnly();
+    const selected = useSelected();
+    const editor = useEditorRef();
+
+    const collapsed = !readOnly && selected && selectionCollapsed;
+    const open = !readOnly && selected;
+
+    const { canMerge, canUnmerge } = useTableMergeState();
+
+    const mergeContent = canMerge && (
+      <Button
+        contentEditable={false}
+        isMenu
+        onClick={() => mergeTableCells(editor)}
+        variant="ghost"
+      >
+        <Icons.combine className="mr-2 size-4" />
+        Merge
+      </Button>
+    );
+
+    const unmergeButton = canUnmerge && (
+      <Button
+        contentEditable={false}
+        isMenu
+        onClick={() => unmergeTableCells(editor)}
+        variant="ghost"
+      >
+        <Icons.ungroup className="mr-2 size-4" />
+        Unmerge
+      </Button>
+    );
+
+    const bordersContent = collapsed && (
+      <>
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button isMenu variant="ghost">
+              <Icons.borderAll className="mr-2 size-4" />
+              Borders
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuPortal>
+            <TableBordersDropdownMenuContent />
+          </DropdownMenuPortal>
+        </DropdownMenu>
+
+        <Button contentEditable={false} isMenu variant="ghost" {...buttonProps}>
+          <Icons.delete className="mr-2 size-4" />
+          Delete
+        </Button>
+      </>
+    );
+
+    return (
+      <Popover modal={false} open={open}>
+        <PopoverAnchor asChild>{children}</PopoverAnchor>
+        {(canMerge || canUnmerge || collapsed) && (
+          <PopoverContent
+            className={cn(
+              popoverVariants(),
+              "flex w-[220px] flex-col gap-1 p-1"
+            )}
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            ref={ref}
+            {...props}
+          >
+            {unmergeButton}
+            {mergeContent}
+            {bordersContent}
+          </PopoverContent>
+        )}
+      </Popover>
+    );
+  }
+);
+
+export const TableElement = withHOC(
+  TableProvider,
+  withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {
+    const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =
+      useTableElementState();
+    const { colGroupProps, props: tableProps } = useTableElement();
+
+    return (
+      // <TableFloatingToolbar>
+      <div className="overflow-x-auto" style={{ paddingLeft: marginLeft }}>
+        <PlateElement
+          asChild
+          className={cn(
+            "my-4 ml-px mr-0 table h-px w-full table-fixed border-collapse",
+            isSelectingCell && "[&_*::selection]:bg-none",
+            className
+          )}
+          ref={ref}
+          {...tableProps}
+          {...props}
+        >
+          <table>
+            <colgroup {...colGroupProps}>
+              {colSizes.map((width, index) => {
+                return (
+                  <col
+                    key={index}
+                    style={{
+                      minWidth: minColumnWidth,
+                      width: width || undefined
+                    }}
+                  />
+                );
+              })}
+            </colgroup>
+
+            <tbody className="min-w-full">{children}</tbody>
+          </table>
+        </PlateElement>
+      </div>
+      // </TableFloatingToolbar>
+    );
+  })
+);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { PlateElement } from '@udecode/plate-common/react';
+
+export const TableRowElement = withRef<
+  typeof PlateElement,
+  {
+    hideBorder?: boolean;
+  }
+>(({ children, hideBorder, ...props }, ref) => {
+  return (
+    <PlateElement
+      asChild
+      className={cn('h-full', hideBorder && 'border-none')}
+      ref={ref}
+      {...props}
+    >
+      <tr>{children}</tr>
+    </PlateElement>
+  );
+});

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

@@ -0,0 +1,135 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@udecode/plate-test-utils";
+import "./style.less";
+jsx;
+
+export const isMarkdownTableData = (str: string) => {
+  // 按行拆分字符串
+  const lines = str.trim().split("\n");
+
+  // 检查行数是否足够
+  if (lines?.length < 3) {
+    return false;
+  }
+  const cols = lines[0].split("|").length;
+  const r = lines.every((item: any) => {
+    return item.split("|").length === cols;
+  });
+
+  if (!r) return r;
+  // 检查表头和数据行是否以 | 开头和结尾
+  for (let i = 0; i < lines.length; i++) {
+    if (!lines[i].trim().startsWith("|") || !lines[i].trim().endsWith("|")) {
+      return false;
+    }
+  }
+
+  // 检查第二行是否包含分隔线
+  if (!lines[1].trim().includes("-")) {
+    return false;
+  }
+
+  return true;
+};
+
+const markdownTableToJSON = (mdTable: string) => {
+  const rows = mdTable.trim().split("\n");
+  const headers = rows[0].split("|").map((header) => header.trim());
+
+  if (headers?.length > 2) {
+    headers.pop();
+    headers.shift();
+  }
+
+  const feakHeaders = headers.map((i, index) => index);
+
+  const jsonData: any[] = [];
+
+  for (let i = 2; i < rows.length; i++) {
+    const cells = rows[i].split("|").map((cell) => cell.trim());
+    if (cells?.length > 2) {
+      cells.pop();
+      cells.shift();
+    }
+    if (cells.length === headers.length) {
+      const rowObject: any = {};
+      feakHeaders.forEach((header, index) => {
+        rowObject[header] = cells[index];
+      });
+      jsonData.push(rowObject);
+    }
+  }
+
+  return { jsonData, headers };
+};
+
+export const createTable = (data: any): any => {
+  const { jsonData, headers } = markdownTableToJSON(data);
+  return (
+    <fragment>
+      <htable
+        colSizes={new Array(headers.length - 1).fill("100%")}
+        marginLeft={0}
+        border={true}
+      >
+        <htr>
+          {headers.map((key, index) => {
+            return (
+              <hth key={index}>
+                <hp>
+                  <htext bold>{key}</htext>
+                </hp>
+              </hth>
+            );
+          })}
+        </htr>
+        {jsonData.map((row, rowIndex) => (
+          <htr key={rowIndex}>
+            {Object.values(row).map((value, colIndex) => {
+              return (
+                <htd key={colIndex}>
+                  <hp>{value}</hp>
+                </htd>
+              );
+            })}
+          </htr>
+        ))}
+      </htable>
+      {/* <htable colSizes={[100, 100, 100, 100]} marginLeft={0} border={true}>
+        <htr>
+          <hth>
+            <hp>
+              <htext bold>序号</htext>
+            </hp>
+          </hth>
+          <hth>
+            <hp>
+              <htext bold>姓名</htext>
+            </hp>
+          </hth>
+        </htr>
+        <htr>
+          <htd>
+            <hp>1</hp>
+          </htd>
+          <htd>
+            <hp>张三</hp>
+          </htd>
+        </htr>
+        <htr>
+          <htd>
+            <hp>2</hp>
+          </htd>
+          <htd>
+            <hp>李四</hp>
+          </htd>
+        </htr>
+      </htable> */}
+    </fragment>
+  );
+};
+
+export const tableValue: any = (data: any) => {
+  return <fragment>{createTable(data)}</fragment>;
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { cn, withRef } from '@udecode/cn';
+import { PlateElement } from '@udecode/plate-common/react';
+import {
+  useTodoListElement,
+  useTodoListElementState,
+} from '@udecode/plate-list/react';
+
+import { Checkbox } from './checkbox';
+
+export const TodoListElement = withRef<typeof PlateElement>(
+  ({ children, className, ...props }, ref) => {
+    const { element } = props;
+    const state = useTodoListElementState({ element });
+    const { checkboxProps } = useTodoListElement(state);
+
+    return (
+      <PlateElement
+        className={cn('flex flex-row py-1', className)}
+        ref={ref}
+        {...props}
+      >
+        <div
+          className="mr-1.5 flex select-none items-center justify-center"
+          contentEditable={false}
+        >
+          <Checkbox {...checkboxProps} />
+        </div>
+        <span
+          className={cn(
+            'flex-1 focus:outline-none',
+            state.checked && 'text-muted-foreground line-through'
+          )}
+          contentEditable={!state.readOnly}
+          suppressContentEditableWarning
+        >
+          {children}
+        </span>
+      </PlateElement>
+    );
+  }
+);

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

@@ -0,0 +1,31 @@
+import { withRef } from '@udecode/cn';
+import { PlateElement, useElement } from '@udecode/plate-common/react';
+import {
+  useToggleButton,
+  useToggleButtonState,
+} from '@udecode/plate-toggle/react';
+
+import { Icons } from './icons';
+
+export const ToggleElement = withRef<typeof PlateElement>(
+  ({ children, ...props }, ref) => {
+    const element = useElement();
+    const state = useToggleButtonState(element.id as string);
+    const { buttonProps, open } = useToggleButton(state);
+
+    return (
+      <PlateElement asChild ref={ref} {...props}>
+        <div className="relative pl-6">
+          <span
+            className="absolute -left-0.5 -top-0.5 flex cursor-pointer select-none items-center justify-center rounded-sm p-px transition-colors hover:bg-slate-200"
+            contentEditable={false}
+            {...buttonProps}
+          >
+            {open ? <Icons.chevronDown /> : <Icons.chevronRight />}
+          </span>
+          {children}
+        </div>
+      </PlateElement>
+    );
+  }
+);

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

@@ -0,0 +1,157 @@
+'use client';
+
+import * as React from 'react';
+
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import { cn, withCn, withRef, withVariants } from '@udecode/cn';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { Icons } from './icons';
+
+import { Separator } from './separator';
+import { withTooltip } from './tooltip';
+
+export const Toolbar = withCn(
+  ToolbarPrimitive.Root,
+  'relative flex select-none items-center gap-1 bg-background'
+);
+
+export const ToolbarToggleGroup = withCn(
+  ToolbarPrimitive.ToolbarToggleGroup,
+  'flex items-center'
+);
+
+export const ToolbarLink = withCn(
+  ToolbarPrimitive.Link,
+  'font-medium underline underline-offset-4'
+);
+
+export const ToolbarSeparator = withCn(
+  ToolbarPrimitive.Separator,
+  'my-1 w-px shrink-0 bg-border'
+);
+
+const toolbarButtonVariants = cva(
+  cn(
+    'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    '[&_svg:not([data-icon])]:size-5'
+  ),
+  {
+    defaultVariants: {
+      size: 'sm',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 px-3',
+        lg: 'h-11 px-5',
+        sm: 'h-9 px-2',
+      },
+      variant: {
+        default:
+          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+    },
+  }
+);
+
+const ToolbarButton = withTooltip(
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    {
+      isDropdown?: boolean;
+      pressed?: boolean;
+    } & Omit<
+      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+      'asChild' | 'value'
+    > &
+    VariantProps<typeof toolbarButtonVariants>
+  >(
+    (
+      { children, className, isDropdown, pressed, size, variant, ...props },
+      ref
+    ) => {
+      return typeof pressed === 'boolean' ? (
+        <ToolbarToggleGroup
+          disabled={props.disabled}
+          type="single"
+          value="single"
+        >
+          <ToolbarToggleItem
+            className={cn(
+              toolbarButtonVariants({
+                size,
+                variant,
+              }),
+              isDropdown && 'my-1 justify-between pr-1',
+              className
+            )}
+            ref={ref}
+            value={pressed ? 'single' : ''}
+            {...props}
+          >
+            {isDropdown ? (
+              <>
+                <div className="flex flex-1">{children}</div>
+                <div>
+                  <Icons.arrowDown className="ml-0.5 size-4" data-icon />
+                </div>
+              </>
+            ) : (
+              children
+            )}
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+      ) : (
+        <ToolbarPrimitive.Button
+          className={cn(
+            toolbarButtonVariants({
+              size,
+              variant,
+            }),
+            isDropdown && 'pr-1',
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </ToolbarPrimitive.Button>
+      );
+    }
+  )
+);
+ToolbarButton.displayName = 'ToolbarButton';
+
+export { ToolbarButton };
+
+export const ToolbarToggleItem = withVariants(
+  ToolbarPrimitive.ToggleItem,
+  toolbarButtonVariants,
+  ['variant', 'size']
+);
+
+export const ToolbarGroup = withRef<
+  'div',
+  {
+    noSeparator?: boolean;
+  }
+>(({ children, className, noSeparator }, ref) => {
+  const childArr = React.Children.map(children, (c) => c);
+
+  if (!childArr || childArr.length === 0) return null;
+
+  return (
+    <div className={cn('flex', className)} ref={ref}>
+      {!noSeparator && (
+        <div className="h-full py-1">
+          <Separator orientation="vertical" />
+        </div>
+      )}
+
+      <div className="mx-1 flex items-center gap-1">{children}</div>
+    </div>
+  );
+});

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

@@ -0,0 +1,65 @@
+'use client';
+
+import React from 'react';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { withCn, withProps } from '@udecode/cn';
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export const Tooltip = TooltipPrimitive.Root;
+
+export const TooltipTrigger = TooltipPrimitive.Trigger;
+
+export const TooltipPortal = TooltipPrimitive.Portal;
+
+export const TooltipContent = withCn(
+  withProps(TooltipPrimitive.Content, {
+    sideOffset: 4,
+  }),
+  'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'
+);
+
+export function withTooltip<
+  T extends React.ComponentType<any> | keyof HTMLElementTagNameMap,
+>(Component: T) {
+  return React.forwardRef<
+    React.ElementRef<T>,
+    {
+      tooltip?: React.ReactNode;
+      tooltipContentProps?: Omit<
+        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+        'children'
+      >;
+      tooltipProps?: Omit<
+        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+        'children'
+      >;
+    } & React.ComponentPropsWithoutRef<T>
+  >(function ExtendComponent(
+    { tooltip, tooltipContentProps, tooltipProps, ...props },
+    ref
+  ) {
+    const [mounted, setMounted] = React.useState(false);
+
+    React.useEffect(() => {
+      setMounted(true);
+    }, []);
+
+    const component = <Component ref={ref} {...(props as any)} />;
+
+    if (tooltip && mounted) {
+      return (
+        <Tooltip {...tooltipProps}>
+          <TooltipTrigger asChild>{component}</TooltipTrigger>
+
+          <TooltipPortal>
+            <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      );
+    }
+
+    return component;
+  });
+}