npm - tetrons - Versions diffs - 2.2.2 → 2.2.3 - Mend

tetrons 2.2.2 → 2.2.3

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 (43) hide show

package/dist/app/layout.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import type { Metadata } from "next";
 import "./globals.css";
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: {
     children: React.ReactNode;
-}): import("react").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/app/{layout.jsx → layout.js} RENAMED Viewed

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 const geistSans = Geist({
@@ -22,9 +23,5 @@ export const metadata = {
     manifest: "/site.webmanifest",
 };
 export default function RootLayout({ children, }) {
-    return (<html lang="en">
-      <body suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased bg-gray-50 text-gray-900`}>
-        <main className="max-w-screen-xl mx-auto p-4">{children}</main>
-      </body>
-    </html>);
+    return (_jsx("html", { lang: "en", children: _jsx("body", { suppressHydrationWarning: true, className: `${geistSans.variable} ${geistMono.variable} font-sans antialiased bg-gray-50 text-gray-900`, children: _jsx("main", { className: "max-w-screen-xl mx-auto p-4", children: children }) }) }));
 }

package/dist/app/page.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import "../styles/tetrons.css";
-export default function Home(): import("react").JSX.Element;
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/app/page.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import EditorContent from "../components/tetrons/EditorContent";
+import "../styles/tetrons.css";
+export default function Home() {
+    return (_jsx("main", { className: "flex flex-col h-screen overflow-hidden", children: _jsx("div", { className: "flex-1 overflow-auto flex flex-col", children: _jsx(EditorContent, {}) }) }));
+}

package/dist/components/tetrons/EditorContent.d.ts CHANGED Viewed

@@ -1,2 +1 @@
-import React from "react";
-export default function EditorContent(): React.JSX.Element;
+export default function EditorContent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/tetrons/{EditorContent.jsx → EditorContent.js} RENAMED Viewed

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Comment } from "./toolbar/extensions/Comment";
 import { useEffect, useRef } from "react";
@@ -133,26 +134,5 @@ export default function EditorContent() {
             setCurrentVersionIndex(index);
         }
     };
-    return (<div className="editor-container">
-      <div className="editor-toolbar">
-        <button type="button" onClick={saveVersion} disabled={!editor} className="editor-save-btn">
-          Save Version
-        </button>
-        <div className="editor-versions-wrapper">
-          {versions.length === 0 && (<span className="editor-no-versions">No saved versions</span>)}
-          {versions.map((_, idx) => (<button type="button" key={idx} onClick={() => restoreVersion(idx)} className={`editor-version-btn ${idx === currentVersionIndex ? "active" : ""}`} title={`Restore Version ${idx + 1}`}>
-              {`V${idx + 1}`}
-            </button>))}
-        </div>
-      </div>
-      {editor && <TetronsToolbar editor={editor}/>}
-      <div ref={wrapperRef} className="editor-content-wrapper" onClick={handleEditorClick}>
-        {editor ? (<>
-            <TiptapEditorContent editor={editor}/>
-            {editor && <TableContextMenu editor={editor}/>}
-          </>) : (<div className="editor-loading">Loading editor...</div>)}
-      </div>
-    </div>);
+    return (_jsxs("div", { className: "editor-container", children: [_jsxs("div", { className: "editor-toolbar", children: [_jsx("button", { type: "button", onClick: saveVersion, disabled: !editor, className: "editor-save-btn", children: "Save Version" }), _jsxs("div", { className: "editor-versions-wrapper", children: [versions.length === 0 && (_jsx("span", { className: "editor-no-versions", children: "No saved versions" })), versions.map((_, idx) => (_jsx("button", { type: "button", onClick: () => restoreVersion(idx), className: `editor-version-btn ${idx === currentVersionIndex ? "active" : ""}`, title: `Restore Version ${idx + 1}`, children: `V${idx + 1}` }, idx)))] })] }), editor && _jsx(TetronsToolbar, { editor: editor }), _jsx("div", { ref: wrapperRef, className: "editor-content-wrapper", onClick: handleEditorClick, children: editor ? (_jsxs(_Fragment, { children: [_jsx(TiptapEditorContent, { editor: editor }), editor && _jsx(TableContextMenu, { editor: editor })] })) : (_jsx("div", { className: "editor-loading", children: "Loading editor..." })) })] }));
 }

package/dist/components/tetrons/{ResizableImageComponent.jsx → ResizableImageComponent.js} RENAMED Viewed

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
     const { src, alt, title, width, height } = node.attrs;
@@ -16,22 +17,19 @@ const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
         observer.observe(img);
         return () => observer.disconnect();
     }, [updateAttributes]);
-    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
+    return (_jsx(NodeViewWrapper, { ref: wrapperRef, contentEditable: false, className: `resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`, style: {
             resize: "both",
             overflow: "auto",
             border: "1px solid #ccc",
             padding: 2,
             display: "inline-block",
             maxWidth: "100%",
-        }}>
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img ref={imgRef} src={src} alt={alt !== null && alt !== void 0 ? alt : ""} title={title !== null && title !== void 0 ? title : ""} loading="lazy" style={{
-            width: width ? `${width}px` : "auto",
-            height: height ? `${height}px` : "auto",
-            display: "block",
-            userSelect: "none",
-            pointerEvents: "auto",
-        }} draggable={false}/>
-    </NodeViewWrapper>);
+        }, children: _jsx("img", { ref: imgRef, src: src, alt: alt !== null && alt !== void 0 ? alt : "", title: title !== null && title !== void 0 ? title : "", loading: "lazy", style: {
+                width: width ? `${width}px` : "auto",
+                height: height ? `${height}px` : "auto",
+                display: "block",
+                userSelect: "none",
+                pointerEvents: "auto",
+            }, draggable: false }) }));
 };
 export default ResizableImageComponent;

package/dist/components/tetrons/{ResizableVideoComponent.jsx → ResizableVideoComponent.js} RENAMED Viewed

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 const ResizableVideoComponent = ({ node, updateAttributes, selected, }) => {
     const { src, controls, width, height } = node.attrs;
@@ -16,17 +17,15 @@ const ResizableVideoComponent = ({ node, updateAttributes, selected, }) => {
         observer.observe(video);
         return () => observer.disconnect();
     }, [updateAttributes]);
-    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-video-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
+    return (_jsx(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>);
+        }, children: _jsx("video", { ref: videoRef, src: src, controls: controls, style: {
+                width: width ? `${width}px` : "auto",
+                height: height ? `${height}px` : "auto",
+            } }) }));
 };
 export default ResizableVideoComponent;

package/dist/components/tetrons/toolbar/ActionGroup.d.ts CHANGED Viewed

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

package/dist/components/tetrons/toolbar/{ActionGroup.jsx → ActionGroup.js} RENAMED Viewed

@@ -1,5 +1,6 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
@@ -130,38 +131,14 @@ export default function ActionGroup({ editor }) {
         link.click();
         document.body.removeChild(link);
     };
-    return (<div className="action-group" 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="export-button" title="Export">
-          <MdDownload />
-          <span className="text-sm"></span>
-        </button>
-        {dropdownOpen && (<div className="export-dropdown">
-            <button type="button" onClick={() => {
-                setDropdownOpen(false);
-                handleDownloadPDF();
-            }}>
-              Export as PDF
-            </button>
-            <button type="button" onClick={() => {
-                setDropdownOpen(false);
-                handleDownloadHTML();
-            }}>
-              Export as HTML
-            </button>
-            <button type="button" onClick={() => {
-                setDropdownOpen(false);
-                handleDownloadDOCX();
-            }}>
-              Export as DOCX
-            </button>
-          </div>)}
-      </div>
-    </div>);
+    return (_jsxs("div", { className: "action-group", role: "group", "aria-label": "Editor actions", children: [_jsx(ToolbarButton, { icon: MdZoomIn, onClick: zoomIn, title: "Zoom In" }), _jsx(ToolbarButton, { icon: MdZoomOut, onClick: zoomOut, title: "Zoom Out" }), _jsx(ToolbarButton, { icon: MdPrint, onClick: handlePrint, title: "Print" }), _jsx(ToolbarButton, { icon: MdSave, onClick: handleSave, title: "Save" }), _jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsxs("button", { type: "button", onClick: () => setDropdownOpen((open) => !open), "aria-haspopup": "menu", "aria-expanded": dropdownOpen ? "true" : "false", className: "export-button", title: "Export", children: [_jsx(MdDownload, {}), _jsx("span", { className: "text-sm" })] }), dropdownOpen && (_jsxs("div", { className: "export-dropdown", children: [_jsx("button", { type: "button", onClick: () => {
+                                    setDropdownOpen(false);
+                                    handleDownloadPDF();
+                                }, children: "Export as PDF" }), _jsx("button", { type: "button", onClick: () => {
+                                    setDropdownOpen(false);
+                                    handleDownloadHTML();
+                                }, children: "Export as HTML" }), _jsx("button", { type: "button", onClick: () => {
+                                    setDropdownOpen(false);
+                                    handleDownloadDOCX();
+                                }, children: "Export as DOCX" })] }))] })] }));
 }

package/dist/components/tetrons/toolbar/ClipboardGroup.d.ts CHANGED Viewed

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

package/dist/components/tetrons/toolbar/ClipboardGroup.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MdContentPaste, MdContentCut, MdContentCopy, MdFormatPaint, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+export default function ClipboardGroup({ editor }) {
+    return (_jsxs("div", { className: "clipboard-group", children: [_jsx(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);
+                    }
+                } }), _jsx(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();
+                    });
+                } }), _jsx(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);
+                } }), _jsx(ToolbarButton, { icon: MdFormatPaint, title: "Format Painter", onClick: () => {
+                    const currentMarks = editor.getAttributes("textStyle");
+                    localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
+                } })] }));
+}

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

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

package/dist/components/tetrons/toolbar/{FileGroup.jsx → FileGroup.js} RENAMED Viewed

@@ -1,8 +1,9 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FaRegFolderOpen } from "react-icons/fa";
 import { VscNewFile } from "react-icons/vsc";
 import ToolbarButton from "./ToolbarButton";
-import React, { useRef } from "react";
+import { useRef } from "react";
 export default function FileGroup({ editor }) {
     const fileInputRef = useRef(null);
     const handleNew = () => {
@@ -32,9 +33,5 @@ export default function FileGroup({ editor }) {
             e.target.value = "";
         }
     };
-    return (<div className="file-group" 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>);
+    return (_jsxs("div", { className: "file-group", role: "group", "aria-label": "File actions", children: [_jsx("input", { type: "file", accept: ".json", ref: fileInputRef, onChange: handleFileChange, className: "hidden", "aria-label": "Open JSON file" }), _jsx(ToolbarButton, { icon: VscNewFile, onClick: handleNew, title: "New" }), _jsx(ToolbarButton, { icon: FaRegFolderOpen, onClick: handleOpen, title: "Open File" })] }));
 }

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

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

package/dist/components/tetrons/toolbar/FontStyleGroup.js ADDED Viewed

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { className: "font-style-group", children: [_jsxs("select", { title: "Font Family", value: fontFamily, onChange: (e) => {
+                    const value = e.target.value;
+                    setFontFamily(value);
+                    editor.chain().focus().setFontFamily(value).run();
+                }, children: [_jsx("option", { value: "Arial", children: "Arial" }), _jsx("option", { value: "Georgia", children: "Georgia" }), _jsx("option", { value: "Times New Roman", children: "Times New Roman" }), _jsx("option", { value: "Courier New", children: "Courier New" }), _jsx("option", { value: "Verdana", children: "Verdana" })] }), _jsxs("select", { title: "Font Size", value: fontSize, onChange: (e) => {
+                    const value = e.target.value;
+                    setFontSize(value);
+                    editor.chain().focus().setFontSize(value).run();
+                }, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "36px", children: "36" }), _jsx("option", { value: "48px", children: "48" }), _jsx("option", { value: "64px", children: "64" }), _jsx("option", { value: "72px", children: "72" })] }), _jsx(ToolbarButton, { icon: MdFormatBold, label: "Bold", onClick: () => editor.chain().focus().toggleBold().run(), isActive: editor.isActive("bold") }), _jsx(ToolbarButton, { icon: MdFormatItalic, label: "Italic", onClick: () => editor.chain().focus().toggleItalic().run(), isActive: editor.isActive("italic") }), _jsx(ToolbarButton, { icon: MdFormatUnderlined, label: "Underline", onClick: () => editor.chain().focus().toggleUnderline().run(), isActive: editor.isActive("underline") }), _jsx(ToolbarButton, { icon: MdStrikethroughS, label: "Strikethrough", onClick: () => editor.chain().focus().toggleStrike().run(), isActive: editor.isActive("strike") }), _jsx(ToolbarButton, { icon: MdSubscript, label: "Subscript", onClick: () => editor.chain().focus().toggleSubscript().run(), isActive: editor.isActive("subscript") }), _jsx(ToolbarButton, { icon: MdSuperscript, label: "Superscript", onClick: () => editor.chain().focus().toggleSuperscript().run(), isActive: editor.isActive("superscript") }), _jsxs("label", { title: "Font Color", "aria-label": "Font Color", className: "color-label", style: { "--indicator-color": textColor }, children: [_jsx(ImTextColor, { size: 20 }), _jsx("div", { className: "color-indicator" }), _jsx("input", { type: "color", value: textColor, onChange: (e) => {
+                            const color = e.target.value;
+                            setTextColor(color);
+                            editor.chain().focus().setColor(color).run();
+                        } })] }), _jsxs("label", { title: "Highlight Color", "aria-label": "Highlight Color", className: "color-label", style: { "--indicator-color": highlightColor }, children: [_jsx(BiSolidColorFill, { size: 20 }), _jsx("div", { className: "color-indicator" }), _jsx("input", { type: "color", value: highlightColor, onChange: (e) => {
+                            const color = e.target.value;
+                            setHighlightColor(color);
+                            editor.chain().focus().setHighlight({ color }).run();
+                        } })] }), _jsx(ToolbarButton, { icon: MdFormatClear, label: "Clear Formatting", onClick: () => editor.chain().focus().unsetAllMarks().run() }), _jsx(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();
+                    }
+                } })] }));
+}

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

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

package/dist/components/tetrons/toolbar/InsertGroup.js ADDED Viewed

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 (_jsxs("div", { className: "insert-group", children: [_jsx("input", { type: "file", accept: "image/*", ref: imageInputRef, className: "hidden-input", onChange: handleImageUpload, "aria-label": "Upload Image", title: "Upload Image" }), _jsx("input", { type: "file", accept: "video/*", ref: videoInputRef, className: "hidden-input", onChange: handleVideoUpload, "aria-label": "Upload Video", title: "Upload Video" }), _jsx(ToolbarButton, { icon: MdTableChart, label: "Insert Table", onClick: () => setShowTableGrid(!showTableGrid) }), showTableGrid && (_jsxs("div", { className: "table-grid-popup", onMouseLeave: () => setShowTableGrid(false), children: [_jsx("div", { className: "table-grid", children: [...Array(10)].map((_, row) => [...Array(10)].map((_, col) => {
+                            const isSelected = row < selectedRows && col < selectedCols;
+                            return (_jsx("div", { className: `table-grid-cell ${isSelected ? "selected" : ""}`, onMouseEnter: () => handleTableCellHover(row + 1, col + 1), onClick: () => handleTableInsert(row + 1, col + 1) }, `${row}-${col}`));
+                        })) }), _jsxs("div", { className: "table-grid-label", children: [selectedRows, " x ", selectedCols] })] })), _jsx(ToolbarButton, { icon: MdInsertPhoto, label: "Insert Image", onClick: () => { var _a; return (_a = imageInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }), _jsx(ToolbarButton, { icon: MdVideoLibrary, label: "Insert Video", onClick: () => { var _a; return (_a = videoInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }), _jsx(ToolbarButton, { icon: MdInsertLink, label: "Insert Link", onClick: () => {
+                    const url = prompt("Enter URL");
+                    if (url) {
+                        editor
+                            .chain()
+                            .focus()
+                            .extendMarkRange("link")
+                            .setLink({ href: url })
+                            .run();
+                    }
+                } }), _jsx(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?");
+                    }
+                } }), _jsxs("div", { className: "relative", children: [_jsx(ToolbarButton, { icon: MdInsertEmoticon, label: "Emoji", onClick: () => setShowPicker(!showPicker) }), showPicker && (_jsx("div", { className: "emoji-picker", children: _jsx(Picker, { onEmojiSelect: addEmoji, theme: "auto", emoji: "point_up", showPreview: false, showSkinTones: true, emojiTooltip: true }) }))] }), _jsx(ToolbarButton, { icon: MdHorizontalRule, label: "Horizontal Line", onClick: () => editor.chain().focus().setHorizontalRule().run() }), _jsx(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();
+                } })] }));
+}

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

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

package/dist/components/tetrons/toolbar/ListAlignGroup.js ADDED Viewed

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MdFormatListBulleted, MdFormatListNumbered, MdFormatIndentDecrease, MdFormatIndentIncrease, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatAlignJustify, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+export default function ListAlignGroup({ editor }) {
+    return (_jsxs("div", { className: "list-align-group", children: [_jsx(ToolbarButton, { icon: MdFormatListBulleted, title: "Bulleted List", onClick: () => editor.chain().focus().toggleBulletList().run(), disabled: !editor.can().toggleBulletList() }), _jsx(ToolbarButton, { icon: MdFormatListNumbered, title: "Numbered List", onClick: () => editor.chain().focus().toggleOrderedList().run(), disabled: !editor.can().toggleOrderedList() }), _jsx(ToolbarButton, { icon: MdFormatIndentIncrease, title: "Increase Indent", onClick: () => editor.chain().focus().sinkListItem("listItem").run(), disabled: !editor.can().sinkListItem("listItem") }), _jsx(ToolbarButton, { icon: MdFormatIndentDecrease, title: "Decrease Indent", onClick: () => editor.chain().focus().liftListItem("listItem").run(), disabled: !editor.can().liftListItem("listItem") }), _jsx(ToolbarButton, { icon: MdFormatAlignLeft, title: "Align Left", onClick: () => editor.chain().focus().setTextAlign("left").run(), disabled: !editor.can().setTextAlign("left") }), _jsx(ToolbarButton, { icon: MdFormatAlignCenter, title: "Align Center", onClick: () => editor.chain().focus().setTextAlign("center").run(), disabled: !editor.can().setTextAlign("center") }), _jsx(ToolbarButton, { icon: MdFormatAlignRight, title: "Align Right", onClick: () => editor.chain().focus().setTextAlign("right").run(), disabled: !editor.can().setTextAlign("right") }), _jsx(ToolbarButton, { icon: MdFormatAlignJustify, title: "Justify", onClick: () => editor.chain().focus().setTextAlign("justify").run(), disabled: !editor.can().setTextAlign("justify") })] }));
+}

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

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

package/dist/components/tetrons/toolbar/MiscGroup.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { className: "misc-group", children: [_jsx(ToolbarButton, { icon: MdUndo, label: "Undo", onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo() }), _jsx(ToolbarButton, { icon: MdRedo, label: "Redo", onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo() }), _jsx(ToolbarButton, { icon: MdRefresh, label: "Reset Formatting", onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run() }), _jsx(ToolbarButton, { icon: MdCode, label: "Toggle Code Block", onClick: () => editor.chain().focus().toggleCodeBlock().run(), isActive: editor.isActive("codeBlock") }), _jsx(ToolbarButton, { icon: MdVisibility, label: "Preview", onClick: handlePreview })] }));
+}

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

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

package/dist/components/tetrons/toolbar/{TableContextMenu.jsx → TableContextMenu.js} RENAMED Viewed

@@ -1,5 +1,6 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 export default function TableContextMenu({ editor }) {
     const [menuPosition, setMenuPosition] = useState(null);
     useEffect(() => {
@@ -29,24 +30,5 @@ export default function TableContextMenu({ editor }) {
     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>);
+    return (_jsxs("ul", { className: "absolute bg-white shadow border rounded text-sm z-50", style: { top: menuPosition.y, left: menuPosition.x }, children: [_jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertRowAbove, children: "Insert Row Above" }), _jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertRowBelow, children: "Insert Row Below" }), _jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertColLeft, children: "Insert Column Left" }), _jsx("li", { className: "px-3 py-1 hover:bg-gray-100 cursor-pointer", onClick: insertColRight, children: "Insert Column Right" }), _jsx("li", { className: "px-3 py-1 hover:bg-red-100 cursor-pointer", onClick: deleteRow, children: "Delete Row" }), _jsx("li", { className: "px-3 py-1 hover:bg-red-100 cursor-pointer", onClick: deleteCol, children: "Delete Column" })] }));
 }