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

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

@@ -1,155 +0,0 @@
-
-import { type TEquationElement } from 'platejs';
-
-import { getEquationHtml } from '@platejs/math';
-
-import { SlateElement, type SlateElementProps } from 'platejs/static';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-export function EquationElementStatic(
-  props: SlateElementProps<TEquationElement>
-) {
-  const { element } = props;
-
-  const html = getEquationHtml({
-    element,
-    options: {
-      displayMode: true,
-      errorColor: '#cc0000',
-      fleqn: false,
-      leqno: false,
-      macros: { '\\f': '#1f(#2)' },
-      output: 'htmlAndMathml',
-      strict: 'warn',
-      throwOnError: false,
-      trust: false
-    }
-  });
-
-  return (
-    <SlateElement className="my-1" {...props}>
-      <div
-        className={cn(
-          'flex select-none items-center justify-center rounded-sm',
-          element.texExpression.length === 0 ? 'bg-muted p-3' : 'px-2 py-1'
-        )}>
-        <span
-          dangerouslySetInnerHTML={{
-            __html: html
-          }} />
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}
-
-export function InlineEquationElementStatic(
-  props: SlateElementProps<TEquationElement>
-) {
-  const { element } = props;
-
-  const html = getEquationHtml({
-    element,
-    options: {
-      displayMode: true,
-      errorColor: '#cc0000',
-      fleqn: false,
-      leqno: false,
-      macros: { '\\f': '#1f(#2)' },
-      output: 'htmlAndMathml',
-      strict: 'warn',
-      throwOnError: false,
-      trust: false
-    }
-  });
-
-  return (
-    <SlateElement
-      className="inline-block select-none rounded-sm [&_.katex-display]:my-0"
-      {...props}>
-      <div
-        className={cn(
-          'after:-top-0.5 after:-left-1 after:absolute after:inset-0 after:z-1 after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[""]',
-          'h-6',
-          element.texExpression.length === 0
-          && 'text-muted-foreground after:bg-neutral-500/10'
-        )}>
-        <span
-          className={cn(
-            element.texExpression.length === 0 && 'hidden',
-            'font-mono leading-none'
-          )}
-          dangerouslySetInnerHTML={{
-            __html: html
-          }} />
-      </div>
-      {props.children}
-    </SlateElement>
-  );
-}
-
-/**
- * DOCX-compatible block equation component.
- * Displays LaTeX source code with styling.
- */
-export function EquationElementDocx(
-  props: SlateElementProps<TEquationElement>
-) {
-  const { element } = props;
-
-  if (!element.texExpression || element.texExpression.length === 0) {
-    return (
-      <SlateElement {...props}>
-        <p style={{ color: '#888', fontStyle: 'italic' }}>[Empty equation]</p>
-        {props.children}
-      </SlateElement>
-    );
-  }
-
-  return (
-    <SlateElement {...props}>
-      <p
-        style={{
-          fontFamily: 'Cambria Math, Consolas, monospace',
-          fontSize: '12pt',
-          margin: '8pt 0',
-          textAlign: 'center'
-        }}>
-        {element.texExpression}
-      </p>
-      {props.children}
-    </SlateElement>
-  );
-}
-
-/**
- * DOCX-compatible inline equation component.
- * Displays LaTeX source code inline.
- */
-export function InlineEquationElementDocx(
-  props: SlateElementProps<TEquationElement>
-) {
-  const { element } = props;
-
-  if (!element.texExpression || element.texExpression.length === 0) {
-    return (
-      <SlateElement {...props} as="span">
-        <span style={{ color: '#888', fontStyle: 'italic' }}>[equation]</span>
-        {props.children}
-      </SlateElement>
-    );
-  }
-
-  return (
-    <SlateElement {...props} as="span">
-      <span
-        style={{
-          fontFamily: 'Cambria Math, Consolas, monospace'
-        }}>
-        {element.texExpression}
-      </span>
-      {props.children}
-    </SlateElement>
-  );
-}

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

@@ -1,226 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-import { type TEquationElement } from 'platejs';
-
-import { useEquationElement, useEquationInput } from '@platejs/math/react';
-import { BlockSelectionPlugin } from '@platejs/selection/react';
-import { CornerDownLeftIcon, RadicalIcon } from 'lucide-react';
-import {
-  createPrimitiveComponent,
-  PlateElement,
-  type PlateElementProps,
-  useEditorRef,
-  useEditorSelector,
-  useElement,
-  useReadOnly,
-  useSelected
-} from 'platejs/react';
-
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-import { BlockActionButton } from './block-context-menu';
-import { Button } from './button';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import { TextareaAutosize, type TextareaAutosizeProps } from './textarea';
-
-export function EquationElement(props: PlateElementProps) {
-  const element = useElement<TEquationElement>();
-  const selected = useSelected();
-  const [open, setOpen] = useState(selected);
-  const katexRef = useRef<HTMLDivElement | null>(null);
-
-  useEquationElement({
-    element,
-    katexRef,
-    options: {
-      displayMode: true,
-      errorColor: '#cc0000',
-      fleqn: false,
-      leqno: false,
-      macros: { '\\f': '#1f(#2)' },
-      output: 'htmlAndMathml',
-      strict: 'warn',
-      throwOnError: false,
-      trust: false
-    }
-  });
-
-  return (
-    <PlateElement className="my-1" {...props}>
-      <Popover modal={false} onOpenChange={setOpen} open={open}>
-        <PopoverTrigger asChild>
-          <div
-            className={cn(
-              'group flex cursor-pointer select-none items-center justify-center rounded-sm hover:bg-primary/10 data-[selected=true]:bg-primary/10',
-              element.texExpression.length === 0 ? 'bg-muted p-3 pr-9' : 'px-2 py-1'
-            )}
-            contentEditable={false}
-            data-selected={selected}
-            role="button">
-            {element.texExpression.length > 0 ? (
-              <span ref={katexRef} />
-            ) : (
-              <div className="flex h-7 w-full items-center gap-2 whitespace-nowrap text-muted-foreground text-sm">
-                <RadicalIcon className="size-6 text-muted-foreground/80" />
-                <div>Add a Tex equation</div>
-              </div>
-            )}
-          </div>
-        </PopoverTrigger>
-
-        <EquationPopoverContent
-          isInline={false}
-          open={open}
-          placeholder={'f(x) = \\begin{cases}\n  x^2, &\\quad x > 0 \\\\\n  0, &\\quad x = 0 \\\\\n  -x^2, &\\quad x < 0\n\\end{cases}'}
-          setOpen={setOpen}
-          variant="equation" />
-      </Popover>
-
-      <BlockActionButton />
-
-      {props.children}
-    </PlateElement>
-  );
-}
-
-export function InlineEquationElement(
-  props: PlateElementProps<TEquationElement>
-) {
-  const { element } = props;
-  const katexRef = useRef<HTMLDivElement | null>(null);
-  const selected = useSelected();
-  const isCollapsed = useEditorSelector(
-    editor => editor?.api?.isCollapsed() ?? false,
-    []
-  );
-  const [open, setOpen] = useState(selected && isCollapsed);
-
-  // Sync popover open state from editor selection
-  useEffect(() => {
-    if (selected && isCollapsed) {
-      setOpen(true);
-    }
-  }, [selected, isCollapsed]);
-
-  useEquationElement({
-    element,
-    katexRef,
-    options: {
-      displayMode: true,
-      errorColor: '#cc0000',
-      fleqn: false,
-      leqno: false,
-      macros: { '\\f': '#1f(#2)' },
-      output: 'htmlAndMathml',
-      strict: 'warn',
-      throwOnError: false,
-      trust: false
-    }
-  });
-
-  return (
-    <PlateElement
-      className="mx-1 inline-block select-none rounded-sm [&_.katex-display]:my-0!"
-      {...props}>
-      <Popover modal={false} onOpenChange={setOpen} open={open}>
-        <PopoverTrigger asChild>
-          <div
-            className={cn(
-              'after:-top-0.5 after:-left-1 after:absolute after:inset-0 after:z-1 after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[""]',
-              'h-6',
-              ((element.texExpression.length > 0 && open) || selected)
-              && 'after:bg-brand/15',
-              element.texExpression.length === 0
-              && 'text-muted-foreground after:bg-neutral-500/10'
-            )}
-            contentEditable={false}>
-            <span
-              className={cn(
-                element.texExpression.length === 0 && 'hidden',
-                'font-mono leading-none'
-              )}
-              ref={katexRef} />
-            {element.texExpression.length === 0 && (
-              <span>
-                <RadicalIcon className="mr-1 inline-block h-[19px] w-4 py-[1.5px] align-text-bottom" />
-                New equation
-              </span>
-            )}
-          </div>
-        </PopoverTrigger>
-
-        <EquationPopoverContent
-          className="my-auto"
-          isInline={true}
-          open={open}
-          placeholder="E = mc^2"
-          setOpen={setOpen}
-          variant="equationInline" />
-      </Popover>
-
-      {props.children}
-    </PlateElement>
-  );
-}
-
-const EquationInput = createPrimitiveComponent(TextareaAutosize)({
-  propsHook: useEquationInput
-});
-
-function EquationPopoverContent({
-  className,
-  isInline,
-  open,
-  setOpen,
-  ...props
-}: {
-  isInline: boolean;
-  open: boolean;
-  setOpen: (open: boolean) => void;
-} & TextareaAutosizeProps) {
-  const editor = useEditorRef();
-  const readOnly = useReadOnly();
-  const element = useElement<TEquationElement>();
-
-  useEffect(() => {
-    if (isInline && open) {
-      setOpen(true);
-    }
-  }, [isInline, open, setOpen]);
-
-  if (readOnly) return null;
-
-  const onClose = () => {
-    setOpen(false);
-
-    if (isInline) {
-      editor.tf.select(element, { focus: true, next: true });
-    } else {
-      editor
-        .getApi(BlockSelectionPlugin)
-        .blockSelection.set(element.id as string);
-    }
-  };
-
-  return (
-    <PopoverContent
-      className="flex gap-2"
-      contentEditable={false}
-      onEscapeKeyDown={(e) => {
-        e.preventDefault();
-      }}
-      variant="equation">
-      <EquationInput
-        autoFocus
-        className={cn('grow', className)}
-        state={{ isInline, open: true, onClose }}
-        {...props} />
-
-      <Button className="px-3" onClick={onClose} variant="brand">
-        Done <CornerDownLeftIcon className="size-3.5" />
-      </Button>
-    </PopoverContent>
-  );
-}

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

@@ -1,26 +0,0 @@
-'use client';
-
-import { type ComponentProps } from 'react';
-
-import { insertInlineEquation } from '@platejs/math';
-import { RadicalIcon } from 'lucide-react';
-import { useEditorRef } from 'platejs/react';
-
-import { ToolbarButton } from './toolbar';
-
-export function InlineEquationToolbarButton(
-  props: ComponentProps<typeof ToolbarButton>
-) {
-  const editor = useEditorRef();
-
-  return (
-    <ToolbarButton
-      tooltip="Mark as equation"
-      {...props}
-      onClick={() => {
-        insertInlineEquation(editor);
-      }}>
-      <RadicalIcon />
-    </ToolbarButton>
-  );
-}

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

@@ -1,206 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { type SlatePlugin, createSlateEditor } from 'platejs';
-
-import { exportToDocx } from '@platejs/docx-io';
-import { MarkdownPlugin } from '@platejs/markdown';
-import { ArrowDownToLineIcon } from 'lucide-react';
-import { useEditorRef } from 'platejs/react';
-import { PlateStatic, serializeHtml } from 'platejs/static';
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  type DropdownMenuProps
-} from './dropdown-menu';
-import { BaseEditorKit } from '../editor/editor-base-kit';
-import { ToolbarButton } from './toolbar';
-import { DocxExportKit } from '../editor/plugins/docx-export-kit';
-
-const siteUrl = 'https://platejs.org';
-
-export function ExportToolbarButton(props: DropdownMenuProps) {
-  const editor = useEditorRef();
-  const [open, setOpen] = useState(false);
-
-  const getCanvas = async () => {
-    const { default: html2canvas } = await import('html2canvas-pro');
-
-    const style = document.createElement('style');
-
-    document.head.append(style);
-
-    const canvas = await html2canvas(editor.api.toDOMNode(editor)!, {
-      onclone: (document: Document) => {
-        const editorElement = document.querySelector(
-          '[contenteditable="true"]'
-        );
-
-        if (editorElement) {
-          Array.from(editorElement.querySelectorAll('*')).forEach((element) => {
-            const existingStyle = element.getAttribute('style') || '';
-
-            element.setAttribute(
-              'style',
-              `${existingStyle}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important`
-            );
-          });
-        }
-      }
-    });
-
-    style.remove();
-
-    return canvas;
-  };
-
-  const downloadFile = async (url: string, filename: string) => {
-    const response = await fetch(url);
-
-    const blob = await response.blob();
-    const blobUrl = window.URL.createObjectURL(blob);
-
-    const link = document.createElement('a');
-
-    link.href = blobUrl;
-    link.download = filename;
-    document.body.append(link);
-    link.click();
-    link.remove();
-
-    // Clean up the blob URL
-    window.URL.revokeObjectURL(blobUrl);
-  };
-
-  const exportToPdf = async () => {
-    const canvas = await getCanvas();
-
-    const PDFLib = await import('pdf-lib');
-    const pdfDoc = await PDFLib.PDFDocument.create();
-    const page = pdfDoc.addPage([canvas.width, canvas.height]);
-    const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG'));
-    const { height, width } = imageEmbed.scale(1);
-
-    page.drawImage(imageEmbed, {
-      height,
-      width,
-      x: 0,
-      y: 0
-    });
-    const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true });
-
-    await downloadFile(pdfBase64, 'plate.pdf');
-  };
-
-  const exportToImage = async () => {
-    const canvas = await getCanvas();
-
-    await downloadFile(canvas.toDataURL('image/png'), 'plate.png');
-  };
-
-  const exportToHtml = async () => {
-    const editorStatic = createSlateEditor({
-      plugins: BaseEditorKit,
-      value: editor.children
-    });
-
-    const editorHtml = await serializeHtml(editorStatic, {
-      editorComponent: PlateStatic,
-      props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } }
-    });
-
-    const tailwindCss = `<link rel="stylesheet" href="${siteUrl}/tailwind.css">`;
-    const katexCss = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.css" integrity="sha384-9PvLvaiSKCPkFKB1ZsEoTjgnJn+O3KvEwtsz37/XrkYft3DTk2gHdYvd9oWgW3tV" crossorigin="anonymous">`;
-
-    const html = `<!DOCTYPE html>
-    <html lang="en">
-      <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="color-scheme" content="light dark" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap"
-          rel="stylesheet"
-        />
-        ${tailwindCss}
-        ${katexCss}
-        <style>
-          :root {
-            --font-sans: 'Inter', 'Inter Fallback';
-            --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
-          }
-        </style>
-      </head>
-      <body>
-        ${editorHtml}
-      </body>
-    </html>`;
-
-    const url = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
-
-    await downloadFile(url, 'plate.html');
-  };
-
-  const exportToMarkdown = async () => {
-    const md = editor.getApi(MarkdownPlugin).markdown.serialize();
-    const url = `data:text/markdown;charset=utf-8,${encodeURIComponent(md)}`;
-
-    await downloadFile(url, 'plate.md');
-  };
-
-  const exportToWord = async () => {
-    const blob = await exportToDocx(editor.children, {
-      editorPlugins: [...BaseEditorKit, ...DocxExportKit] as SlatePlugin[]
-    });
-
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-
-    link.href = url;
-    link.download = 'plate.docx';
-    document.body.append(link);
-    link.click();
-    link.remove();
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip="Export" isDropdown>
-          <ArrowDownToLineIcon className="size-4" />
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuPortal>
-        <DropdownMenuContent align="start">
-          <DropdownMenuGroup>
-            <DropdownMenuItem onSelect={exportToHtml}>
-              Export as HTML
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={exportToPdf}>
-              Export as PDF
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={exportToImage}>
-              Export as Image
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={exportToMarkdown}>
-              Export as Markdown
-            </DropdownMenuItem>
-            <DropdownMenuItem onSelect={exportToWord}>
-              Export as Word
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </DropdownMenu>
-  );
-}