@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { type PlateElementProps, PlateElement } from 'platejs/react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { PathApi } from 'platejs';
+
+const headingVariants = cva(
+  'relative mb-1 px-0.5 py-[3px] font-semibold leading-[1.3]!',
+  {
+    variants: {
+      isFirstBlock: {
+        false: '',
+        true: 'mt-0!'
+      },
+      variant: {
+        h1: 'mt-8 text-[1.875em]',
+        h2: 'mt-[1.4em] text-[1.5em]',
+        h3: 'mt-[1em] text-[1.25em]'
+      }
+    }
+  }
+);
+
+export function HeadingElement({
+  attributes,
+  variant = 'h1',
+  ...props
+}: PlateElementProps & VariantProps<typeof headingVariants>) {
+  const isFirstBlock = PathApi.equals(props.path, [0]);
+
+  return (
+    <PlateElement
+      as={variant!}
+      attributes={{
+        id: props.element.id as string,
+        ...attributes
+      }}
+      className={headingVariants({ isFirstBlock, variant })}
+      {...props}>
+      {props.children}
+    </PlateElement>
+  );
+}
+
+export function H1Element(props: PlateElementProps) {
+  return <HeadingElement variant="h1" {...props} />;
+}
+
+export function H2Element(props: PlateElementProps) {
+  return <HeadingElement variant="h2" {...props} />;
+}
+
+export function H3Element(props: PlateElementProps) {
+  return <HeadingElement variant="h3" {...props} />;
+}

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

@@ -0,0 +1,9 @@
+import { type SlateLeafProps, SlateLeaf } from 'platejs/static';
+
+export function HighlightLeafStatic(props: SlateLeafProps) {
+  return (
+    <SlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
+      {props.children}
+    </SlateLeaf>
+  );
+}

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

@@ -0,0 +1,11 @@
+'use client';
+
+import { type PlateLeafProps, PlateLeaf } from 'platejs/react';
+
+export function HighlightLeaf(props: PlateLeafProps) {
+  return (
+    <PlateLeaf {...props} as="mark" className="bg-highlight/30 text-inherit">
+      {props.children}
+    </PlateLeaf>
+  );
+}

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { Redo2Icon, Undo2Icon } from 'lucide-react';
+import { useEditorRef, useEditorSelector } from 'platejs/react';
+
+import { ToolbarButton } from './toolbar';
+
+export function RedoToolbarButton(
+  props: ComponentProps<typeof ToolbarButton>
+) {
+  const editor = useEditorRef();
+  const disabled = useEditorSelector(
+    editor => editor?.history?.redos.length === 0,
+    []
+  );
+
+  return (
+    <ToolbarButton
+      {...props}
+      disabled={disabled}
+      onClick={() => editor.redo()}
+      onMouseDown={e => e.preventDefault()}
+      tooltip="Redo">
+      <Redo2Icon />
+    </ToolbarButton>
+  );
+}
+
+export function UndoToolbarButton(
+  props: ComponentProps<typeof ToolbarButton>
+) {
+  const editor = useEditorRef();
+  const disabled = useEditorSelector(
+    editor => editor?.history?.undos.length === 0,
+    []
+  );
+
+  return (
+    <ToolbarButton
+      {...props}
+      disabled={disabled}
+      onClick={() => editor.undo()}
+      onMouseDown={e => e.preventDefault()}
+      tooltip="Undo">
+      <Undo2Icon />
+    </ToolbarButton>
+  );
+}

package/src/internal/plate-editor/plate-ui/hover-card.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@docyrus/ui-pro-shared/hover-card';

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

@@ -0,0 +1,18 @@
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export function HrElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement className="mb-1 py-2" {...props}>
+      <div contentEditable={false}>
+        <hr
+          className={cn(
+            'h-0.5 cursor-pointer rounded-sm border-none bg-muted bg-clip-content'
+          )} />
+      </div>
+      {props.children}
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,28 @@
+'use client';
+
+import {
+  PlateElement,
+  type PlateElementProps,
+  useFocused,
+  useSelected
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export function HrElement(props: PlateElementProps) {
+  const selected = useSelected();
+  const focused = useFocused();
+
+  return (
+    <PlateElement className="mb-1 py-2" {...props}>
+      <div contentEditable={false}>
+        <hr
+          className={cn(
+            'h-0.5 cursor-pointer rounded-sm border-none bg-muted bg-clip-content',
+            selected && focused && 'ring-2 ring-ring ring-offset-2'
+          )} />
+      </div>
+      {props.children}
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState } from 'react';
+
+import * as React from 'react';
+
+import { importDocx } from '@platejs/docx-io';
+import { MarkdownPlugin } from '@platejs/markdown';
+import { ArrowUpToLineIcon } from 'lucide-react';
+import { getEditorDOMFromHtmlString } from 'platejs/static';
+import { useEditorRef } from 'platejs/react';
+import { useFilePicker } from 'use-file-picker';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  type DropdownMenuProps
+} from './dropdown-menu';
+
+import { ToolbarButton } from './toolbar';
+
+type ImportType = 'html' | 'markdown';
+
+export function ImportToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [open, setOpen] = useState(false);
+
+  const getFileNodes = (text: string, type: ImportType) => {
+    if (type === 'html') {
+      const editorNode = getEditorDOMFromHtmlString(text);
+      const nodes = editor.api.html.deserialize({
+        element: editorNode
+      });
+
+      return nodes;
+    }
+
+    if (type === 'markdown') {
+      return editor.getApi(MarkdownPlugin).markdown.deserialize(text);
+    }
+
+    return [];
+  };
+
+  const { openFilePicker: openMdFilePicker } = useFilePicker({
+    accept: ['.md', '.mdx'],
+    multiple: false,
+    onFilesSelected: async (data: { plainFiles?: File[] }) => {
+      if (!data.plainFiles || data.plainFiles.length === 0) return;
+
+      const text = await data.plainFiles[0].text();
+      const nodes = getFileNodes(text, 'markdown');
+
+      editor.tf.insertNodes(nodes);
+    }
+  });
+
+  const { openFilePicker: openHtmlFilePicker } = useFilePicker({
+    accept: ['text/html'],
+    multiple: false,
+    onFilesSelected: async (data: { plainFiles?: File[] }) => {
+      if (!data.plainFiles || data.plainFiles.length === 0) return;
+
+      const text = await data.plainFiles[0].text();
+      const nodes = getFileNodes(text, 'html');
+
+      editor.tf.insertNodes(nodes);
+    }
+  });
+
+  const { openFilePicker: openDocxFilePicker } = useFilePicker({
+    accept: ['.docx'],
+    multiple: false,
+    onFilesSelected: async (data: { plainFiles?: File[] }) => {
+      if (!data.plainFiles || data.plainFiles.length === 0) return;
+
+      const arrayBuffer = await data.plainFiles[0].arrayBuffer();
+      const result = await importDocx(editor, arrayBuffer);
+
+      editor.tf.insertNodes(result.nodes as typeof editor.children);
+    }
+  });
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Import" isDropdown>
+          <ArrowUpToLineIcon className="size-4" />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuPortal>
+        <DropdownMenuContent align="start">
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onSelect={() => {
+                openHtmlFilePicker();
+              }}>
+              Import from HTML
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              onSelect={() => {
+                openMdFilePicker();
+              }}>
+              Import from Markdown
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              onSelect={() => {
+                openDocxFilePicker();
+              }}>
+              Import from Word
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { type ComponentProps } from 'react';
+
+import * as React from 'react';
+
+import { useIndentButton, useOutdentButton } from '@platejs/indent/react';
+import { IndentIcon, OutdentIcon } from 'lucide-react';
+
+import { ToolbarButton } from './toolbar';
+
+export function IndentToolbarButton(
+  props: ComponentProps<typeof ToolbarButton>
+) {
+  const { props: buttonProps } = useIndentButton();
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Indent">
+      <IndentIcon />
+    </ToolbarButton>
+  );
+}
+
+export function OutdentToolbarButton(
+  props: ComponentProps<typeof ToolbarButton>
+) {
+  const { props: buttonProps } = useOutdentButton();
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Outdent">
+      <OutdentIcon />
+    </ToolbarButton>
+  );
+}