tetrons 0.1.0 → 0.1.1

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

@@ -0,0 +1,12 @@
+type SegmentParams<T extends Object = any> = T extends Record<string, any> ? {
+    [K in keyof T]: T[K] extends string ? string | string[] | undefined : never;
+} : T;
+export interface PageProps {
+    params?: Promise<SegmentParams>;
+    searchParams?: Promise<any>;
+}
+export interface LayoutProps {
+    children?: React.ReactNode;
+    params?: Promise<SegmentParams>;
+}
+export {};

package/dist/.next/types/app/api/export/route.js

@@ -0,0 +1,52 @@
+// File: C:\Users\rexab\Desktop\Finapsys-Site\Nextjs-projects\tetrons\Tetrons\src\app\api\export\route.ts
+import * as entry from '../../../../../src/app/api/export/route.js';
+// Check that the entry is a valid entry
+checkFields();
+// Check the prop type of the entry function
+if ('GET' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('HEAD' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('OPTIONS' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('POST' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('PUT' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('DELETE' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('PATCH' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+    checkFields();
+    checkFields();
+}
+function checkFields() { }

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

@@ -0,0 +1,12 @@
+type SegmentParams<T extends Object = any> = T extends Record<string, any> ? {
+    [K in keyof T]: T[K] extends string ? string | string[] | undefined : never;
+} : T;
+export interface PageProps {
+    params?: Promise<SegmentParams>;
+    searchParams?: Promise<any>;
+}
+export interface LayoutProps {
+    children?: React.ReactNode;
+    params?: Promise<SegmentParams>;
+}
+export {};

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

@@ -0,0 +1,52 @@
+// File: C:\Users\rexab\Desktop\Finapsys-Site\Nextjs-projects\tetrons\Tetrons\src\app\api\save\route.ts
+import * as entry from '../../../../../src/app/api/save/route.js';
+// Check that the entry is a valid entry
+checkFields();
+// Check the prop type of the entry function
+if ('GET' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('HEAD' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('OPTIONS' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('POST' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('PUT' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('DELETE' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the prop type of the entry function
+if ('PATCH' in entry) {
+    checkFields();
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+    checkFields();
+    checkFields();
+}
+function checkFields() { }

package/dist/.next/types/app/layout.d.ts

@@ -0,0 +1,12 @@
+type SegmentParams<T extends Object = any> = T extends Record<string, any> ? {
+    [K in keyof T]: T[K] extends string ? string | string[] | undefined : never;
+} : T;
+export interface PageProps {
+    params?: Promise<SegmentParams>;
+    searchParams?: Promise<any>;
+}
+export interface LayoutProps {
+    children?: React.ReactNode;
+    params?: Promise<SegmentParams>;
+}
+export {};

package/dist/.next/types/app/layout.js

@@ -0,0 +1,22 @@
+// File: C:\Users\rexab\Desktop\Finapsys-Site\Nextjs-projects\tetrons\Tetrons\src\app\layout.tsx
+import * as entry from '../../../src/app/layout.js';
+// Check that the entry is a valid entry
+checkFields();
+// Check the prop type of the entry function
+checkFields();
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+    checkFields();
+    checkFields();
+}
+function checkFields() { }

package/dist/.next/types/app/page.d.ts

@@ -0,0 +1,12 @@
+type SegmentParams<T extends Object = any> = T extends Record<string, any> ? {
+    [K in keyof T]: T[K] extends string ? string | string[] | undefined : never;
+} : T;
+export interface PageProps {
+    params?: Promise<SegmentParams>;
+    searchParams?: Promise<any>;
+}
+export interface LayoutProps {
+    children?: React.ReactNode;
+    params?: Promise<SegmentParams>;
+}
+export {};

package/dist/.next/types/app/page.js

@@ -0,0 +1,22 @@
+// File: C:\Users\rexab\Desktop\Finapsys-Site\Nextjs-projects\tetrons\Tetrons\src\app\page.tsx
+import * as entry from '../../../src/app/page.js';
+// Check that the entry is a valid entry
+checkFields();
+// Check the prop type of the entry function
+checkFields();
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+    checkFields();
+    checkFields();
+}
+function checkFields() { }

package/dist/next.config.d.ts

@@ -0,0 +1,3 @@
+import type { NextConfig } from "next";
+declare const nextConfig: NextConfig;
+export default nextConfig;

package/dist/next.config.js

@@ -0,0 +1,4 @@
+const nextConfig = {
+/* config options here */
+};
+export default nextConfig;

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

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

package/dist/src/app/api/export/route.js

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

package/dist/src/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/src/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/src/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/src/app/layout.jsx

@@ -0,0 +1,34 @@
+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, }) {
+    console.log("Rendering RootLayout", {
+        geistSans: geistSans.variable,
+        geistMono: geistMono.variable,
+    });
+    return (<html lang="en">
+      <body 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/src/app/page.d.ts

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

package/dist/src/app/page.jsx

@@ -0,0 +1,10 @@
+import EditorContent from "../../components/tetrons/EditorContent";
+export default function Home() {
+  return (
+    <main className="flex flex-col h-screen overflow-hidden">
+      <div className="flex-1 overflow-auto flex flex-col">
+        <EditorContent />
+      </div>
+    </main>
+  );
+}

package/dist/src/components/UI/Button.jsx

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

package/dist/src/components/UI/Dropdown.jsx

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

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

@@ -0,0 +1 @@
+export default function EditorContent(): import("react").JSX.Element;

package/dist/src/components/tetrons/EditorContent.jsx

@@ -0,0 +1,158 @@
+"use client";
+import { Comment } from "./toolbar/extensions/Comment";
+import { useEffect, useRef, useState } 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() {
+    const [versions, setVersions] = useState([]);
+    const [currentVersionIndex, setCurrentVersionIndex] = useState(null);
+    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...",
+            },
+        },
+    });
+    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);
+        }
+    };
+    return (<div className="flex flex-col h-full">
+      <div className="p-2 border-b border-gray-300 bg-gray-50 flex flex-wrap items-center gap-3">
+        <button onClick={saveVersion} disabled={!editor} className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50">
+          Save Version
+        </button>
+
+        <div className="flex items-center gap-2 overflow-x-auto max-w-full">
+          {versions.length === 0 && (<span className="text-gray-500 text-sm">No saved versions</span>)}
+          {versions.map((_, idx) => (<button key={idx} onClick={() => restoreVersion(idx)} className={`px-2 py-1 rounded border ${idx === currentVersionIndex
+                ? "border-blue-600 font-semibold text-blue-600"
+                : "border-gray-300 text-gray-700 hover:border-gray-600"}`} title={`Restore Version ${idx + 1}`}>
+              {`V${idx + 1}`}
+            </button>))}
+        </div>
+      </div>
+
+      {editor && <TetronsToolbar editor={editor}/>}
+      <div ref={wrapperRef} className="flex-grow p-4 md:p-6 bg-white border border-gray-300 rounded shadow-sm overflow-auto min-h-0 prose relative" onClick={handleEditorClick}>
+        {editor ? (<>
+            <TiptapEditorContent editor={editor}/>
+            {editor && <TableContextMenu editor={editor}/>}
+          </>) : (<div className="text-gray-500">Loading editor...</div>)}
+      </div>
+    </div>);
+}

package/dist/src/components/tetrons/ResizableImage.d.ts

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

package/dist/src/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/src/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/src/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/src/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/src/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/src/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;