tetrons 2.2.6 → 2.2.8

package/dist/app/api/export/route.d.ts

@@ -0,0 +1 @@
+export declare function GET(req: Request): Response;

package/dist/app/api/export/{route.ts → route.js}

@@ -1,4 +1,4 @@
-export function GET(req: Request): Response {
+export function GET(req) {
     console.log(req.method); // Example usage
     return new Response("Hello, world!", { status: 200 });
-  }
+}

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

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

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

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

package/dist/app/api/save/route.d.ts

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

package/dist/app/api/save/route.js

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import path from "path";
+import fs from "fs/promises";
+export async function POST(request) {
+    try {
+        const json = await request.json();
+        const publicDir = path.join(process.cwd(), "public");
+        const filePath = path.join(publicDir, "editor-content.json");
+        await fs.writeFile(filePath, JSON.stringify(json, null, 2), "utf-8");
+        return NextResponse.json({ message: "File saved successfully" });
+    }
+    catch (_a) {
+        return NextResponse.json({ error: "Failed to save file" }, { status: 500 });
+    }
+}

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

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

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

@@ -0,0 +1,58 @@
+import { NextResponse } from "next/server";
+import { connectDB } from "../../../lib/db";
+import { ApiKey } from "../../../models/ApiKey";
+const corsHeaders = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type",
+};
+export async function OPTIONS() {
+    return new Response(null, {
+        status: 204,
+        headers: corsHeaders,
+    });
+}
+export async function POST(req) {
+    try {
+        const body = (await req.json());
+        const apiKey = body.apiKey;
+        if (!apiKey) {
+            return NextResponse.json({ error: "API key required" }, {
+                status: 400,
+                headers: corsHeaders,
+            });
+        }
+        await connectDB();
+        const keyEntry = await ApiKey.findOne({ apiKey });
+        if (!keyEntry) {
+            return NextResponse.json({ error: "Invalid API key" }, {
+                status: 401,
+                headers: corsHeaders,
+            });
+        }
+        if (keyEntry.version === "free" &&
+            keyEntry.expiresAt &&
+            new Date() > new Date(keyEntry.expiresAt)) {
+            return NextResponse.json({ error: "Free trial expired" }, {
+                status: 403,
+                headers: corsHeaders,
+            });
+        }
+        return NextResponse.json({
+            valid: true,
+            version: keyEntry.version,
+            email: keyEntry.email,
+            organization: keyEntry.organization,
+        }, {
+            status: 200,
+            headers: corsHeaders,
+        });
+    }
+    catch (err) {
+        console.error("Validation Error:", err);
+        return NextResponse.json({ error: "Server error" }, {
+            status: 500,
+            headers: corsHeaders,
+        });
+    }
+}

package/dist/app/layout.d.ts

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

package/dist/app/layout.jsx

@@ -0,0 +1,30 @@
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+const geistSans = Geist({
+    variable: "--font-geist-sans",
+    subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"],
+});
+export const metadata = {
+    title: "Tetrons",
+    description: "A modern Word-style rich text editor built with Next.js",
+    icons: {
+        icon: [
+            { url: "/favicon.ico", type: "image/x-icon" },
+            { url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
+            { url: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
+        ],
+        apple: "/apple-touch-icon.png",
+    },
+    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>);
+}

package/dist/app/page.d.ts

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

package/dist/app/page.jsx

@@ -0,0 +1,51 @@
+"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 fetchOrGenerateApiKey = async () => {
+            let key = localStorage.getItem("tetrons-key");
+            if (!key) {
+                try {
+                    const res = await fetch("/api/register", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                            email: "developer@finapsys.co.in",
+                            organization: "FCSPL",
+                            version: "free",
+                        }),
+                    });
+                    const data = await res.json();
+                    if (!res.ok || !data.apiKey) {
+                        throw new Error(data.error || "Failed to register for API key");
+                    }
+                    key = data.apiKey;
+                    if (key) {
+                        localStorage.setItem("tetrons-key", key);
+                    }
+                }
+                catch (err) {
+                    console.error("❌ Failed to fetch or register API key:", err);
+                }
+            }
+            setApiKey(key);
+            setLoading(false);
+        };
+        fetchOrGenerateApiKey();
+    }, []);
+    if (loading) {
+        return <div className="text-center p-4">⏳ Loading Editor...</div>;
+    }
+    if (!apiKey) {
+        return <div className="text-red-600 text-center">❌ API key not found</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/UI/Button.jsx

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

package/dist/components/UI/Dropdown.jsx

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

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

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

package/dist/components/tetrons/EditorContent.jsx

@@ -0,0 +1,209 @@
+"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 "http://localhost:3000";
+    }
+    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/ResizableImage.d.ts

@@ -0,0 +1 @@
+export declare const ResizableImage: import("@tiptap/react").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/tetrons/ResizableImage.js

@@ -0,0 +1,40 @@
+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 Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableImageComponent from "./ResizableImageComponent";
+export const ResizableImage = Image.extend({
+    name: "resizableImage",
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { width: {
+                default: null,
+            }, height: {
+                default: null,
+            } });
+    },
+    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 [
+            "img",
+            Object.assign(Object.assign({}, rest), { style: style.join("; ") }),
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ResizableImageComponent);
+    },
+});

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { NodeViewRendererProps } from "@tiptap/react";
+interface ResizableImageProps extends NodeViewRendererProps {
+    updateAttributes: (attrs: {
+        width?: number | null;
+        height?: number | null;
+    }) => void;
+    selected?: boolean;
+}
+declare const ResizableImageComponent: React.FC<ResizableImageProps>;
+export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.jsx

@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
+    const { src, alt, title, width, height } = node.attrs;
+    const wrapperRef = useRef(null);
+    const imgRef = useRef(null);
+    useEffect(() => {
+        const img = imgRef.current;
+        if (!img)
+            return;
+        const observer = new ResizeObserver(() => {
+            const w = Math.round(img.offsetWidth);
+            const h = Math.round(img.offsetHeight);
+            updateAttributes({ width: w, height: h });
+        });
+        observer.observe(img);
+        return () => observer.disconnect();
+    }, [updateAttributes]);
+    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%",
+        }}>
+      {/* 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/ResizableVideo.d.ts

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

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

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