tetrons 2.3.26 → 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.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

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

package/dist/components/tetrons/ResizableImageComponent.jsx

@@ -1,37 +1,73 @@
-import React, { useRef, useEffect } from "react";
+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 imgRef = useRef(null);
+    const [isResizing, setIsResizing] = useState(false);
     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]);
+        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={{
-            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 !== 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",
+      <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/index.js

@@ -15409,19 +15409,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 = (0, import_react2.useRef)(null);
-  const imgRef = (0, import_react2.useRef)(null);
+  const [isResizing, setIsResizing] = (0, import_react2.useState)(false);
   (0, import_react2.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]);
+    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__ */ import_react2.default.createElement(
     import_react3.NodeViewWrapper,
     {
@@ -15429,31 +15446,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__ */ import_react2.default.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__ */ import_react2.default.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
+        }
+      }
     )
   );
 };
@@ -15465,12 +15506,8 @@ var ResizableImage = import_extension_image.default.extend({
   addAttributes() {
     return {
       ...this.parent?.(),
-      width: {
-        default: null
-      },
-      height: {
-        default: null
-      }
+      width: { default: null },
+      height: { default: null }
     };
   },
   renderHTML({ HTMLAttributes }) {

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,6 +1,6 @@
 {
   "name": "tetrons",
-  "version": "2.3.26",
+  "version": "2.3.27",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/tetrons/ResizableImage.js

@@ -1,36 +0,0 @@
-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);
-    },
-});