smartrte-react 0.1.3 → 0.1.5

package/dist/components/ClassicEditor.d.ts

@@ -1,3 +1,4 @@
+import { MediaManagerAdapter } from "./MediaManager";
 type ClassicEditorProps = {
     value?: string;
     onChange?: (html: string) => void;
@@ -5,6 +6,10 @@ type ClassicEditorProps = {
     minHeight?: number | string;
     maxHeight?: number | string;
     readOnly?: boolean;
+    table?: boolean;
+    media?: boolean;
+    formula?: boolean;
+    mediaManager?: MediaManagerAdapter;
 };
-export declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, table, media, formula, mediaManager, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ClassicEditor.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, }) {
+import { MediaManager } from "./MediaManager";
+export function ClassicEditor({ value, onChange, placeholder = "Type here…", minHeight = 200, maxHeight = 500, readOnly = false, table = true, media = true, formula = true, mediaManager, }) {
     const editableRef = useRef(null);
     const lastEmittedRef = useRef("");
     const isComposingRef = useRef(false);
@@ -16,6 +17,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [tableMenu, setTableMenu] = useState(null);
     const selectionRef = useRef(null);
     const selectingRef = useRef(null);
+    const [showMediaManager, setShowMediaManager] = useState(false);
     useEffect(() => {
         const el = editableRef.current;
         if (!el)
@@ -62,6 +64,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         exec("createLink", url);
     };
     const insertImage = () => {
+        if (!media)
+            return;
         fileInputRef.current?.click();
     };
     const scheduleImageOverlay = () => {
@@ -108,9 +112,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 range = document.createRange();
                 range.selectNodeContents(host);
                 range.collapse(false);
-                sel = window.getSelection();
-                sel?.removeAllRanges();
-                sel?.addRange(range);
+                safeSelectRange(range);
             }
             const img = document.createElement("img");
             img.src = src;
@@ -127,18 +129,31 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const r = document.createRange();
             r.setStartAfter(img);
             r.collapse(true);
-            const s = window.getSelection();
-            s?.removeAllRanges();
-            s?.addRange(r);
+            safeSelectRange(r);
             setSelectedImage(img);
             scheduleImageOverlay();
             handleInput();
         }
         catch { }
     };
+    const safeSelectRange = (range) => {
+        try {
+            if (!range)
+                return;
+            const start = range.startContainer;
+            if (!start || !start.isConnected)
+                return;
+            const sel = window.getSelection();
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+        }
+        catch { }
+    };
     const insertFormulaAtSelection = (tex) => {
         if (!tex)
             return;
+        if (!formula)
+            return;
         try {
             const host = editableRef.current;
             if (!host)
@@ -150,9 +165,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                 range = document.createRange();
                 range.selectNodeContents(host);
                 range.collapse(false);
-                sel = window.getSelection();
-                sel?.removeAllRanges();
-                sel?.addRange(range);
+                safeSelectRange(range);
             }
             const span = document.createElement("span");
             span.setAttribute("data-formula", tex);
@@ -176,9 +189,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             const r = document.createRange();
             r.setStartAfter(span);
             r.collapse(true);
-            const s = window.getSelection();
-            s?.removeAllRanges();
-            s?.addRange(r);
+            safeSelectRange(r);
             handleInput();
         }
         catch { }
@@ -224,6 +235,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         return s;
     };
     const handleLocalImageFiles = async (files) => {
+        if (!media)
+            return;
         const list = Array.from(files).filter((f) => f.type.startsWith("image/"));
         for (const f of list) {
             await new Promise((resolve) => {
@@ -643,11 +656,11 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
-                }, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: (e) => {
+                }, children: [media && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: (e) => {
                             if (e.currentTarget.files)
                                 handleLocalImageFiles(e.currentTarget.files);
                             e.currentTarget.value = "";
-                        } }), _jsxs("select", { defaultValue: "p", onChange: (e) => {
+                        } })), _jsxs("select", { defaultValue: "p", onChange: (e) => {
                             const val = e.target.value;
                             if (val === "p")
                                 applyFormatBlock("<p>");
@@ -657,39 +670,42 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                                 applyFormatBlock("<h2>");
                             else if (val === "h3")
                                 applyFormatBlock("<h3>");
-                        }, title: "Paragraph/Heading", children: [_jsx("option", { value: "p", children: "Paragraph" }), _jsx("option", { value: "h1", children: "Heading 1" }), _jsx("option", { value: "h2", children: "Heading 2" }), _jsx("option", { value: "h3", children: "Heading 3" })] }), _jsx("button", { onClick: () => exec("bold"), children: "B" }), _jsx("button", { onClick: () => exec("italic"), children: "I" }), _jsx("button", { onClick: () => exec("underline"), children: "U" }), _jsx("button", { onClick: () => exec("strikeThrough"), children: "S" }), _jsx("button", { onClick: () => exec("insertUnorderedList"), children: "\u2022 List" }), _jsx("button", { onClick: () => exec("insertOrderedList"), children: "1. List" }), _jsx("button", { onClick: () => exec("formatBlock", "<blockquote>"), children: "\u275D" }), _jsx("button", { onClick: () => exec("formatBlock", "<pre>"), children: "< />" }), _jsx("button", { title: "Formula", onClick: () => setShowFormulaDialog(true), children: "\u2211" }), _jsx("button", { onClick: insertLink, children: "Link" }), _jsx("button", { onClick: () => exec("unlink"), children: "Unlink" }), _jsx("button", { onClick: insertImage, children: "Image" }), _jsxs("div", { style: {
-                            display: "inline-flex",
-                            gap: 4,
-                            alignItems: "center",
-                            marginLeft: 6,
-                        }, children: [_jsx("span", { style: { fontSize: 12, opacity: 0.7 }, children: "Image align:" }), _jsx("button", { onClick: () => {
-                                    const img = selectedImage;
-                                    if (!img)
-                                        return;
-                                    img.style.display = "block";
-                                    img.style.margin = "0 auto";
-                                    img.style.float = "none";
-                                    scheduleImageOverlay();
-                                    handleInput();
-                                }, title: "Center", children: "\u2299" }), _jsx("button", { onClick: () => {
-                                    const img = selectedImage;
-                                    if (!img)
-                                        return;
-                                    img.style.display = "inline";
-                                    img.style.float = "left";
-                                    img.style.margin = "0 8px 8px 0";
-                                    scheduleImageOverlay();
-                                    handleInput();
-                                }, title: "Float left", children: "\u27F8" }), _jsx("button", { onClick: () => {
-                                    const img = selectedImage;
-                                    if (!img)
-                                        return;
-                                    img.style.display = "inline";
-                                    img.style.float = "right";
-                                    img.style.margin = "0 0 8px 8px";
-                                    scheduleImageOverlay();
-                                    handleInput();
-                                }, title: "Float right", children: "\u27F9" })] }), _jsx("button", { onClick: () => setShowTableDialog(true), children: "+ Table" }), _jsx("button", { onClick: () => exec("undo"), children: "Undo" }), _jsx("button", { onClick: () => exec("redo"), children: "Redo" })] }), showTableDialog && (_jsx("div", { style: {
+                        }, title: "Paragraph/Heading", children: [_jsx("option", { value: "p", children: "Paragraph" }), _jsx("option", { value: "h1", children: "Heading 1" }), _jsx("option", { value: "h2", children: "Heading 2" }), _jsx("option", { value: "h3", children: "Heading 3" })] }), _jsx("button", { onClick: () => exec("bold"), children: "B" }), _jsx("button", { onClick: () => exec("italic"), children: "I" }), _jsx("button", { onClick: () => exec("underline"), children: "U" }), _jsx("button", { onClick: () => exec("strikeThrough"), children: "S" }), _jsx("button", { onClick: () => exec("insertUnorderedList"), children: "\u2022 List" }), _jsx("button", { onClick: () => exec("insertOrderedList"), children: "1. List" }), _jsx("button", { onClick: () => exec("formatBlock", "<blockquote>"), children: "\u275D" }), _jsx("button", { onClick: () => exec("formatBlock", "<pre>"), children: "< />" }), formula && (_jsx("button", { title: "Formula", onClick: () => setShowFormulaDialog(true), children: "\u2211" })), _jsx("button", { onClick: insertLink, children: "Link" }), _jsx("button", { onClick: () => exec("unlink"), children: "Unlink" }), media && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: insertImage, children: "Image" }), mediaManager && (_jsx("button", { onClick: () => setShowMediaManager(true), children: "Media manager" })), _jsxs("div", { style: {
+                                    display: "inline-flex",
+                                    gap: 4,
+                                    alignItems: "center",
+                                    marginLeft: 6,
+                                }, children: [_jsx("span", { style: { fontSize: 12, opacity: 0.7 }, children: "Image align:" }), _jsx("button", { onClick: () => {
+                                            const img = selectedImage;
+                                            if (!img)
+                                                return;
+                                            img.style.display = "block";
+                                            img.style.margin = "0 auto";
+                                            img.style.float = "none";
+                                            scheduleImageOverlay();
+                                            handleInput();
+                                        }, title: "Center", children: "\u2299" }), _jsx("button", { onClick: () => {
+                                            const img = selectedImage;
+                                            if (!img)
+                                                return;
+                                            img.style.display = "inline";
+                                            img.style.float = "left";
+                                            img.style.margin = "0 8px 8px 0";
+                                            scheduleImageOverlay();
+                                            handleInput();
+                                        }, title: "Float left", children: "\u27F8" }), _jsx("button", { onClick: () => {
+                                            const img = selectedImage;
+                                            if (!img)
+                                                return;
+                                            img.style.display = "inline";
+                                            img.style.float = "right";
+                                            img.style.margin = "0 0 8px 8px";
+                                            scheduleImageOverlay();
+                                            handleInput();
+                                        }, title: "Float right", children: "\u27F9" })] })] })), table && (_jsx("button", { onClick: () => setShowTableDialog(true), children: "+ Table" })), _jsx("button", { onClick: () => exec("undo"), children: "Undo" }), _jsx("button", { onClick: () => exec("redo"), children: "Redo" })] }), media && mediaManager && (_jsx(MediaManager, { open: showMediaManager, onClose: () => setShowMediaManager(false), adapter: mediaManager, onSelect: (item) => {
+                    if (item?.url)
+                        insertImageAtSelection(item.url);
+                } })), table && showTableDialog && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
                     background: "rgba(0,0,0,0.35)",
@@ -732,7 +748,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }, children: [_jsx("button", { onClick: () => setShowTableDialog(false), children: "Cancel" }), _jsx("button", { onClick: () => {
                                         insertTable();
                                         setShowTableDialog(false);
-                                    }, children: "Insert" })] })] }) })), showFormulaDialog && (_jsx("div", { style: {
+                                    }, children: "Insert" })] })] }) })), formula && showFormulaDialog && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
                     background: "rgba(0,0,0,0.35)",
@@ -838,7 +854,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     handleInput();
                 }, onPaste: (e) => {
                     const items = e.clipboardData?.files;
-                    if (items && items.length) {
+                    if (media && items && items.length) {
                         const hasImage = Array.from(items).some((f) => f.type.startsWith("image/"));
                         if (hasImage) {
                             e.preventDefault();
@@ -850,7 +866,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         e.preventDefault();
                     }
                 }, onDrop: (e) => {
-                    if (e.dataTransfer?.files?.length) {
+                    if (media && e.dataTransfer?.files?.length) {
                         e.preventDefault();
                         // Try to move caret to drop point
                         const x = e.clientX;
@@ -899,7 +915,9 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                         el.innerHTML = "<p><br></p>";
                     }
                 }, onKeyDown: (e) => {
-                    if ((e.metaKey || e.ctrlKey) && String(e.key).toLowerCase() === "m") {
+                    if (formula &&
+                        (e.metaKey || e.ctrlKey) &&
+                        String(e.key).toLowerCase() === "m") {
                         e.preventDefault();
                         setShowFormulaDialog(true);
                         return;
@@ -919,7 +937,8 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
                         const sel = window.getSelection();
                         const cell = getClosestCell(sel?.anchorNode || null);
-                        if (cell &&
+                        if (table &&
+                            cell &&
                             cell.parentElement &&
                             cell.parentElement.parentElement) {
                             const row = cell.parentElement;
@@ -1003,7 +1022,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                     else {
                         setTableMenu(null);
                     }
-                }, dangerouslySetInnerHTML: { __html: value || "" } }), selectedImage && imageOverlay && (_jsxs("div", { style: {
+                } }), selectedImage && imageOverlay && (_jsxs("div", { style: {
                     position: "fixed",
                     left: imageOverlay.left,
                     top: imageOverlay.top,

package/dist/components/MediaManager.d.ts

@@ -0,0 +1,31 @@
+export type MediaItem = {
+    id: string;
+    url: string;
+    width?: number;
+    height?: number;
+    sizeBytes?: number;
+    mimeType?: string;
+    hashHex?: string;
+    createdAt?: string;
+    title?: string;
+    alt?: string;
+    tags?: string[];
+};
+export type MediaSearchQuery = {
+    q?: string;
+    tags?: string[];
+    mimePrefix?: string;
+    hashHex?: string;
+    page?: number;
+    pageSize?: number;
+};
+export type MediaManagerAdapter = {
+    upload: (files: File[]) => Promise<MediaItem[]>;
+    search: (query: MediaSearchQuery) => Promise<MediaItem[]>;
+};
+export declare function MediaManager(props: {
+    open: boolean;
+    onClose: () => void;
+    adapter: MediaManagerAdapter;
+    onSelect: (item: MediaItem) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaManager.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function MediaManager(props) {
+    const { open, onClose, adapter, onSelect } = props;
+    const [activeTab, setActiveTab] = useState("upload");
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    const [query, setQuery] = useState("");
+    const [results, setResults] = useState([]);
+    const fileInputRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        setError(null);
+        if (activeTab === "library") {
+            performSearch();
+        }
+    }, [open, activeTab]);
+    const performSearch = async () => {
+        try {
+            const items = await adapter.search({ q: query, mimePrefix: "image/" });
+            setResults(items || []);
+        }
+        catch (e) {
+            setError("Failed to search media.");
+        }
+    };
+    const computeSha256Hex = async (file) => {
+        const buf = await file.arrayBuffer();
+        const digest = await crypto.subtle.digest("SHA-256", buf);
+        const bytes = new Uint8Array(digest);
+        let hex = "";
+        for (let i = 0; i < bytes.length; i++) {
+            hex += bytes[i].toString(16).padStart(2, "0");
+        }
+        return hex;
+    };
+    const handleUploadFiles = async (files) => {
+        if (!files || files.length === 0)
+            return;
+        const list = Array.from(files).filter((f) => f.type.startsWith("image/"));
+        if (list.length === 0)
+            return;
+        setUploading(true);
+        setError(null);
+        try {
+            // Duplicate detection by content hash (best-effort, server should also verify)
+            const duplicates = [];
+            const toUpload = [];
+            for (const f of list) {
+                try {
+                    const hash = await computeSha256Hex(f);
+                    const hits = await adapter.search({ hashHex: hash });
+                    if (hits && hits.length) {
+                        duplicates.push(hits[0]);
+                        continue;
+                    }
+                    toUpload.push(f);
+                }
+                catch { }
+            }
+            if (duplicates.length) {
+                // Prefer duplicates immediately
+                onSelect(duplicates[0]);
+                setUploading(false);
+                onClose();
+                return;
+            }
+            if (toUpload.length) {
+                const uploaded = await adapter.upload(toUpload);
+                if (uploaded && uploaded.length) {
+                    onSelect(uploaded[0]);
+                    onClose();
+                }
+            }
+        }
+        catch (e) {
+            setError("Upload failed. Try again.");
+        }
+        finally {
+            setUploading(false);
+        }
+    };
+    if (!open)
+        return null;
+    return (_jsx("div", { style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.35)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 80,
+        }, onClick: onClose, children: _jsxs("div", { style: {
+                background: "#fff",
+                width: 820,
+                maxWidth: "90vw",
+                maxHeight: "86vh",
+                borderRadius: 10,
+                boxShadow: "0 12px 32px rgba(0,0,0,0.22)",
+                display: "flex",
+                flexDirection: "column",
+            }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        padding: "10px 14px",
+                        borderBottom: "1px solid #eee",
+                    }, children: [_jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsx("button", { onClick: () => setActiveTab("upload"), style: {
+                                        padding: "6px 10px",
+                                        borderRadius: 6,
+                                        border: "1px solid #ddd",
+                                        background: activeTab === "upload" ? "#f2f2f2" : "#fff",
+                                    }, children: "Upload" }), _jsx("button", { onClick: () => setActiveTab("library"), style: {
+                                        padding: "6px 10px",
+                                        borderRadius: 6,
+                                        border: "1px solid #ddd",
+                                        background: activeTab === "library" ? "#f2f2f2" : "#fff",
+                                    }, children: "Library" })] }), _jsx("button", { onClick: onClose, children: "\u2715" })] }), error && (_jsx("div", { style: { color: "#b00020", padding: "8px 14px" }, children: error })), activeTab === "upload" ? (_jsxs("div", { style: { padding: 16 }, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: "none" }, onChange: (e) => handleUploadFiles(e.currentTarget.files) }), _jsx("div", { onClick: () => fileInputRef.current?.click(), onDragOver: (e) => {
+                                e.preventDefault();
+                            }, onDrop: (e) => {
+                                e.preventDefault();
+                                handleUploadFiles(e.dataTransfer.files);
+                            }, style: {
+                                border: "2px dashed #bbb",
+                                borderRadius: 10,
+                                padding: 24,
+                                textAlign: "center",
+                                color: "#333",
+                                background: "#fafafa",
+                                cursor: uploading ? "default" : "pointer",
+                                opacity: uploading ? 0.7 : 1,
+                            }, children: uploading ? "Uploading…" : "Click or drag images to upload" })] })) : (_jsxs("div", { style: {
+                        padding: 16,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 12,
+                    }, children: [_jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsx("input", { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search images by name, tag, etc.", style: {
+                                        flex: 1,
+                                        padding: "6px 8px",
+                                        border: "1px solid #ddd",
+                                        borderRadius: 6,
+                                    } }), _jsx("button", { onClick: performSearch, children: "Search" })] }), _jsx("div", { style: {
+                                display: "grid",
+                                gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+                                gap: 12,
+                                overflowY: "auto",
+                                paddingBottom: 16,
+                            }, children: results.map((it) => (_jsxs("button", { onClick: () => {
+                                    onSelect(it);
+                                    onClose();
+                                }, title: it.title || it.url, style: {
+                                    display: "block",
+                                    border: "1px solid #eee",
+                                    borderRadius: 8,
+                                    padding: 6,
+                                    background: "#fff",
+                                    textAlign: "center",
+                                }, children: [_jsx("img", { src: it.url, alt: it.alt || "", style: {
+                                            maxWidth: "100%",
+                                            maxHeight: 100,
+                                            display: "block",
+                                            margin: "0 auto",
+                                            objectFit: "cover",
+                                            borderRadius: 6,
+                                        } }), _jsx("div", { style: { fontSize: 11, marginTop: 6, color: "#333" }, children: it.width && it.height ? `${it.width}×${it.height}` : "" })] }, it.id || it.url))) })] }))] }) }));
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import "katex/dist/katex.min.css";
 export { ClassicEditor } from './components/ClassicEditor';
+export type { MediaManagerAdapter, MediaItem, MediaSearchQuery } from './components/MediaManager';

package/dist/standalone/classic-editor-embed.js

@@ -37,7 +37,7 @@ function ClassicEditorHost(props, ref) {
                     }
                 }
                 catch { }
-            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly }) }));
+            }, placeholder: props.placeholder, minHeight: props.minHeight, maxHeight: props.maxHeight, readOnly: props.readOnly, table: props.table, media: props.media, formula: props.formula, mediaManager: props.mediaManager }) }));
 }
 const ClassicEditorHostWithRef = React.forwardRef(ClassicEditorHost);
 function initClassicEditor(opts) {