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

tetrons 2.2.3 → 2.2.4

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

package/dist/app/api/register/route.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { NextRequest, NextResponse } from "next/server";
+export declare function POST(req: NextRequest): Promise<NextResponse<{
+    error: string;
+}> | NextResponse<{
+    apiKey: string;
+}>>;

package/dist/app/api/register/route.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server";
+import { connectDB } from "../../../lib/db";
+import { ApiKey } from "../../../models/ApiKey";
+import { generateApiKey } from "../../../utils/apiKeyUtils";
+export async function POST(req) {
+    const { email, organization, version } = await req.json();
+    if (!email || !organization || !version)
+        return NextResponse.json({ error: "Missing fields" }, { status: 400 });
+    await connectDB();
+    if (version === "free") {
+        const expiresAt = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000);
+        const apiKey = generateApiKey(48);
+        await ApiKey.deleteMany({ email, version });
+        await ApiKey.create({
+            email,
+            organization,
+            version,
+            apiKey,
+            expiresAt,
+        });
+        return NextResponse.json({ apiKey, expiresAt });
+    }
+    const apiKey = generateApiKey(48);
+    await ApiKey.create({ email, organization, version, apiKey });
+    return NextResponse.json({ apiKey });
+}

package/dist/app/api/validate/route.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { NextRequest, NextResponse } from "next/server";
+export declare function POST(req: NextRequest): Promise<NextResponse<{
+    error: string;
+}> | NextResponse<{
+    valid: boolean;
+    version: any;
+}>>;

package/dist/app/api/validate/route.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { connectDB } from "../../../lib/db";
+import { ApiKey } from "../../../models/ApiKey";
+export async function POST(req) {
+    const { apiKey } = await req.json();
+    if (!apiKey)
+        return NextResponse.json({ error: "API key required" }, { status: 400 });
+    await connectDB();
+    const keyEntry = await ApiKey.findOne({ apiKey });
+    if (!keyEntry)
+        return NextResponse.json({ error: "Invalid key" }, { status: 401 });
+    if (keyEntry.version === "free" &&
+        keyEntry.expiresAt &&
+        new Date() > new Date(keyEntry.expiresAt)) {
+        return NextResponse.json({ error: "Free trial expired" }, { status: 403 });
+    }
+    return NextResponse.json({ valid: true, version: keyEntry.version });
+}

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

@@ -1,7 +1,6 @@
-/// <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-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 const geistSans = Geist({
@@ -23,5 +22,9 @@ export const metadata = {
     manifest: "/site.webmanifest",
 };
 export default function RootLayout({ children, }) {
-    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 }) }) }));
+    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>);
 }

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

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

package/dist/app/page.jsx ADDED Viewed

@@ -0,0 +1,55 @@
+"use client";
+import { useEffect, useState } from "react";
+import EditorContent from "../components/tetrons/EditorContent";
+import "../styles/tetrons.css";
+export default function Home() {
+    const [apiKey, setApiKey] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        const fetchApiKey = async () => {
+            try {
+                const cachedKey = localStorage.getItem("my-api-key");
+                if (cachedKey) {
+                    setApiKey(cachedKey);
+                    setLoading(false);
+                    return;
+                }
+                const res = await fetch("/api/register", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                        email: "mr.swastikjha@gmail.com",
+                        organization: "FCSPL",
+                        version: "free",
+                    }),
+                });
+                const data = await res.json();
+                if (!res.ok || !data.apiKey) {
+                    throw new Error(data.error || "Failed to fetch API key");
+                }
+                localStorage.setItem("my-api-key", data.apiKey);
+                setApiKey(data.apiKey);
+            }
+            catch (error) {
+                console.error("Error fetching API key:", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchApiKey();
+    }, []);
+    if (loading) {
+        return <div className="text-center p-4">⏳ Loading Editor...</div>;
+    }
+    if (!apiKey) {
+        return (<div className="text-center text-red-600">❌ Failed to load API key</div>);
+    }
+    return (<main className="flex flex-col h-screen overflow-hidden">
+      <div className="flex-1 overflow-auto flex flex-col">
+        <EditorContent apiKey={apiKey}/>
+      </div>
+    </main>);
+}

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

@@ -1 +1,6 @@
-export default function EditorContent(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+type EditorContentProps = {
+    apiKey: string;
+};
+export default function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
+export {};

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

@@ -1,5 +1,4 @@
 "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";
@@ -46,9 +45,38 @@ import ts from "highlight.js/lib/languages/typescript";
 const lowlight = createLowlight();
 lowlight.register("js", js);
 lowlight.register("ts", ts);
-export default function EditorContent() {
+export default function EditorContent({ apiKey }) {
+    const [isValid, setIsValid] = React.useState(null);
+    const [error, setError] = React.useState(null);
     const [versions, setVersions] = React.useState([]);
     const [currentVersionIndex, setCurrentVersionIndex] = React.useState(null);
+    useEffect(() => {
+        const validateKey = async () => {
+            try {
+                const res = await fetch("/api/validate", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ apiKey }),
+                });
+                const data = await res.json();
+                if (!res.ok)
+                    throw new Error(data.error || "Invalid API Key");
+                setIsValid(true);
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    setError(err.message || "Invalid API Key");
+                }
+                else {
+                    setError("Invalid API Key");
+                }
+                setIsValid(false);
+            }
+        };
+        validateKey();
+    }, [apiKey]);
     const editor = useEditor({
         extensions: [
             Document,
@@ -134,5 +162,32 @@ export default function EditorContent() {
             setCurrentVersionIndex(index);
         }
     };
-    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..." })) })] }));
+    if (isValid === false) {
+        return <div className="editor-error">⚠️ {error}</div>;
+    }
+    if (isValid === null) {
+        return <div className="editor-loading">🔍 Validating license...</div>;
+    }
+    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>);
 }

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

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import React, { useRef, useEffect } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
     const { src, alt, title, width, height } = node.attrs;
@@ -17,19 +16,22 @@ const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
         observer.observe(img);
         return () => observer.disconnect();
     }, [updateAttributes]);
-    return (_jsx(NodeViewWrapper, { ref: wrapperRef, contentEditable: false, className: `resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`, style: {
+    return (<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%",
-        }, 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 }) }));
+        }}>
+      {/* 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>);
 };
 export default ResizableImageComponent;

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

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

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

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

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

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { MdZoomIn, MdZoomOut, MdPrint, MdSave, MdDownload, } from "react-icons/md";
 import ToolbarButton from "./ToolbarButton";
 export default function ActionGroup({ editor }) {
@@ -131,14 +130,38 @@ export default function ActionGroup({ editor }) {
         link.click();
         document.body.removeChild(link);
     };
-    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" })] }))] })] }));
+    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>);
 }

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

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

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

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

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

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

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

@@ -1,9 +1,8 @@
 "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 { useRef } from "react";
+import React, { useRef } from "react";
 export default function FileGroup({ editor }) {
     const fileInputRef = useRef(null);
     const handleNew = () => {
@@ -33,5 +32,9 @@ export default function FileGroup({ editor }) {
             e.target.value = "";
         }
     };
-    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" })] }));
+    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>);
 }

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

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

package/dist/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 React, { useEffect, useState } from "react";
+export default function FontStyleGroup({ editor }) {
+    const [textColor, setTextColor] = useState("#000000");
+    const [highlightColor, setHighlightColor] = useState("#ffff00");
+    const [fontFamily, setFontFamily] = useState("Arial");
+    const [fontSize, setFontSize] = useState("16px");
+    useEffect(() => {
+        if (!editor)
+            return;
+        const updateStates = () => {
+            var _a, _b, _c;
+            const highlight = editor.getAttributes("highlight");
+            setHighlightColor((highlight === null || highlight === void 0 ? void 0 : highlight.color) || "#ffff00");
+            const color = (_a = editor.getAttributes("textStyle")) === null || _a === void 0 ? void 0 : _a.color;
+            setTextColor(color || "#000000");
+            const fontAttr = ((_b = editor.getAttributes("fontFamily")) === null || _b === void 0 ? void 0 : _b.font) || "Arial";
+            setFontFamily(fontAttr);
+            const sizeAttr = ((_c = editor.getAttributes("fontSize")) === null || _c === void 0 ? void 0 : _c.size) || "16px";
+            setFontSize(sizeAttr);
+        };
+        updateStates();
+        editor.on("selectionUpdate", updateStates);
+        editor.on("transaction", updateStates);
+        return () => {
+            editor.off("selectionUpdate", updateStates);
+            editor.off("transaction", updateStates);
+        };
+    }, [editor]);
+    return (<div className="font-style-group">
+      <select title="Font Family" 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" 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="color-label" style={{ "--indicator-color": textColor }}>
+        <ImTextColor size={20}/>
+        <div className="color-indicator"/>
+        <input type="color" value={textColor} onChange={(e) => {
+            const color = e.target.value;
+            setTextColor(color);
+            editor.chain().focus().setColor(color).run();
+        }}/>
+      </label>
+      <label title="Highlight Color" aria-label="Highlight Color" className="color-label" style={{ "--indicator-color": highlightColor }}>
+        <BiSolidColorFill size={20}/>
+        <div className="color-indicator"/>
+        <input type="color" value={highlightColor} onChange={(e) => {
+            const color = e.target.value;
+            setHighlightColor(color);
+            editor.chain().focus().setHighlight({ color }).run();
+        }}/>
+      </label>
+      <ToolbarButton icon={MdFormatClear} label="Clear Formatting" onClick={() => editor.chain().focus().unsetAllMarks().run()}/>
+      <ToolbarButton icon={MdFormatPaint} label="Apply Painter Format" onClick={() => {
+            const format = JSON.parse(localStorage.getItem("formatPainter") || "{}");
+            if (format.color)
+                editor.chain().focus().setColor(format.color).run();
+            if (format.backgroundColor) {
+                editor
+                    .chain()
+                    .focus()
+                    .setHighlight({ color: format.backgroundColor })
+                    .run();
+            }
+        }}/>
+    </div>);
+}

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

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