@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,142 @@
+
+import { BaseTocPlugin, type Heading, isHeading } from '@platejs/toc';
+import { cva } from 'class-variance-authority';
+import {
+  KEYS, NodeApi, type SlateEditor, type TElement
+} from 'platejs';
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+import { Button } from './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
+              className={headingItemVariants({ depth: item.depth as any })}
+              key={item.title}
+              variant="ghost">
+              {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 headingLevels = {
+  [KEYS.h1]: 1,
+  [KEYS.h2]: 2,
+  [KEYS.h3]: 3,
+  [KEYS.h4]: 4,
+  [KEYS.h5]: 5,
+  [KEYS.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({
+    at: [],
+    match: n => isHeading(n)
+  });
+
+  if (!values) return [];
+
+  for (const [node, path] of values) {
+    const { type } = node as TElement;
+    const title = NodeApi.string(node);
+    const depth = headingLevels[type as keyof typeof headingLevels];
+    const id = node.id as string;
+
+    if (title) {
+      headingList.push({
+        id, depth, path, title, type
+      });
+    }
+  }
+
+  return headingList;
+};
+
+/**
+ * DOCX-compatible TOC component.
+ * Renders TOC items as anchor links for proper Word internal navigation.
+ */
+export function TocElementDocx(props: SlateElementProps) {
+  const { editor } = props;
+  const headingList = getHeadingList(editor);
+
+  const depthIndent: Record<number, string> = {
+    1: '0',
+    2: '24pt',
+    3: '48pt'
+  };
+
+  return (
+    <SlateElement {...props}>
+      <div
+        style={{
+          marginBottom: '12pt',
+          padding: '8pt 0'
+        }}>
+        {headingList.length > 0 ? (
+          headingList.map(item => (
+            <p
+              key={item.id}
+              style={{
+                margin: '4pt 0',
+                paddingLeft: depthIndent[item.depth] || '0'
+              }}>
+              <a
+                href={`#${item.id}`}
+                style={{
+                  color: '#0066cc',
+                  textDecoration: 'underline'
+                }}>
+                {item.title}
+              </a>
+            </p>
+          ))
+        ) : (
+          <p style={{ color: '#666', fontSize: '10pt' }}>
+            Create a heading to display the table of contents.
+          </p>
+        )}
+      </div>
+      {props.children}
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import { useTocElement, useTocElementState } from '@platejs/toc/react';
+import { cva } from 'class-variance-authority';
+import { PlateElement, type PlateElementProps } from 'platejs/react';
+
+import { Button } from './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 { editor, element } = props;
+  const state = useTocElementState();
+  const { props: btnProps } = useTocElement(state);
+  const { headingList } = state;
+
+  return (
+    <PlateElement {...props} className="my-1">
+      <div contentEditable={false}>
+        {headingList.length > 0 ? (
+          headingList.map(item => (
+            <Button
+              aria-current
+              className={headingItemVariants({ depth: item.depth as any })}
+              key={item.id}
+              onClick={e => btnProps.onClick(e, item, 'smooth')}
+              variant="ghost">
+              {item.title}
+            </Button>
+          ))
+        ) : (
+          <div
+            className="cursor-text select-none px-1 py-[3px] text-muted-foreground/80 text-sm"
+            onClick={() => {
+              editor
+                .getApi(BlockSelectionPlugin)
+                .blockSelection.set(element.id as string);
+            }}
+            role="button">
+            Add headings to display the table of contents.
+          </div>
+        )}
+      </div>
+      {props.children}
+    </PlateElement>
+  );
+}

package/src/internal/plate-editor/plate-ui/toc-sidebar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+
+import { useTocSideBar, useTocSideBarState } from '@platejs/toc/react';
+import { cva } from 'class-variance-authority';
+
+import { Button } from './button';
+
+const headingItemVariants = cva(
+  'block w-full cursor-pointer truncate rounded-none px-1 py-1 text-left text-muted-foreground text-sm transition-colors hover:bg-accent',
+  {
+    variants: {
+      depth: {
+        1: 'pl-1 font-medium',
+        2: 'pl-4',
+        3: 'pl-7'
+      }
+    }
+  }
+);
+
+export function TocSidebar() {
+  const state = useTocSideBarState({ open: true });
+  const { headingList } = state;
+  const { navProps } = useTocSideBar(state);
+
+  if (headingList.length === 0) return null;
+
+  return (
+    <nav {...navProps} className="sticky top-20 hidden w-[200px] shrink-0 lg:block">
+      <div className="flex flex-col gap-0.5">
+        {headingList.map((item: any) => (
+          <Button
+            className={headingItemVariants({ depth: item.depth as any })}
+            key={item.id}
+            onClick={(e) => {
+              e.preventDefault();
+              const el = document.getElementById(item.id);
+
+              el?.scrollIntoView({ behavior: 'smooth' });
+            }}
+            variant="ghost">
+            {item.title}
+          </Button>
+        ))}
+      </div>
+    </nav>
+  );
+}

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

@@ -0,0 +1,18 @@
+
+import { ChevronRightIcon } from 'lucide-react';
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+export function ToggleElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement {...props} className="mb-1 pl-6">
+      <div>
+        <span
+          className="absolute top-0.5 left-0 flex cursor-pointer select-none items-center justify-center rounded-sm p-px transition-bg-ease hover:bg-slate-200"
+          contentEditable={false}>
+          <ChevronRightIcon className="rotate-0 transition-transform duration-75" />
+        </span>
+        {props.children}
+      </div>
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
+import { ChevronRightIcon } from 'lucide-react';
+import {
+  PlateElement,
+  type PlateElementProps,
+  useElement
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export function ToggleElement(props: PlateElementProps) {
+  const element = useElement();
+  const state = useToggleButtonState(element.id as string);
+  const { buttonProps, open } = useToggleButton(state);
+
+  return (
+    <PlateElement {...props} className="mb-1 pl-6">
+      <div>
+        <span
+          className="absolute top-0.5 left-0 flex cursor-pointer select-none items-center justify-center rounded-sm p-px transition-bg-ease hover:bg-slate-200"
+          contentEditable={false}
+          {...buttonProps}>
+          <ChevronRightIcon
+            className={cn(
+              'transition-transform duration-75',
+              open ? 'rotate-90' : 'rotate-0'
+            )} />
+        </span>
+        {props.children}
+      </div>
+    </PlateElement>
+  );
+}

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

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

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

@@ -0,0 +1,3 @@
+'use client';
+
+export { Toggle, toggleVariants } from '@docyrus/ui-pro-shared/toggle';