tetrons 2.1.7 → 2.1.8

package/dist/components/tetrons/toolbar/ClipboardGroup.jsx

@@ -0,0 +1,36 @@
+import { MdContentPaste, MdContentCut, MdContentCopy, MdFormatPaint, } from "react-icons/md";
+import React from "react";
+import ToolbarButton from "./ToolbarButton";
+export default function ClipboardGroup({ editor }) {
+    return (<div className="flex gap-1 border-r pr-3">
+      <ToolbarButton icon={MdContentPaste} title="Paste" onClick={async () => {
+            try {
+                const text = await navigator.clipboard.readText();
+                editor.chain().focus().insertContent(text).run();
+            }
+            catch (error) {
+                console.error("Failed to read clipboard contents:", error);
+            }
+        }}/>
+      <ToolbarButton icon={MdContentCut} title="Cut" onClick={() => {
+            const { from, to } = editor.state.selection;
+            if (from === to)
+                return;
+            const selectedText = editor.state.doc.textBetween(from, to);
+            navigator.clipboard.writeText(selectedText).then(() => {
+                editor.chain().focus().deleteRange({ from, to }).run();
+            });
+        }}/>
+      <ToolbarButton icon={MdContentCopy} title="Copy" onClick={() => {
+            const { from, to } = editor.state.selection;
+            if (from === to)
+                return;
+            const selectedText = editor.state.doc.textBetween(from, to);
+            navigator.clipboard.writeText(selectedText);
+        }}/>
+      <ToolbarButton icon={MdFormatPaint} title="Format Painter" onClick={() => {
+            const currentMarks = editor.getAttributes("textStyle");
+            localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
+        }}/>
+    </div>);
+}

package/dist/components/tetrons/toolbar/FileGroup.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from "@tiptap/react";
+import React from "react";
+type FileGroupProps = {
+    editor: Editor;
+};
+export default function FileGroup({ editor }: FileGroupProps): React.JSX.Element;
+export {};

package/dist/components/tetrons/toolbar/FileGroup.jsx

@@ -0,0 +1,40 @@
+"use client";
+import { FaRegFolderOpen } from "react-icons/fa";
+import { VscNewFile } from "react-icons/vsc";
+import ToolbarButton from "./ToolbarButton";
+import React, { useRef } from "react";
+export default function FileGroup({ editor }) {
+    const fileInputRef = useRef(null);
+    const handleNew = () => {
+        if (confirm("Are you sure you want to create a new document? Unsaved changes will be lost.")) {
+            editor.commands.clearContent();
+        }
+    };
+    const handleOpen = () => {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    const handleFileChange = async (e) => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        try {
+            const text = await file.text();
+            const json = JSON.parse(text);
+            editor.commands.setContent(json);
+        }
+        catch (error) {
+            console.error("Error reading file:", error);
+            alert("Failed to open or parse the file. Make sure it's a valid JSON file.");
+        }
+        finally {
+            e.target.value = "";
+        }
+    };
+    return (<div className="flex items-center gap-1 border-r pr-3" role="group" aria-label="File actions">
+      <input type="file" accept=".json" ref={fileInputRef} onChange={handleFileChange} className="hidden" aria-label="Open JSON file"/>
+      <ToolbarButton icon={VscNewFile} onClick={handleNew} title="New"/>
+      <ToolbarButton icon={FaRegFolderOpen} onClick={handleOpen} title="Open File"/>
+    </div>);
+}

package/dist/components/tetrons/toolbar/FontStyleGroup.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from "@tiptap/react";
+import React from "react";
+interface FontStyleGroupProps {
+    editor: Editor;
+}
+export default function FontStyleGroup({ editor }: FontStyleGroupProps): React.JSX.Element;
+export {};

package/dist/components/tetrons/toolbar/FontStyleGroup.jsx

@@ -0,0 +1,104 @@
+"use client";
+import { MdFormatBold, MdFormatItalic, MdFormatUnderlined, MdStrikethroughS, MdSubscript, MdSuperscript, MdFormatClear, MdFormatPaint, } from "react-icons/md";
+import { ImTextColor } from "react-icons/im";
+import { BiSolidColorFill } from "react-icons/bi";
+import ToolbarButton from "./ToolbarButton";
+import React, { useEffect, useState } from "react";
+export default function FontStyleGroup({ editor }) {
+    const [textColor, setTextColor] = useState("#000000");
+    const [highlightColor, setHighlightColor] = useState("#ffff00");
+    const [fontFamily, setFontFamily] = useState("Arial");
+    const [fontSize, setFontSize] = useState("16px");
+    useEffect(() => {
+        if (!editor)
+            return;
+        const updateStates = () => {
+            var _a, _b, _c;
+            const highlight = editor.getAttributes("highlight");
+            setHighlightColor((highlight === null || highlight === void 0 ? void 0 : highlight.color) || "#ffff00");
+            const color = (_a = editor.getAttributes("textStyle")) === null || _a === void 0 ? void 0 : _a.color;
+            setTextColor(color || "#000000");
+            const fontAttr = ((_b = editor.getAttributes("fontFamily")) === null || _b === void 0 ? void 0 : _b.font) || "Arial";
+            setFontFamily(fontAttr);
+            const sizeAttr = ((_c = editor.getAttributes("fontSize")) === null || _c === void 0 ? void 0 : _c.size) || "16px";
+            setFontSize(sizeAttr);
+        };
+        updateStates();
+        editor.on("selectionUpdate", updateStates);
+        editor.on("transaction", updateStates);
+        return () => {
+            editor.off("selectionUpdate", updateStates);
+            editor.off("transaction", updateStates);
+        };
+    }, [editor]);
+    return (<div className="flex gap-1 border-r pr-3 items-center">
+      <select title="Font Family" className="text-sm border rounded px-1 py-0.5 mr-2" value={fontFamily} onChange={(e) => {
+            const value = e.target.value;
+            setFontFamily(value);
+            editor.chain().focus().setFontFamily(value).run();
+        }}>
+        <option value="Arial">Arial</option>
+        <option value="Georgia">Georgia</option>
+        <option value="Times New Roman">Times New Roman</option>
+        <option value="Courier New">Courier New</option>
+        <option value="Verdana">Verdana</option>
+      </select>
+
+      <select title="Font Size" className="text-sm border rounded px-1 py-0.5 mr-2" value={fontSize} onChange={(e) => {
+            const value = e.target.value;
+            setFontSize(value);
+            editor.chain().focus().setFontSize(value).run();
+        }}>
+        <option value="12px">12</option>
+        <option value="14px">14</option>
+        <option value="16px">16</option>
+        <option value="18px">18</option>
+        <option value="24px">24</option>
+        <option value="36px">36</option>
+        <option value="48px">48</option>
+        <option value="64px">64</option>
+        <option value="72px">72</option>
+      </select>
+
+      <ToolbarButton icon={MdFormatBold} label="Bold" onClick={() => editor.chain().focus().toggleBold().run()} isActive={editor.isActive("bold")}/>
+      <ToolbarButton icon={MdFormatItalic} label="Italic" onClick={() => editor.chain().focus().toggleItalic().run()} isActive={editor.isActive("italic")}/>
+      <ToolbarButton icon={MdFormatUnderlined} label="Underline" onClick={() => editor.chain().focus().toggleUnderline().run()} isActive={editor.isActive("underline")}/>
+      <ToolbarButton icon={MdStrikethroughS} label="Strikethrough" onClick={() => editor.chain().focus().toggleStrike().run()} isActive={editor.isActive("strike")}/>
+      <ToolbarButton icon={MdSubscript} label="Subscript" onClick={() => editor.chain().focus().toggleSubscript().run()} isActive={editor.isActive("subscript")}/>
+      <ToolbarButton icon={MdSuperscript} label="Superscript" onClick={() => editor.chain().focus().toggleSuperscript().run()} isActive={editor.isActive("superscript")}/>
+
+      <label title="Font Color" aria-label="Font Color" className="relative w-8 h-8 flex items-center justify-center cursor-pointer color-label" style={{ "--indicator-color": textColor }}>
+        <ImTextColor size={20} className="text-gray-700"/>
+        <div className="color-indicator"/>
+        <input type="color" value={textColor} onChange={(e) => {
+            const color = e.target.value;
+            setTextColor(color);
+            editor.chain().focus().setColor(color).run();
+        }} className="absolute inset-0 opacity-0 cursor-pointer"/>
+      </label>
+
+      <label title="Highlight Color" aria-label="Highlight Color" className="relative w-8 h-8 flex items-center justify-center cursor-pointer color-label" style={{ "--indicator-color": highlightColor }}>
+        <BiSolidColorFill size={20} className="text-gray-700"/>
+        <div className="color-indicator"/>
+        <input type="color" value={highlightColor} onChange={(e) => {
+            const color = e.target.value;
+            setHighlightColor(color);
+            editor.chain().focus().setHighlight({ color }).run();
+        }} className="absolute inset-0 opacity-0 cursor-pointer"/>
+      </label>
+
+      <ToolbarButton icon={MdFormatClear} label="Clear Formatting" onClick={() => editor.chain().focus().unsetAllMarks().run()}/>
+      <ToolbarButton icon={MdFormatPaint} label="Apply Painter Format" onClick={() => {
+            const format = JSON.parse(localStorage.getItem("formatPainter") || "{}");
+            if (format.color)
+                editor.chain().focus().setColor(format.color).run();
+            if (format.backgroundColor) {
+                editor
+                    .chain()
+                    .focus()
+                    .setHighlight({ color: format.backgroundColor })
+                    .run();
+            }
+        }}/>
+    </div>);
+}

package/dist/components/tetrons/toolbar/InsertGroup.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Editor } from "@tiptap/react";
+export default function InsertGroup({ editor }: {
+    editor: Editor;
+}): React.JSX.Element;

package/dist/components/tetrons/toolbar/InsertGroup.jsx

@@ -0,0 +1,162 @@
+"use client";
+import React, { useRef, useState } from "react";
+import { MdTableChart, MdInsertPhoto, MdInsertLink, MdInsertComment, MdInsertEmoticon, MdHorizontalRule, MdVideoLibrary, MdOutlineOndemandVideo, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+import Picker from "@emoji-mart/react";
+export default function InsertGroup({ editor }) {
+    const [showTableGrid, setShowTableGrid] = useState(false);
+    const [selectedRows, setSelectedRows] = useState(1);
+    const [selectedCols, setSelectedCols] = useState(1);
+    const imageInputRef = useRef(null);
+    const videoInputRef = useRef(null);
+    const [showPicker, setShowPicker] = useState(false);
+    const addEmoji = (emoji) => {
+        editor.chain().focus().insertContent(emoji.native).run();
+        setShowPicker(false);
+    };
+    const handleTableCellHover = (row, col) => {
+        setSelectedRows(row);
+        setSelectedCols(col);
+    };
+    const handleTableInsert = (rows, cols) => {
+        editor
+            .chain()
+            .focus()
+            .insertTable({
+            rows: rows || 1,
+            cols: cols || 1,
+            withHeaderRow: true,
+        })
+            .run();
+        setShowTableGrid(false);
+        setSelectedRows(1);
+        setSelectedCols(1);
+    };
+    const handleImageUpload = (e) => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                editor
+                    .chain()
+                    .focus()
+                    .setImage({ src: reader.result })
+                    .run();
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    const handleVideoUpload = (e) => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                editor
+                    .chain()
+                    .focus()
+                    .setVideo({ src: reader.result, controls: true })
+                    .run();
+            };
+            reader.readAsDataURL(file);
+        }
+    };
+    function normalizeEmbedUrl(url) {
+        try {
+            const u = new URL(url);
+            const hostname = u.hostname.replace("www.", "").toLowerCase();
+            if (hostname === "youtube.com" || hostname === "youtu.be") {
+                let videoId = u.searchParams.get("v");
+                if (!videoId && hostname === "youtu.be") {
+                    videoId = u.pathname.slice(1);
+                }
+                if (videoId) {
+                    return `https://www.youtube.com/embed/${videoId}`;
+                }
+            }
+            if (hostname === "vimeo.com") {
+                const videoId = u.pathname.split("/")[1];
+                if (videoId) {
+                    return `https://player.vimeo.com/video/${videoId}`;
+                }
+            }
+            if (hostname === "google.com" ||
+                hostname === "maps.google.com" ||
+                hostname === "goo.gl") {
+                if (url.includes("/maps/embed")) {
+                    return url;
+                }
+                return url.replace("/maps/", "/maps/embed/");
+            }
+            return url;
+        }
+        catch (_a) {
+            return url;
+        }
+    }
+    return (<div className="flex gap-1 border-r pr-3 relative">
+      <input type="file" accept="image/*" ref={imageInputRef} className="hidden" onChange={handleImageUpload} aria-label="Upload Image" title="Upload Image"/>
+      <input type="file" accept="video/*" ref={videoInputRef} className="hidden" onChange={handleVideoUpload} aria-label="Upload Video" title="Upload Video"/>
+
+      <ToolbarButton icon={MdTableChart} label="Insert Table" onClick={() => setShowTableGrid(!showTableGrid)}/>
+      {showTableGrid && (<div className="absolute top-10 left-0 bg-white border rounded shadow p-2 z-20" onMouseLeave={() => setShowTableGrid(false)}>
+          <div className="grid grid-cols-10 gap-[1px]">
+            {[...Array(10)].map((_, row) => [...Array(10)].map((_, col) => {
+                const isSelected = row < selectedRows && col < selectedCols;
+                return (<div key={`${row}-${col}`} className={`w-5 h-5 border cursor-pointer ${isSelected ? "bg-blue-500" : "bg-gray-100"}`} onMouseEnter={() => handleTableCellHover(row + 1, col + 1)} onClick={() => handleTableInsert(row + 1, col + 1)}/>);
+            }))}
+          </div>
+          <div className="text-sm mt-2 text-center text-gray-600">
+            {selectedRows} x {selectedCols}
+          </div>
+        </div>)}
+
+      <ToolbarButton icon={MdInsertPhoto} label="Insert Image" onClick={() => { var _a; return (_a = imageInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }}/>
+      <ToolbarButton icon={MdVideoLibrary} label="Insert Video" onClick={() => { var _a; return (_a = videoInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }}/>
+      <ToolbarButton icon={MdInsertLink} label="Insert Link" onClick={() => {
+            const url = prompt("Enter URL");
+            if (url)
+                editor
+                    .chain()
+                    .focus()
+                    .extendMarkRange("link")
+                    .setLink({ href: url })
+                    .run();
+        }}/>
+      <ToolbarButton icon={MdInsertComment} label="Insert Comment" onClick={() => {
+            const comment = prompt("Enter your comment");
+            if (comment &&
+                editor.can().chain().focus().setComment(comment).run()) {
+                editor.chain().focus().setComment(comment).run();
+            }
+            else {
+                console.warn("Cannot apply comment — maybe no selection?");
+            }
+        }}/>
+      <div className="relative">
+        <ToolbarButton icon={MdInsertEmoticon} label="Emoji" onClick={() => setShowPicker(!showPicker)}/>
+        {showPicker && (<div className="absolute z-50 top-10 left-0">
+            <Picker onEmojiSelect={addEmoji} theme="auto" emoji="point_up" showPreview={false} showSkinTones={true} emojiTooltip={true}/>
+          </div>)}
+      </div>
+      <ToolbarButton icon={MdHorizontalRule} label="Horizontal Line" onClick={() => editor.chain().focus().setHorizontalRule().run()}/>
+      <ToolbarButton icon={MdOutlineOndemandVideo} label="Embed" onClick={() => {
+            const url = prompt("Enter embed URL (YouTube, Vimeo, Google Maps, etc.)");
+            if (!url)
+                return;
+            const embedUrl = normalizeEmbedUrl(url);
+            const width = prompt("Enter width in pixels", "560");
+            const height = prompt("Enter height in pixels", "315");
+            editor
+                .chain()
+                .focus()
+                .setEmbed({
+                src: embedUrl,
+                width: width ? parseInt(width) : 560,
+                height: height ? parseInt(height) : 315,
+            })
+                .run();
+        }}/>
+    </div>);
+}

package/dist/components/tetrons/toolbar/ListAlignGroup.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { Editor } from "@tiptap/react";
+export default function ListAlignGroup({ editor }: {
+    editor: Editor;
+}): React.JSX.Element;

package/dist/components/tetrons/toolbar/ListAlignGroup.jsx

@@ -0,0 +1,16 @@
+"use client";
+import React from "react";
+import { MdFormatListBulleted, MdFormatListNumbered, MdFormatIndentDecrease, MdFormatIndentIncrease, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatAlignJustify, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+export default function ListAlignGroup({ editor }) {
+    return (<div className="flex gap-1 border-r pr-3">
+      <ToolbarButton icon={MdFormatListBulleted} title="Bulleted List" onClick={() => editor.chain().focus().toggleBulletList().run()} disabled={!editor.can().toggleBulletList()}/>
+      <ToolbarButton icon={MdFormatListNumbered} title="Numbered List" onClick={() => editor.chain().focus().toggleOrderedList().run()} disabled={!editor.can().toggleOrderedList()}/>
+      <ToolbarButton icon={MdFormatIndentIncrease} title="Increase Indent" onClick={() => editor.chain().focus().sinkListItem("listItem").run()} disabled={!editor.can().sinkListItem("listItem")}/>
+      <ToolbarButton icon={MdFormatIndentDecrease} title="Decrease Indent" onClick={() => editor.chain().focus().liftListItem("listItem").run()} disabled={!editor.can().liftListItem("listItem")}/>
+      <ToolbarButton icon={MdFormatAlignLeft} title="Align Left" onClick={() => editor.chain().focus().setTextAlign("left").run()} disabled={!editor.can().setTextAlign("left")}/>
+      <ToolbarButton icon={MdFormatAlignCenter} title="Align Center" onClick={() => editor.chain().focus().setTextAlign("center").run()} disabled={!editor.can().setTextAlign("center")}/>
+      <ToolbarButton icon={MdFormatAlignRight} title="Align Right" onClick={() => editor.chain().focus().setTextAlign("right").run()} disabled={!editor.can().setTextAlign("right")}/>
+      <ToolbarButton icon={MdFormatAlignJustify} title="Justify" onClick={() => editor.chain().focus().setTextAlign("justify").run()} disabled={!editor.can().setTextAlign("justify")}/>
+    </div>);
+}

package/dist/components/tetrons/toolbar/MiscGroup.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Editor } from "@tiptap/react";
+interface MiscGroupProps {
+    editor: Editor;
+}
+export default function MiscGroup({ editor }: MiscGroupProps): React.JSX.Element;
+export {};

package/dist/components/tetrons/toolbar/MiscGroup.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { MdUndo, MdRedo, MdRefresh, MdVisibility, MdCode, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+export default function MiscGroup({ editor }) {
+    const handlePreview = () => {
+        const html = editor.getHTML();
+        const previewWindow = window.open("", "_blank");
+        if (previewWindow) {
+            previewWindow.document.open();
+            previewWindow.document.write(`
+        <html>
+          <head>
+            <title>Preview</title>
+            <style>
+              body { font-family: sans-serif; padding: 2rem; line-height: 1.6; }
+            </style>
+          </head>
+          <body>${html}</body>
+        </html>
+      `);
+            previewWindow.document.close();
+        }
+    };
+    return (<div className="flex gap-1 items-center border-r pr-3">
+      <ToolbarButton icon={MdUndo} label="Undo" onClick={() => editor.chain().focus().undo().run()} disabled={!editor.can().undo()}/>
+      <ToolbarButton icon={MdRedo} label="Redo" onClick={() => editor.chain().focus().redo().run()} disabled={!editor.can().redo()}/>
+      <ToolbarButton icon={MdRefresh} label="Reset Formatting" onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}/>
+      <ToolbarButton icon={MdCode} label="Toggle Code Block" onClick={() => editor.chain().focus().toggleCodeBlock().run()} isActive={editor.isActive("codeBlock")}/>
+      <ToolbarButton icon={MdVisibility} label="Preview" onClick={handlePreview}/>
+    </div>);
+}

package/dist/components/tetrons/toolbar/TableContextMenu.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Editor } from "@tiptap/react";
+interface ContextMenuProps {
+    editor: Editor;
+}
+export default function TableContextMenu({ editor }: ContextMenuProps): React.JSX.Element | null;
+export {};

package/dist/components/tetrons/toolbar/TableContextMenu.jsx

@@ -0,0 +1,52 @@
+"use client";
+import React, { useEffect, useState } from "react";
+export default function TableContextMenu({ editor }) {
+    const [menuPosition, setMenuPosition] = useState(null);
+    useEffect(() => {
+        const handleContextMenu = (event) => {
+            const target = event.target;
+            if (target.closest("td") || target.closest("th")) {
+                event.preventDefault();
+                setMenuPosition({ x: event.pageX, y: event.pageY });
+            }
+            else {
+                setMenuPosition(null);
+            }
+        };
+        const handleClick = () => setMenuPosition(null);
+        document.addEventListener("contextmenu", handleContextMenu);
+        document.addEventListener("click", handleClick);
+        return () => {
+            document.removeEventListener("contextmenu", handleContextMenu);
+            document.removeEventListener("click", handleClick);
+        };
+    }, []);
+    const insertRowAbove = () => editor.chain().focus().addRowBefore().run();
+    const insertRowBelow = () => editor.chain().focus().addRowAfter().run();
+    const insertColLeft = () => editor.chain().focus().addColumnBefore().run();
+    const insertColRight = () => editor.chain().focus().addColumnAfter().run();
+    const deleteRow = () => editor.chain().focus().deleteRow().run();
+    const deleteCol = () => editor.chain().focus().deleteColumn().run();
+    if (!menuPosition)
+        return null;
+    return (<ul className="absolute bg-white shadow border rounded text-sm z-50" style={{ top: menuPosition.y, left: menuPosition.x }}>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertRowAbove}>
+        Insert Row Above
+      </li>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertRowBelow}>
+        Insert Row Below
+      </li>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertColLeft}>
+        Insert Column Left
+      </li>
+      <li className="px-3 py-1 hover:bg-gray-100 cursor-pointer" onClick={insertColRight}>
+        Insert Column Right
+      </li>
+      <li className="px-3 py-1 hover:bg-red-100 cursor-pointer" onClick={deleteRow}>
+        Delete Row
+      </li>
+      <li className="px-3 py-1 hover:bg-red-100 cursor-pointer" onClick={deleteCol}>
+        Delete Column
+      </li>
+    </ul>);
+}

package/dist/components/tetrons/toolbar/TetronsToolbar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+export default function TetronsToolbar({ editor }: {
+    editor: Editor;
+}): React.JSX.Element;

package/dist/components/tetrons/toolbar/TetronsToolbar.jsx

@@ -0,0 +1,46 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import ActionGroup from "./ActionGroup";
+import ClipboardGroup from "./ClipboardGroup";
+import FontStyleGroup from "./FontStyleGroup";
+import InsertGroup from "./InsertGroup";
+import ListAlignGroup from "./ListAlignGroup";
+import MiscGroup from "./MiscGroup";
+import FileGroup from "./FileGroup";
+export default function TetronsToolbar({ editor }) {
+    const [autoSave, setAutoSave] = useState(false);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const handleUpdate = () => {
+            if (!autoSave)
+                return;
+            const content = editor.getJSON();
+            fetch("/api/save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(content),
+            }).catch((err) => console.error("Auto-save failed:", err));
+        };
+        editor.on("update", handleUpdate);
+        return () => {
+            editor.off("update", handleUpdate);
+        };
+    }, [autoSave, editor]);
+    return (<div className="flex flex-wrap items-center gap-4 p-3 border-b bg-white shadow-sm relative z-10">
+      <div className="flex items-center gap-2 border-r pr-3">
+        <input type="checkbox" id="autoSave" checked={autoSave} onChange={(e) => setAutoSave(e.target.checked)} className="w-4 h-4"/>
+        <label htmlFor="autoSave" className="text-sm select-none">
+          Auto Save
+        </label>
+      </div>
+
+      <FileGroup editor={editor}/>
+      <ClipboardGroup editor={editor}/>
+      <FontStyleGroup editor={editor}/>
+      <ListAlignGroup editor={editor}/>
+      <InsertGroup editor={editor}/>
+      <MiscGroup editor={editor}/>
+      <ActionGroup editor={editor}/>
+    </div>);
+}

package/dist/components/tetrons/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { IconType } from "react-icons";
+export type ToolbarButtonProps = {
+    icon: IconType;
+    onClick: () => void;
+    disabled?: boolean;
+    title?: string;
+    label?: string;
+    isActive?: boolean;
+};
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToolbarButton;

package/dist/components/tetrons/toolbar/ToolbarButton.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+const ToolbarButton = React.forwardRef(({ icon: Icon, onClick, disabled = false, title, label, isActive = false }, ref) => {
+    return (<button type="button" ref={ref} onClick={onClick} disabled={disabled} title={title !== null && title !== void 0 ? title : label} aria-label={title !== null && title !== void 0 ? title : label} className={`p-2 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${isActive ? "bg-gray-300" : ""}`}>
+        <Icon size={20}/>
+      </button>);
+});
+ToolbarButton.displayName = "ToolbarButton";
+export default ToolbarButton;

package/dist/components/tetrons/toolbar/extensions/Comment.d.ts

@@ -0,0 +1,17 @@
+import { Mark } from "@tiptap/core";
+export interface CommentOptions {
+    HTMLAttributes: {
+        class?: string;
+        style?: string;
+        [key: string]: unknown;
+    };
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        comment: {
+            setComment: (comment: string) => ReturnType;
+            unsetComment: () => ReturnType;
+        };
+    }
+}
+export declare const Comment: Mark<CommentOptions, any>;

package/dist/components/tetrons/toolbar/extensions/Comment.js

@@ -0,0 +1,45 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+export const Comment = Mark.create({
+    name: "comment",
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    addAttributes() {
+        return {
+            comment: {
+                default: "",
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "span[data-comment]",
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-comment": HTMLAttributes.comment,
+                class: "comment-highlight",
+                title: HTMLAttributes.comment,
+                style: "background-color: rgba(255, 230, 0, 0.3);",
+            }),
+            0,
+        ];
+    },
+    addCommands() {
+        return {
+            setComment: (comment) => ({ commands }) => {
+                return commands.setMark(this.name, { comment });
+            },
+            unsetComment: () => ({ commands }) => {
+                return commands.unsetMark(this.name);
+            },
+        };
+    },
+});

package/dist/components/tetrons/toolbar/extensions/Embed.d.ts

@@ -0,0 +1,2 @@
+import { Node } from "@tiptap/core";
+export declare const Embed: Node<any, any>;