tetrons 2.3.22 → 2.3.24

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: "platinum",
+                        }),
+                    });
+                    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/components/tetrons/EditorContent.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import React from "react";
-import { Comment } from "./toolbar/extensions/Comment";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   useEditor,
   EditorContent as TiptapEditorContent,
-  Editor,
 } from "@tiptap/react";
 
 import Document from "@tiptap/extension-document";
@@ -22,41 +19,40 @@ 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 CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import { createLowlight } from "lowlight";
+
+import { useTypo } from "../../utils/useTypo";
+import { Spellcheck } from "./extensions/Spellcheck";
 
+import { Comment } from "./toolbar/extensions/Comment";
+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 { 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";
+import TetronsToolbar from "./toolbar/TetronsToolbar";
 
 const lowlight = createLowlight();
-
 lowlight.register("js", js);
 lowlight.register("ts", ts);
 
@@ -65,16 +61,19 @@ type EditorContentProps = {
 };
 
 export default function EditorContent({ apiKey }: EditorContentProps) {
-  const [isValid, setIsValid] = React.useState<boolean | null>(null);
-  const [error, setError] = React.useState<string | null>(null);
-  const [versions, setVersions] = React.useState<string[]>([]);
-  const [userVersion, setUserVersion] = React.useState<
+  const typo = useTypo();
+
+  const [isValid, setIsValid] = useState<boolean | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [versions, setVersions] = useState<string[]>([]);
+  const [userVersion, setUserVersion] = useState<
     "free" | "pro" | "premium" | "platinum" | null
   >(null);
+  const [currentVersionIndex, setCurrentVersionIndex] = useState<number | null>(
+    null
+  );
 
-  const [currentVersionIndex, setCurrentVersionIndex] = React.useState<
-    number | null
-  >(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   function getApiBaseUrl(): string {
     if (
@@ -92,7 +91,7 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
     return "https://staging.tetrons.com";
   }
 
-  const API_BASE_URL = getApiBaseUrl();  
+  const API_BASE_URL = getApiBaseUrl();
 
   useEffect(() => {
     const validateKey = async () => {
@@ -103,7 +102,7 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
             "Content-Type": "application/json",
           },
           body: JSON.stringify({ apiKey }),
-        });               
+        });
 
         const data = await res.json();
         if (!res.ok) throw new Error(data.error || "Invalid API Key");
@@ -111,19 +110,15 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
         setIsValid(true);
         setUserVersion(data.version);
       } catch (err: unknown) {
-        if (err instanceof Error) {
-          setError(err.message || "Invalid API Key");
-        } else {
-          setError("Invalid API Key");
-        }
+        setError(err instanceof Error ? err.message : "Invalid API Key");
         setIsValid(false);
       }
     };
 
     validateKey();
-  }, [apiKey]); 
+  }, [apiKey, API_BASE_URL]);
 
-  const editor: Editor | null = useEditor({
+  const editor = useEditor({
     extensions: [
       Document,
       Paragraph,
@@ -138,35 +133,28 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
       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,
-      }),
+      ResizableTable.configure({ resizable: true }),
       TableRow,
       TableCell,
       TableHeader,
       Embed,
-
       ResizableImage,
       ResizableVideo,
       Comment,
@@ -176,6 +164,13 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
           class: "bg-gray-100 p-2 rounded font-mono text-sm overflow-auto",
         },
       }),
+      ...(typo
+        ? [
+            Spellcheck.configure({
+              spellcheckFn: (word: string) => typo.check(word),
+            }),
+          ]
+        : []),
     ],
     content: "",
     editorProps: {
@@ -186,9 +181,7 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
     },
     immediatelyRender: false,
   });
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
+  
   useEffect(() => {
     return () => {
       editor?.destroy();
@@ -215,7 +208,7 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
       editor.commands.setContent(JSON.parse(versionContent));
       setCurrentVersionIndex(index);
     }
-  }; 
+  };
 
   if (isValid === false) {
     return <div className="editor-error">⚠️ {error}</div>;
@@ -225,6 +218,10 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
     return <div className="editor-loading">🔍 Validating license...</div>;
   }
 
+  if (!typo) {
+    return <div className="editor-loading">📖 Loading dictionary...</div>;
+  }
+
   return (
     <div className="editor-container">
       {userVersion !== "free" && (
@@ -239,22 +236,23 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
           </button>
 
           <div className="editor-versions-wrapper">
-            {versions.length === 0 && (
+            {versions.length === 0 ? (
               <span className="editor-no-versions">No saved versions</span>
+            ) : (
+              versions.map((_, idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => restoreVersion(idx)}
+                  className={`editor-version-btn ${
+                    idx === currentVersionIndex ? "active" : ""
+                  }`}
+                  title={`Restore Version ${idx + 1}`}
+                >
+                  {`V${idx + 1}`}
+                </button>
+              ))
             )}
-            {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>
       )}
@@ -271,7 +269,7 @@ export default function EditorContent({ apiKey }: EditorContentProps) {
         {editor ? (
           <>
             <TiptapEditorContent editor={editor} />
-            {editor && <TableContextMenu editor={editor} />}
+            <TableContextMenu editor={editor} />
           </>
         ) : (
           <div className="editor-loading">Loading editor...</div>

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.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import React, { 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 TableRow from "@tiptap/extension-table-row";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import { createLowlight } from "lowlight";
+
+import { useTypo } from "../../utils/useTypo";
+import { Spellcheck } from "./extensions/Spellcheck";
+
+import { Comment } from "./toolbar/extensions/Comment";
+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 { FontFamily } from "./toolbar/extensions/FontFamily";
+import { FontSize } from "./toolbar/extensions/FontSize";
+import { ResizableImage } from "./ResizableImage";
+import { ResizableVideo } from "./ResizableVideo";
+import TableContextMenu from "./toolbar/TableContextMenu";
+import TetronsToolbar from "./toolbar/TetronsToolbar";
+
+const lowlight = createLowlight();
+lowlight.register("js", js);
+lowlight.register("ts", ts);
+
+type EditorContentProps = {
+  apiKey: string;
+};
+
+export default function EditorContent({ apiKey }: EditorContentProps) {
+  const typo = useTypo();
+
+  const [isValid, setIsValid] = useState<boolean | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [versions, setVersions] = useState<string[]>([]);
+  const [userVersion, setUserVersion] = useState<
+    "free" | "pro" | "premium" | "platinum" | null
+  >(null);
+  const [currentVersionIndex, setCurrentVersionIndex] = useState<number | null>(
+    null
+  );
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  function getApiBaseUrl(): string {
+    if (
+      typeof import.meta !== "undefined" &&
+      import.meta.env?.VITE_TETRONS_API_URL
+    ) {
+      return import.meta.env.VITE_TETRONS_API_URL;
+    }
+    if (
+      typeof process !== "undefined" &&
+      process.env?.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: unknown) {
+        setError(err instanceof Error ? err.message : "Invalid API Key");
+        setIsValid(false);
+      }
+    };
+
+    validateKey();
+  }, [apiKey, API_BASE_URL]);
+
+  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",
+        },
+      }),
+      ...(typo
+        ? [
+            Spellcheck.configure({
+              spellcheckFn: (word: string) => typo.check(word),
+            }),
+          ]
+        : []),
+    ],
+    content: "",
+    editorProps: {
+      attributes: {
+        class: "min-h-full focus:outline-none p-0",
+        "data-placeholder": "Start typing here...",
+      },
+    },
+    immediatelyRender: false,
+  });
+  
+  useEffect(() => {
+    return () => {
+      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: number) => {
+    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>;
+  }
+
+  if (!typo) {
+    return <div className="editor-loading">📖 Loading dictionary...</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
+                  key={idx}
+                  type="button"
+                  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} />
+            <TableContextMenu editor={editor} />
+          </>
+        ) : (
+          <div className="editor-loading">Loading editor...</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/components/tetrons/ResizableImage.ts

@@ -0,0 +1,39 @@
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableImageComponent from "./ResizableImageComponent";
+
+export const ResizableImage = Image.extend({
+  name: "resizableImage",
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: null,
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { width, height, ...rest } = HTMLAttributes;
+    const style = [];
+
+    if (width) style.push(`width: ${width}px`);
+    if (height) style.push(`height: ${height}px`);
+
+    return [
+      "img",
+      {
+        ...rest,
+        style: style.join("; "),
+      },
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ResizableImageComponent);
+  },
+});