@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,85 @@
+import { type CSSProperties } from 'react';
+import * as React 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

@@ -0,0 +1,285 @@
+'use client';
+
+import { type CSSProperties, type ComponentProps } from 'react';
+
+import * as React 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

@@ -0,0 +1,254 @@
+'use client';
+
+import { useState } from 'react';
+
+import * as React 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

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

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

@@ -0,0 +1,58 @@
+import { type ComponentProps } from 'react';
+import * as React 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} />
+  );
+}