@particle-academy/fancy-code 0.10.0 → 0.12.0

package/dist/index.d.cts

@@ -73,6 +73,12 @@ interface CodeEditorProps {
     cursorLine?: number;
     /** 1-based column for {@link cursorLine} (default 1). */
     cursorColumn?: number;
+    /**
+     * 1-based lines to mark with a full-width band — "here is the line you were
+     * sent to". Purely visual and independent of the caret; lines outside the
+     * document are ignored. Sized for unwrapped lines, as the gutter is.
+     */
+    highlightLines?: readonly number[];
     /**
      * Baseline document for the diff gutter. When set, the line-number column
      * shows per-line change marks of the CURRENT value against this baseline —
@@ -158,6 +164,8 @@ interface CodeEditorContextValue {
     _minHeight?: number;
     /** @internal */
     _maxHeight?: number;
+    /** @internal — lines to band; see {@link CodeEditorProps.highlightLines}. */
+    _highlightLines?: readonly number[];
 }
 interface CodeEditorToolbarProps {
     children?: ReactNode;
@@ -191,7 +199,7 @@ declare namespace CodeEditorStatusBar {
     var displayName: string;
 }
 
-declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, cursorLine, cursorColumn, diffBase, }: CodeEditorProps): react.JSX.Element;
+declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, cursorLine, cursorColumn, diffBase, highlightLines, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -228,21 +236,30 @@ interface MarkdownEditorProps {
     wordWrap?: boolean;
     /** Placeholder shown when empty. */
     placeholder?: string;
-    /** Editor height bounds (px). */
+    /**
+     * Height bounds (px). `maxHeight` constrains the PREVIEW pane as well as the
+     * editor — it previously reached only the editor, so a long document rendered
+     * at full height instead of scrolling.
+     */
     minHeight?: number;
     maxHeight?: number;
     className?: string;
     /**
-     * Swap the markdown → HTML renderer used by the preview pane (e.g. a full
-     * CommonMark library). Defaults to the built-in lightweight renderer.
+     * Swap the markdown → HTML renderer used by the preview pane.
+     *
+     * Rarely needed now: the preview renders through react-fancy's
+     * `<ContentRenderer format="markdown">`, which is a full CommonMark + GFM
+     * parse. Supply this only to impose your own pipeline — the returned HTML is
+     * injected as-is, so it must already be sanitised.
      */
     renderPreview?: (markdown: string) => string;
 }
 /**
  * A markdown-aware editor: a syntax-highlighted `CodeEditor` (the registered
  * `markdown` language) with an optional live preview pane. Controlled via
- * `value` + `onValueChange`. The preview renders with a small built-in
- * dependency-free renderer; pass `renderPreview` to use your own.
+ * `value` + `onValueChange`. The preview renders through react-fancy's
+ * `<ContentRenderer format="markdown">` — a full CommonMark + GFM parse,
+ * sanitised by default. Pass `renderPreview` to impose your own pipeline.
  *
  * ```tsx
  * <MarkdownEditor value={md} onValueChange={setMd} mode="split" minHeight={240} />
@@ -319,6 +336,19 @@ interface FileViewerProps {
     lineNumbers?: boolean;
     /** Wrap long lines in the text editor (default `false`). */
     wordWrap?: boolean;
+    /**
+     * 1-based line to land on: scrolled to the middle of the view, caret placed,
+     * and highlighted. Applied on mount and again whenever it changes, so
+     * re-targeting an open file scrolls again. Text files only; does not steal focus.
+     */
+    line?: number;
+    /** 1-based column for {@link line} (default 1). */
+    column?: number;
+    /**
+     * Lines to highlight. Defaults to `[line]` when `line` is set; pass your own
+     * (a range, several hits) to override, or `[]` to land without highlighting.
+     */
+    highlightLines?: readonly number[];
     /** Editor height bounds (px). */
     minHeight?: number;
     maxHeight?: number;
@@ -344,7 +374,7 @@ interface FileViewerProps {
  * <FileViewer filename="logo.png" src={url} style={{ height: 360 }} />
  * ```
  */
-declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
+declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, line, column, highlightLines, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
 declare namespace FileViewer {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -73,6 +73,12 @@ interface CodeEditorProps {
     cursorLine?: number;
     /** 1-based column for {@link cursorLine} (default 1). */
     cursorColumn?: number;
+    /**
+     * 1-based lines to mark with a full-width band — "here is the line you were
+     * sent to". Purely visual and independent of the caret; lines outside the
+     * document are ignored. Sized for unwrapped lines, as the gutter is.
+     */
+    highlightLines?: readonly number[];
     /**
      * Baseline document for the diff gutter. When set, the line-number column
      * shows per-line change marks of the CURRENT value against this baseline —
@@ -158,6 +164,8 @@ interface CodeEditorContextValue {
     _minHeight?: number;
     /** @internal */
     _maxHeight?: number;
+    /** @internal — lines to band; see {@link CodeEditorProps.highlightLines}. */
+    _highlightLines?: readonly number[];
 }
 interface CodeEditorToolbarProps {
     children?: ReactNode;
@@ -191,7 +199,7 @@ declare namespace CodeEditorStatusBar {
     var displayName: string;
 }
 
-declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, cursorLine, cursorColumn, diffBase, }: CodeEditorProps): react.JSX.Element;
+declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, cursorLine, cursorColumn, diffBase, highlightLines, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -228,21 +236,30 @@ interface MarkdownEditorProps {
     wordWrap?: boolean;
     /** Placeholder shown when empty. */
     placeholder?: string;
-    /** Editor height bounds (px). */
+    /**
+     * Height bounds (px). `maxHeight` constrains the PREVIEW pane as well as the
+     * editor — it previously reached only the editor, so a long document rendered
+     * at full height instead of scrolling.
+     */
     minHeight?: number;
     maxHeight?: number;
     className?: string;
     /**
-     * Swap the markdown → HTML renderer used by the preview pane (e.g. a full
-     * CommonMark library). Defaults to the built-in lightweight renderer.
+     * Swap the markdown → HTML renderer used by the preview pane.
+     *
+     * Rarely needed now: the preview renders through react-fancy's
+     * `<ContentRenderer format="markdown">`, which is a full CommonMark + GFM
+     * parse. Supply this only to impose your own pipeline — the returned HTML is
+     * injected as-is, so it must already be sanitised.
      */
     renderPreview?: (markdown: string) => string;
 }
 /**
  * A markdown-aware editor: a syntax-highlighted `CodeEditor` (the registered
  * `markdown` language) with an optional live preview pane. Controlled via
- * `value` + `onValueChange`. The preview renders with a small built-in
- * dependency-free renderer; pass `renderPreview` to use your own.
+ * `value` + `onValueChange`. The preview renders through react-fancy's
+ * `<ContentRenderer format="markdown">` — a full CommonMark + GFM parse,
+ * sanitised by default. Pass `renderPreview` to impose your own pipeline.
  *
  * ```tsx
  * <MarkdownEditor value={md} onValueChange={setMd} mode="split" minHeight={240} />
@@ -319,6 +336,19 @@ interface FileViewerProps {
     lineNumbers?: boolean;
     /** Wrap long lines in the text editor (default `false`). */
     wordWrap?: boolean;
+    /**
+     * 1-based line to land on: scrolled to the middle of the view, caret placed,
+     * and highlighted. Applied on mount and again whenever it changes, so
+     * re-targeting an open file scrolls again. Text files only; does not steal focus.
+     */
+    line?: number;
+    /** 1-based column for {@link line} (default 1). */
+    column?: number;
+    /**
+     * Lines to highlight. Defaults to `[line]` when `line` is set; pass your own
+     * (a range, several hits) to override, or `[]` to land without highlighting.
+     */
+    highlightLines?: readonly number[];
     /** Editor height bounds (px). */
     minHeight?: number;
     maxHeight?: number;
@@ -344,7 +374,7 @@ interface FileViewerProps {
  * <FileViewer filename="logo.png" src={url} style={{ height: 360 }} />
  * ```
  */
-declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
+declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, line, column, highlightLines, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
 declare namespace FileViewer {
     var displayName: string;
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useMemo, useState, useCallback, useRef, useEffect, useSyncExternalStore, useContext } from 'react';
-import { cn, useControllableState, resolveMediaType, MediaViewer, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
+import { cn, useControllableState, ContentRenderer, resolveMediaType, MediaViewer, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
 import { annotateLines, highlightCode, tok, tokenizeHtml, LIGHT_COLORS, DARK_COLORS, languageFromFilename } from '@particle-academy/fancy-file-commons';
 export { languageFromFilename } from '@particle-academy/fancy-file-commons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -40,12 +40,14 @@ function CodeEditorPanel({ className }) {
     placeholder,
     _diffAnnotations: diffAnnotations,
     _maxHeight,
-    _minHeight
+    _minHeight,
+    _highlightLines: highlightLines
   } = useCodeEditor();
   const lineNumberElements = useMemo(() => {
     if (!engine || !lineNumbers) return null;
     const { themeColors: themeColors2, lineCount: lineCount2, activeLine: activeLine2 } = engine;
     const removed = diffRemovedColor(themeColors2);
+    const highlighted = new Set(highlightLines ?? []);
     const lines = [];
     for (let i = 1; i <= lineCount2; i++) {
       const mark = gutterDiffMark(diffAnnotations, i);
@@ -57,8 +59,9 @@ function CodeEditorPanel({ className }) {
             "data-diff-deleted-above": mark?.deletedAbove ? "" : void 0,
             style: {
               position: "relative",
-              color: i === activeLine2 ? themeColors2.foreground : themeColors2.gutterForeground,
-              backgroundColor: i === activeLine2 ? themeColors2.activeLineBackground : void 0
+              color: i === activeLine2 || highlighted.has(i) ? themeColors2.foreground : themeColors2.gutterForeground,
+              backgroundColor: i === activeLine2 ? themeColors2.activeLineBackground : void 0,
+              fontWeight: highlighted.has(i) ? 600 : void 0
             },
             className: "pr-3 text-right text-[13px] leading-[1.5] select-none",
             children: [
@@ -118,7 +121,7 @@ function CodeEditorPanel({ className }) {
       );
     }
     return lines;
-  }, [engine, lineNumbers, diffAnnotations]);
+  }, [engine, lineNumbers, diffAnnotations, highlightLines]);
   if (!engine) return null;
   const {
     textareaRef,
@@ -161,6 +164,21 @@ function CodeEditorPanel({ className }) {
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: cn("relative flex-1", wordWrap && "min-w-0"), children: [
+          (highlightLines ?? []).filter((n) => Number.isInteger(n) && n >= 1 && n <= lineCount).map((n) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-fancy-code-highlight-line": n,
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-x-0 text-[13px] leading-[1.5]",
+              style: {
+                top: `calc(0.625rem + ${(n - 1) * 1.5}em)`,
+                height: "1.5em",
+                backgroundColor: themeColors.selectionBackground,
+                opacity: 0.55
+              }
+            },
+            `highlight-${n}`
+          )),
           /* @__PURE__ */ jsx(
             "pre",
             {
@@ -1516,7 +1534,8 @@ function CodeEditorRoot({
   maxHeight,
   cursorLine,
   cursorColumn,
-  diffBase
+  diffBase,
+  highlightLines
 }) {
   const [currentValue, setCurrentValue] = useControllableState(valueProp, defaultValue, onChange);
   const diffAnnotations = useMemo(
@@ -1609,9 +1628,10 @@ function CodeEditorRoot({
       _diffAnnotations: diffAnnotations,
       _engineReturn: engineReturn,
       _minHeight: minHeight,
-      _maxHeight: maxHeight
+      _maxHeight: maxHeight,
+      _highlightLines: highlightLines
     }),
-    [engineReturn, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, placeholder, diffAnnotations, minHeight, maxHeight]
+    [engineReturn, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, placeholder, diffAnnotations, minHeight, maxHeight, highlightLines]
   );
   return /* @__PURE__ */ jsx(CodeEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
@@ -1634,105 +1654,6 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
   Panel: CodeEditorPanel,
   StatusBar: CodeEditorStatusBar
 });
-
-// src/engine/markdown-render.ts
-function escapeHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function escapeAttr(s) {
-  return s.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-function inline(text) {
-  return text.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, src, title) => `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"${title ? ` title="${escapeAttr(title)}"` : ""}>`).replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, t, href, title) => `<a href="${escapeAttr(href)}"${title ? ` title="${escapeAttr(title)}"` : ""} rel="noopener">${t}</a>`).replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`).replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "<strong>$2</strong>").replace(/(\*|_)(?=\S)([\s\S]*?\S)\1/g, "<em>$2</em>");
-}
-function renderMarkdown(markdown) {
-  const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
-  const out = [];
-  let i = 0;
-  let para = [];
-  let listType = null;
-  const flushPara = () => {
-    if (para.length) {
-      out.push(`<p>${inline(para.join(" "))}</p>`);
-      para = [];
-    }
-  };
-  const closeList = () => {
-    if (listType) {
-      out.push(`</${listType}>`);
-      listType = null;
-    }
-  };
-  while (i < lines.length) {
-    const line = lines[i];
-    const fence = line.match(/^\s*(```|~~~)(.*)$/);
-    if (fence) {
-      flushPara();
-      closeList();
-      const lang = fence[2].trim();
-      const body = [];
-      i++;
-      while (i < lines.length && !/^\s*(```|~~~)/.test(lines[i])) {
-        body.push(lines[i]);
-        i++;
-      }
-      i++;
-      out.push(`<pre><code${lang ? ` class="language-${escapeAttr(escapeHtml(lang))}"` : ""}>${escapeHtml(body.join("\n"))}</code></pre>`);
-      continue;
-    }
-    const esc = escapeHtml(line);
-    if (/^\s*$/.test(line)) {
-      flushPara();
-      closeList();
-      i++;
-      continue;
-    }
-    const heading = esc.match(/^(#{1,6})\s+(.*)$/);
-    if (heading) {
-      flushPara();
-      closeList();
-      const level = heading[1].length;
-      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
-      i++;
-      continue;
-    }
-    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
-      flushPara();
-      closeList();
-      out.push("<hr>");
-      i++;
-      continue;
-    }
-    const quote = esc.match(/^\s*&gt;\s?(.*)$/);
-    if (quote) {
-      flushPara();
-      closeList();
-      out.push(`<blockquote>${inline(quote[1])}</blockquote>`);
-      i++;
-      continue;
-    }
-    const ol = esc.match(/^\s*\d+\.\s+(.*)$/);
-    const ul = esc.match(/^\s*[-*+]\s+(.*)$/);
-    if (ol || ul) {
-      flushPara();
-      const type = ol ? "ol" : "ul";
-      if (listType !== type) {
-        closeList();
-        out.push(`<${type}>`);
-        listType = type;
-      }
-      out.push(`<li>${inline((ol ?? ul)[1])}</li>`);
-      i++;
-      continue;
-    }
-    closeList();
-    para.push(esc);
-    i++;
-  }
-  flushPara();
-  closeList();
-  return out.join("\n");
-}
 function MarkdownEditor({
   value,
   defaultValue = "",
@@ -1746,7 +1667,7 @@ function MarkdownEditor({
   minHeight,
   maxHeight,
   className,
-  renderPreview = renderMarkdown
+  renderPreview
 }) {
   const [content, setContent] = useControllableState(value, defaultValue, onValueChange);
   const showEditor = mode !== "preview";
@@ -1779,7 +1700,19 @@ function MarkdownEditor({
           {
             "data-fancy-markdown-preview": "",
             className: "fancy-md-preview",
-            dangerouslySetInnerHTML: { __html: renderPreview(content) }
+            style: maxHeight ? { maxHeight, overflowY: "auto" } : void 0,
+            children: renderPreview ? (
+              // The host imposed its own pipeline; its HTML is injected as-is and
+              // is its own responsibility to sanitise.
+              /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderPreview(content) } })
+            ) : (
+              // The kit's own renderer — a full CommonMark + GFM parse that
+              // sanitises by default. `marked` already sits in this tree as a
+              // react-fancy runtime dependency, so the built-in renderer this
+              // replaced was a second, weaker markdown implementation next to a
+              // complete one.
+              /* @__PURE__ */ jsx(ContentRenderer, { value: content, format: "markdown" })
+            )
           }
         )
       ]
@@ -1803,6 +1736,9 @@ function FileViewer({
   fileKind,
   lineNumbers = true,
   wordWrap = false,
+  line,
+  column,
+  highlightLines,
   minHeight,
   maxHeight,
   mediaProps,
@@ -1854,6 +1790,9 @@ function FileViewer({
           wordWrap,
           minHeight,
           maxHeight,
+          cursorLine: line,
+          cursorColumn: column,
+          highlightLines: highlightLines ?? (line != null ? [line] : void 0),
           children: /* @__PURE__ */ jsx(CodeEditor.Panel, {})
         }
       )
@@ -1861,6 +1800,105 @@ function FileViewer({
   );
 }
 FileViewer.displayName = "FileViewer";
+
+// src/engine/markdown-render.ts
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(s) {
+  return s.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function inline(text) {
+  return text.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, src, title) => `<img src="${escapeAttr(src)}" alt="${escapeAttr(alt)}"${title ? ` title="${escapeAttr(title)}"` : ""}>`).replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, t, href, title) => `<a href="${escapeAttr(href)}"${title ? ` title="${escapeAttr(title)}"` : ""} rel="noopener">${t}</a>`).replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`).replace(/(\*\*|__)(?=\S)([\s\S]*?\S)\1/g, "<strong>$2</strong>").replace(/(\*|_)(?=\S)([\s\S]*?\S)\1/g, "<em>$2</em>");
+}
+function renderMarkdown(markdown) {
+  const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+  const out = [];
+  let i = 0;
+  let para = [];
+  let listType = null;
+  const flushPara = () => {
+    if (para.length) {
+      out.push(`<p>${inline(para.join(" "))}</p>`);
+      para = [];
+    }
+  };
+  const closeList = () => {
+    if (listType) {
+      out.push(`</${listType}>`);
+      listType = null;
+    }
+  };
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = line.match(/^\s*(```|~~~)(.*)$/);
+    if (fence) {
+      flushPara();
+      closeList();
+      const lang = fence[2].trim();
+      const body = [];
+      i++;
+      while (i < lines.length && !/^\s*(```|~~~)/.test(lines[i])) {
+        body.push(lines[i]);
+        i++;
+      }
+      i++;
+      out.push(`<pre><code${lang ? ` class="language-${escapeAttr(escapeHtml(lang))}"` : ""}>${escapeHtml(body.join("\n"))}</code></pre>`);
+      continue;
+    }
+    const esc = escapeHtml(line);
+    if (/^\s*$/.test(line)) {
+      flushPara();
+      closeList();
+      i++;
+      continue;
+    }
+    const heading = esc.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      flushPara();
+      closeList();
+      const level = heading[1].length;
+      out.push(`<h${level}>${inline(heading[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      flushPara();
+      closeList();
+      out.push("<hr>");
+      i++;
+      continue;
+    }
+    const quote = esc.match(/^\s*&gt;\s?(.*)$/);
+    if (quote) {
+      flushPara();
+      closeList();
+      out.push(`<blockquote>${inline(quote[1])}</blockquote>`);
+      i++;
+      continue;
+    }
+    const ol = esc.match(/^\s*\d+\.\s+(.*)$/);
+    const ul = esc.match(/^\s*[-*+]\s+(.*)$/);
+    if (ol || ul) {
+      flushPara();
+      const type = ol ? "ol" : "ul";
+      if (listType !== type) {
+        closeList();
+        out.push(`<${type}>`);
+        listType = type;
+      }
+      out.push(`<li>${inline((ol ?? ul)[1])}</li>`);
+      i++;
+      continue;
+    }
+    closeList();
+    para.push(esc);
+    i++;
+  }
+  flushPara();
+  closeList();
+  return out.join("\n");
+}
 function useCodeEditorInputTagAdapter() {
   const ctx = useCodeEditor();
   return useMemo(() => textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);