@particle-academy/fancy-code 0.4.6 → 0.5.0

package/dist/index.d.cts

@@ -1,5 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
+import { InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeColors {
     background: string;
@@ -114,6 +115,13 @@ interface CodeEditorContextValue {
     };
     /** Length of the current selection (0 if none) */
     selectionLength: number;
+    /**
+     * Ref to the underlying `<textarea>` element. Exposed so external
+     * widgets — e.g. `<InputTag>`'s `textareaAdapter` — can attach to
+     * the same input the editor renders into. Will be `null` before
+     * the editor has mounted.
+     */
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
     /** Placeholder text */
     placeholder?: string;
     /** @internal */
@@ -135,27 +143,27 @@ interface CodeEditorStatusBarProps {
     className?: string;
 }
 
-declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react.JSX.Element | null;
 declare namespace CodeEditorPanel {
     var displayName: string;
 }
 
-declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react.JSX.Element;
 declare namespace CodeEditorToolbar {
     var displayName: string;
 }
 
-declare function CodeEditorToolbarSeparator(): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbarSeparator(): react.JSX.Element;
 declare namespace CodeEditorToolbarSeparator {
     var displayName: string;
 }
 
-declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react.JSX.Element;
 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, }: CodeEditorProps): react_jsx_runtime.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, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -169,6 +177,64 @@ declare const CodeEditor: typeof CodeEditorRoot & {
 
 declare function useCodeEditor(): CodeEditorContextValue;
 
+type MarkdownEditorMode = "split" | "edit" | "preview";
+interface MarkdownEditorProps {
+    /** Controlled markdown value. */
+    value?: string;
+    /** Initial value (uncontrolled). */
+    defaultValue?: string;
+    /** Called with the new markdown whenever the document changes. */
+    onValueChange?: (markdown: string) => void;
+    /**
+     * Layout: `split` (editor + live preview side by side), `edit` (editor only),
+     * or `preview` (rendered only). Default `split`.
+     */
+    mode?: MarkdownEditorMode;
+    /** Editor theme — `"light" | "dark" | "auto"` or a registered name. Default `auto`. */
+    theme?: string;
+    /** Prevent editing. */
+    readOnly?: boolean;
+    /** Show line numbers in the editor (default false — prose reads better without). */
+    lineNumbers?: boolean;
+    /** Wrap long lines in the editor (default true for prose). */
+    wordWrap?: boolean;
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    /** Editor height bounds (px). */
+    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.
+     */
+    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.
+ *
+ * ```tsx
+ * <MarkdownEditor value={md} onValueChange={setMd} mode="split" minHeight={240} />
+ * ```
+ */
+declare function MarkdownEditor({ value, defaultValue, onValueChange, mode, theme, readOnly, lineNumbers, wordWrap, placeholder, minHeight, maxHeight, className, renderPreview, }: MarkdownEditorProps): react.JSX.Element;
+declare namespace MarkdownEditor {
+    var displayName: string;
+}
+
+/**
+ * Tiny, dependency-free Markdown → HTML renderer for the MarkdownEditor preview
+ * pane. Covers the common subset — headings, bold/italic, inline + fenced code,
+ * links, images, blockquotes, ordered/unordered lists, hr, and paragraphs. Input
+ * is HTML-escaped first, so raw HTML in the source is shown as text (safe by
+ * default). Not a full CommonMark implementation; swap in a real renderer
+ * downstream if you need one.
+ */
+declare function renderMarkdown(markdown: string): string;
+
 type TokenType = "keyword" | "string" | "comment" | "number" | "operator" | "tag" | "attribute" | "attributeValue" | "punctuation" | "function" | "type" | "variable" | "plain";
 interface Token {
     type: TokenType;
@@ -177,6 +243,14 @@ interface Token {
 }
 type Tokenizer = (source: string) => Token[];
 
+/**
+ * Minimal, dependency-free Markdown tokenizer for editor highlighting. Line-based
+ * for block constructs (fences, headings, blockquotes, list markers) plus a few
+ * safe, non-overlapping inline spans (code, bold/italic, links). Good enough to
+ * read structure at a glance — not a full CommonMark parse.
+ */
+declare function tokenizeMarkdown(source: string): Token[];
+
 interface LanguageDefinition {
     /** Display name shown in UI (e.g., "JavaScript") */
     name: string;
@@ -194,4 +268,45 @@ declare function registerTheme(theme: ThemeDefinition): void;
 declare function getTheme(name: string): ThemeDefinition | undefined;
 declare function getRegisteredThemes(): string[];
 
-export { CodeEditor, type CodeEditorContextValue, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+/**
+ * Glue between `@particle-academy/react-fancy`'s `<InputTag>` and the
+ * `<CodeEditor>` from this package. `<CodeEditor>` renders a real DOM
+ * `<textarea>` under its overlay, so the existing `textareaAdapter`
+ * just works — this module hands it the right ref via the editor
+ * context.
+ *
+ *   <CodeEditor value={code} onChange={setCode} language="markdown">
+ *     <CodeEditor.Toolbar />
+ *     <CodeEditor.Panel />
+ *     <CodeEditorInputTag
+ *       triggers={{
+ *         "/": { items: commands, insert: (c) => `${c.name} ` },
+ *         "@": { items: mentions, insert: (m) => `@${m.name} ` },
+ *       }}
+ *     />
+ *   </CodeEditor>
+ *
+ * Must be rendered as a descendant of `<CodeEditor>` (it reads the
+ * editor's context). For ad-hoc wiring outside the component tree,
+ * pull the textarea ref off the context and call `textareaAdapter`
+ * yourself.
+ */
+/**
+ * Hook form — returns an `InputTagAdapter` bound to the surrounding
+ * `<CodeEditor>`. Useful when you want to compose your own picker UI
+ * around the same adapter.
+ */
+declare function useCodeEditorInputTagAdapter(): InputTagAdapter;
+interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
+    triggers: InputTagTriggers;
+}
+/**
+ * Convenience wrapper — renders `<InputTag>` already wired to the
+ * surrounding `<CodeEditor>`'s textarea. Equivalent to:
+ *
+ *   const adapter = useCodeEditorInputTagAdapter();
+ *   return <InputTag adapter={adapter} {...rest} />;
+ */
+declare function CodeEditorInputTag(props: CodeEditorInputTagProps): react.JSX.Element;
+
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, renderMarkdown, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
+import { InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeColors {
     background: string;
@@ -114,6 +115,13 @@ interface CodeEditorContextValue {
     };
     /** Length of the current selection (0 if none) */
     selectionLength: number;
+    /**
+     * Ref to the underlying `<textarea>` element. Exposed so external
+     * widgets — e.g. `<InputTag>`'s `textareaAdapter` — can attach to
+     * the same input the editor renders into. Will be `null` before
+     * the editor has mounted.
+     */
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
     /** Placeholder text */
     placeholder?: string;
     /** @internal */
@@ -135,27 +143,27 @@ interface CodeEditorStatusBarProps {
     className?: string;
 }
 
-declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react.JSX.Element | null;
 declare namespace CodeEditorPanel {
     var displayName: string;
 }
 
-declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbar({ children, className }: CodeEditorToolbarProps): react.JSX.Element;
 declare namespace CodeEditorToolbar {
     var displayName: string;
 }
 
-declare function CodeEditorToolbarSeparator(): react_jsx_runtime.JSX.Element;
+declare function CodeEditorToolbarSeparator(): react.JSX.Element;
 declare namespace CodeEditorToolbarSeparator {
     var displayName: string;
 }
 
-declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorStatusBar({ children, className }: CodeEditorStatusBarProps): react.JSX.Element;
 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, }: CodeEditorProps): react_jsx_runtime.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, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -169,6 +177,64 @@ declare const CodeEditor: typeof CodeEditorRoot & {
 
 declare function useCodeEditor(): CodeEditorContextValue;
 
+type MarkdownEditorMode = "split" | "edit" | "preview";
+interface MarkdownEditorProps {
+    /** Controlled markdown value. */
+    value?: string;
+    /** Initial value (uncontrolled). */
+    defaultValue?: string;
+    /** Called with the new markdown whenever the document changes. */
+    onValueChange?: (markdown: string) => void;
+    /**
+     * Layout: `split` (editor + live preview side by side), `edit` (editor only),
+     * or `preview` (rendered only). Default `split`.
+     */
+    mode?: MarkdownEditorMode;
+    /** Editor theme — `"light" | "dark" | "auto"` or a registered name. Default `auto`. */
+    theme?: string;
+    /** Prevent editing. */
+    readOnly?: boolean;
+    /** Show line numbers in the editor (default false — prose reads better without). */
+    lineNumbers?: boolean;
+    /** Wrap long lines in the editor (default true for prose). */
+    wordWrap?: boolean;
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    /** Editor height bounds (px). */
+    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.
+     */
+    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.
+ *
+ * ```tsx
+ * <MarkdownEditor value={md} onValueChange={setMd} mode="split" minHeight={240} />
+ * ```
+ */
+declare function MarkdownEditor({ value, defaultValue, onValueChange, mode, theme, readOnly, lineNumbers, wordWrap, placeholder, minHeight, maxHeight, className, renderPreview, }: MarkdownEditorProps): react.JSX.Element;
+declare namespace MarkdownEditor {
+    var displayName: string;
+}
+
+/**
+ * Tiny, dependency-free Markdown → HTML renderer for the MarkdownEditor preview
+ * pane. Covers the common subset — headings, bold/italic, inline + fenced code,
+ * links, images, blockquotes, ordered/unordered lists, hr, and paragraphs. Input
+ * is HTML-escaped first, so raw HTML in the source is shown as text (safe by
+ * default). Not a full CommonMark implementation; swap in a real renderer
+ * downstream if you need one.
+ */
+declare function renderMarkdown(markdown: string): string;
+
 type TokenType = "keyword" | "string" | "comment" | "number" | "operator" | "tag" | "attribute" | "attributeValue" | "punctuation" | "function" | "type" | "variable" | "plain";
 interface Token {
     type: TokenType;
@@ -177,6 +243,14 @@ interface Token {
 }
 type Tokenizer = (source: string) => Token[];
 
+/**
+ * Minimal, dependency-free Markdown tokenizer for editor highlighting. Line-based
+ * for block constructs (fences, headings, blockquotes, list markers) plus a few
+ * safe, non-overlapping inline spans (code, bold/italic, links). Good enough to
+ * read structure at a glance — not a full CommonMark parse.
+ */
+declare function tokenizeMarkdown(source: string): Token[];
+
 interface LanguageDefinition {
     /** Display name shown in UI (e.g., "JavaScript") */
     name: string;
@@ -194,4 +268,45 @@ declare function registerTheme(theme: ThemeDefinition): void;
 declare function getTheme(name: string): ThemeDefinition | undefined;
 declare function getRegisteredThemes(): string[];
 
-export { CodeEditor, type CodeEditorContextValue, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+/**
+ * Glue between `@particle-academy/react-fancy`'s `<InputTag>` and the
+ * `<CodeEditor>` from this package. `<CodeEditor>` renders a real DOM
+ * `<textarea>` under its overlay, so the existing `textareaAdapter`
+ * just works — this module hands it the right ref via the editor
+ * context.
+ *
+ *   <CodeEditor value={code} onChange={setCode} language="markdown">
+ *     <CodeEditor.Toolbar />
+ *     <CodeEditor.Panel />
+ *     <CodeEditorInputTag
+ *       triggers={{
+ *         "/": { items: commands, insert: (c) => `${c.name} ` },
+ *         "@": { items: mentions, insert: (m) => `@${m.name} ` },
+ *       }}
+ *     />
+ *   </CodeEditor>
+ *
+ * Must be rendered as a descendant of `<CodeEditor>` (it reads the
+ * editor's context). For ad-hoc wiring outside the component tree,
+ * pull the textarea ref off the context and call `textareaAdapter`
+ * yourself.
+ */
+/**
+ * Hook form — returns an `InputTagAdapter` bound to the surrounding
+ * `<CodeEditor>`. Useful when you want to compose your own picker UI
+ * around the same adapter.
+ */
+declare function useCodeEditorInputTagAdapter(): InputTagAdapter;
+interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
+    triggers: InputTagTriggers;
+}
+/**
+ * Convenience wrapper — renders `<InputTag>` already wired to the
+ * surrounding `<CodeEditor>`'s textarea. Equivalent to:
+ *
+ *   const adapter = useCodeEditorInputTagAdapter();
+ *   return <InputTag adapter={adapter} {...rest} />;
+ */
+declare function CodeEditorInputTag(props: CodeEditorInputTagProps): react.JSX.Element;
+
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, renderMarkdown, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useState, useCallback, useRef, useMemo, useSyncExternalStore, useEffect, useContext } from 'react';
-import { cn, useControllableState } from '@particle-academy/react-fancy';
+import { cn, useControllableState, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/CodeEditor/CodeEditor.tsx
@@ -1035,7 +1035,79 @@ var tokenizeGo = (source) => {
   return tokens;
 };
 
+// src/engine/tokenizer.ts
+function tok(type, s, e) {
+  return { type, start: s, end: e };
+}
+
+// src/engine/tokenizers/markdown.ts
+function tokenizeMarkdown(source) {
+  const tokens = [];
+  const lines = source.split("\n");
+  let offset = 0;
+  let inFence = false;
+  for (const line of lines) {
+    const base = offset;
+    const len = line.length;
+    offset += len + 1;
+    if (/^\s*(```|~~~)/.test(line)) {
+      tokens.push(tok("string", base, base + len));
+      inFence = !inFence;
+      continue;
+    }
+    if (inFence) {
+      tokens.push(tok("string", base, base + len));
+      continue;
+    }
+    if (/^#{1,6}\s/.test(line)) {
+      tokens.push(tok("keyword", base, base + len));
+      continue;
+    }
+    if (/^\s*>/.test(line)) {
+      tokens.push(tok("comment", base, base + len));
+      continue;
+    }
+    const list = line.match(/^(\s*)([-*+]|\d+\.)\s/);
+    if (list) {
+      const start = base + list[1].length;
+      tokens.push(tok("operator", start, start + list[2].length));
+    }
+    pushInline(line, base, tokens);
+  }
+  return tokens;
+}
+function pushInline(line, base, out) {
+  const spans = [];
+  const add = (type, start, end) => {
+    spans.push(tok(type, base + start, base + end));
+  };
+  let m;
+  const code = /`[^`]+`/g;
+  while (m = code.exec(line)) add("string", m.index, m.index + m[0].length);
+  const emph = /(\*\*|__)(?=\S)([\s\S]*?\S)\1|(\*|_)(?=\S)([\s\S]*?\S)\3/g;
+  while (m = emph.exec(line)) add("type", m.index, m.index + m[0].length);
+  const link = /!?\[[^\]]*\]\(([^)]+)\)/g;
+  while (m = link.exec(line)) {
+    add("tag", m.index, m.index + m[0].length - m[1].length - 1);
+    const urlStart = m.index + m[0].length - m[1].length - 1;
+    add("attributeValue", urlStart, urlStart + m[1].length);
+  }
+  spans.sort((a, b) => a.start - b.start || b.end - a.end);
+  let lastEnd = -1;
+  for (const s of spans) {
+    if (s.start >= lastEnd) {
+      out.push(s);
+      lastEnd = s.end;
+    }
+  }
+}
+
 // src/languages/builtin.ts
+registerLanguage({
+  name: "Markdown",
+  aliases: ["md", "markdown", "mkd"],
+  tokenize: tokenizeMarkdown
+});
 registerLanguage({
   name: "JavaScript",
   aliases: ["js", "javascript", "jsx"],
@@ -1576,6 +1648,7 @@ function CodeEditorRoot({
       },
       cursorPosition,
       selectionLength,
+      textareaRef: engineReturn.textareaRef,
       placeholder,
       _engineReturn: engineReturn,
       _minHeight: minHeight,
@@ -1605,6 +1678,164 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
   StatusBar: CodeEditorStatusBar
 });
 
-export { CodeEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+// src/engine/markdown-render.ts
+function escapeHtml2(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function inline(text) {
+  return text.replace(/!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, alt, src, title) => `<img src="${src}" alt="${alt}"${title ? ` title="${title}"` : ""}>`).replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]*)")?\)/g, (_m, t, href, title) => `<a href="${href}"${title ? ` title="${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-${escapeHtml2(lang)}"` : ""}>${escapeHtml2(body.join("\n"))}</code></pre>`);
+      continue;
+    }
+    const esc = escapeHtml2(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 = "",
+  onValueChange,
+  mode = "split",
+  theme = "auto",
+  readOnly = false,
+  lineNumbers = false,
+  wordWrap = true,
+  placeholder,
+  minHeight,
+  maxHeight,
+  className,
+  renderPreview = renderMarkdown
+}) {
+  const [content, setContent] = useControllableState(value, defaultValue, onValueChange);
+  const showEditor = mode !== "preview";
+  const showPreview = mode !== "edit";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-fancy-markdown-editor": "",
+      "data-mode": mode,
+      className: cn("fancy-md-editor", className),
+      children: [
+        showEditor && /* @__PURE__ */ jsx("div", { className: "fancy-md-editor-pane", children: /* @__PURE__ */ jsx(
+          CodeEditor,
+          {
+            value: content,
+            onChange: setContent,
+            language: "markdown",
+            theme,
+            readOnly,
+            lineNumbers,
+            wordWrap,
+            placeholder,
+            minHeight,
+            maxHeight,
+            children: /* @__PURE__ */ jsx(CodeEditor.Panel, {})
+          }
+        ) }),
+        showPreview && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-fancy-markdown-preview": "",
+            className: "fancy-md-preview",
+            dangerouslySetInnerHTML: { __html: renderPreview(content) }
+          }
+        )
+      ]
+    }
+  );
+}
+MarkdownEditor.displayName = "MarkdownEditor";
+function useCodeEditorInputTagAdapter() {
+  const ctx = useCodeEditor();
+  return useMemo(() => textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);
+}
+function CodeEditorInputTag(props) {
+  const adapter = useCodeEditorInputTagAdapter();
+  return /* @__PURE__ */ jsx(InputTag, { adapter, ...props });
+}
+
+export { CodeEditor, CodeEditorInputTag, MarkdownEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, renderMarkdown, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map