smartrte-react 0.1.2

package/dist/QuillEditor.d.ts

@@ -0,0 +1,8 @@
+import "quill/dist/quill.snow.css";
+import "./blots";
+type QuillEditorProps = {
+    value?: any;
+    onChange?: (delta: any) => void;
+};
+export declare function QuillEditor({ value, onChange }: QuillEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/QuillEditor.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+import "./blots"; // registers custom blots
+export function QuillEditor({ value, onChange }) {
+    const ref = useRef(null);
+    const quillRef = useRef();
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (quillRef.current)
+            return;
+        quillRef.current = new Quill(ref.current, {
+            theme: "snow",
+            modules: {
+                toolbar: [
+                    ["bold", "italic", "underline"],
+                    [{ header: [1, 2, 3, false] }],
+                    ["formula", "image"],
+                    ["clean"],
+                ],
+            },
+        });
+        quillRef.current.on("text-change", () => {
+            const delta = quillRef.current?.getContents();
+            onChange?.(delta);
+        });
+        if (value) {
+            quillRef.current.setContents(value);
+        }
+    }, [value, onChange]);
+    return _jsx("div", { ref: ref, style: { minHeight: 300 } });
+}

package/dist/app.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export default function App(): React.DetailedReactHTMLElement<{
+    style: {
+        padding: number;
+    };
+}, HTMLElement>;

package/dist/app.js

@@ -0,0 +1,6 @@
+import React, { useState } from "react";
+import { QuillEditor } from "./QuillEditor";
+export default function App() {
+    const [delta, setDelta] = useState(null);
+    return React.createElement("div", { style: { padding: 20 } }, React.createElement("h1", null, "Smart RTE – Quill Demo"), React.createElement(QuillEditor, { value: delta, onChange: setDelta }), React.createElement("pre", null, JSON.stringify(delta, null, 2)));
+}

package/dist/blots/CommentBlot.d.ts

@@ -0,0 +1,8 @@
+declare const Inline: any;
+export declare class CommentBlot extends Inline {
+    static blotName: string;
+    static tagName: string;
+    static create(value: any): HTMLElement;
+    static value(domNode: HTMLElement): string;
+}
+export {};

package/dist/blots/CommentBlot.js

@@ -0,0 +1,17 @@
+import Quill from "quill";
+const Inline = Quill.import("blots/inline");
+export class CommentBlot extends Inline {
+    static create(value) {
+        const node = super.create();
+        node.setAttribute("data-comment", value);
+        node.classList.add("comment-anchor");
+        node.style.background = "rgba(255, 229, 100, 0.6)";
+        node.innerText = "💬"; // you can replace with thread number or icon
+        return node;
+    }
+    static value(domNode) {
+        return domNode.getAttribute("data-comment") || "";
+    }
+}
+CommentBlot.blotName = "comment";
+CommentBlot.tagName = "sup";

package/dist/blots/FormulaBlot.d.ts

@@ -0,0 +1,12 @@
+declare const Embed: any;
+export declare class FormulaBlot extends Embed {
+    static blotName: string;
+    static tagName: string;
+    static className: string;
+    static create(value: any): any;
+    static value(node: HTMLElement): {
+        tex: string;
+        displayMode: boolean;
+    };
+}
+export {};

package/dist/blots/FormulaBlot.js

@@ -0,0 +1,36 @@
+import Quill from "quill";
+const Embed = Quill.import("blots/embed");
+export class FormulaBlot extends Embed {
+    static create(value) {
+        const node = super.create();
+        node.setAttribute("data-formula", value.tex);
+        try {
+            // @ts-ignore
+            const katex = window.katex;
+            if (katex) {
+                node.innerHTML = "";
+                katex.render(value.tex, node, {
+                    displayMode: !!value.displayMode,
+                    throwOnError: false,
+                    strict: "ignore",
+                });
+            }
+            else {
+                node.textContent = value.tex;
+            }
+        }
+        catch {
+            node.textContent = value.tex;
+        }
+        return node;
+    }
+    static value(node) {
+        return {
+            tex: node.getAttribute("data-formula") || "",
+            displayMode: node.classList.contains("formula-block"),
+        };
+    }
+}
+FormulaBlot.blotName = "formula";
+FormulaBlot.tagName = "span";
+FormulaBlot.className = "formula-inline";

package/dist/blots/MediaBlot.d.ts

@@ -0,0 +1,11 @@
+declare const BlockEmbed: any;
+export declare class MediaBlot extends BlockEmbed {
+    static blotName: string;
+    static tagName: string;
+    static create(value: any): HTMLElement;
+    static value(domNode: HTMLElement): {
+        key: string;
+        content_type: string;
+    };
+}
+export {};

package/dist/blots/MediaBlot.js

@@ -0,0 +1,37 @@
+import Quill from "quill";
+const BlockEmbed = Quill.import("blots/block/embed");
+export class MediaBlot extends BlockEmbed {
+    static create(value) {
+        const node = super.create();
+        node.setAttribute("data-media-key", value.key);
+        node.setAttribute("data-type", value.content_type);
+        node.classList.add("smart-media");
+        node.innerHTML = `<div style="border:1px dashed #aaa;padding:4px;">Media: ${value.key}</div>`;
+        if (value.content_type.startsWith("image/")) {
+            const img = document.createElement("img");
+            img.src = value.url || `/media/${value.key}`;
+            node.appendChild(img);
+        }
+        else if (value.content_type.startsWith("video/")) {
+            const video = document.createElement("video");
+            video.controls = true;
+            video.src = value.url || `/media/${value.key}`;
+            node.appendChild(video);
+        }
+        else {
+            const link = document.createElement("a");
+            link.href = value.url || `/media/${value.key}`;
+            link.innerText = `Download ${value.key}`;
+            node.appendChild(link);
+        }
+        return node;
+    }
+    static value(domNode) {
+        return {
+            key: domNode.getAttribute("data-media-key"),
+            content_type: domNode.getAttribute("data-type") || "application/octet-stream",
+        };
+    }
+}
+MediaBlot.blotName = "media";
+MediaBlot.tagName = "div";

package/dist/blots/TableBlot.d.ts

@@ -0,0 +1,10 @@
+declare const BlockEmbed: any;
+export declare class TableBlot extends BlockEmbed {
+    static blotName: string;
+    static tagName: string;
+    static create(value: any): HTMLElement;
+    static value(domNode: HTMLElement): {
+        rows: any[];
+    };
+}
+export {};

package/dist/blots/TableBlot.js

@@ -0,0 +1,54 @@
+import Quill from "quill";
+const BlockEmbed = Quill.import("blots/block/embed");
+export class TableBlot extends BlockEmbed {
+    static create(value) {
+        const node = super.create();
+        node.setAttribute("contenteditable", "false");
+        node.classList.add("smart-table");
+        // Render rows & cells
+        if (value && value.rows) {
+            value.rows.forEach((row) => {
+                const tr = document.createElement("tr");
+                row.cells.forEach((cell) => {
+                    if (cell.placeholder)
+                        return;
+                    const td = document.createElement("td");
+                    if (cell.colspan && cell.colspan > 1)
+                        td.colSpan = cell.colspan;
+                    if (cell.rowspan && cell.rowspan > 1)
+                        td.rowSpan = cell.rowspan;
+                    if (cell.style?.background)
+                        td.style.background = cell.style.background;
+                    if (cell.style?.border)
+                        td.style.border = `${cell.style.border.width_px}px solid ${cell.style.border.color}`;
+                    td.innerText = cell.text;
+                    tr.appendChild(td);
+                });
+                node.appendChild(tr);
+            });
+        }
+        return node;
+    }
+    static value(domNode) {
+        // Store the JSON representation in Delta
+        const rows = [];
+        domNode.querySelectorAll("tr").forEach((tr) => {
+            const cells = [];
+            tr.querySelectorAll("td").forEach((td) => {
+                cells.push({
+                    text: td.innerText,
+                    colspan: td.colSpan || 1,
+                    rowspan: td.rowSpan || 1,
+                    style: td.style.background
+                        ? { background: td.style.background }
+                        : {},
+                    placeholder: false,
+                });
+            });
+            rows.push({ cells });
+        });
+        return { rows };
+    }
+}
+TableBlot.blotName = "table";
+TableBlot.tagName = "TABLE";

package/dist/blots/index.d.ts

@@ -0,0 +1,5 @@
+import { TableBlot } from "./TableBlot";
+import { FormulaBlot } from "./FormulaBlot";
+import { MediaBlot } from "./MediaBlot";
+import { CommentBlot } from "./CommentBlot";
+export { TableBlot, FormulaBlot, MediaBlot, CommentBlot };

package/dist/blots/index.js

@@ -0,0 +1,12 @@
+import Quill from "quill";
+import { TableBlot } from "./TableBlot";
+import { FormulaBlot } from "./FormulaBlot";
+import { MediaBlot } from "./MediaBlot";
+import { CommentBlot } from "./CommentBlot";
+Quill.register({
+    "formats/table": TableBlot,
+    "formats/formula": FormulaBlot,
+    "formats/media": MediaBlot,
+    "formats/comment": CommentBlot,
+});
+export { TableBlot, FormulaBlot, MediaBlot, CommentBlot };

package/dist/components/ClassicEditor.d.ts

@@ -0,0 +1,10 @@
+type ClassicEditorProps = {
+    value?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    readOnly?: boolean;
+};
+export declare function ClassicEditor({ value, onChange, placeholder, minHeight, maxHeight, readOnly, }: ClassicEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};