doclific 0.2.0 → 0.2.2

package/frontend/src/components/ui/table-toolbar-button.tsx

@@ -1,264 +0,0 @@
-import React from 'react';
-
-import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
-
-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 {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { cn } from '@/lib/utils';
-
-import { ToolbarButton } from './toolbar';
-
-export function TableToolbarButton(props: DropdownMenuProps) {
-  const tableSelected = useEditorSelector(
-    (editor) => editor.api.some({ match: { type: KEYS.table } }),
-    []
-  );
-
-  const { editor, tf } = useEditorPlugin(TablePlugin);
-  const [open, setOpen] = React.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>
-
-      <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>
-    </DropdownMenu>
-  );
-}
-
-function TablePicker() {
-  const { editor, tf } = useEditorPlugin(TablePlugin);
-
-  const [tablePicker, setTablePicker] = React.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/frontend/src/components/ui/toc-node-static.tsx

@@ -1,92 +0,0 @@
-import type { SlateElementProps } from 'platejs/static';
-
-import { type Heading, BaseTocPlugin, isHeading } from '@platejs/toc';
-import { cva } from 'class-variance-authority';
-import { type SlateEditor, type TElement, NodeApi } from 'platejs';
-import { SlateElement } from 'platejs/static';
-
-import { Button } from '@/components/ui/button';
-
-const headingItemVariants = cva(
-  'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',
-  {
-    variants: {
-      depth: {
-        1: 'pl-0.5',
-        2: 'pl-[26px]',
-        3: 'pl-[50px]',
-      },
-    },
-  }
-);
-
-export function TocElementStatic(props: SlateElementProps) {
-  const { editor } = props;
-  const headingList = getHeadingList(editor);
-
-  return (
-    <SlateElement {...props} className="mb-1 p-0">
-      <div>
-        {headingList.length > 0 ? (
-          headingList.map((item) => (
-            <Button
-              key={item.title}
-              variant="ghost"
-              className={headingItemVariants({
-                depth: item.depth as 1 | 2 | 3,
-              })}
-            >
-              {item.title}
-            </Button>
-          ))
-        ) : (
-          <div className="text-gray-500 text-sm">
-            Create a heading to display the table of contents.
-          </div>
-        )}
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}
-
-const headingDepth: Record<string, number> = {
-  h1: 1,
-  h2: 2,
-  h3: 3,
-  h4: 4,
-  h5: 5,
-  h6: 6,
-};
-
-const getHeadingList = (editor?: SlateEditor) => {
-  if (!editor) return [];
-
-  const options = editor.getOptions(BaseTocPlugin);
-
-  if (options.queryHeading) {
-    return options.queryHeading(editor);
-  }
-
-  const headingList: Heading[] = [];
-
-  const values = editor.api.nodes<TElement>({
-    at: [],
-    match: (n) => isHeading(n),
-  });
-
-  if (!values) return [];
-
-  Array.from(values).forEach(([node, path]) => {
-    const { type } = node;
-    const title = NodeApi.string(node);
-    const depth = headingDepth[type];
-    const id = node.id as string;
-
-    if (title) {
-      headingList.push({ id, depth, path, title, type });
-    }
-  });
-
-  return headingList;
-};

package/frontend/src/components/ui/toc-node.tsx

@@ -1,55 +0,0 @@
-
-
-import type { PlateElementProps } from 'platejs/react';
-
-import { useTocElement, useTocElementState } from '@platejs/toc/react';
-import { cva } from 'class-variance-authority';
-import { PlateElement } from 'platejs/react';
-
-import { Button } from '@/components/ui/button';
-
-const headingItemVariants = cva(
-  'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',
-  {
-    variants: {
-      depth: {
-        1: 'pl-0.5',
-        2: 'pl-[26px]',
-        3: 'pl-[50px]',
-      },
-    },
-  }
-);
-
-export function TocElement(props: PlateElementProps) {
-  const state = useTocElementState();
-  const { props: btnProps } = useTocElement(state);
-  const { headingList } = state;
-
-  return (
-    <PlateElement {...props} className="mb-1 p-0">
-      <div contentEditable={false}>
-        {headingList.length > 0 ? (
-          headingList.map((item) => (
-            <Button
-              key={item.id}
-              variant="ghost"
-              className={headingItemVariants({
-                depth: item.depth as 1 | 2 | 3,
-              })}
-              onClick={(e) => btnProps.onClick(e, item, 'smooth')}
-              aria-current
-            >
-              {item.title}
-            </Button>
-          ))
-        ) : (
-          <div className="text-gray-500 text-sm">
-            Create a heading to display the table of contents.
-          </div>
-        )}
-      </div>
-      {props.children}
-    </PlateElement>
-  );
-}

package/frontend/src/components/ui/toggle-node-static.tsx

@@ -1,18 +0,0 @@
-import type { SlateElementProps } from 'platejs/static';
-
-import { ChevronRight } from 'lucide-react';
-import { SlateElement } from 'platejs/static';
-
-export function ToggleElementStatic(props: SlateElementProps) {
-  return (
-    <SlateElement {...props} className="pl-6">
-      <div
-        className="-left-0.5 absolute top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4"
-        contentEditable={false}
-      >
-        <ChevronRight className="rotate-0 transition-transform duration-75" />
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}

package/frontend/src/components/ui/toggle-node.tsx

@@ -1,36 +0,0 @@
-
-
-import type { PlateElementProps } from 'platejs/react';
-
-import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
-import { ChevronRight } from 'lucide-react';
-import { PlateElement } from 'platejs/react';
-
-import { Button } from '@/components/ui/button';
-
-export function ToggleElement(props: PlateElementProps) {
-  const element = props.element;
-  const state = useToggleButtonState(element.id as string);
-  const { buttonProps, open } = useToggleButton(state);
-
-  return (
-    <PlateElement {...props} className="pl-6">
-      <Button
-        size="icon"
-        variant="ghost"
-        className="-left-0.5 absolute top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4"
-        contentEditable={false}
-        {...buttonProps}
-      >
-        <ChevronRight
-          className={
-            open
-              ? 'rotate-90 transition-transform duration-75'
-              : 'rotate-0 transition-transform duration-75'
-          }
-        />
-      </Button>
-      {props.children}
-    </PlateElement>
-  );
-}

package/frontend/src/components/ui/toggle-toolbar-button.tsx

@@ -1,22 +0,0 @@
-
-
-import {
-  useToggleToolbarButton,
-  useToggleToolbarButtonState,
-} from '@platejs/toggle/react';
-import { ListCollapseIcon } from 'lucide-react';
-
-import { ToolbarButton } from './toolbar';
-
-export function ToggleToolbarButton(
-  props: React.ComponentProps<typeof ToolbarButton>
-) {
-  const state = useToggleToolbarButtonState();
-  const { props: buttonProps } = useToggleToolbarButton(state);
-
-  return (
-    <ToolbarButton {...props} {...buttonProps} tooltip="Toggle">
-      <ListCollapseIcon />
-    </ToolbarButton>
-  );
-}