tetrons 2.3.33 → 2.3.35

package/dist/components/tetrons/EditorContent.jsx

@@ -1,209 +0,0 @@
-"use client";
-import React from "react";
-import { Comment } from "./toolbar/extensions/Comment";
-import { useEffect, useRef } from "react";
-import { useEditor, EditorContent as TiptapEditorContent, } from "@tiptap/react";
-import Document from "@tiptap/extension-document";
-import Paragraph from "@tiptap/extension-paragraph";
-import Text from "@tiptap/extension-text";
-import History from "@tiptap/extension-history";
-import Bold from "@tiptap/extension-bold";
-import Italic from "@tiptap/extension-italic";
-import Underline from "@tiptap/extension-underline";
-import Strike from "@tiptap/extension-strike";
-import Code from "@tiptap/extension-code";
-import Blockquote from "@tiptap/extension-blockquote";
-import HardBreak from "@tiptap/extension-hard-break";
-import Heading from "@tiptap/extension-heading";
-import HorizontalRule from "@tiptap/extension-horizontal-rule";
-import TextAlign from "@tiptap/extension-text-align";
-import Color from "@tiptap/extension-color";
-import Highlight from "@tiptap/extension-highlight";
-import Image from "@tiptap/extension-image";
-import Link from "@tiptap/extension-link";
-import TextStyle from "@tiptap/extension-text-style";
-import ListItem from "@tiptap/extension-list-item";
-import BulletList from "@tiptap/extension-bullet-list";
-import OrderedList from "@tiptap/extension-ordered-list";
-import { Subscript } from "./toolbar/marks/Subscript";
-import { Superscript } from "./toolbar/marks/Superscript";
-import { ResizableTable } from "./toolbar/extensions/ResizableTable";
-import { Embed } from "./toolbar/extensions/Embed";
-import TableRow from "@tiptap/extension-table-row";
-import TableCell from "@tiptap/extension-table-cell";
-import TableHeader from "@tiptap/extension-table-header";
-import { FontFamily } from "./toolbar/extensions/FontFamily";
-import { FontSize } from "./toolbar/extensions/FontSize";
-import TetronsToolbar from "./toolbar/TetronsToolbar";
-import { ResizableImage } from "./ResizableImage";
-import { ResizableVideo } from "./ResizableVideo";
-import TableContextMenu from "./toolbar/TableContextMenu";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { createLowlight } from "lowlight";
-import js from "highlight.js/lib/languages/javascript";
-import ts from "highlight.js/lib/languages/typescript";
-const lowlight = createLowlight();
-lowlight.register("js", js);
-lowlight.register("ts", ts);
-export default function EditorContent({ apiKey }) {
-    const [isValid, setIsValid] = React.useState(null);
-    const [error, setError] = React.useState(null);
-    const [versions, setVersions] = React.useState([]);
-    const [userVersion, setUserVersion] = React.useState(null);
-    const [currentVersionIndex, setCurrentVersionIndex] = React.useState(null);
-    function getApiBaseUrl() {
-        var _a, _b;
-        if (typeof import.meta !== "undefined" &&
-            ((_a = import.meta.env) === null || _a === void 0 ? void 0 : _a.VITE_TETRONS_API_URL)) {
-            return import.meta.env.VITE_TETRONS_API_URL;
-        }
-        if (typeof process !== "undefined" &&
-            ((_b = process.env) === null || _b === void 0 ? void 0 : _b.NEXT_PUBLIC_TETRONS_API_URL)) {
-            return process.env.NEXT_PUBLIC_TETRONS_API_URL;
-        }
-        return "https://staging.tetrons.com";
-    }
-    const API_BASE_URL = getApiBaseUrl();
-    useEffect(() => {
-        const validateKey = async () => {
-            try {
-                const res = await fetch(`${API_BASE_URL}/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);
-                setUserVersion(data.version);
-            }
-            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,
-            Paragraph,
-            Text,
-            History,
-            Bold,
-            Italic,
-            Underline,
-            Strike,
-            Code,
-            Blockquote,
-            HardBreak,
-            Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
-            HorizontalRule,
-            TextStyle,
-            Color,
-            Highlight.configure({ multicolor: true }),
-            FontFamily,
-            FontSize,
-            TextAlign.configure({ types: ["heading", "paragraph"] }),
-            ListItem,
-            BulletList,
-            OrderedList,
-            Subscript,
-            Superscript,
-            Image,
-            Link.configure({
-                openOnClick: false,
-                autolink: true,
-                linkOnPaste: true,
-            }),
-            ResizableTable.configure({
-                resizable: true,
-            }),
-            TableRow,
-            TableCell,
-            TableHeader,
-            Embed,
-            ResizableImage,
-            ResizableVideo,
-            Comment,
-            CodeBlockLowlight.configure({
-                lowlight,
-                HTMLAttributes: {
-                    class: "bg-gray-100 p-2 rounded font-mono text-sm overflow-auto",
-                },
-            }),
-        ],
-        content: "",
-        editorProps: {
-            attributes: {
-                class: "min-h-full focus:outline-none p-0",
-                "data-placeholder": "Start typing here...",
-            },
-        },
-        immediatelyRender: false,
-    });
-    const wrapperRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            editor === null || editor === void 0 ? void 0 : editor.destroy();
-        };
-    }, [editor]);
-    const handleEditorClick = () => {
-        if (editor && !editor.isFocused) {
-            editor.commands.focus();
-        }
-    };
-    const saveVersion = () => {
-        if (!editor)
-            return;
-        const content = editor.getJSON();
-        setVersions((prev) => [...prev, JSON.stringify(content)]);
-        setCurrentVersionIndex(versions.length);
-    };
-    const restoreVersion = (index) => {
-        if (!editor)
-            return;
-        const versionContent = versions[index];
-        if (versionContent) {
-            editor.commands.setContent(JSON.parse(versionContent));
-            setCurrentVersionIndex(index);
-        }
-    };
-    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">
-      {userVersion !== "free" && (<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 && userVersion && (<TetronsToolbar editor={editor} version={userVersion}/>)}
-
-      <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/ResizableVideo.d.ts

@@ -1,12 +0,0 @@
-import { Node } from "@tiptap/core";
-declare module "@tiptap/core" {
-    interface Commands<ReturnType> {
-        video: {
-            setVideo: (options: {
-                src: string;
-                controls?: boolean;
-            }) => ReturnType;
-        };
-    }
-}
-export declare const ResizableVideo: Node<any, any>;

package/dist/components/tetrons/ResizableVideo.js

@@ -1,61 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import ResizableVideoComponent from "./ResizableVideoComponent";
-export const ResizableVideo = Node.create({
-    name: "video",
-    group: "block",
-    draggable: true,
-    atom: true,
-    addAttributes() {
-        return {
-            src: { default: null },
-            controls: {
-                default: true,
-                parseHTML: (element) => element.hasAttribute("controls"),
-                renderHTML: (attributes) => attributes.controls ? { controls: "controls" } : {},
-            },
-            width: {
-                default: null,
-            },
-            height: {
-                default: null,
-            },
-        };
-    },
-    parseHTML() {
-        return [{ tag: "video[src]" }];
-    },
-    renderHTML({ HTMLAttributes }) {
-        const { width, height } = HTMLAttributes, rest = __rest(HTMLAttributes, ["width", "height"]);
-        const style = [];
-        if (width)
-            style.push(`width: ${width}px`);
-        if (height)
-            style.push(`height: ${height}px`);
-        return ["video", Object.assign(Object.assign({}, rest), { style: style.join("; ") })];
-    },
-    addCommands() {
-        return {
-            setVideo: (attributes) => ({ commands }) => {
-                return commands.insertContent({
-                    type: this.name,
-                    attrs: attributes,
-                });
-            },
-        };
-    },
-    addNodeView() {
-        return ReactNodeViewRenderer(ResizableVideoComponent);
-    },
-});

package/dist/components/tetrons/ResizableVideoComponent.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type { NodeViewProps } from "@tiptap/core";
-declare const ResizableVideoComponent: React.FC<NodeViewProps>;
-export default ResizableVideoComponent;

package/dist/components/tetrons/ResizableVideoComponent.jsx

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

package/dist/components/tetrons/helpers.js

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

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

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

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

@@ -1,167 +0,0 @@
-"use client";
-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 }) {
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const dropdownRef = useRef(null);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                setDropdownOpen(false);
-            }
-        };
-        if (dropdownOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [dropdownOpen]);
-    const zoomIn = () => {
-        const element = document.querySelector(".ProseMirror");
-        if (element) {
-            const style = element.style;
-            const currentZoom = parseFloat(style.zoom || "1");
-            const next = Math.min(currentZoom + 0.1, 2);
-            style.zoom = next.toString();
-        }
-    };
-    const zoomOut = () => {
-        const element = document.querySelector(".ProseMirror");
-        if (element) {
-            const style = element.style;
-            const currentZoom = parseFloat(style.zoom || "1");
-            const next = Math.max(currentZoom - 0.1, 0.5);
-            style.zoom = next.toString();
-        }
-    };
-    const handlePrint = () => {
-        const html = editor.getHTML();
-        const printWindow = window.open("", "_blank");
-        if (printWindow) {
-            printWindow.document.write(`
-        <html>
-          <head>
-            <title>Print</title>
-          </head>
-          <body>${html}</body>
-        </html>
-      `);
-            printWindow.document.close();
-            printWindow.focus();
-            printWindow.print();
-        }
-    };
-    const handleSave = async () => {
-        const content = editor.getJSON();
-        try {
-            const response = await fetch("/api/save", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(content),
-            });
-            if (!response.ok)
-                throw new Error("Failed to save file");
-            const result = await response.json();
-            console.log(result.message);
-            alert("Content saved successfully!");
-        }
-        catch (error) {
-            console.error("Error saving content:", error);
-            alert("Failed to save content.");
-        }
-    };
-    const handleDownloadPDF = async () => {
-        const html = editor.getHTML();
-        const container = document.createElement("div");
-        container.innerHTML = html;
-        container.classList.add("p-4", "prose");
-        document.body.appendChild(container);
-        try {
-            const domToPdf = (await import("dom-to-pdf")).default;
-            const options = {
-                filename: "document.pdf",
-                overrideWidth: 800,
-                overrideHeight: 1120,
-            };
-            domToPdf(container, options, () => {
-                console.log("PDF downloaded!");
-            });
-        }
-        catch (error) {
-            console.error("PDF download failed", error);
-            alert("Failed to download PDF.");
-        }
-        finally {
-            document.body.removeChild(container);
-        }
-    };
-    const handleDownloadHTML = () => {
-        const html = editor.getHTML();
-        const blob = new Blob([html], { type: "text/html" });
-        const link = document.createElement("a");
-        link.href = URL.createObjectURL(blob);
-        link.download = "document.html";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    };
-    const handleDownloadDOCX = async () => {
-        const { Document, Packer, Paragraph } = await import("docx");
-        const text = editor.getText();
-        const doc = new Document({
-            sections: [
-                {
-                    properties: {},
-                    children: [new Paragraph(text)],
-                },
-            ],
-        });
-        const blob = await Packer.toBlob(doc);
-        const link = document.createElement("a");
-        link.href = URL.createObjectURL(blob);
-        link.download = "document.docx";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    };
-    return (<div className="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

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

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

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,40 +0,0 @@
-"use client";
-import { FaRegFolderOpen } from "react-icons/fa";
-import { VscNewFile } from "react-icons/vsc";
-import ToolbarButton from "./ToolbarButton";
-import React, { useRef } from "react";
-export default function FileGroup({ editor }) {
-    const fileInputRef = useRef(null);
-    const handleNew = () => {
-        if (confirm("Are you sure you want to create a new document? Unsaved changes will be lost.")) {
-            editor.commands.clearContent();
-        }
-    };
-    const handleOpen = () => {
-        var _a;
-        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    const handleFileChange = async (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
-            return;
-        try {
-            const text = await file.text();
-            const json = JSON.parse(text);
-            editor.commands.setContent(json);
-        }
-        catch (error) {
-            console.error("Error reading file:", error);
-            alert("Failed to open or parse the file. Make sure it's a valid JSON file.");
-        }
-        finally {
-            e.target.value = "";
-        }
-    };
-    return (<div className="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

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