@gientech/modual 1.3.0 → 1.3.1

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

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

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

@@ -1,135 +0,0 @@
-/** @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

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

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

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

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