@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.5

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

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

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

@@ -1,47 +0,0 @@
-import { type ComponentPropsWithoutRef } 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

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

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

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

@@ -1,226 +0,0 @@
-'use client';
-
-import { useMemo, useState } 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(
-                    { lang: v } as TCodeBlockElement,
-                    { 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

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

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

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