smartrte-react 0.1.2

package/dist/components/DiagramEditor.d.ts

@@ -0,0 +1,5 @@
+export declare function DiagramEditor({ open, onClose, onInsert, }: {
+    open: boolean;
+    onClose: () => void;
+    onInsert: (dataUrl: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DiagramEditor.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function DiagramEditor({ open, onClose, onInsert, }) {
+    const [code, setCode] = useState("graph TD\nA[Start] --> B{Decision}\nB -- Yes --> C[Do thing]\nB -- No --> D[Stop]");
+    const [svg, setSvg] = useState("");
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        (async () => {
+            const loadMermaid = async () => {
+                // Use existing global if present
+                if (window.mermaid)
+                    return window.mermaid;
+                // Load from CDN lazily to avoid bundler resolution
+                await new Promise((resolve) => {
+                    const s = document.createElement("script");
+                    s.src = "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js";
+                    s.async = true;
+                    s.onload = () => resolve();
+                    s.onerror = () => resolve();
+                    document.head.appendChild(s);
+                });
+                return window.mermaid;
+            };
+            try {
+                const mermaid = await loadMermaid();
+                if (mermaid && mermaid.initialize) {
+                    mermaid.initialize({ startOnLoad: false });
+                    const { svg } = await mermaid.render("diagram-preview", code);
+                    if (mounted.current)
+                        setSvg(svg);
+                }
+                else {
+                    setSvg(`<svg xmlns='http://www.w3.org/2000/svg' width='400' height='80'><text x='10' y='40' font-family='monospace'>Mermaid not available</text></svg>`);
+                }
+            }
+            catch {
+                setSvg(`<svg xmlns='http://www.w3.org/2000/svg' width='400' height='80'><text x='10' y='40' font-family='monospace'>Mermaid not available</text></svg>`);
+            }
+        })();
+    }, [open, code]);
+    if (!open)
+        return null;
+    const toDataUrl = (svgText) => `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
+    return (_jsx("div", { style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.4)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 100,
+        }, onClick: onClose, children: _jsxs("div", { style: {
+                background: "#fff",
+                padding: 16,
+                borderRadius: 8,
+                minWidth: 520,
+                maxWidth: 820,
+                width: "90%",
+            }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Insert diagram (Mermaid)" }), _jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }, children: [_jsx("textarea", { value: code, onChange: (e) => setCode(e.target.value), rows: 12, style: { width: "100%", fontFamily: "monospace" } }), _jsx("div", { style: { border: "1px solid #eee", padding: 8, overflow: "auto" }, dangerouslySetInnerHTML: { __html: svg } })] }), _jsxs("div", { style: {
+                        display: "flex",
+                        gap: 8,
+                        justifyContent: "flex-end",
+                        marginTop: 12,
+                    }, children: [_jsx("button", { onClick: onClose, children: "Cancel" }), _jsx("button", { onClick: () => onInsert(toDataUrl(svg || "")), children: "Insert" })] })] }) }));
+}

package/dist/components/FormulaEditor.d.ts

@@ -0,0 +1,6 @@
+import "katex/dist/katex.min.css";
+export declare function FormulaEditor({ open, onClose, onInsert, }: {
+    open: boolean;
+    onClose: () => void;
+    onInsert: (tex: string, block: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/FormulaEditor.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import katex from "katex";
+import "katex/dist/katex.min.css";
+export function FormulaEditor({ open, onClose, onInsert, }) {
+    const [tex, setTex] = useState("a^2 + b^2 = c^2");
+    const [block, setBlock] = useState(false);
+    const presets = [
+        {
+            label: "Quadratic Formula",
+            tex: "x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}",
+        },
+        {
+            label: "Binomial Theorem",
+            tex: "(a+b)^n = \\sum_{k=0}^n \\binom{n}{k} a^{n-k} b^k",
+        },
+        { label: "Euler's Identity", tex: "e^{i\\pi}+1=0" },
+        { label: "Pythagoras", tex: "a^2 + b^2 = c^2" },
+        { label: "Derivative", tex: "\\frac{d}{dx} x^n = n x^{n-1}" },
+        { label: "Integral", tex: "\\int_a^b f(x)\\,dx" },
+        { label: "Limit", tex: "\\lim_{x\\to 0} \\frac{\\sin x}{x} = 1" },
+        {
+            label: "Matrix 2x2",
+            tex: "\\begin{pmatrix} a & b \\ \\ c & d \\end{pmatrix}",
+        },
+        { label: "Chem: Water", tex: "\\ce{H2O}" },
+        { label: "Chem: Combustion", tex: "\\ce{CH4 + 2 O2 -> CO2 + 2 H2O}" },
+    ];
+    const palette = [
+        "\\frac{a}{b}",
+        "\\sqrt{x}",
+        "\\int_a^b",
+        "\\sum_{i=1}^n",
+        "\\prod_{i=1}^n",
+        "\\lim_{x\\to 0}",
+        "x^{2}",
+        "x_{i}",
+        "\\alpha",
+        "\\beta",
+        "\\gamma",
+        "\\Delta",
+        "\\ce{H2O}",
+        "\\ce{CO2}",
+    ];
+    useEffect(() => {
+        if (!open)
+            return;
+        try {
+            const el = document.getElementById("katex-preview");
+            if (el)
+                katex.render(tex, el, {
+                    throwOnError: false,
+                    displayMode: block,
+                    macros: { "\\ce": "\\mhchem" },
+                });
+        }
+        catch { }
+    }, [open, tex, block]);
+    if (!open)
+        return null;
+    return (_jsx("div", { style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.4)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 100,
+        }, onClick: onClose, children: _jsxs("div", { style: {
+                background: "#fff",
+                color: "black",
+                padding: 16,
+                borderRadius: 8,
+                minWidth: 420,
+            }, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Insert formula" }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 8 }, children: palette.map((t) => (_jsx("button", { onClick: () => setTex((prev) => (prev ? prev + " " + t : t)), title: t, children: t }, t))) }), _jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 8 }, children: presets.map((p) => (_jsx("button", { onClick: () => setTex(p.tex), title: p.tex, style: { fontSize: 12 }, children: p.label }, p.label))) }), _jsx("textarea", { value: tex, onChange: (e) => setTex(e.target.value), rows: 4, style: { width: "100%", fontFamily: "monospace", marginBottom: 8 } }), _jsxs("label", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                        marginBottom: 8,
+                    }, children: [_jsx("input", { type: "checkbox", checked: block, onChange: (e) => setBlock(e.target.checked) }), " ", "Block"] }), _jsx("div", { id: "katex-preview", style: {
+                        padding: 12,
+                        border: "1px solid #eee",
+                        minHeight: 40,
+                        marginBottom: 12,
+                    } }), _jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [_jsx("button", { onClick: onClose, children: "Cancel" }), _jsx("button", { onClick: () => onInsert(tex, block), children: "Insert" })] })] }) }));
+}

package/dist/components/InfoBox.d.ts

@@ -0,0 +1,7 @@
+export declare function InfoBox({ box, onChange, }: {
+    box: {
+        kind: string;
+        text: string;
+    };
+    onChange?: (next: any) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/InfoBox.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COLORS = {
+    info: "#e3f2fd",
+    warning: "#fff8e1",
+    success: "#e8f5e9",
+    danger: "#ffebee",
+};
+export function InfoBox({ box, onChange, }) {
+    const bg = COLORS[box.kind] || COLORS.info;
+    return (_jsxs("div", { style: {
+            background: bg,
+            border: "1px solid #e5e7eb",
+            padding: 12,
+            borderRadius: 8,
+            margin: "8px 0",
+        }, children: [_jsxs("select", { value: box.kind, onChange: (e) => onChange && onChange({ ...box, kind: e.target.value }), style: { marginBottom: 8 }, children: [_jsx("option", { value: "info", children: "Blue" }), _jsx("option", { value: "warning", children: "Yellow" }), _jsx("option", { value: "success", children: "Green" }), _jsx("option", { value: "danger", children: "Red" })] }), _jsx("div", { contentEditable: true, suppressContentEditableWarning: true, onInput: (e) => onChange &&
+                    onChange({ ...box, text: e.target.innerText }), children: box.text })] }));
+}

package/dist/components/MCQBlock.d.ts

@@ -0,0 +1,13 @@
+type MCQOption = {
+    text: string;
+    correct?: boolean;
+};
+export declare function MCQBlock({ block, onChange, }: {
+    block: {
+        question: string;
+        options: MCQOption[];
+        multiple?: boolean;
+    };
+    onChange?: (next: any) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MCQBlock.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MCQBlock({ block, onChange, }) {
+    return (_jsxs("div", { style: {
+            border: "1px solid #e5e7eb",
+            padding: 12,
+            borderRadius: 8,
+            margin: "8px 0",
+        }, children: [_jsx("div", { contentEditable: true, suppressContentEditableWarning: true, style: { fontWeight: 600, marginBottom: 8 }, onInput: (e) => onChange &&
+                    onChange({ ...block, question: e.target.innerText }), children: block.question }), _jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: block.options.map((opt, i) => (_jsxs("li", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                        marginBottom: 6,
+                    }, children: [_jsx("input", { type: block.multiple ? "checkbox" : "radio", checked: !!opt.correct, onChange: (e) => onChange &&
+                                onChange({
+                                    ...block,
+                                    options: block.options.map((o, idx) => idx === i
+                                        ? { ...o, correct: e.target.checked }
+                                        : block.multiple
+                                            ? o
+                                            : { ...o, correct: false }),
+                                }) }), _jsx("div", { contentEditable: true, suppressContentEditableWarning: true, style: { flex: 1, borderBottom: "1px dashed #ddd" }, onInput: (e) => onChange &&
+                                onChange({
+                                    ...block,
+                                    options: block.options.map((o, idx) => idx === i
+                                        ? { ...o, text: e.target.innerText }
+                                        : o),
+                                }), children: opt.text })] }, i))) })] }));
+}

package/dist/components/SmartEditor.js

@@ -0,0 +1 @@
+// Removed: SmartEditor component is not part of the public API.

package/dist/components/SmartTable.d.ts

@@ -0,0 +1,22 @@
+type TableNode = {
+    rows: Array<{
+        cells: Array<any>;
+    }>;
+    column_widths?: number[];
+    freeze_header?: boolean;
+    freeze_first_col?: boolean;
+};
+type Props = {
+    editor: any;
+    tableNode: TableNode;
+    tableIdx: number;
+    onChange?: () => void;
+    onCaretUpdate?: (ctx: {
+        tableIdx: number;
+        r: number;
+        c: number;
+        offset: number;
+    }) => void;
+};
+export declare function SmartTable({ editor, tableNode, tableIdx, onChange, onCaretUpdate, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};