@particle-academy/fancy-code 0.4.5 → 0.4.7

package/README.md

@@ -67,6 +67,19 @@ pnpm --filter @particle-academy/fancy-code clean    # Remove dist/
 - **Zero third-party dependencies** — custom engine, no Monaco / CodeMirror / Shiki
 - **IDE-ready** — pairs with `TreeNav` from `@particle-academy/react-fancy` for full IDE layouts; see [docs/CodeEditor.md](./docs/CodeEditor.md) for an example.
 
+## Inertia.js integration
+
+CodeEditor mounts its own DOM observers and is **not SSR-safe**. In an Inertia app, wrap with [`<FancyClientOnly>`](https://github.com/Particle-Academy/fancy-inertia/blob/main/docs/USAGE.md#fancyclientonly) from `@particle-academy/fancy-inertia`:
+
+```tsx
+import { FancyClientOnly } from "@particle-academy/fancy-inertia";
+import { CodeEditor } from "@particle-academy/fancy-code";
+
+<FancyClientOnly fallback={<div className="h-96 animate-pulse rounded bg-zinc-100" />}>
+  <CodeEditor value={code} onChange={setCode} language="typescript" />
+</FancyClientOnly>
+```
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -1578,6 +1578,7 @@ function CodeEditorRoot({
       },
       cursorPosition,
       selectionLength,
+      textareaRef: engineReturn.textareaRef,
       placeholder,
       _engineReturn: engineReturn,
       _minHeight: minHeight,
@@ -1606,8 +1607,17 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
   Panel: CodeEditorPanel,
   StatusBar: CodeEditorStatusBar
 });
+function useCodeEditorInputTagAdapter() {
+  const ctx = useCodeEditor();
+  return react.useMemo(() => reactFancy.textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);
+}
+function CodeEditorInputTag(props) {
+  const adapter = useCodeEditorInputTagAdapter();
+  return /* @__PURE__ */ jsxRuntime.jsx(reactFancy.InputTag, { adapter, ...props });
+}
 
 exports.CodeEditor = CodeEditor;
+exports.CodeEditorInputTag = CodeEditorInputTag;
 exports.getLanguage = getLanguage;
 exports.getRegisteredLanguages = getRegisteredLanguages;
 exports.getRegisteredThemes = getRegisteredThemes;
@@ -1615,5 +1625,6 @@ exports.getTheme = getTheme;
 exports.registerLanguage = registerLanguage;
 exports.registerTheme = registerTheme;
 exports.useCodeEditor = useCodeEditor;
+exports.useCodeEditorInputTagAdapter = useCodeEditorInputTagAdapter;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map