tetrons 2.3.1 → 2.3.22

package/dist/components/components/tetrons/EditorContent.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import React from "react";
+import { Comment } from "./toolbar/extensions/Comment";
+import { useEffect, useRef } from "react";
+import {
+  useEditor,
+  EditorContent as TiptapEditorContent,
+  Editor,
+} 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);
+
+type EditorContentProps = {
+  apiKey: string;
+};
+
+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<
+    "free" | "pro" | "premium" | "platinum" | null
+  >(null);
+
+  const [currentVersionIndex, setCurrentVersionIndex] = React.useState<
+    number | null
+  >(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) {
+        if (err instanceof Error) {
+          setError(err.message || "Invalid API Key");
+        } else {
+          setError("Invalid API Key");
+        }
+        setIsValid(false);
+      }
+    };
+
+    validateKey();
+  }, [apiKey]); 
+
+  const editor: Editor | null = 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<HTMLDivElement>(null);
+
+  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>;
+  }
+
+  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/components/tetrons/ResizableImageComponent.tsx

@@ -0,0 +1,77 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper, NodeViewRendererProps } from "@tiptap/react";
+
+interface ResizableImageProps extends NodeViewRendererProps {
+  updateAttributes: (attrs: {
+    width?: number | null;
+    height?: number | null;
+  }) => void;
+  selected?: boolean;
+}
+
+const ResizableImageComponent: React.FC<ResizableImageProps> = ({
+  node,
+  updateAttributes,
+  selected,
+}) => {
+  const { src, alt, title, width, height } = node.attrs as {
+    src: string;
+    alt?: string;
+    title?: string;
+    width?: number | null;
+    height?: number | null;
+  };
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement>(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 ?? ""}
+        title={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/components/tetrons/ResizableVideoComponent.tsx

@@ -0,0 +1,56 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/core";
+
+const ResizableVideoComponent: React.FC<NodeViewProps> = ({
+  node,
+  updateAttributes,
+  selected,
+}) => {
+  const { src, controls, width, height } = node.attrs;
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(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/index.d.mts

@@ -5,4 +5,8 @@ type EditorContentProps = {
 };
 declare function EditorContent({ apiKey }: EditorContentProps): React.JSX.Element;
 
-export { EditorContent, EditorContent as default };
+declare function initializeTetrons(apiKey: string): Promise<void>;
+declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
+declare function isApiKeyValid(): boolean;
+
+export { EditorContent, EditorContent as default, getTetronsVersion, initializeTetrons, isApiKeyValid };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import EditorContent from "./components/tetrons/EditorContent";
-import "./styles/tetrons.css";
 export declare function initializeTetrons(apiKey: string): Promise<void>;
 export declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
 export declare function isApiKeyValid(): boolean;

package/dist/index.js

@@ -1,5 +1,5 @@
 import EditorContent from "./components/tetrons/EditorContent";
-import "./styles/tetrons.css";
+// import "./styles/tetrons.css";
 let API_VALID = false;
 let API_VERSION = "";
 export async function initializeTetrons(apiKey) {

package/dist/index.mjs

@@ -14345,7 +14345,7 @@ var FontSize = Mark2.create({
 });
 
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
-import React9, { useEffect as useEffect3 } from "react";
+import React9, { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/components/tetrons/toolbar/ActionGroup.tsx
 import React2, { useEffect, useRef, useState } from "react";
@@ -15233,8 +15233,11 @@ function FileGroup({ editor }) {
 }
 
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
-function TetronsToolbar({ editor }) {
-  const [autoSave, setAutoSave] = React9.useState(false);
+function TetronsToolbar({
+  editor,
+  version
+}) {
+  const [autoSave, setAutoSave] = useState4(false);
   useEffect3(() => {
     if (!editor) return;
     const handleUpdate = () => {
@@ -15251,7 +15254,7 @@ function TetronsToolbar({ editor }) {
       editor.off("update", handleUpdate);
     };
   }, [autoSave, editor]);
-  return /* @__PURE__ */ React9.createElement("div", { className: "tetrons-toolbar" }, /* @__PURE__ */ React9.createElement("div", { className: "group" }, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { className: "tetrons-toolbar" }, version !== "free" && /* @__PURE__ */ React9.createElement("div", { className: "group" }, /* @__PURE__ */ React9.createElement(
     "input",
     {
       type: "checkbox",
@@ -15259,7 +15262,7 @@ function TetronsToolbar({ editor }) {
       checked: autoSave,
       onChange: (e) => setAutoSave(e.target.checked)
     }
-  ), /* @__PURE__ */ React9.createElement("label", { htmlFor: "autoSave" }, "Auto Save")), /* @__PURE__ */ React9.createElement(FileGroup, { editor }), /* @__PURE__ */ React9.createElement(ClipboardGroup, { editor }), /* @__PURE__ */ React9.createElement(FontStyleGroup, { editor }), /* @__PURE__ */ React9.createElement(ListAlignGroup, { editor }), /* @__PURE__ */ React9.createElement(InsertGroup, { editor }), /* @__PURE__ */ React9.createElement(MiscGroup, { editor }), /* @__PURE__ */ React9.createElement(ActionGroup, { editor }));
+  ), /* @__PURE__ */ React9.createElement("label", { htmlFor: "autoSave" }, "Auto Save")), ["pro", "premium", "platinum"].includes(version) && /* @__PURE__ */ React9.createElement(FileGroup, { editor }), /* @__PURE__ */ React9.createElement(ClipboardGroup, { editor }), /* @__PURE__ */ React9.createElement(FontStyleGroup, { editor }), /* @__PURE__ */ React9.createElement(ListAlignGroup, { editor }), ["premium", "platinum"].includes(version) && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(InsertGroup, { editor }), /* @__PURE__ */ React9.createElement(ActionGroup, { editor })), version === "platinum" && /* @__PURE__ */ React9.createElement(MiscGroup, { editor }));
 }
 
 // src/components/tetrons/ResizableImage.ts
@@ -15460,9 +15463,9 @@ var ResizableVideo = Node2.create({
 });
 
 // src/components/tetrons/toolbar/TableContextMenu.tsx
-import React12, { useEffect as useEffect6, useState as useState4 } from "react";
+import React12, { useEffect as useEffect6, useState as useState5 } from "react";
 function TableContextMenu({ editor }) {
-  const [menuPosition, setMenuPosition] = useState4(null);
+  const [menuPosition, setMenuPosition] = useState5(null);
   useEffect6(() => {
     const handleContextMenu = (event) => {
       const target = event.target;
@@ -17072,11 +17075,22 @@ function EditorContent({ apiKey }) {
   const [isValid, setIsValid] = React13.useState(null);
   const [error, setError] = React13.useState(null);
   const [versions, setVersions] = React13.useState([]);
+  const [userVersion, setUserVersion] = React13.useState(null);
   const [currentVersionIndex, setCurrentVersionIndex] = React13.useState(null);
+  function getApiBaseUrl() {
+    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();
   useEffect7(() => {
     const validateKey = async () => {
       try {
-        const res = await fetch("/api/validate", {
+        const res = await fetch(`${API_BASE_URL}/api/validate`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json"
@@ -17086,6 +17100,7 @@ function EditorContent({ 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");
@@ -17186,7 +17201,7 @@ function EditorContent({ apiKey }) {
   if (isValid === null) {
     return /* @__PURE__ */ React13.createElement("div", { className: "editor-loading" }, "\u{1F50D} Validating license...");
   }
-  return /* @__PURE__ */ React13.createElement("div", { className: "editor-container" }, /* @__PURE__ */ React13.createElement("div", { className: "editor-toolbar" }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React13.createElement("div", { className: "editor-container" }, userVersion !== "free" && /* @__PURE__ */ React13.createElement("div", { className: "editor-toolbar" }, /* @__PURE__ */ React13.createElement(
     "button",
     {
       type: "button",
@@ -17205,7 +17220,7 @@ function EditorContent({ apiKey }) {
       title: `Restore Version ${idx + 1}`
     },
     `V${idx + 1}`
-  )))), editor && /* @__PURE__ */ React13.createElement(TetronsToolbar, { editor }), /* @__PURE__ */ React13.createElement(
+  )))), editor && userVersion && /* @__PURE__ */ React13.createElement(TetronsToolbar, { editor, version: userVersion }), /* @__PURE__ */ React13.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -17217,8 +17232,35 @@ function EditorContent({ apiKey }) {
 }
 
 // src/index.ts
+var API_VALID = false;
+var API_VERSION = "";
+async function initializeTetrons(apiKey) {
+  const res = await fetch("https://staging.tetrons.com/api/validate", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ apiKey })
+  });
+  if (!res.ok) {
+    const error = await res.json();
+    throw new Error(`API Key validation failed: ${error.error}`);
+  }
+  const data = await res.json();
+  API_VALID = data.valid;
+  API_VERSION = data.version;
+}
+function getTetronsVersion() {
+  return API_VERSION;
+}
+function isApiKeyValid() {
+  return API_VALID;
+}
 var index_default = EditorContent;
 export {
   EditorContent,
-  index_default as default
+  index_default as default,
+  getTetronsVersion,
+  initializeTetrons,
+  isApiKeyValid
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tetrons",
-  "version": "2.3.1",
+  "version": "2.3.22",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,14 +39,14 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.1.11",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
     "copyfiles": "^2.4.1",
     "eslint": "^9",
     "eslint-config-next": "^15.3.2",
-    "tailwindcss": "^4",
     "tsup": "^8.5.0",
     "typescript": "^5"
   },
@@ -63,13 +63,13 @@
   "author": "Your Name",
   "license": "MIT",
   "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./style.css": "./dist/styles/tetrons.css"
+  ".": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.js",
+    "types": "./dist/index.d.ts"
   },
+  "./style.css": "./dist/styles/tetrons.css"
+},
   "files": [
     "dist",
     "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/export/route.js

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

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

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

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