tetrons 2.3.23 → 2.3.26

package/dist/app/page.d.ts

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

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

@@ -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/ResizableImage.d.ts

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

package/dist/components/tetrons/ResizableImage.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableImageComponent from "./ResizableImageComponent";
+export const ResizableImage = Image.extend({
+    name: "resizableImage",
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { width: { default: null }, height: { default: null } });
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { width, height } = HTMLAttributes, rest = __rest(HTMLAttributes, ["width", "height"]);
+        const style = [];
+        if (width)
+            style.push(`width: ${width}px`);
+        if (height)
+            style.push(`height: ${height}px`);
+        return [
+            "img",
+            Object.assign(Object.assign({}, rest), { style: style.join("; ") }),
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ResizableImageComponent);
+    },
+});

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ReactNodeViewProps } from "@tiptap/react";
+declare const ResizableImageComponent: React.FC<ReactNodeViewProps<HTMLElement>>;
+export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.jsx

@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
+    const { src, alt, title, width, height } = node.attrs;
+    const wrapperRef = useRef(null);
+    const imgRef = useRef(null);
+    useEffect(() => {
+        const img = imgRef.current;
+        if (!img)
+            return;
+        const observer = new ResizeObserver(() => {
+            const w = Math.round(img.offsetWidth);
+            const h = Math.round(img.offsetHeight);
+            updateAttributes({ width: w, height: h });
+        });
+        observer.observe(img);
+        return () => observer.disconnect();
+    }, [updateAttributes]);
+    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
+            resize: "both",
+            overflow: "auto",
+            border: "1px solid #ccc",
+            padding: 2,
+            display: "inline-block",
+            maxWidth: "100%",
+        }}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img ref={imgRef} src={src} alt={alt !== null && alt !== void 0 ? alt : ""} title={title !== null && title !== void 0 ? title : ""} loading="lazy" style={{
+            width: width ? `${width}px` : "auto",
+            height: height ? `${height}px` : "auto",
+            display: "block",
+            userSelect: "none",
+            pointerEvents: "auto",
+        }} draggable={false}/>
+    </NodeViewWrapper>);
+};
+export default ResizableImageComponent;

package/dist/components/tetrons/extensions/Spellcheck.ts

@@ -0,0 +1,50 @@
+import { Mark, markInputRule } from "@tiptap/core";
+
+export interface SpellcheckOptions {
+  spellcheckFn: (word: string) => boolean;
+}
+
+const wordMatchRegex = () => /(?:^|\s)([a-zA-Z]{2,})(?=\s|$)/g;
+
+export const Spellcheck = Mark.create<SpellcheckOptions>({
+  name: "spellcheck",
+
+  addOptions() {
+    return {
+      spellcheckFn: () => true,
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: wordMatchRegex(),
+        type: this.type,
+        getAttributes: (match) =>
+          this.options.spellcheckFn(match[1])
+            ? false
+            : { "data-spellcheck": "true" },
+      }),
+    ];
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-spellcheck]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      {
+        ...HTMLAttributes,
+        style: "text-decoration: red wavy underline;",
+        "data-spellcheck": "true",
+      },
+      0,
+    ];
+  },
+});