@particle-academy/fancy-code 0.4.0 → 0.4.2

package/dist/index.js

@@ -83,7 +83,7 @@ function CodeEditorPanel({ className }) {
             children: lineNumberElements
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("relative flex-1", wordWrap && "min-w-0"), children: [
           /* @__PURE__ */ jsx(
             "pre",
             {
@@ -108,10 +108,14 @@ 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: cn(
+                "relative m-0 block resize-none border-none bg-transparent p-2.5 text-[13px] leading-[1.5] text-transparent outline-none",
+                wordWrap ? "w-full" : "min-w-full"
+              ),
               style: {
                 caretColor: themeColors.cursorColor,
                 minHeight: _minHeight ? _minHeight - 40 : 80,
+                overflow: "hidden",
                 whiteSpace: wordWrap ? "pre-wrap" : "pre",
                 overflowWrap: wordWrap ? "break-word" : "normal"
               },
@@ -1292,6 +1296,7 @@ function useEditorEngine({
   language,
   theme,
   readOnly,
+  wordWrap,
   tabSize,
   onCursorChange
 }) {
@@ -1325,14 +1330,29 @@ function useEditorEngine({
     }
     return count;
   }, [value]);
+  const autoResize = useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = ta.scrollHeight + "px";
+    if (!wordWrap) {
+      ta.style.width = "0";
+      ta.style.width = ta.scrollWidth + "px";
+    } else {
+      ta.style.width = "";
+    }
+  }, [wordWrap]);
   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 = useCallback(() => {
     const ta = textareaRef.current;
     if (!ta) return;
@@ -1349,8 +1369,9 @@ function useEditorEngine({
     const ta = textareaRef.current;
     if (!ta) return;
     onChangeRef.current?.(ta.value);
+    autoResize();
     updateCursorInfo();
-  }, [updateCursorInfo]);
+  }, [autoResize, updateCursorInfo]);
   const handleSelect = useCallback(() => {
     updateCursorInfo();
   }, [updateCursorInfo]);
@@ -1410,6 +1431,7 @@ function useEditorEngine({
           ta.selectionStart = ta.selectionEnd = start + tabSize;
           onChangeRef.current?.(ta.value);
         }
+        autoResize();
         updateCursorInfo();
         return;
       }
@@ -1428,11 +1450,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,
@@ -1506,6 +1529,7 @@ function CodeEditorRoot({
     language: currentLanguage,
     theme: resolvedTheme,
     readOnly,
+    wordWrap: isWordWrap,
     tabSize: tabSizeProp,
     onCursorChange: ({ line, col, selectionLength: sel }) => {
       setCursorPosition({ line, col });