@particle-academy/fancy-code 0.4.0 → 0.4.1

package/dist/index.cjs

@@ -110,10 +110,11 @@ function CodeEditorPanel({ className }) {
             "textarea",
             {
               ref: textareaRef,
-              className: "relative m-0 block w-full resize-none overflow-hidden border-none bg-transparent p-2.5 text-[13px] leading-[1.5] text-transparent outline-none",
+              className: "relative m-0 block w-full resize-none border-none bg-transparent p-2.5 text-[13px] leading-[1.5] text-transparent outline-none",
               style: {
                 caretColor: themeColors.cursorColor,
                 minHeight: _minHeight ? _minHeight - 40 : 80,
+                overflow: "hidden",
                 whiteSpace: wordWrap ? "pre-wrap" : "pre",
                 overflowWrap: wordWrap ? "break-word" : "normal"
               },
@@ -1327,14 +1328,23 @@ function useEditorEngine({
     }
     return count;
   }, [value]);
+  const autoResize = react.useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = ta.scrollHeight + "px";
+  }, []);
   react.useEffect(() => {
     const ta = textareaRef.current;
-    if (!ta || ta.value === value) return;
-    const { selectionStart, selectionEnd } = ta;
-    ta.value = value;
-    ta.selectionStart = selectionStart;
-    ta.selectionEnd = selectionEnd;
-  }, [value]);
+    if (!ta) return;
+    if (ta.value !== value) {
+      const { selectionStart, selectionEnd } = ta;
+      ta.value = value;
+      ta.selectionStart = selectionStart;
+      ta.selectionEnd = selectionEnd;
+    }
+    autoResize();
+  }, [value, autoResize]);
   const updateCursorInfo = react.useCallback(() => {
     const ta = textareaRef.current;
     if (!ta) return;
@@ -1351,8 +1361,9 @@ function useEditorEngine({
     const ta = textareaRef.current;
     if (!ta) return;
     onChangeRef.current?.(ta.value);
+    autoResize();
     updateCursorInfo();
-  }, [updateCursorInfo]);
+  }, [autoResize, updateCursorInfo]);
   const handleSelect = react.useCallback(() => {
     updateCursorInfo();
   }, [updateCursorInfo]);
@@ -1412,6 +1423,7 @@ function useEditorEngine({
           ta.selectionStart = ta.selectionEnd = start + tabSize;
           onChangeRef.current?.(ta.value);
         }
+        autoResize();
         updateCursorInfo();
         return;
       }
@@ -1430,11 +1442,12 @@ function useEditorEngine({
         ta.value = before + insertion + after;
         ta.selectionStart = ta.selectionEnd = start + insertion.length;
         onChangeRef.current?.(ta.value);
+        autoResize();
         updateCursorInfo();
         return;
       }
     },
-    [readOnly, tabSize, updateCursorInfo]
+    [readOnly, tabSize, autoResize, updateCursorInfo]
   );
   return {
     textareaRef,