tetrons 2.3.26 → 2.3.28

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/tetrons/EditorContent.tsx
-import React14, { useEffect as useEffect8, useRef as useRef7, useState as useState8 } from "react";
+import React14, { useEffect as useEffect8, useRef as useRef7, useState as useState9 } from "react";
 import {
   useEditor,
   EditorContent as TiptapEditorContent
@@ -15364,7 +15364,7 @@ import Image from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 
 // src/components/tetrons/ResizableImageComponent.tsx
-import React, { useRef, useEffect as useEffect2 } from "react";
+import React, { useRef, useEffect as useEffect2, useState as useState2 } from "react";
 import { NodeViewWrapper } from "@tiptap/react";
 var ResizableImageComponent = ({
   node,
@@ -15372,19 +15372,36 @@ var ResizableImageComponent = ({
   selected
 }) => {
   const { src, alt, title, width, height } = node.attrs;
+  const defaultWidth = width ?? 300;
+  const defaultHeight = height ?? 200;
+  const aspectRatio = defaultHeight > 0 ? defaultWidth / defaultHeight : 4 / 3;
   const wrapperRef = useRef(null);
-  const imgRef = useRef(null);
+  const [isResizing, setIsResizing] = useState2(false);
   useEffect2(() => {
-    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]);
+    const handleMouseMove2 = (e) => {
+      if (!isResizing || !wrapperRef.current) return;
+      const rect = wrapperRef.current.getBoundingClientRect();
+      const newWidth = e.clientX - rect.left;
+      const newHeight = newWidth / aspectRatio;
+      if (newWidth > 50 && newHeight > 50) {
+        updateAttributes({
+          width: Math.round(newWidth),
+          height: Math.round(newHeight)
+        });
+      }
+    };
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+    if (isResizing) {
+      window.addEventListener("mousemove", handleMouseMove2);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove2);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, updateAttributes, aspectRatio]);
   return /* @__PURE__ */ React.createElement(
     NodeViewWrapper,
     {
@@ -15392,31 +15409,55 @@ var ResizableImageComponent = ({
       contentEditable: false,
       className: `resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`,
       style: {
-        resize: "both",
-        overflow: "auto",
+        position: "relative",
         border: "1px solid #ccc",
-        padding: 2,
         display: "inline-block",
-        maxWidth: "100%"
+        width: `${defaultWidth}px`,
+        height: `${defaultHeight}px`,
+        minWidth: "50px",
+        minHeight: "50px",
+        maxWidth: "100%",
+        userSelect: "none",
+        padding: 2
       }
     },
     /* @__PURE__ */ React.createElement(
       "img",
       {
-        ref: imgRef,
         src,
         alt: alt ?? "",
         title: title ?? "",
         loading: "lazy",
         style: {
-          width: width ? `${width}px` : "auto",
-          height: height ? `${height}px` : "auto",
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
           display: "block",
           userSelect: "none",
           pointerEvents: "auto"
         },
         draggable: false
       }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        onMouseDown: (e) => {
+          e.preventDefault();
+          setIsResizing(true);
+        },
+        style: {
+          position: "absolute",
+          width: "12px",
+          height: "12px",
+          right: 2,
+          bottom: 2,
+          background: "#ccc",
+          borderRadius: "2px",
+          cursor: "nwse-resize",
+          zIndex: 10
+        }
+      }
     )
   );
 };
@@ -15428,12 +15469,8 @@ var ResizableImage = Image.extend({
   addAttributes() {
     return {
       ...this.parent?.(),
-      width: {
-        default: null
-      },
-      height: {
-        default: null
-      }
+      width: { default: null },
+      height: { default: null }
     };
   },
   renderHTML({ HTMLAttributes }) {
@@ -15558,9 +15595,9 @@ var ResizableVideo = Node13.create({
 });
 
 // src/components/tetrons/toolbar/TableContextMenu.tsx
-import React3, { useEffect as useEffect4, useState as useState2 } from "react";
+import React3, { useEffect as useEffect4, useState as useState3 } from "react";
 function TableContextMenu({ editor }) {
-  const [menuPosition, setMenuPosition] = useState2(null);
+  const [menuPosition, setMenuPosition] = useState3(null);
   useEffect4(() => {
     const handleContextMenu = (event) => {
       const target = event.target;
@@ -15644,10 +15681,10 @@ function TableContextMenu({ editor }) {
 }
 
 // src/components/tetrons/toolbar/TetronsToolbar.tsx
-import React13, { useEffect as useEffect7, useState as useState7 } from "react";
+import React13, { useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/tetrons/toolbar/ActionGroup.tsx
-import React5, { useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
+import React5, { useEffect as useEffect5, useRef as useRef3, useState as useState4 } from "react";
 import {
   MdZoomIn,
   MdZoomOut,
@@ -15680,7 +15717,7 @@ var ToolbarButton_default = ToolbarButton;
 
 // src/components/tetrons/toolbar/ActionGroup.tsx
 function ActionGroup({ editor }) {
-  const [dropdownOpen, setDropdownOpen] = useState3(false);
+  const [dropdownOpen, setDropdownOpen] = useState4(false);
   const dropdownRef = useRef3(null);
   useEffect5(() => {
     const handleClickOutside = (event) => {
@@ -15925,12 +15962,12 @@ import {
 } from "react-icons/md";
 import { ImTextColor } from "react-icons/im";
 import { BiSolidColorFill } from "react-icons/bi";
-import React7, { useEffect as useEffect6, useState as useState4 } from "react";
+import React7, { useEffect as useEffect6, useState as useState5 } from "react";
 function FontStyleGroup({ editor }) {
-  const [textColor, setTextColor] = useState4("#000000");
-  const [highlightColor, setHighlightColor] = useState4("#ffff00");
-  const [fontFamily, setFontFamily] = useState4("Arial");
-  const [fontSize, setFontSize] = useState4("16px");
+  const [textColor, setTextColor] = useState5("#000000");
+  const [highlightColor, setHighlightColor] = useState5("#ffff00");
+  const [fontFamily, setFontFamily] = useState5("Arial");
+  const [fontSize, setFontSize] = useState5("16px");
   useEffect6(() => {
     if (!editor) return;
     const updateStates = () => {
@@ -16105,7 +16142,7 @@ function FontStyleGroup({ editor }) {
 }
 
 // src/components/tetrons/toolbar/InsertGroup.tsx
-import React8, { useRef as useRef4, useState as useState5 } from "react";
+import React8, { useRef as useRef4, useState as useState6 } from "react";
 import {
   MdTableChart,
   MdInsertPhoto,
@@ -16118,12 +16155,12 @@ import {
 } from "react-icons/md";
 import Picker from "@emoji-mart/react";
 function InsertGroup({ editor }) {
-  const [showTableGrid, setShowTableGrid] = useState5(false);
-  const [selectedRows, setSelectedRows] = useState5(1);
-  const [selectedCols, setSelectedCols] = useState5(1);
+  const [showTableGrid, setShowTableGrid] = useState6(false);
+  const [selectedRows, setSelectedRows] = useState6(1);
+  const [selectedCols, setSelectedCols] = useState6(1);
   const imageInputRef = useRef4(null);
   const videoInputRef = useRef4(null);
-  const [showPicker, setShowPicker] = useState5(false);
+  const [showPicker, setShowPicker] = useState6(false);
   const addEmoji = (emoji) => {
     editor.chain().focus().insertContent(emoji.native).run();
     setShowPicker(false);
@@ -16584,19 +16621,19 @@ function FileGroup({ editor }) {
 }
 
 // src/components/tetrons/toolbar/AIGroup.tsx
-import React12, { useState as useState6, useRef as useRef6 } from "react";
+import React12, { useState as useState7, useRef as useRef6 } from "react";
 import { FaMicrophone, FaStop } from "react-icons/fa";
 import { Waveform } from "@uiball/loaders";
 import { motion, AnimatePresence } from "framer-motion";
 function AiGroup({ editor }) {
-  const [isRecording, setIsRecording] = useState6(false);
-  const [audioBlob, setAudioBlob] = useState6(null);
-  const [isTranscribing, setIsTranscribing] = useState6(false);
-  const [transcriptionError, setTranscriptionError] = useState6("");
-  const [showPromptInput, setShowPromptInput] = useState6(false);
-  const [prompt2, setPrompt] = useState6("");
-  const [isLoadingAI, setIsLoadingAI] = useState6(false);
-  const [aiError, setAiError] = useState6("");
+  const [isRecording, setIsRecording] = useState7(false);
+  const [audioBlob, setAudioBlob] = useState7(null);
+  const [isTranscribing, setIsTranscribing] = useState7(false);
+  const [transcriptionError, setTranscriptionError] = useState7("");
+  const [showPromptInput, setShowPromptInput] = useState7(false);
+  const [prompt2, setPrompt] = useState7("");
+  const [isLoadingAI, setIsLoadingAI] = useState7(false);
+  const [aiError, setAiError] = useState7("");
   const mediaRecorderRef = useRef6(null);
   const chunksRef = useRef6([]);
   const startRecording = async () => {
@@ -16750,7 +16787,7 @@ function TetronsToolbar({
   editor,
   version
 }) {
-  const [autoSave, setAutoSave] = useState7(false);
+  const [autoSave, setAutoSave] = useState8(false);
   useEffect7(() => {
     if (!editor) return;
     const handleUpdate = () => {
@@ -16784,11 +16821,11 @@ lowlight.register("js", javascript);
 lowlight.register("ts", typescript);
 function EditorContent({ apiKey }) {
   const typo = useTypo();
-  const [isValid, setIsValid] = useState8(null);
-  const [error, setError] = useState8(null);
-  const [versions, setVersions] = useState8([]);
-  const [userVersion, setUserVersion] = useState8(null);
-  const [currentVersionIndex, setCurrentVersionIndex] = useState8(
+  const [isValid, setIsValid] = useState9(null);
+  const [error, setError] = useState9(null);
+  const [versions, setVersions] = useState9([]);
+  const [userVersion, setUserVersion] = useState9(null);
+  const [currentVersionIndex, setCurrentVersionIndex] = useState9(
     null
   );
   const wrapperRef = useRef7(null);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "tetrons",
-  "version": "2.3.26",
+  "version": "2.3.28",
   "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 && copyfiles -u 1 src/components/**/*.tsx dist/components",
+    "build": "tsup && copyfiles -u 2 src/styles/*.css dist/styles && copyfiles -u 2 src/components/**/*.tsx dist/components",
     "start": "next start",
     "lint": "next lint"
   },

package/dist/app/page.d.ts

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

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

@@ -1,280 +0,0 @@
-"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/components/tetrons/ResizableImageComponent.tsx

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