@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/internal/plate-editor/plate-ui/table-node-static.tsx

@@ -1,84 +0,0 @@
-import { type CSSProperties } from 'react';
-
-import { type TTableCellElement, type TTableElement } from 'platejs';
-
-import { BaseTablePlugin } from '@platejs/table';
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export function TableElementStatic(props: SlateElementProps<TTableElement>) {
-  const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin);
-  const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft;
-
-  return (
-    <SlateElement
-      {...props}
-      className="overflow-x-auto py-5"
-      style={{ paddingLeft: marginLeft }}>
-      <div className="group/table relative w-fit">
-        <table className="mr-0 ml-px table h-px table-fixed border-collapse">
-          <tbody className="min-w-full">{props.children}</tbody>
-        </table>
-      </div>
-    </SlateElement>
-  );
-}
-
-export function TableRowElementStatic(props: SlateElementProps) {
-  return <SlateElement {...props} as="tr" className="h-full" />;
-}
-
-export function TableCellElementStatic({
-  isHeader,
-  ...props
-}: SlateElementProps<TTableCellElement> & {
-  isHeader?: boolean;
-}) {
-  const { editor, element } = props;
-  const { api } = editor.getPlugin(BaseTablePlugin);
-
-  const { minHeight, width } = api.table.getCellSize({ element });
-  const borders = api.table.getCellBorders({ element });
-
-  return (
-    <SlateElement
-      {...props}
-      as={isHeader ? 'th' : 'td'}
-      attributes={{
-        ...props.attributes,
-        colSpan: api.table.getColSpan(element),
-        rowSpan: api.table.getRowSpan(element)
-      }}
-      className={cn(
-        'h-full overflow-visible border-none bg-background p-0',
-        element.background ? 'bg-(--cellBackground)' : 'bg-background',
-        isHeader && 'text-left font-normal *:m-0',
-        'before:size-full',
-        "before:absolute before:box-border before:select-none before:content-['']",
-        'before:border before:border-border',
-        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'
-      )}
-      style={
-        {
-          '--cellBackground': element.background,
-          maxWidth: width || 240,
-          minWidth: width || 120
-        } as CSSProperties
-      }>
-      <div
-        className="relative z-20 box-border h-full px-4 py-2"
-        style={{ minHeight }}>
-        {props.children}
-      </div>
-    </SlateElement>
-  );
-}
-
-export function TableCellHeaderElementStatic(props: SlateElementProps) {
-  return <TableCellElementStatic {...props} isHeader />;
-}

package/src/internal/plate-editor/plate-ui/table-node.tsx

@@ -1,283 +0,0 @@
-'use client';
-
-import { type CSSProperties, type ComponentProps } from 'react';
-
-import { ResizeHandle } from '@platejs/resizable';
-import { useBlockSelected } from '@platejs/selection/react';
-import {
-  TablePlugin,
-  TableProvider,
-  useTableCellElement,
-  useTableCellElementResizable,
-  useTableElement
-} from '@platejs/table/react';
-import { cva } from 'class-variance-authority';
-import { PlusIcon } from 'lucide-react';
-import { KEYS, type TTableCellElement } from 'platejs';
-import {
-  PlateElement,
-  type PlateElementProps,
-  useEditorPlugin,
-  useElementSelector,
-  useReadOnly,
-  useSelected,
-  withHOC
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { blockSelectionVariants } from './block-selection';
-
-import { Button } from './button';
-
-export const TableElement = withHOC(
-  TableProvider,
-  (props: PlateElementProps) => {
-    const { editor, element } = props;
-    const { tf } = useEditorPlugin(TablePlugin);
-    const readOnly = useReadOnly();
-    const {
-      isSelectingCell,
-      marginLeft,
-      props: tableProps
-    } = useTableElement();
-
-    const isSelectingTable = useBlockSelected(props.element.id as string);
-
-    return (
-      <PlateElement
-        {...props}
-        className="overflow-x-auto py-5"
-        style={{ paddingLeft: marginLeft }}>
-        <div className="group/table relative w-fit">
-          <table
-            className={cn(
-              'mr-0 ml-px table h-px table-fixed border-collapse',
-              isSelectingCell && 'selection:bg-transparent'
-            )}
-            {...tableProps}>
-            <tbody className="min-w-full">{props.children}</tbody>
-          </table>
-
-          {!readOnly && (
-            <>
-              <div
-                className={cn(
-                  'absolute inset-x-0 bottom-[-18px] flex flex-row opacity-0 transition-opacity hover:opacity-100',
-                  'group-has-[tr:last-child:hover]/table:opacity-100 max-sm:group-has-[tr[data-selected]:last-child]/table:opacity-100'
-                )}>
-                <Button
-                  className="flex h-4 w-full grow items-center justify-center bg-muted"
-                  onClick={() => tf.insert.tableRow({ at: editor.api.findPath(element) })}
-                  onMouseDown={e => e.preventDefault()}
-                  size="none"
-                  tooltip="Add a new row"
-                  tooltipContentProps={{ side: 'bottom' }}
-                  variant="ghost">
-                  <PlusIcon className="!size-3.5 text-muted-foreground" />
-                </Button>
-              </div>
-
-              <div
-                className={cn(
-                  'absolute inset-y-0 right-[-18px] flex opacity-0 transition-opacity hover:opacity-100',
-                  'group-has-[td:last-child:hover,th:last-child:hover]/table:opacity-100 max-sm:group-has-[td[data-selected]:last-child,th[data-selected]:last-child]/table:opacity-100'
-                )}>
-                <Button
-                  className="flex h-full w-4 grow items-center justify-center bg-muted"
-                  onClick={() => tf.insert.tableColumn({
-                    at: editor.api.findPath(element)
-                  })}
-                  onMouseDown={e => e.preventDefault()}
-                  size="none"
-                  tooltip="Add a new column"
-                  tooltipContentProps={{ side: 'bottom' }}
-                  variant="ghost">
-                  <PlusIcon className="!size-3.5 text-muted-foreground" />
-                </Button>
-              </div>
-
-              <div
-                className={cn(
-                  'absolute right-[-18px] bottom-[-18px] flex flex-row opacity-0 transition-opacity hover:opacity-100',
-                  'group-has-[td:last-child:hover,th:last-child:hover]/table:group-has-[tr:last-child:hover]/table:opacity-100 max-sm:group-has-[td[data-selected]:last-child,th[data-selected]:last-child]/table:group-has-[tr[data-selected]:last-child]/table:opacity-100'
-                )}>
-                <Button
-                  className="flex size-4 items-center justify-center rounded-full bg-muted"
-                  onClick={() => {
-                    editor.tf.withoutNormalizing(() => {
-                      tf.insert.tableRow({ at: editor.api.findPath(element) });
-                      tf.insert.tableColumn({
-                        at: editor.api.findPath(element)
-                      });
-                    });
-                  }}
-                  onMouseDown={e => e.preventDefault()}
-                  size="none"
-                  tooltip="Add a new row and column"
-                  tooltipContentProps={{ side: 'bottom' }}
-                  variant="ghost">
-                  <PlusIcon className="!size-3.5 text-muted-foreground" />
-                </Button>
-              </div>
-            </>
-          )}
-
-          {isSelectingTable && (
-            <div className={blockSelectionVariants()} contentEditable={false} />
-          )}
-        </div>
-      </PlateElement>
-    );
-  }
-);
-
-export function TableRowElement(props: PlateElementProps) {
-  const selected = useSelected();
-
-  return (
-    <PlateElement
-      {...props}
-      as="tr"
-      className="h-full"
-      data-selected={selected ? 'true' : undefined} />
-  );
-}
-
-export function TableCellElement({
-  isHeader,
-  ...props
-}: PlateElementProps<TTableCellElement> & {
-  isHeader?: boolean;
-}) {
-  const { api } = useEditorPlugin(TablePlugin);
-  const readOnly = useReadOnly();
-  const { element } = props;
-
-  const rowId = useElementSelector(([node]) => node.id as string, [], {
-    key: KEYS.tr
-  });
-  const isSelectingRow = useBlockSelected(rowId);
-
-  const {
-    borders,
-    colIndex,
-    colSpan,
-    isSelectingCell,
-    minHeight,
-    rowIndex,
-    selected,
-    width
-  } = useTableCellElement();
-
-  const {
-    bottomProps, hiddenLeft, leftProps, rightProps
-  }
-    = useTableCellElementResizable({
-      colIndex,
-      colSpan,
-      rowIndex
-    });
-
-  return (
-    <PlateElement
-      {...props}
-      as={isHeader ? 'th' : 'td'}
-      attributes={{
-        ...props.attributes,
-        colSpan: api.table.getColSpan(element),
-        rowSpan: api.table.getRowSpan(element)
-      }}
-      className={cn(
-        'h-full overflow-visible border-none bg-background p-0',
-        element.background ? 'bg-(--cellBackground)' : 'bg-background',
-        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.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'
-      )}
-      style={
-        {
-          '--cellBackground': element.background,
-          maxWidth: width || 240,
-          minWidth: width || 120
-        } as CSSProperties
-      }>
-      <div
-        className="relative z-20 box-border h-full px-4 py-2"
-        style={{ minHeight }}>
-        {props.children}
-      </div>
-
-      {!isSelectingCell && (
-        <div
-          className="group absolute top-0 size-full select-none"
-          contentEditable={false}
-          suppressContentEditableWarning={true}>
-          {!readOnly && (
-            <>
-              <ResizeHandle
-                {...rightProps}
-                className="-top-2 -right-1 h-[calc(100%_+_8px)] w-2"
-                data-col={colIndex} />
-              <ResizeHandle {...bottomProps} className="-bottom-1 h-2" />
-              {!hiddenLeft && (
-                <ResizeHandle
-                  {...leftProps}
-                  className="-left-1 top-0 w-2"
-                  data-resizer-left={colIndex === 0 ? 'true' : undefined} />
-              )}
-
-              <div
-                className={cn(
-                  'absolute top-0 z-30 hidden h-full w-1 bg-ring',
-                  'right-[-1.5px]',
-                  columnResizeVariants({ colIndex: colIndex as any })
-                )} />
-              {colIndex === 0 && (
-                <div
-                  className={cn(
-                    'absolute top-0 z-30 h-full w-1 bg-ring',
-                    'left-[-1.5px]',
-                    'fade-in hidden animate-in group-has-[[data-resizer-left]:hover]/table:block group-has-[[data-resizer-left][data-resizing="true"]]/table:block'
-                  )} />
-              )}
-            </>
-          )}
-        </div>
-      )}
-
-      {isSelectingRow && (
-        <div className={blockSelectionVariants()} contentEditable={false} />
-      )}
-    </PlateElement>
-  );
-}
-
-export function TableCellHeaderElement(
-  props: ComponentProps<typeof TableCellElement>
-) {
-  return <TableCellElement {...props} isHeader />;
-}
-
-const columnResizeVariants = cva('fade-in hidden animate-in', {
-  variants: {
-    colIndex: {
-      0: 'group-has-[[data-col="0"]:hover]/table:block group-has-[[data-col="0"][data-resizing="true"]]/table:block',
-      1: 'group-has-[[data-col="1"]:hover]/table:block group-has-[[data-col="1"][data-resizing="true"]]/table:block',
-      2: 'group-has-[[data-col="2"]:hover]/table:block group-has-[[data-col="2"][data-resizing="true"]]/table:block',
-      3: 'group-has-[[data-col="3"]:hover]/table:block group-has-[[data-col="3"][data-resizing="true"]]/table:block',
-      4: 'group-has-[[data-col="4"]:hover]/table:block group-has-[[data-col="4"][data-resizing="true"]]/table:block',
-      5: 'group-has-[[data-col="5"]:hover]/table:block group-has-[[data-col="5"][data-resizing="true"]]/table:block',
-      6: 'group-has-[[data-col="6"]:hover]/table:block group-has-[[data-col="6"][data-resizing="true"]]/table:block',
-      7: 'group-has-[[data-col="7"]:hover]/table:block group-has-[[data-col="7"][data-resizing="true"]]/table:block',
-      8: 'group-has-[[data-col="8"]:hover]/table:block group-has-[[data-col="8"][data-resizing="true"]]/table:block',
-      9: 'group-has-[[data-col="9"]:hover]/table:block group-has-[[data-col="9"][data-resizing="true"]]/table:block',
-      10: 'group-has-[[data-col="10"]:hover]/table:block group-has-[[data-col="10"][data-resizing="true"]]/table:block'
-    }
-  }
-});

package/src/internal/plate-editor/plate-ui/table-toolbar-button.tsx

@@ -1,252 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { TablePlugin, useTableMergeState } from '@platejs/table/react';
-import {
-  ArrowDown,
-  ArrowLeft,
-  ArrowRight,
-  ArrowUp,
-  Combine,
-  Grid3x3Icon,
-  Table,
-  Trash2Icon,
-  Ungroup,
-  XIcon
-} from 'lucide-react';
-import { KEYS } from 'platejs';
-import { useEditorPlugin, useEditorSelector } from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  type DropdownMenuProps
-} from './dropdown-menu';
-
-import { ToolbarButton } from './toolbar';
-
-export function TableToolbarButton(props: DropdownMenuProps) {
-  const tableSelected = useEditorSelector(
-    editor => editor?.api?.some({ match: { type: KEYS.table } }) ?? false,
-    []
-  );
-
-  const { editor, tf } = useEditorPlugin(TablePlugin);
-  const [open, setOpen] = useState(false);
-  const mergeState = useTableMergeState();
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Table" isDropdown>
-          <Table />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuPortal>
-        <DropdownMenuContent
-          className="flex w-[180px] min-w-0 flex-col"
-          align="start">
-          <DropdownMenuGroup>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
-                <Grid3x3Icon className="size-4" />
-                <span>Table</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="m-0 p-0">
-                <TablePicker />
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger
-                className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                disabled={!tableSelected}>
-                <div className="size-4" />
-                <span>Cell</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!mergeState.canMerge}
-                  onSelect={() => {
-                    tf.table.merge();
-                    editor.tf.focus();
-                  }}>
-                  <Combine />
-                  Merge cells
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!mergeState.canSplit}
-                  onSelect={() => {
-                    tf.table.split();
-                    editor.tf.focus();
-                  }}>
-                  <Ungroup />
-                  Split cell
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger
-                className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                disabled={!tableSelected}>
-                <div className="size-4" />
-                <span>Row</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!tableSelected}
-                  onSelect={() => {
-                    tf.insert.tableRow({ before: true });
-                    editor.tf.focus();
-                  }}>
-                  <ArrowUp />
-                  Insert row before
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!tableSelected}
-                  onSelect={() => {
-                    tf.insert.tableRow();
-                    editor.tf.focus();
-                  }}>
-                  <ArrowDown />
-                  Insert row after
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!tableSelected}
-                  onSelect={() => {
-                    tf.remove.tableRow();
-                    editor.tf.focus();
-                  }}>
-                  <XIcon />
-                  Delete row
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger
-                className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                disabled={!tableSelected}>
-                <div className="size-4" />
-                <span>Column</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!tableSelected}
-                  onSelect={() => {
-                    tf.insert.tableColumn({ before: true });
-                    editor.tf.focus();
-                  }}>
-                  <ArrowLeft />
-                  Insert column before
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!tableSelected}
-                  onSelect={() => {
-                    tf.insert.tableColumn();
-                    editor.tf.focus();
-                  }}>
-                  <ArrowRight />
-                  Insert column after
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="min-w-[180px]"
-                  disabled={!tableSelected}
-                  onSelect={() => {
-                    tf.remove.tableColumn();
-                    editor.tf.focus();
-                  }}>
-                  <XIcon />
-                  Delete column
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-
-            <DropdownMenuItem
-              className="min-w-[180px]"
-              disabled={!tableSelected}
-              onSelect={() => {
-                tf.remove.table();
-                editor.tf.focus();
-              }}>
-              <Trash2Icon />
-              Delete table
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </DropdownMenu>
-  );
-}
-
-function TablePicker() {
-  const { editor, tf } = useEditorPlugin(TablePlugin);
-
-  const [tablePicker, setTablePicker] = useState({
-    grid: Array.from({ length: 8 }, () => Array.from({ length: 8 }).fill(0)),
-    size: { colCount: 0, rowCount: 0 }
-  });
-
-  const onCellMove = (rowIndex: number, colIndex: number) => {
-    const newGrid = [...tablePicker.grid];
-
-    for (let i = 0; i < newGrid.length; i++) {
-      for (let j = 0; j < newGrid[i].length; j++) {
-        newGrid[i][j]
-          = i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
-      }
-    }
-
-    setTablePicker({
-      grid: newGrid,
-      size: { colCount: colIndex + 1, rowCount: rowIndex + 1 }
-    });
-  };
-
-  return (
-    <div
-      className="flex! m-0 flex-col p-0"
-      onClick={() => {
-        tf.insert.table(tablePicker.size, { select: true });
-        editor.tf.focus();
-      }}
-      role="button">
-      <div className="grid size-[130px] grid-cols-8 gap-0.5 p-1">
-        {tablePicker.grid.map((rows, rowIndex) => rows.map((value, columIndex) => (
-          <div
-            key={`(${rowIndex},${columIndex})`}
-            className={cn(
-              'col-span-1 size-3 border border-solid bg-secondary',
-              !!value && 'border-current'
-            )}
-            onMouseMove={() => {
-              onCellMove(rowIndex, columIndex);
-            }} />
-        )))}
-      </div>
-
-      <div className="text-center text-current text-xs">
-        {tablePicker.size.rowCount} x {tablePicker.size.colCount}
-      </div>
-    </div>
-  );
-}

package/src/internal/plate-editor/plate-ui/tabs.tsx

@@ -1,3 +0,0 @@
-export {
-  Tabs, TabsContent, TabsList, TabsTrigger
-} from '@docyrus/ui-pro-shared/tabs';

package/src/internal/plate-editor/plate-ui/textarea.tsx

@@ -1,57 +0,0 @@
-import { type ComponentProps } from 'react';
-
-import { TextareaAutosize as ReactTextareaAutosize } from '@platejs/caption/react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export const textareaVariants = cva(
-  cn(
-    'resize-none text-sm disabled:cursor-not-allowed disabled:opacity-50',
-    'placeholder:text-muted-foreground/80'
-  ),
-  {
-    defaultVariants: {
-      variant: 'default'
-    },
-    variants: {
-      variant: {
-        ai: 'max-h-[240px] border-transparent bg-transparent py-2 focus:outline-none focus:ring-0',
-        default:
-          'rounded-md border-[1.5px] border-input bg-muted/80 px-1 pt-1 pb-0.5 read-only:ring-0 focus:border-brand/50 focus:ring-2 focus:ring-brand/30 read-only:focus:border-input',
-        equation: 'max-h-[50vh] min-h-[60px] font-mono text-sm',
-        equationInline: 'max-h-[50vh] font-mono text-sm'
-      }
-    }
-  }
-);
-
-export type TextareaAutosizeProps = ComponentProps<
-  typeof ReactTextareaAutosize
->
-& VariantProps<typeof textareaVariants>;
-
-export function Textarea({ className, variant, ...props }: TextareaProps) {
-  return (
-    <textarea
-      className={cn(textareaVariants({ variant }), className)}
-      {...props} />
-  );
-}
-
-export type TextareaProps = ComponentProps<'textarea'>
-  & VariantProps<typeof textareaVariants>;
-
-export function TextareaAutosize({
-  children: _children,
-  className,
-  variant,
-  ...props
-}: TextareaAutosizeProps) {
-  return (
-    <ReactTextareaAutosize
-      autoComplete="off"
-      className={cn(textareaVariants({ variant }), className)}
-      {...props} />
-  );
-}