@particle-academy/fancy-code 0.4.0 → 0.4.2

package/README.md

@@ -210,25 +210,19 @@ Add languages beyond the built-ins using `registerLanguage`:
 
 ```tsx
 import { registerLanguage } from "@particle-academy/fancy-code";
+import type { Tokenizer } from "@particle-academy/fancy-code";
 
-registerLanguage({
-  name: "Python",
-  aliases: ["py", "python"],
-  support: () => {
-    // Return a LanguageSupport instance
-    const { python } = require("@codemirror/lang-python");
-    return python();
-  },
-});
+const tokenizeRuby: Tokenizer = (source) => {
+  const tokens = [];
+  // Your regex-based tokenizer logic here
+  // See src/engine/tokenizers/javascript.ts for a full example
+  return tokens;
+};
 
-// Lazy-loaded
 registerLanguage({
-  name: "Rust",
-  aliases: ["rs", "rust"],
-  support: async () => {
-    const { rust } = await import("@codemirror/lang-rust");
-    return rust();
-  },
+  name: "Ruby",
+  aliases: ["rb", "ruby"],
+  tokenize: tokenizeRuby,
 });
 ```
 
@@ -323,7 +317,7 @@ src/
 │       ├── CodeEditorStatusBar.tsx     # Cursor/language/tab display
 │       └── index.ts
 ├── hooks/
-│   ├── use-codemirror.ts               # Core editor lifecycle
+│   ├── use-editor-engine.ts            # Core editor lifecycle
 │   └── use-dark-mode.ts               # Reactive prefers-color-scheme
 ├── languages/
 │   ├── registry.ts                     # Global language registry

package/dist/index.cjs

@@ -85,7 +85,7 @@ function CodeEditorPanel({ className }) {
             children: lineNumberElements
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactFancy.cn("relative flex-1", wordWrap && "min-w-0"), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "pre",
             {
@@ -110,10 +110,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: reactFancy.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"
               },
@@ -1294,6 +1298,7 @@ function useEditorEngine({
   language,
   theme,
   readOnly,
+  wordWrap,
   tabSize,
   onCursorChange
 }) {
@@ -1327,14 +1332,29 @@ 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";
+    if (!wordWrap) {
+      ta.style.width = "0";
+      ta.style.width = ta.scrollWidth + "px";
+    } else {
+      ta.style.width = "";
+    }
+  }, [wordWrap]);
   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 +1371,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 +1433,7 @@ function useEditorEngine({
           ta.selectionStart = ta.selectionEnd = start + tabSize;
           onChangeRef.current?.(ta.value);
         }
+        autoResize();
         updateCursorInfo();
         return;
       }
@@ -1430,11 +1452,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,
@@ -1508,6 +1531,7 @@ function CodeEditorRoot({
     language: currentLanguage,
     theme: resolvedTheme,
     readOnly,
+    wordWrap: isWordWrap,
     tabSize: tabSizeProp,
     onCursorChange: ({ line, col, selectionLength: sel }) => {
       setCursorPosition({ line, col });