@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,76 @@
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+export function CalloutElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement
+      className="my-1 flex rounded-sm bg-muted p-4 pl-3"
+      style={{
+        backgroundColor: props.element.backgroundColor as any
+      }}
+      {...props}>
+      <div className="flex w-full gap-2 rounded-md">
+        <div
+          className="size-6 select-none text-[18px]"
+          style={{
+            fontFamily:
+              '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols'
+          }}>
+          <span data-plate-prevent-deserialization>
+            {(props.element.icon as any) || '💡'}
+          </span>
+        </div>
+        <div className="w-full">{props.children}</div>
+      </div>
+    </SlateElement>
+  );
+}
+
+/**
+ * DOCX-compatible callout component using table layout for side-by-side icon and content.
+ */
+export function CalloutElementDocx({ children, ...props }: SlateElementProps) {
+  const backgroundColor
+    = (props.element.backgroundColor as string) || '#f4f4f5';
+  const icon = (props.element.icon as string) || '💡';
+
+  return (
+    <SlateElement {...props}>
+      <table
+        style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          border: 'none',
+          backgroundColor,
+          borderRadius: '4px',
+          marginTop: '4pt',
+          marginBottom: '4pt'
+        }}>
+        <tbody>
+          <tr>
+            <td
+              style={{
+                width: '30px',
+                verticalAlign: 'top',
+                padding: '8px 4px 8px 8px',
+                border: 'none',
+                fontSize: '18px',
+                fontFamily:
+                  '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols'
+              }}>
+              <span data-plate-prevent-deserialization>{icon}</span>
+            </td>
+            <td
+              style={{
+                verticalAlign: 'top',
+                padding: '8px 8px 8px 4px',
+                border: 'none'
+              }}>
+              {children}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </SlateElement>
+  );
+}

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

@@ -0,0 +1,54 @@
+'use client';
+
+import { useCalloutEmojiPicker } from '@platejs/callout/react';
+import { useEmojiDropdownMenuState } from '@platejs/emoji/react';
+import { PlateElement, type PlateElementProps } from 'platejs/react';
+
+import { Button } from './button';
+
+import { EmojiPicker, EmojiPopover } from './emoji-toolbar-button';
+
+export function CalloutElement(props: PlateElementProps) {
+  const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState({
+    closeOnSelect: true
+  });
+
+  const { emojiToolbarDropdownProps, props: calloutProps }
+    = useCalloutEmojiPicker({
+      isOpen,
+      setIsOpen
+    });
+
+  return (
+    <PlateElement
+      className="my-1 flex rounded-sm bg-muted p-4 pl-3"
+      style={{
+        backgroundColor: props.element.backgroundColor as any
+      }}
+      {...props}
+      attributes={{
+        ...props.attributes,
+        'data-plate-open-context-menu': 'true'
+      }}>
+      <div className="flex w-full gap-2 rounded-md">
+        <EmojiPopover
+          {...emojiToolbarDropdownProps}
+          control={
+            <Button
+              className="size-6 select-none p-1 text-[18px] hover:bg-muted-foreground/15"
+              contentEditable={false}
+              style={{
+                fontFamily:
+                  '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols'
+              }}
+              variant="ghost">
+              {(props.element.icon as any) || '💡'}
+            </Button>
+          }>
+          <EmojiPicker {...emojiPickerState} {...calloutProps} />
+        </EmojiPopover>
+        <div className="w-full">{props.children}</div>
+      </div>
+    </PlateElement>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import * as React from 'react';
+
+import {
+  Caption as CaptionPrimitive,
+  CaptionTextarea as CaptionTextareaPrimitive
+} from '@platejs/caption/react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+const captionVariants = cva('max-w-full', {
+  defaultVariants: {
+    align: 'center'
+  },
+  variants: {
+    align: {
+      center: 'mx-auto',
+      left: 'mr-auto',
+      right: 'ml-auto'
+    }
+  }
+});
+
+type CaptionProps = ComponentPropsWithoutRef<typeof CaptionPrimitive>
+  & VariantProps<typeof captionVariants>;
+
+export function Caption({ align, className, ...props }: CaptionProps) {
+  return (
+    <CaptionPrimitive
+      {...props}
+      className={cn(captionVariants({ align }), className)} />
+  );
+}
+
+export function CaptionTextarea(
+  props: ComponentPropsWithoutRef<typeof CaptionTextareaPrimitive>
+) {
+  return (
+    <CaptionTextareaPrimitive
+      {...props}
+      className={cn(
+        'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit',
+        'focus:outline-hidden focus:[&::placeholder]:opacity-0',
+        'text-center print:placeholder:text-transparent'
+      )} />
+  );
+}

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

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

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

@@ -0,0 +1,172 @@
+
+import { type TCodeBlockElement } from 'platejs';
+
+import {
+  SlateElement,
+  type SlateElementProps,
+  SlateLeaf,
+  type SlateLeafProps
+} from 'platejs/static';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+export function CodeBlockElementStatic(
+  props: SlateElementProps<TCodeBlockElement>
+) {
+  return (
+    <SlateElement
+      className={cn(
+        'py-1',
+        '**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d]',
+        '**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_]:text-[#d73a49]',
+        '**:[.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_]:text-[#6f42c1]',
+        '**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5]',
+        '**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62]',
+        '**:[.hljs-built_in,.hljs-symbol]:text-[#e36209]',
+        '**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a]',
+        '**:[.hljs-emphasis]:italic',
+        '**:[.hljs-strong]:font-bold',
+        '**:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5]',
+        '**:[.hljs-bullet]:text-[#735c0f]',
+        '**:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a]',
+        '**:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28]'
+      )}
+      {...props}>
+      <pre className="overflow-x-auto rounded-md bg-muted pt-[34px] pr-4 pb-8 pl-8 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid">
+        <code>{props.children}</code>
+      </pre>
+    </SlateElement>
+  );
+}
+
+export function CodeLineElementStatic(props: SlateElementProps) {
+  return <SlateElement {...props} />;
+}
+
+export function CodeSyntaxLeafStatic(props: SlateLeafProps) {
+  const tokenClassName = props.leaf.className as string;
+
+  return <SlateLeaf {...props} className={tokenClassName} />;
+}
+
+/**
+ * DOCX-compatible code block components.
+ * Uses inline styles for proper rendering in Word documents.
+ */
+
+export function CodeBlockElementDocx(
+  props: SlateElementProps<TCodeBlockElement>
+) {
+  return (
+    <SlateElement {...props}>
+      <div
+        style={{
+          backgroundColor: '#f5f5f5',
+          border: '1px solid #e0e0e0',
+          margin: '8pt 0',
+          padding: '12pt'
+        }}>
+        {props.children}
+      </div>
+    </SlateElement>
+  );
+}
+
+export function CodeLineElementDocx(props: SlateElementProps) {
+  return (
+    <SlateElement
+      {...props}
+      as="p"
+      style={{
+        fontFamily: "'Courier New', Consolas, monospace",
+        fontSize: '10pt',
+        margin: 0,
+        padding: 0
+      }} />
+  );
+}
+
+// Syntax highlighting color map for common token types
+const syntaxColors: Record<string, string> = {
+  'hljs-addition': '#22863a',
+  'hljs-attr': '#005cc5',
+  'hljs-attribute': '#005cc5',
+  'hljs-built_in': '#e36209',
+  'hljs-bullet': '#735c0f',
+  'hljs-comment': '#6a737d',
+  'hljs-deletion': '#b31d28',
+  'hljs-doctag': '#d73a49',
+  'hljs-emphasis': '#24292e',
+  'hljs-formula': '#6a737d',
+  'hljs-keyword': '#d73a49',
+  'hljs-literal': '#005cc5',
+  'hljs-meta': '#005cc5',
+  'hljs-name': '#22863a',
+  'hljs-number': '#005cc5',
+  'hljs-operator': '#005cc5',
+  'hljs-quote': '#22863a',
+  'hljs-regexp': '#032f62',
+  'hljs-section': '#005cc5',
+  'hljs-selector-attr': '#005cc5',
+  'hljs-selector-class': '#005cc5',
+  'hljs-selector-id': '#005cc5',
+  'hljs-selector-pseudo': '#22863a',
+  'hljs-selector-tag': '#22863a',
+  'hljs-string': '#032f62',
+  'hljs-strong': '#24292e',
+  'hljs-symbol': '#e36209',
+  'hljs-template-tag': '#d73a49',
+  'hljs-template-variable': '#d73a49',
+  'hljs-title': '#6f42c1',
+  'hljs-type': '#d73a49',
+  'hljs-variable': '#005cc5'
+};
+
+// Convert regular spaces to non-breaking spaces to preserve indentation in Word
+const preserveSpaces = (text: string): string => {
+  // Replace regular spaces with non-breaking spaces
+  return text.replace(/ /g, '\u00A0');
+};
+
+export function CodeSyntaxLeafDocx(props: SlateLeafProps) {
+  const tokenClassName = props.leaf.className as string;
+
+  // Extract color from className
+  let color: string | undefined;
+  let fontWeight: string | undefined;
+  let fontStyle: string | undefined;
+
+  if (tokenClassName) {
+    const classes = tokenClassName.split(' ');
+
+    for (const cls of classes) {
+      if (syntaxColors[cls]) {
+        color = syntaxColors[cls];
+      }
+      if (cls === 'hljs-strong' || cls === 'hljs-section') {
+        fontWeight = 'bold';
+      }
+      if (cls === 'hljs-emphasis') {
+        fontStyle = 'italic';
+      }
+    }
+  }
+
+  // Get the text content and preserve spaces
+  const text = props.leaf.text as string;
+  const preservedText = preserveSpaces(text);
+
+  return (
+    <span
+      data-slate-leaf="true"
+      style={{
+        color,
+        fontFamily: "'Courier New', Consolas, monospace",
+        fontSize: '10pt',
+        fontStyle,
+        fontWeight
+      }}>
+      {preservedText}
+    </span>
+  );
+}

package/src/internal/plate-editor/plate-ui/code-block-node.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import * as React from 'react';
+
+import { type TCodeBlockElement, NodeApi } from 'platejs';
+
+import { CheckIcon, ChevronDownIcon, FilesIcon } from 'lucide-react';
+
+import {
+  PlateElement,
+  type PlateElementProps,
+  PlateLeaf,
+  type PlateLeafProps,
+  useEditorRef,
+  useElement,
+  useReadOnly
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { BlockActionButton } from './block-context-menu';
+import { Button } from './button';
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from './command';
+import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+export function CodeBlockElement(props: PlateElementProps) {
+  const { element } = props;
+
+  return (
+    <PlateElement
+      className={cn(
+        'group my-1',
+        '**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d]',
+        '**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_]:text-[#d73a49]',
+        '**:[.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_]:text-[#6f42c1]',
+        '**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5]',
+        '**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62]',
+        '**:[.hljs-built_in,.hljs-symbol]:text-[#e36209]',
+        '**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a]',
+        '**:[.hljs-emphasis]:italic',
+        '**:[.hljs-strong]:font-bold',
+        '**:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5]',
+        '**:[.hljs-bullet]:text-[#735c0f]',
+        '**:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a]',
+        '**:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28]'
+      )}
+      {...props}>
+      <pre
+        className="overflow-x-auto rounded-md bg-muted pt-[34px] pr-4 pb-8 pl-8 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid"
+        data-plate-open-context-menu>
+        <code>{props.children}</code>
+      </pre>
+
+      <div className="absolute top-2 left-2 z-10 h-5 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <CodeBlockCombobox />
+      </div>
+
+      <div
+        className="absolute top-1 right-1 z-10 flex select-none gap-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        contentEditable={false}>
+        <Button
+          className="relative top-0 right-0 w-auto"
+          onClick={() => {
+            const lines = element.children.map((child: any) => NodeApi.string(child));
+
+            void navigator.clipboard.writeText(lines.join('\n\n'));
+          }}
+          size="blockAction"
+          variant="blockActionSecondary">
+          <FilesIcon className="!size-3.5" />
+          Copy
+        </Button>
+
+        <BlockActionButton
+          defaultStyles={false}
+          variant="blockActionSecondary" />
+      </div>
+    </PlateElement>
+  );
+}
+
+function CodeBlockCombobox({ className }: { className?: string }) {
+  const [open, setOpen] = useState(false);
+  const readOnly = useReadOnly();
+  const editor = useEditorRef();
+  const element = useElement<TCodeBlockElement>();
+  const value = element?.lang || 'plaintext';
+  const [searchValue, setSearchValue] = useState('');
+
+  const items = useMemo(
+    () => languages.filter(
+      language => !searchValue
+        || language.label.toLowerCase().includes(searchValue.toLowerCase())
+    ),
+    [searchValue]
+  );
+
+  if (readOnly) return null;
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          aria-expanded={open}
+          className={cn(
+            'h-5 w-auto select-none justify-between gap-1 rounded-sm px-[5px] align-top text-muted-foreground text-xs',
+            className
+          )}
+          contentEditable={false}
+          role="combobox"
+          size="none"
+          variant="menuAction">
+          {languages.find(language => language.value === value)?.label
+            ?? 'Plain Text'}
+          <ChevronDownIcon className="!size-3 shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[200px] p-0"
+        onCloseAutoFocus={() => setSearchValue('')}>
+        <Command shouldFilter={false}>
+          <CommandInput
+            asChild
+            onValueChange={v => setSearchValue(v)}
+            value={searchValue}>
+            <Input placeholder="Search language..." />
+          </CommandInput>
+
+          <CommandEmpty>No language found.</CommandEmpty>
+
+          <CommandList className="h-[344px] overflow-y-auto">
+            {items.map(language => (
+              <CommandItem
+                className="cursor-pointer"
+                key={language.label}
+                onSelect={(v) => {
+                  editor.tf.setNodes<TCodeBlockElement>(
+                    { lang: v },
+                    { at: element }
+                  );
+                  setSearchValue(v);
+                  setOpen(false);
+                }}
+                value={language.value}>
+                <CheckIcon
+                  className={cn(
+                    'mr-2 size-4',
+                    value === language.value ? 'opacity-100' : 'opacity-0'
+                  )} />
+                {language.label}
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function CodeLineElement(props: PlateElementProps) {
+  return <PlateElement {...props} />;
+}
+
+export function CodeSyntaxLeaf(props: PlateLeafProps) {
+  const tokenClassName = props.leaf.className as string;
+
+  return <PlateLeaf {...props} className={tokenClassName} />;
+}
+
+const languages: { label: string; value: string }[] = [
+  { label: 'Auto', value: 'auto' },
+  { label: 'Plain Text', value: 'plaintext' },
+  { label: 'ABAP', value: 'abap' },
+  { label: 'Arduino', value: 'arduino' },
+  { label: 'Bash', value: 'bash' },
+  { label: 'C', value: 'c' },
+  { label: 'C#', value: 'csharp' },
+  { label: 'C++', value: 'cpp' },
+  { label: 'Clojure', value: 'clojure' },
+  { label: 'CSS', value: 'css' },
+  { label: 'Dart', value: 'dart' },
+  { label: 'Diff', value: 'diff' },
+  { label: 'Docker', value: 'dockerfile' },
+  { label: 'Elixir', value: 'elixir' },
+  { label: 'Erlang', value: 'erlang' },
+  { label: 'Go', value: 'go' },
+  { label: 'GraphQL', value: 'graphql' },
+  { label: 'Groovy', value: 'groovy' },
+  { label: 'Haskell', value: 'haskell' },
+  { label: 'HTML', value: 'html' },
+  { label: 'Java', value: 'java' },
+  { label: 'JavaScript', value: 'javascript' },
+  { label: 'JSON', value: 'json' },
+  { label: 'Kotlin', value: 'kotlin' },
+  { label: 'LaTeX', value: 'latex' },
+  { label: 'Less', value: 'less' },
+  { label: 'Lua', value: 'lua' },
+  { label: 'Makefile', value: 'makefile' },
+  { label: 'Markdown', value: 'markdown' },
+  { label: 'MATLAB', value: 'matlab' },
+  { label: 'Objective-C', value: 'objectivec' },
+  { label: 'OCaml', value: 'ocaml' },
+  { label: 'Perl', value: 'perl' },
+  { label: 'PHP', value: 'php' },
+  { label: 'PowerShell', value: 'powershell' },
+  { label: 'Python', value: 'python' },
+  { label: 'R', value: 'r' },
+  { label: 'Ruby', value: 'ruby' },
+  { label: 'Rust', value: 'rust' },
+  { label: 'Sass', value: 'scss' },
+  { label: 'Scala', value: 'scala' },
+  { label: 'Shell', value: 'shell' },
+  { label: 'SQL', value: 'sql' },
+  { label: 'Swift', value: 'swift' },
+  { label: 'TOML', value: 'toml' },
+  { label: 'TypeScript', value: 'typescript' },
+  { label: 'XML', value: 'xml' },
+  { label: 'YAML', value: 'yaml' }
+];

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

@@ -0,0 +1,11 @@
+
+import { type SlateLeafProps, SlateLeaf } from 'platejs/static';
+
+export function CodeLeafStatic(props: SlateLeafProps) {
+  return (
+    <SlateLeaf
+      {...props}
+      as="code"
+      className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm" />
+  );
+}

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

@@ -0,0 +1,12 @@
+'use client';
+
+import { PlateLeaf, type PlateLeafProps } from 'platejs/react';
+
+export function CodeLeaf(props: PlateLeafProps) {
+  return (
+    <PlateLeaf
+      {...props}
+      as="code"
+      className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm" />
+  );
+}

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

@@ -0,0 +1,65 @@
+
+import { type TColumnElement } from 'platejs';
+
+import { SlateElement, type SlateElementProps } from 'platejs/static';
+
+export function ColumnElementStatic(props: SlateElementProps<TColumnElement>) {
+  const { width } = props.element;
+
+  return (
+    <SlateElement
+      className="border border-transparent p-1.5"
+      style={{ width: width ?? '100%' }}
+      {...props} />
+  );
+}
+
+export function ColumnGroupElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement className="my-2" {...props}>
+      <div className="flex size-full gap-4 rounded">{props.children}</div>
+    </SlateElement>
+  );
+}
+
+/**
+ * DOCX-compatible column component using table cell.
+ */
+export function ColumnElementDocx(props: SlateElementProps<TColumnElement>) {
+  const { width } = props.element;
+
+  return (
+    <SlateElement
+      {...props}
+      as="td"
+      style={{
+        width: width ?? 'auto',
+        verticalAlign: 'top',
+        padding: '4px 8px',
+        border: 'none'
+      }}>
+      {props.children}
+    </SlateElement>
+  );
+}
+
+/**
+ * DOCX-compatible column group component using table layout.
+ */
+export function ColumnGroupElementDocx(props: SlateElementProps) {
+  return (
+    <SlateElement {...props}>
+      <table
+        style={{
+          width: '100%',
+          borderCollapse: 'collapse',
+          border: 'none',
+          tableLayout: 'fixed'
+        }}>
+        <tbody>
+          <tr>{props.children}</tr>
+        </tbody>
+      </table>
+    </SlateElement>
+  );
+}