tetrons 2.3.24 → 2.3.27

package/dist/components/components/tetrons/ResizableImageComponent.tsx

@@ -1,15 +1,7 @@
-import React, { useRef, useEffect } from "react";
-import { NodeViewWrapper, NodeViewRendererProps } from "@tiptap/react";
+import React, { useRef, useEffect, useState } from "react";
+import { NodeViewWrapper, ReactNodeViewProps } from "@tiptap/react";
 
-interface ResizableImageProps extends NodeViewRendererProps {
-  updateAttributes: (attrs: {
-    width?: number | null;
-    height?: number | null;
-  }) => void;
-  selected?: boolean;
-}
-
-const ResizableImageComponent: React.FC<ResizableImageProps> = ({
+const ResizableImageComponent: React.FC<ReactNodeViewProps> = ({
   node,
   updateAttributes,
   selected,
@@ -21,22 +13,44 @@ const ResizableImageComponent: React.FC<ResizableImageProps> = ({
     width?: number | null;
     height?: number | null;
   };
+
+  const defaultWidth = width ?? 300;
+  const defaultHeight = height ?? 200;
+  const aspectRatio = defaultHeight > 0 ? defaultWidth / defaultHeight : 4 / 3;
+
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const imgRef = useRef<HTMLImageElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
 
   useEffect(() => {
-    const img = imgRef.current;
-    if (!img) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      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);
+    };
 
-    const observer = new ResizeObserver(() => {
-      const w = Math.round(img.offsetWidth);
-      const h = Math.round(img.offsetHeight);
-      updateAttributes({ width: w, height: h });
-    });
+    if (isResizing) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
 
-    observer.observe(img);
-    return () => observer.disconnect();
-  }, [updateAttributes]);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, updateAttributes, aspectRatio]);
 
   return (
     <NodeViewWrapper
@@ -46,30 +60,51 @@ const ResizableImageComponent: React.FC<ResizableImageProps> = ({
         selected ? "ProseMirror-selectednode" : ""
       }`}
       style={{
-        resize: "both",
-        overflow: "auto",
+        position: "relative",
         border: "1px solid #ccc",
-        padding: 2,
         display: "inline-block",
+        width: `${defaultWidth}px`,
+        height: `${defaultHeight}px`,
+        minWidth: "50px",
+        minHeight: "50px",
         maxWidth: "100%",
+        userSelect: "none",
+        padding: 2,
       }}
     >
-      {/* 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",
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
           display: "block",
           userSelect: "none",
           pointerEvents: "auto",
         }}
         draggable={false}
       />
+
+      <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,
+        }}
+      />
     </NodeViewWrapper>
   );
 };

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

@@ -8,12 +8,8 @@ export const ResizableImage = Image.extend({
   addAttributes() {
     return {
       ...this.parent?.(),
-      width: {
-        default: null,
-      },
-      height: {
-        default: null,
-      },
+      width: { default: null },
+      height: { default: null },
     };
   },
 

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>;
+export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.jsx

@@ -0,0 +1,73 @@
+import React, { useRef, useEffect, useState } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
+    const { src, alt, title, width, height } = node.attrs;
+    const defaultWidth = width !== null && width !== void 0 ? width : 300;
+    const defaultHeight = height !== null && height !== void 0 ? height : 200;
+    const aspectRatio = defaultHeight > 0 ? defaultWidth / defaultHeight : 4 / 3;
+    const wrapperRef = useRef(null);
+    const [isResizing, setIsResizing] = useState(false);
+    useEffect(() => {
+        const handleMouseMove = (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", handleMouseMove);
+            window.addEventListener("mouseup", handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isResizing, updateAttributes, aspectRatio]);
+    return (<NodeViewWrapper ref={wrapperRef} contentEditable={false} className={`resizable-image-wrapper ${selected ? "ProseMirror-selectednode" : ""}`} style={{
+            position: "relative",
+            border: "1px solid #ccc",
+            display: "inline-block",
+            width: `${defaultWidth}px`,
+            height: `${defaultHeight}px`,
+            minWidth: "50px",
+            minHeight: "50px",
+            maxWidth: "100%",
+            userSelect: "none",
+            padding: 2,
+        }}>
+      <img src={src} alt={alt !== null && alt !== void 0 ? alt : ""} title={title !== null && title !== void 0 ? title : ""} loading="lazy" style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            display: "block",
+            userSelect: "none",
+            pointerEvents: "auto",
+        }} draggable={false}/>
+
+      <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,
+        }}/>
+    </NodeViewWrapper>);
+};
+export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.tsx

@@ -1,15 +1,7 @@
-import React, { useRef, useEffect } from "react";
-import { NodeViewWrapper, NodeViewRendererProps } from "@tiptap/react";
+import React, { useRef, useEffect, useState } from "react";
+import { NodeViewWrapper, ReactNodeViewProps } from "@tiptap/react";
 
-interface ResizableImageProps extends NodeViewRendererProps {
-  updateAttributes: (attrs: {
-    width?: number | null;
-    height?: number | null;
-  }) => void;
-  selected?: boolean;
-}
-
-const ResizableImageComponent: React.FC<ResizableImageProps> = ({
+const ResizableImageComponent: React.FC<ReactNodeViewProps> = ({
   node,
   updateAttributes,
   selected,
@@ -21,22 +13,44 @@ const ResizableImageComponent: React.FC<ResizableImageProps> = ({
     width?: number | null;
     height?: number | null;
   };
+
+  const defaultWidth = width ?? 300;
+  const defaultHeight = height ?? 200;
+  const aspectRatio = defaultHeight > 0 ? defaultWidth / defaultHeight : 4 / 3;
+
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const imgRef = useRef<HTMLImageElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
 
   useEffect(() => {
-    const img = imgRef.current;
-    if (!img) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      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);
+    };
 
-    const observer = new ResizeObserver(() => {
-      const w = Math.round(img.offsetWidth);
-      const h = Math.round(img.offsetHeight);
-      updateAttributes({ width: w, height: h });
-    });
+    if (isResizing) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
 
-    observer.observe(img);
-    return () => observer.disconnect();
-  }, [updateAttributes]);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, updateAttributes, aspectRatio]);
 
   return (
     <NodeViewWrapper
@@ -46,30 +60,51 @@ const ResizableImageComponent: React.FC<ResizableImageProps> = ({
         selected ? "ProseMirror-selectednode" : ""
       }`}
       style={{
-        resize: "both",
-        overflow: "auto",
+        position: "relative",
         border: "1px solid #ccc",
-        padding: 2,
         display: "inline-block",
+        width: `${defaultWidth}px`,
+        height: `${defaultHeight}px`,
+        minWidth: "50px",
+        minHeight: "50px",
         maxWidth: "100%",
+        userSelect: "none",
+        padding: 2,
       }}
     >
-      {/* 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",
+          width: "100%",
+          height: "100%",
+          objectFit: "contain",
           display: "block",
           userSelect: "none",
           pointerEvents: "auto",
         }}
         draggable={false}
       />
+
+      <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,
+        }}
+      />
     </NodeViewWrapper>
   );
 };

package/dist/components/tetrons/toolbar/AIGroup.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import React, { useState, useRef } from "react";
+import { Editor } from "@tiptap/react";
+import { FaMicrophone, FaStop } from "react-icons/fa";
+import { Waveform } from "@uiball/loaders";
+import { motion, AnimatePresence } from "framer-motion";
+
+export default function AiGroup({ editor }: { editor: Editor }) {
+  const [isRecording, setIsRecording] = useState(false);
+  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const [transcriptionError, setTranscriptionError] = useState("");
+
+  const [showPromptInput, setShowPromptInput] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [isLoadingAI, setIsLoadingAI] = useState(false);
+  const [aiError, setAiError] = useState("");
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+
+  const startRecording = async () => {
+    setTranscriptionError("");
+    setAudioBlob(null);
+
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const mediaRecorder = new MediaRecorder(stream);
+    mediaRecorderRef.current = mediaRecorder;
+    chunksRef.current = [];
+
+    mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) chunksRef.current.push(e.data);
+    };
+
+    mediaRecorder.onstop = () => {
+      const blob = new Blob(chunksRef.current, { type: "audio/webm" });
+      setAudioBlob(blob);
+      transcribeAudio(blob);
+    };
+
+    mediaRecorder.start();
+    setIsRecording(true);
+  };
+
+  const stopRecording = () => {
+    mediaRecorderRef.current?.stop();
+    setIsRecording(false);
+  };
+
+  const transcribeAudio = async (blob: Blob) => {
+    setIsTranscribing(true);
+    setTranscriptionError("");
+
+    const formData = new FormData();
+    formData.append("file", blob, "voice.webm");
+
+    try {
+      const res = await fetch("/api/transcribe", {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await res.json();
+      if (!res.ok || !data.transcript) {
+        throw new Error(data.error || "Failed to transcribe");
+      }
+
+      editor.commands.insertContent(data.transcript);
+    } catch (e) {
+      console.error(e);
+      setTranscriptionError("Transcription failed. Please try again.");
+    } finally {
+      setIsTranscribing(false);
+    }
+  };
+
+  const handleAiClick = () => {
+    setShowPromptInput(true);
+    setPrompt("");
+    setAiError("");
+  };
+
+  const handlePromptSubmit = async () => {
+    if (!prompt.trim()) return;
+    setIsLoadingAI(true);
+    setAiError("");
+
+    try {
+      const res = await fetch("/api/ai-action", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: prompt }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok || !data.response) {
+        throw new Error(data.error || "AI failed to generate content");
+      }
+
+      editor.commands.insertContent(data.response);
+      setShowPromptInput(false);
+    } catch (e) {
+      console.error(e);
+      setAiError("Failed to generate content. Try again.");
+    } finally {
+      setIsLoadingAI(false);
+    }
+  };
+
+  return (
+    <div className="group relative space-y-3">
+      <div className="flex gap-2 items-center">
+        {!isRecording ? (
+          <button
+            type="button"
+            onClick={startRecording}
+            className="icon-btn"
+            title="Start Voice Input"
+          >
+            <FaMicrophone size={18} />
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={stopRecording}
+            className="icon-btn stop-btn"
+            title="Stop Recording"
+          >
+            <FaStop size={18} />
+          </button>
+        )}
+
+        <button
+          type="button"
+          onClick={handleAiClick}
+          className="ai-button"
+          title="AI Assist"
+        >
+          AI
+        </button>
+      </div>
+
+      {isRecording && (
+        <div className="flex flex-col items-center">
+          <Waveform size={30} lineWeight={3.5} speed={1} color="#4F46E5" />
+          <p className="text-sm mt-1 text-gray-600">Recording...</p>
+        </div>
+      )}
+
+      {isTranscribing && (
+        <p className="text-sm text-gray-500">Transcribing...</p>
+      )}
+
+      {transcriptionError && (
+        <p className="text-sm text-red-600">{transcriptionError}</p>
+      )}
+
+      {audioBlob && (
+        <div className="mt-2">
+          <audio controls src={URL.createObjectURL(audioBlob)} />
+        </div>
+      )}
+
+      <AnimatePresence>
+        {showPromptInput && (
+          <motion.div
+            className="ai-modal-backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <motion.div
+              className="ai-modal-content"
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+            >
+              <h2 className="ai-modal-title">AI Prompt</h2>
+              <textarea
+                className="ai-modal-textarea"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="Enter your prompt here..."
+              />
+              {aiError && <p className="ai-modal-error">{aiError}</p>}
+              <div className="ai-modal-actions">
+                <button
+                  onClick={() => setShowPromptInput(false)}
+                  className="ai-cancel-btn"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handlePromptSubmit}
+                  disabled={isLoadingAI}
+                  className="ai-submit-btn"
+                >
+                  {isLoadingAI ? "Generating..." : "Submit"}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/dist/components/tetrons/toolbar/TetronsToolbar.tsx

@@ -10,6 +10,7 @@ import InsertGroup from "./InsertGroup";
 import ListAlignGroup from "./ListAlignGroup";
 import MiscGroup from "./MiscGroup";
 import FileGroup from "./FileGroup";
+import AiGroup from "./AIGroup";
 
 export default function TetronsToolbar({
   editor,
@@ -65,7 +66,12 @@ export default function TetronsToolbar({
           <ActionGroup editor={editor} />
         </>
       )}
-      {version === "platinum" && <MiscGroup editor={editor} />}
+      {version === "platinum" && (
+        <>
+          <MiscGroup editor={editor} />
+          <AiGroup editor={editor} />
+        </>
+      )}
     </div>
   );
 }

package/dist/index.d.ts

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