npm - tetrons - Versions diffs - 0.1.0 → 0.1.1 - Mend

tetrons 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/src/components/tetrons/ResizableVideoComponent.jsx ADDED Viewed

@@ -0,0 +1,32 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+const ResizableVideoComponent = ({ node, updateAttributes, selected, }) => {
+    const { src, controls, width, height } = node.attrs;
+    const wrapperRef = useRef(null);
+    const videoRef = useRef(null);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const observer = new ResizeObserver(() => {
+            const w = Math.round(video.offsetWidth);
+            const h = Math.round(video.offsetHeight);
+            updateAttributes({ width: w, height: h });
+        });
+        observer.observe(video);
+        return () => observer.disconnect();
+    }, [updateAttributes]);
+    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-video-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
+            resize: "both",
+            overflow: "auto",
+            border: "1px solid #ccc",
+            padding: "2px",
+            display: "inline-block",
+        }}>
+      <video ref={videoRef} src={src} controls={controls} style={{
+            width: width ? `${width}px` : "auto",
+            height: height ? `${height}px` : "auto",
+        }}/>
+    </NodeViewWrapper>);
+};
+export default ResizableVideoComponent;

package/dist/src/components/tetrons/helpers.d.ts ADDED Viewed

File without changes

package/dist/src/components/tetrons/helpers.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";

package/dist/src/components/tetrons/toolbar/ActionGroup.d.ts ADDED Viewed

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

package/dist/src/components/tetrons/toolbar/ActionGroup.jsx ADDED Viewed

@@ -0,0 +1,165 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { MdZoomIn, MdZoomOut, MdPrint, MdSave, MdDownload, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+export default function ActionGroup({ editor }) {
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setDropdownOpen(false);
+            }
+        };
+        if (dropdownOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [dropdownOpen]);
+    const zoomIn = () => {
+        const element = document.querySelector(".ProseMirror");
+        if (element) {
+            const currentZoom = parseFloat(element.style.zoom || "1");
+            const next = Math.min(currentZoom + 0.1, 2);
+            element.style.zoom = next.toString();
+        }
+    };
+    const zoomOut = () => {
+        const element = document.querySelector(".ProseMirror");
+        if (element) {
+            const currentZoom = parseFloat(element.style.zoom || "1");
+            const next = Math.max(currentZoom - 0.1, 0.5);
+            element.style.zoom = next.toString();
+        }
+    };
+    const handlePrint = () => {
+        const html = editor.getHTML();
+        const printWindow = window.open("", "_blank");
+        if (printWindow) {
+            printWindow.document.write(`
+        <html>
+          <head>
+            <title>Print</title>
+          </head>
+          <body>${html}</body>
+        </html>
+      `);
+            printWindow.document.close();
+            printWindow.focus();
+            printWindow.print();
+        }
+    };
+    const handleSave = async () => {
+        const content = editor.getJSON();
+        try {
+            const response = await fetch("/api/save", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(content),
+            });
+            if (!response.ok)
+                throw new Error("Failed to save file");
+            const result = await response.json();
+            console.log(result.message);
+            alert("Content saved successfully!");
+        }
+        catch (error) {
+            console.error("Error saving content:", error);
+            alert("Failed to save content.");
+        }
+    };
+    const handleDownloadPDF = async () => {
+        const html = editor.getHTML();
+        const container = document.createElement("div");
+        container.innerHTML = html;
+        container.classList.add("p-4", "prose");
+        document.body.appendChild(container);
+        try {
+            const domToPdf = (await import("dom-to-pdf")).default;
+            const options = {
+                filename: "document.pdf",
+                overrideWidth: 800,
+                overrideHeight: 1120,
+            };
+            domToPdf(container, options, () => {
+                console.log("PDF downloaded!");
+            });
+        }
+        catch (error) {
+            console.error("PDF download failed", error);
+            alert("Failed to download PDF.");
+        }
+        finally {
+            document.body.removeChild(container);
+        }
+    };
+    const handleDownloadHTML = () => {
+        const html = editor.getHTML();
+        const blob = new Blob([html], { type: "text/html" });
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = "document.html";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    const handleDownloadDOCX = async () => {
+        const { Document, Packer, Paragraph } = await import("docx");
+        const text = editor.getText();
+        const doc = new Document({
+            sections: [
+                {
+                    properties: {},
+                    children: [new Paragraph(text)],
+                },
+            ],
+        });
+        const blob = await Packer.toBlob(doc);
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = "document.docx";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    };
+    return (<div className="relative flex items-center gap-1" role="group" aria-label="Editor actions">
+      <ToolbarButton icon={MdZoomIn} onClick={zoomIn} title="Zoom In"/>
+      <ToolbarButton icon={MdZoomOut} onClick={zoomOut} title="Zoom Out"/>
+      <ToolbarButton icon={MdPrint} onClick={handlePrint} title="Print"/>
+      <ToolbarButton icon={MdSave} onClick={handleSave} title="Save"/>
+      <div className="relative" ref={dropdownRef}>
+        <button type="button" onClick={() => setDropdownOpen((open) => !open)} aria-haspopup="menu" aria-expanded={dropdownOpen ? "true" : "false"} className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 focus:outline-none" title="Export">
+          <MdDownload />
+          <span className="text-sm"></span>
+        </button>
+        {dropdownOpen && (<div className="absolute z-10 mt-2 w-40 bg-white border rounded shadow-md">
+            <button type="button" onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadPDF();
+            }} className="w-full text-left px-4 py-2 hover:bg-gray-100">
+              Export as PDF
+            </button>
+            <button type="button" onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadHTML();
+            }} className="w-full text-left px-4 py-2 hover:bg-gray-100">
+              Export as HTML
+            </button>
+            <button type="button" onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadDOCX();
+            }} className="w-full text-left px-4 py-2 hover:bg-gray-100">
+              Export as DOCX
+            </button>
+          </div>)}
+      </div>
+    </div>);
+}

package/dist/src/components/tetrons/toolbar/ClipboardGroup.d.ts ADDED Viewed

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

package/dist/src/components/tetrons/toolbar/ClipboardGroup.jsx ADDED Viewed

@@ -0,0 +1,35 @@
+import { MdContentPaste, MdContentCut, MdContentCopy, MdFormatPaint, } from "react-icons/md";
+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/src/components/tetrons/toolbar/FileGroup.d.ts ADDED Viewed

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

package/dist/src/components/tetrons/toolbar/FileGroup.jsx ADDED Viewed

@@ -0,0 +1,40 @@
+"use client";
+import { FaRegFolderOpen } from "react-icons/fa";
+import { VscNewFile } from "react-icons/vsc";
+import ToolbarButton from "./ToolbarButton";
+import { 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/src/components/tetrons/toolbar/FontStyleGroup.d.ts ADDED Viewed

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

package/dist/src/components/tetrons/toolbar/FontStyleGroup.jsx ADDED Viewed

@@ -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 { 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/src/components/tetrons/toolbar/InsertGroup.d.ts ADDED Viewed

@@ -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/src/components/tetrons/toolbar/InsertGroup.jsx ADDED Viewed

@@ -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/src/components/tetrons/toolbar/ListAlignGroup.d.ts ADDED Viewed

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

package/dist/src/components/tetrons/toolbar/ListAlignGroup.jsx ADDED Viewed

@@ -0,0 +1,15 @@
+"use client";
+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/src/components/tetrons/toolbar/MiscGroup.d.ts ADDED Viewed

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

package/dist/src/components/tetrons/toolbar/MiscGroup.jsx ADDED Viewed

@@ -0,0 +1,30 @@
+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/src/components/tetrons/toolbar/TableContextMenu.d.ts ADDED Viewed

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