@particle-academy/fancy-code 0.4.7 → 0.5.0

package/dist/index.d.cts

@@ -177,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;
@@ -185,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;
@@ -243,4 +309,4 @@ interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
  */
 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, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor, useCodeEditorInputTagAdapter };
+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

@@ -177,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;
@@ -185,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;
@@ -243,4 +309,4 @@ interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
  */
 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, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor, useCodeEditorInputTagAdapter };
+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

@@ -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"],
@@ -1605,6 +1677,156 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
   Panel: CodeEditorPanel,
   StatusBar: CodeEditorStatusBar
 });
+
+// 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]);
@@ -1614,6 +1836,6 @@ function CodeEditorInputTag(props) {
   return /* @__PURE__ */ jsx(InputTag, { adapter, ...props });
 }
 
-export { CodeEditor, CodeEditorInputTag, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor, useCodeEditorInputTagAdapter };
+export { CodeEditor, CodeEditorInputTag, MarkdownEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, renderMarkdown, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map