@docyrus/ui-pro-ai-assistant 0.0.1

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

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

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

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

@@ -0,0 +1,208 @@
+'use client';
+
+import { useState } from 'react';
+
+import * as React 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>
+  );
+}