doclific 0.2.1 → 0.2.3

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

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

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

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

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

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