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

tetrons 2.2.1 → 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 (42) hide show

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

@@ -4,4 +4,4 @@ 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 @@
-/// <reference types="react" />
-export default function Home(): import("react").JSX.Element;
+import "../styles/tetrons.css";
+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,28 +134,5 @@ export default function EditorContent() {
             setCurrentVersionIndex(index);
         }
     };
-    return (<div className="flex flex-col h-full">
-      <div className="p-2 border-b border-gray-300 bg-gray-50 flex flex-wrap items-center gap-3">
-        <button onClick={saveVersion} disabled={!editor} className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50">
-          Save Version
-        </button>
-        <div className="flex items-center gap-2 overflow-x-auto max-w-full">
-          {versions.length === 0 && (<span className="text-gray-500 text-sm">No saved versions</span>)}
-          {versions.map((_, idx) => (<button key={idx} onClick={() => restoreVersion(idx)} className={`px-2 py-1 rounded border ${idx === currentVersionIndex
-                ? "border-blue-600 font-semibold text-blue-600"
-                : "border-gray-300 text-gray-700 hover:border-gray-600"}`} title={`Restore Version ${idx + 1}`}>
-              {`V${idx + 1}`}
-            </button>))}
-        </div>
-      </div>
-      {editor && <TetronsToolbar editor={editor}/>}
-      <div ref={wrapperRef} className="flex-grow p-4 md:p-6 bg-white border border-gray-300 rounded shadow-sm overflow-auto min-h-0 prose relative" onClick={handleEditorClick}>
-        {editor ? (<>
-            <TiptapEditorContent editor={editor}/>
-            {editor && <TableContextMenu editor={editor}/>}
-          </>) : (<div className="text-gray-500">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 }) {
@@ -25,17 +26,19 @@ export default function ActionGroup({ editor }) {
     const zoomIn = () => {
         const element = document.querySelector(".ProseMirror");
         if (element) {
-            const currentZoom = parseFloat(element.style.zoom || "1");
+            const style = element.style;
+            const currentZoom = parseFloat(style.zoom || "1");
             const next = Math.min(currentZoom + 0.1, 2);
-            element.style.zoom = next.toString();
+            style.zoom = next.toString();
         }
     };
     const zoomOut = () => {
         const element = document.querySelector(".ProseMirror");
         if (element) {
-            const currentZoom = parseFloat(element.style.zoom || "1");
+            const style = element.style;
+            const currentZoom = parseFloat(style.zoom || "1");
             const next = Math.max(currentZoom - 0.1, 0.5);
-            element.style.zoom = next.toString();
+            style.zoom = next.toString();
         }
     };
     const handlePrint = () => {
@@ -128,38 +131,14 @@ export default function ActionGroup({ editor }) {
         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>);
+    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="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>);
+    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 {};