doclific 0.1.0

package/frontend/src/components/ui/equation-node-static.tsx

@@ -0,0 +1,98 @@
+import type { TEquationElement } from 'platejs';
+import type { SlateElementProps } from 'platejs/static';
+
+import { getEquationHtml } from '@platejs/math';
+import { RadicalIcon } from 'lucide-react';
+import { SlateElement } from 'platejs/static';
+
+import { cn } from '@/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(
+          'group flex 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'
+        )}
+      >
+        {element.texExpression.length > 0 ? (
+          <span
+            dangerouslySetInnerHTML={{
+              __html: html,
+            }}
+          />
+        ) : (
+          <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>
+      {props.children}
+    </SlateElement>
+  );
+}
+
+export function InlineEquationElementStatic(
+  props: SlateElementProps<TEquationElement>
+) {
+  const html = getEquationHtml({
+    element: props.element,
+    options: {
+      displayMode: true,
+      errorColor: '#cc0000',
+      fleqn: false,
+      leqno: false,
+      macros: { '\\f': '#1f(#2)' },
+      output: 'htmlAndMathml',
+      strict: 'warn',
+      throwOnError: false,
+      trust: false,
+    },
+  });
+
+  return (
+    <SlateElement
+      {...props}
+      className="inline-block select-none rounded-sm [&_.katex-display]:my-0"
+    >
+      <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',
+          props.element.texExpression.length === 0 &&
+          'text-muted-foreground after:bg-neutral-500/10'
+        )}
+      >
+        <span
+          className={cn(
+            props.element.texExpression.length === 0 && 'hidden',
+            'font-mono leading-none'
+          )}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+      {props.children}
+    </SlateElement>
+  );
+}

package/frontend/src/components/ui/equation-node.tsx

@@ -0,0 +1,235 @@
+import React from 'react';
+import TextareaAutosize, {
+  type TextareaAutosizeProps,
+} from 'react-textarea-autosize';
+
+import type { TEquationElement } from 'platejs';
+import type { PlateElementProps } from 'platejs/react';
+
+import { useEquationElement, useEquationInput } from '@platejs/math/react';
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import { CornerDownLeftIcon, RadicalIcon } from 'lucide-react';
+import {
+  createPrimitiveComponent,
+  PlateElement,
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useReadOnly,
+  useSelected,
+} from 'platejs/react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+export function EquationElement(props: PlateElementProps<TEquationElement>) {
+  const selected = useSelected();
+  const [open, setOpen] = React.useState(selected);
+  const katexRef = React.useRef<HTMLDivElement | null>(null);
+
+  useEquationElement({
+    element: props.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 open={open} onOpenChange={setOpen} modal={false}>
+        <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',
+              props.element.texExpression.length === 0
+                ? 'bg-muted p-3 pr-9'
+                : 'px-2 py-1'
+            )}
+            data-selected={selected}
+            contentEditable={false}
+            role="button"
+          >
+            {props.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
+          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}'
+          }
+          isInline={false}
+          setOpen={setOpen}
+        />
+      </Popover>
+
+      {props.children}
+    </PlateElement>
+  );
+}
+
+export function InlineEquationElement(
+  props: PlateElementProps<TEquationElement>
+) {
+  const element = props.element;
+  const katexRef = React.useRef<HTMLDivElement | null>(null);
+  const selected = useSelected();
+  const isCollapsed = useEditorSelector(
+    (editor) => editor.api.isCollapsed(),
+    []
+  );
+  const [open, setOpen] = React.useState(selected && isCollapsed);
+
+  React.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
+      {...props}
+      className={cn(
+        'mx-1 inline-block select-none rounded-sm [&_.katex-display]:my-0!'
+      )}
+    >
+      <Popover open={open} onOpenChange={setOpen} modal={false}>
+        <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
+              ref={katexRef}
+              className={cn(
+                element.texExpression.length === 0 && 'hidden',
+                'font-mono leading-none'
+              )}
+            />
+            {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"
+          open={open}
+          placeholder="E = mc^2"
+          setOpen={setOpen}
+          isInline
+        />
+      </Popover>
+
+      {props.children}
+    </PlateElement>
+  );
+}
+
+const EquationInput = createPrimitiveComponent(TextareaAutosize)({
+  propsHook: useEquationInput,
+});
+
+const 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>();
+
+  React.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"
+      onEscapeKeyDown={(e) => {
+        e.preventDefault();
+      }}
+      contentEditable={false}
+    >
+      <EquationInput
+        className={cn('max-h-[50vh] grow resize-none p-2 text-sm', className)}
+        state={{ isInline, open, onClose }}
+        autoFocus
+        {...props}
+      />
+
+      <Button variant="secondary" className="px-3" onClick={onClose}>
+        Done <CornerDownLeftIcon className="size-3.5" />
+      </Button>
+    </PopoverContent>
+  );
+};

package/frontend/src/components/ui/equation-toolbar-button.tsx

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

package/frontend/src/components/ui/excalidraw-node.tsx

@@ -0,0 +1,36 @@
+
+
+import type { TExcalidrawElement } from '@platejs/excalidraw';
+import type { PlateElementProps } from 'platejs/react';
+
+import { useExcalidrawElement } from '@platejs/excalidraw/react';
+import { PlateElement, useReadOnly } from 'platejs/react';
+
+import '@excalidraw/excalidraw/index.css';
+
+export function ExcalidrawElement(
+  props: PlateElementProps<TExcalidrawElement>
+) {
+  const { children, element } = props;
+  const readOnly = useReadOnly();
+
+  const { Excalidraw, excalidrawProps } = useExcalidrawElement({
+    element,
+  });
+
+  return (
+    <PlateElement {...props}>
+      <div contentEditable={false}>
+        <div className="mx-auto aspect-video h-[600px] w-[min(100%,600px)] overflow-hidden rounded-sm border">
+          {Excalidraw && (
+            <Excalidraw
+              {...(excalidrawProps as any)}
+              viewModeEnabled={readOnly}
+            />
+          )}
+        </div>
+      </div>
+      {children}
+    </PlateElement>
+  );
+}

package/frontend/src/components/ui/export-toolbar-button.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { MarkdownPlugin } from '@platejs/markdown';
+import { ArrowDownToLineIcon } from 'lucide-react';
+import { createSlateEditor } from 'platejs';
+import { useEditorRef } from 'platejs/react';
+import { serializeHtml } from 'platejs/static';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { BaseEditorKit } from '@/components/editor/editor-base-kit';
+
+import { EditorStatic } from './editor-static';
+import { ToolbarButton } from './toolbar';
+
+const siteUrl = 'https://platejs.org';
+
+export function ExportToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.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: EditorStatic,
+      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');
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Export" isDropdown>
+          <ArrowDownToLineIcon className="size-4" />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <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>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}