doclific 0.1.0

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

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

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

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

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

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

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