tetrons 2.2.4 → 2.2.6

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "tetrons",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "next dev --turbo",
-    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist && copyfiles -u 1 src/styles/*.css dist/styles",
+    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist && copyfiles -u 2 src/styles/*.css dist/styles && copyfiles -u 3 src/app/api/**/*.ts dist/app/api",
     "start": "next start",
     "lint": "next lint"
   },
@@ -65,8 +65,7 @@
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./style.css": "./dist/styles/tetrons.css"
   },

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

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

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

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

@@ -1,26 +0,0 @@
-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/save/route.d.ts

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

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

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

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

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

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

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

package/dist/app/page.jsx

@@ -1,55 +0,0 @@
-"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/UI/Button.jsx

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

package/dist/components/UI/Dropdown.jsx

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

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

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

package/dist/components/tetrons/EditorContent.jsx

@@ -1,193 +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 [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,
-            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">
-      <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/ResizableImage.d.ts

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

package/dist/components/tetrons/ResizableImage.js

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

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

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

@@ -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 {};