@particle-academy/fancy-code 0.4.1 → 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,7 +110,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: 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,
@@ -1295,6 +1298,7 @@ function useEditorEngine({
   language,
   theme,
   readOnly,
+  wordWrap,
   tabSize,
   onCursorChange
 }) {
@@ -1333,7 +1337,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]);
   react.useEffect(() => {
     const ta = textareaRef.current;
     if (!ta) return;
@@ -1521,6 +1531,7 @@ function CodeEditorRoot({
     language: currentLanguage,
     theme: resolvedTheme,
     readOnly,
+    wordWrap: isWordWrap,
     tabSize: tabSizeProp,
     onCursorChange: ({ line, col, selectionLength: sel }) => {
       setCursorPosition({ line, col });