@particle-academy/fancy-code 0.4.1 → 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,7 +108,10 @@ function CodeEditorPanel({ className }) {
             "textarea",
             {
               ref: textareaRef,
-              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",
+              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,
@@ -1293,6 +1296,7 @@ function useEditorEngine({
   language,
   theme,
   readOnly,
+  wordWrap,
   tabSize,
   onCursorChange
 }) {
@@ -1331,7 +1335,13 @@ function useEditorEngine({
     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) return;
@@ -1519,6 +1529,7 @@ function CodeEditorRoot({
     language: currentLanguage,
     theme: resolvedTheme,
     readOnly,
+    wordWrap: isWordWrap,
     tabSize: tabSizeProp,
     onCursorChange: ({ line, col, selectionLength: sel }) => {
       setCursorPosition({ line, col });