@gientech/modual 1.3.0 → 1.3.1

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

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

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

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

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

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

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

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

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

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