sync: export from private super-repo

Author: hotdocx

packages/web/package.json

@@ -5,7 +5,8 @@
     "exports": {
         ".": "./src/index.ts",
         "./preview": "./src/preview/index.ts",
-        "./adapters": "./src/adapters/index.ts"
+        "./adapters": "./src/adapters/index.ts",
+        "./embed": "./src/embed/index.ts"
     },
     "scripts": {
         "dev": "vite",

packages/web/src/App.tsx

@@ -229,7 +229,11 @@ export default function App() {
             <PaperEditor
               initialMarkdown={activeProject.spec}
               filename={activeProject.name}
-              onSave={(content) => {
+              onPersist={async (content) => {
+                await saveProject(activeProject.name, content, 'paper');
+                setActiveProject(prev => prev ? ({ ...prev, spec: content }) : null);
+              }}
+              onChange={(content) => {
                 setActiveProject(prev => prev ? ({ ...prev, spec: content }) : null);
               }}
             />
@@ -332,4 +336,4 @@ export default function App() {
       />
     </div>
   );
-}
+}

packages/web/src/components/PaperEditor/PaperEditor.tsx

@@ -3,15 +3,26 @@ import { PreviewController } from './PreviewController';
 import { PanelLeft, PanelRight, Printer, Save, Image as ImageIcon, X } from 'lucide-react';
 import { ArrowGramEditor } from '../../ArrowGramEditor';
 import { useToast } from '../../context/ToastContext';
-import { saveProject } from '../../utils/storage';
 
 interface PaperEditorProps {
     initialMarkdown: string;
     filename: string;
-    onSave?: (content: string) => void;
+    onPersist?: (content: string) => Promise<void> | void;
+    onChange?: (content: string) => void;
+    onPrint?: (content: string, opts: { isTwoColumn: boolean }) => void;
+    showSaveButton?: boolean;
+    showPrintButton?: boolean;
 }
 
-export function PaperEditor({ initialMarkdown, filename, onSave }: PaperEditorProps) {
+export function PaperEditor({
+    initialMarkdown,
+    filename,
+    onPersist,
+    onChange,
+    onPrint,
+    showSaveButton = true,
+    showPrintButton = true,
+}: PaperEditorProps) {
     const [markdown, setMarkdown] = useState(initialMarkdown);
     const [isTwoColumn, setIsTwoColumn] = useState(false);
     const [filesView, setFilesView] = useState('split'); // 'split', 'code', 'preview'
@@ -25,20 +36,31 @@ export function PaperEditor({ initialMarkdown, filename, onSave }: PaperEditorPr
 
     // -- File Operations --
     const handleSave = async () => {
+        if (!onPersist) {
+            addToast("Save is not configured in this host app.", "error");
+            return;
+        }
+
         try {
-            await saveProject(filename, markdown, 'paper');
+            await onPersist(markdown);
             addToast("Paper saved successfully!", "success");
-            onSave?.(markdown);
         } catch (e) {
             console.error(e);
             addToast("Failed to save paper.", "error");
         }
     };
 
     const handlePrint = () => {
+        if (onPrint) {
+            onPrint(markdown, { isTwoColumn });
+            return;
+        }
+
         localStorage.setItem('print_content', markdown);
         localStorage.setItem('print_layout', String(isTwoColumn));
-        window.open('/print-preview', '_blank');
+        const baseUrl = new URL(import.meta.env.BASE_URL, window.location.origin);
+        const href = new URL('print-preview', baseUrl).toString();
+        window.open(href, '_blank');
     };
 
     // -- Diagram Editing --
@@ -107,6 +129,7 @@ export function PaperEditor({ initialMarkdown, filename, onSave }: PaperEditorPr
                     <button
                         onClick={handlePrint}
                         className="flex items-center gap-2 px-3 py-1.5 text-gray-600 hover:bg-gray-100 rounded-md text-sm font-medium transition-colors"
+                        style={{ display: showPrintButton ? undefined : 'none' }}
                     >
                         <Printer size={16} />
                         Print PDF
@@ -115,6 +138,7 @@ export function PaperEditor({ initialMarkdown, filename, onSave }: PaperEditorPr
                     <button
                         onClick={handleSave}
                         className="flex items-center gap-2 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md text-sm font-medium transition-colors shadow-sm"
+                        style={{ display: showSaveButton ? undefined : 'none' }}
                     >
                         <Save size={16} />
                         Save
@@ -132,7 +156,11 @@ export function PaperEditor({ initialMarkdown, filename, onSave }: PaperEditorPr
                     <textarea
                         className="flex-1 w-full h-full p-6 resize-none outline-none font-mono text-sm bg-white text-gray-800 leading-relaxed"
                         value={markdown}
-                        onChange={(e) => setMarkdown(e.target.value)}
+                        onChange={(e) => {
+                            const next = e.target.value;
+                            setMarkdown(next);
+                            onChange?.(next);
+                        }}
                         placeholder="# Start writing your paper..."
                         spellCheck={false}
                     />

packages/web/src/components/PaperEditor/PreviewController.tsx

@@ -1,14 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
-import ReactDOMServer from 'react-dom/server';
-import showdown from 'showdown';
-import mermaid from 'mermaid';
-import katex from 'katex';
-// @ts-ignore
-import * as vega from 'vega';
-// @ts-ignore
-import * as vegaLite from 'vega-lite';
-import { Previewer } from 'pagedjs';
 import { ArrowGramStatic } from '../ArrowGramStatic';
 import './styles.css';
 
@@ -55,6 +46,8 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
     const pagedInstance = useRef<any>(null);
 
     useEffect(() => {
+        if (import.meta.env.SSR) return;
+
         let isMounted = true;
         // Use a simple ID to track the latest render request
         const renderId = Date.now();
@@ -66,6 +59,32 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
         const processAndRender = async () => {
             if (!containerRef.current) return;
 
+            const [
+                ReactDOMServer,
+                showdownMod,
+                mermaidMod,
+                katexMod,
+                vega,
+                vegaLite,
+                pagedjs,
+            ] = await Promise.all([
+                import('react-dom/server.browser'),
+                import('showdown'),
+                import('mermaid'),
+                import('katex'),
+                // These modules are browser-safe. Keeping them dynamic avoids SSR bundling issues (e.g. node-canvas).
+                // @ts-ignore
+                import('vega'),
+                // @ts-ignore
+                import('vega-lite'),
+                import('pagedjs'),
+            ]);
+
+            const showdown = (showdownMod as any).default ?? showdownMod;
+            const mermaid = (mermaidMod as any).default ?? mermaidMod;
+            const katex = (katexMod as any).default ?? katexMod;
+            const Previewer = (pagedjs as any).Previewer ?? (pagedjs as any).default?.Previewer;
+
             // 1. Pre-process Vega Lite
             let processedText = markdown;
             const vegaRegex = /<div class="vega-lite"([^>]*)>([\s\S]*?)<\/div>/g;
@@ -76,8 +95,8 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
                     if (!isMounted) return { original: '', replacement: '' };
                     try {
                         const spec = JSON.parse(match[2].trim());
-                        const vegaSpec = vegaLite.compile(spec).spec;
-                        const view = new vega.View(vega.parse(vegaSpec), { renderer: 'svg' });
+                        const vegaSpec = (vegaLite as any).compile(spec).spec;
+                        const view = new (vega as any).View((vega as any).parse(vegaSpec), { renderer: 'svg' });
                         const svg = await view.toSVG();
                         return { original: match[0], replacement: `<div class="vega-container"${match[1]}>${svg}</div>` };
                     } catch (e: any) {
@@ -95,14 +114,14 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
             }
 
             // 2. Pre-process Mermaid
-            mermaid.initialize({ startOnLoad: false, theme: 'base' });
+            (mermaid as any).initialize({ startOnLoad: false, theme: 'base' });
             const mermaidRegex = /<div class="mermaid"([^>]*)>([\s\S]*?)<\/div>/g;
             const mermaidMatches = Array.from(processedText.matchAll(mermaidRegex));
             const mermaidResults = await Promise.all(
                 mermaidMatches.map(async (match, i) => {
                     if (!isMounted) return { original: '', replacement: '' };
                     try {
-                        const { svg } = await mermaid.render(`mermaid-svg-${Date.now()}-${i}`, match[2].trim());
+                        const { svg } = await (mermaid as any).render(`mermaid-svg-${Date.now()}-${i}`, match[2].trim());
                         return { original: match[0], replacement: `<div class="mermaid-container"${match[1]}>${svg}</div>` };
                     } catch (e) { return { original: match[0], replacement: `<div class="mermaid-error">Diagram Error</div>` }; }
                 })
@@ -129,7 +148,7 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
                 try {
                     // Render the static SVG markup to ensure Paged.js sees the correct dimensions.
                     // onEdit is undefined here, so no button, but sizing is correct.
-                    const staticHtml = ReactDOMServer.renderToStaticMarkup(
+                    const staticHtml = (ReactDOMServer as any).renderToStaticMarkup(
                         <ArrowGramStatic spec={spec} />
                     );
                     return `<div id="${id}" class="arrowgram-hydrate-target">${staticHtml}</div>`;
@@ -158,7 +177,7 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
             processedText = processedText.replace(/\$(?!\$)(?:\\.|[^$\\\n])+\$/g, protectMath);
 
             // 5. Markdown -> HTML
-            const converter = new showdown.Converter({
+            const converter = new (showdown as any).Converter({
                 metadata: true,
                 noHeaderId: true,
                 literalMidWordUnderscores: true
@@ -189,7 +208,7 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
                     .replace(/\\\\([A-Za-z_])/g, '\\$1')
                     .replace(/\\\\([,;:.!])/g, '\\$1');
                 try {
-                    return `<span class="katex-display">${katex.renderToString(cleaned, { displayMode: true, throwOnError: false })}</span>`;
+                    return `<span class="katex-display">${(katex as any).renderToString(cleaned, { displayMode: true, throwOnError: false })}</span>`;
                 } catch (e: any) { return `<span class="katex-error">${e.message}</span>`; }
             });
             // Inline mode: $...$ (non-greedy)
@@ -199,7 +218,7 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
                     .replace(/\\\\([A-Za-z_])/g, '\\$1')
                     .replace(/\\\\([,;:.!])/g, '\\$1');
                 try {
-                    return katex.renderToString(cleaned, { displayMode: false, throwOnError: false });
+                    return (katex as any).renderToString(cleaned, { displayMode: false, throwOnError: false });
                 } catch (e: any) { return `<span class="katex-error">${e.message}</span>`; }
             });
 
@@ -229,7 +248,7 @@ export const PreviewController = ({ markdown, isTwoColumn, onEditDiagram }: Prev
                 const katexCss = document.querySelector('link[href*="katex"]')?.getAttribute('href') || "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css";
                 stylesheets.push(katexCss);
 
-                const paged = new Previewer();
+                const paged = new (Previewer as any)();
                 pagedInstance.current = paged;
 
                 paged.preview(finalHtml, stylesheets, containerRef.current).then(() => {

packages/web/src/embed/ArrowgramPaperEditor.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../styles.css';
+import { ToastProvider } from '../context/ToastContext';
+import { PaperEditor } from '../components/PaperEditor/PaperEditor';
+
+export type ArrowgramPaperEditorProps = React.ComponentProps<typeof PaperEditor>;
+
+export function ArrowgramPaperEditor(props: ArrowgramPaperEditorProps) {
+  return (
+    <ToastProvider>
+      <PaperEditor {...props} />
+    </ToastProvider>
+  );
+}
+

packages/web/src/embed/index.ts

@@ -0,0 +1,2 @@
+export * from './ArrowgramPaperEditor';
+

packages/web/src/index.ts

@@ -1,2 +1,4 @@
 export * from './preview';
 export * from './adapters';
+export * from './embed';
+export * from './context/ToastContext';