@sigx/lynx-markdown 0.4.6 → 0.4.8

package/README.md

@@ -9,10 +9,6 @@ AI output: as the source string grows token-by-token, finalized blocks keep a
 stable identity and are never re-parsed or remounted, so completed content
 doesn't flicker or reflow while new tokens stream in.
 
-The package also ships [`XMarkdown`](#xmarkdown--native-element-wrapper), the
-thin wrapper around Lynx's native `<x-markdown>` element, for cases where you
-want the platform's built-in renderer.
-
 ## Install
 
 ```
@@ -120,22 +116,38 @@ import { markdownComponents } from '@sigx/lynx-daisyui';
 <MarkdownView value={src} components={markdownComponents} />;
 ```
 
-## `XMarkdown` — native element wrapper
-
-`XMarkdown` wraps Lynx's native `<x-markdown>` XElement. It's fast where
-available but platform-gated and opaque (the engine owns parsing and styling):
 
-| Platform | First version   | Notes                                               |
-| -------- | --------------- | --------------------------------------------------- |
-| Harmony  | Lynx 3.7.0      | Stable.                                             |
-| Android  | Lynx 3.8.0-rc.0 | Ships as `org.lynxsdk.lynx:lynx_xelement_markdown`. |
-| iOS      | (post-3.8.0)    | Currently only on the upstream `main` branch.       |
+## `MarkdownEditor` — true-WYSIWYG editing
 
-On platforms where `<x-markdown>` is not registered, it renders nothing. Prefer
-`MarkdownView` for cross-platform, streaming, and customizable rendering.
+`MarkdownEditor` provides WYSIWYG markdown editing on the native
+[`@sigx/lynx-richtext`](../lynx-richtext) element (optional peer dependency —
+bold is bold *inside* the input, not `**` markers). The external contract stays
+markdown: `value` in, `onChange(markdown)` out.
 
 ```tsx
-import { XMarkdown } from '@sigx/lynx-markdown';
-
-<XMarkdown value={'# Hello'} effect="typewriter" onLink={(e) => open(e.detail.url)} />;
+import { MarkdownEditor, type MarkdownEditorController } from '@sigx/lynx-markdown';
+
+let ctrl: MarkdownEditorController | null = null;
+
+<MarkdownEditor
+  value={draft}
+  placeholder="Message…"
+  minLines={1}
+  maxLines={4}              // chat-style: grow 1→4 lines, then scroll
+  mode="auto"               // 'auto' | 'fixed' | 'fullscreen'
+  confirmType="send"
+  onChange={(md) => { draft = md; }}
+  onSelectionChange={(sel) => toolbarState(sel.activeFormats)}
+  controllerRef={(c) => { ctrl = c; }}
+/>;
+
+// Imperative commands (what a toolbar drives):
+ctrl?.toggleBold();
+ctrl?.setHeading(2);
+ctrl?.clear();              // chat send
 ```
+
+v1 models paragraphs, headings, and bold/italic/strike/code/link in-field;
+everything else (lists, tables, code fences) round-trips **losslessly** as raw
+markdown source via `raw` blocks until later phases model them. Conversion
+helpers `mdToDoc`/`docToMd` are exported for advanced use.

package/dist/editor/MarkdownEditor.d.ts

@@ -0,0 +1,48 @@
+/**
+ * `<MarkdownEditor>` — true-WYSIWYG markdown editing on the native
+ * `<sigx-richtext>` element.
+ *
+ * The external contract is **markdown**: `value` in, `onChange(markdown)` out.
+ * Internally the editor converts markdown ↔ the element's `RichDoc` span model
+ * (`convert/mdToDoc`, `convert/docToMd`) and drives formatting through
+ * fire-and-forget commands; the element is the single source of truth for live
+ * text and selection (lightly-controlled — keystrokes are never echoed back).
+ *
+ * ### Echo / IME rules (JS side)
+ * - An incoming `value` identical to the last markdown we emitted is our own
+ *   echo → ignored (string compare; exact).
+ * - Otherwise it's compared structurally against the element's last document —
+ *   only genuinely different content is pushed via `setDocument`.
+ * - While the IME is composing, external values are buffered and applied on
+ *   the composition-end change; `onChange` is also suppressed mid-composition.
+ *
+ * Sizing: `minLines`/`maxLines` × line height drive the element's auto-grow
+ * window (`mode="auto"`, chat-style 1 → N lines then internal scroll);
+ * `mode="fixed"` pins the height at `maxLines`; `mode="fullscreen"` fills the
+ * parent.
+ */
+import { type Define } from '@sigx/lynx';
+import { type SelectionState } from '@sigx/lynx-richtext';
+export type MarkdownEditorMode = 'auto' | 'fixed' | 'fullscreen';
+/** Imperative command surface — what toolbars and plugins drive. */
+export interface MarkdownEditorController {
+    toggleBold(): void;
+    toggleItalic(): void;
+    toggleStrike(): void;
+    toggleCode(): void;
+    /** 1–6 sets a heading; 0 reverts to paragraph. */
+    setHeading(level: 0 | 1 | 2 | 3 | 4 | 5 | 6): void;
+    insertText(text: string): void;
+    /** Clear the document (chat send). */
+    clear(): void;
+    focus(): void;
+    blur(): void;
+    /** The current markdown (as of the last element change). */
+    getMarkdown(): string;
+    /** The current selection state (as of the last selection event). */
+    getSelection(): SelectionState | null;
+}
+export type MarkdownEditorProps = Define.Prop<'value', string, false> & Define.Prop<'placeholder', string, false> & Define.Prop<'minLines', number, false> & Define.Prop<'maxLines', number, false> & Define.Prop<'mode', MarkdownEditorMode, false> & Define.Prop<'fontSize', number, false> & Define.Prop<'textColor', string, false> & Define.Prop<'accentColor', string, false> & Define.Prop<'placeholderColor', string, false> & Define.Prop<'confirmType', 'send' | 'search' | 'next' | 'go' | 'done', false> & Define.Prop<'autoFocus', boolean, false> & Define.Prop<'disabled', boolean, false> & Define.Prop<'class', string, false> & Define.Prop<'onChange', (markdown: string) => void, false> & Define.Prop<'onSelectionChange', (sel: SelectionState) => void, false> & Define.Prop<'onFocus', () => void, false> & Define.Prop<'onBlur', () => void, false>
+/** Receives the imperative controller once on mount. */
+ & Define.Prop<'controllerRef', (ctrl: MarkdownEditorController) => void, false>;
+export declare const MarkdownEditor: import("@sigx/runtime-core").ComponentFactory<MarkdownEditorProps, void, {}>;

package/dist/editor/MarkdownEditor.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<MarkdownEditor>` — true-WYSIWYG markdown editing on the native
+ * `<sigx-richtext>` element.
+ *
+ * The external contract is **markdown**: `value` in, `onChange(markdown)` out.
+ * Internally the editor converts markdown ↔ the element's `RichDoc` span model
+ * (`convert/mdToDoc`, `convert/docToMd`) and drives formatting through
+ * fire-and-forget commands; the element is the single source of truth for live
+ * text and selection (lightly-controlled — keystrokes are never echoed back).
+ *
+ * ### Echo / IME rules (JS side)
+ * - An incoming `value` identical to the last markdown we emitted is our own
+ *   echo → ignored (string compare; exact).
+ * - Otherwise it's compared structurally against the element's last document —
+ *   only genuinely different content is pushed via `setDocument`.
+ * - While the IME is composing, external values are buffered and applied on
+ *   the composition-end change; `onChange` is also suppressed mid-composition.
+ *
+ * Sizing: `minLines`/`maxLines` × line height drive the element's auto-grow
+ * window (`mode="auto"`, chat-style 1 → N lines then internal scroll);
+ * `mode="fixed"` pins the height at `maxLines`; `mode="fullscreen"` fills the
+ * parent.
+ */
+import { component, signal, watch } from '@sigx/lynx';
+import { RichTextInput, RichTextMethods, docEquals, normalizeDoc, emptyDoc, } from '@sigx/lynx-richtext';
+import { mdToDoc } from './convert/mdToDoc.js';
+import { docToMd } from './convert/docToMd.js';
+const DEFAULT_FONT_SIZE = 16;
+/** Vertical padding the element applies internally (8 top + 8 bottom). */
+const ELEMENT_PADDING = 16;
+export const MarkdownEditor = component(({ props }) => {
+    let el = null;
+    // --- sync state (see module docs) ---
+    const initialMd = typeof props.value === 'string' ? props.value : '';
+    let lastEmittedMd = initialMd;
+    let lastDocFromElement = normalizeDoc(mdToDoc(initialMd));
+    let lastSeenVersion = 0;
+    let composing = false;
+    let pendingExternal = null;
+    let currentSel = null;
+    // Auto-grow: the native element reports its (clamped) content height and
+    // the editor feeds it back as the element's layout height — Lynx layout
+    // sizes views from styles, never from native intrinsic content.
+    const reportedHeight = signal(0);
+    const applyExternal = (md) => {
+        if (md === lastEmittedMd)
+            return; // our own echo
+        if (composing) {
+            pendingExternal = md;
+            return;
+        }
+        const doc = mdToDoc(md, lastSeenVersion);
+        if (docEquals(normalizeDoc(doc), lastDocFromElement)) {
+            lastEmittedMd = md; // same content, different markdown spelling
+            return;
+        }
+        RichTextMethods.setDocument(el, doc);
+    };
+    watch(() => props.value, (next) => {
+        if (typeof next === 'string')
+            applyExternal(next);
+    });
+    const handleChange = (doc, isComposing) => {
+        composing = isComposing;
+        lastSeenVersion = doc.v;
+        lastDocFromElement = normalizeDoc(doc);
+        if (isComposing)
+            return;
+        const md = docToMd(doc);
+        if (md !== lastEmittedMd) {
+            lastEmittedMd = md;
+            props.onChange?.(md);
+        }
+        if (pendingExternal !== null) {
+            const pending = pendingExternal;
+            pendingExternal = null;
+            applyExternal(pending);
+        }
+    };
+    const controller = {
+        toggleBold: () => RichTextMethods.toggleFormat(el, 'bold'),
+        toggleItalic: () => RichTextMethods.toggleFormat(el, 'italic'),
+        toggleStrike: () => RichTextMethods.toggleFormat(el, 'strike'),
+        toggleCode: () => RichTextMethods.toggleFormat(el, 'code'),
+        setHeading: (level) => {
+            if (level === 0)
+                RichTextMethods.setBlockType(el, 'paragraph');
+            else
+                RichTextMethods.setBlockType(el, 'heading', level);
+        },
+        insertText: (text) => RichTextMethods.insertText(el, text),
+        clear: () => RichTextMethods.setDocument(el, emptyDoc(lastSeenVersion)),
+        focus: () => RichTextMethods.focus(el),
+        blur: () => RichTextMethods.blur(el),
+        getMarkdown: () => lastEmittedMd ?? '',
+        getSelection: () => currentSel,
+    };
+    props.controllerRef?.(controller);
+    return () => {
+        const fontSize = props.fontSize ?? DEFAULT_FONT_SIZE;
+        const lineHeight = Math.round(fontSize * 1.5);
+        const mode = props.mode ?? 'auto';
+        const minLines = Math.max(1, props.minLines ?? 1);
+        const maxLines = Math.max(minLines, props.maxLines ?? 4);
+        let minHeight = minLines * lineHeight + ELEMENT_PADDING;
+        let maxHeight = maxLines * lineHeight + ELEMENT_PADDING;
+        if (mode === 'fixed')
+            minHeight = maxHeight;
+        if (mode === 'fullscreen')
+            maxHeight = 0; // unbounded; element fills parent
+        return (_jsx("view", { class: props.class, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                ...(mode === 'fullscreen' ? { flexGrow: 1, flexShrink: 1 } : {}),
+            }, children: _jsx(RichTextInput, { value: mdToDoc(initialMd), placeholder: props.placeholder, editable: props.disabled ? false : undefined, minHeight: minHeight, maxHeight: maxHeight, fontSize: fontSize, textColor: props.textColor, accentColor: props.accentColor, placeholderColor: props.placeholderColor, confirmType: props.confirmType, autoFocus: props.autoFocus, style: mode === 'fullscreen'
+                    ? { flexGrow: 1 }
+                    : { height: Math.max(minHeight, Math.min(reportedHeight.value || minHeight, maxHeight)) }, onElement: (handle) => {
+                    el = handle;
+                }, onHeightChange: (height) => {
+                    reportedHeight.value = height;
+                }, onChange: handleChange, onSelection: (sel) => {
+                    currentSel = sel;
+                    props.onSelectionChange?.(sel);
+                }, onFocus: () => props.onFocus?.(), onBlur: () => props.onBlur?.() }) }));
+    };
+});

package/dist/editor/convert/docToMd.d.ts

@@ -0,0 +1,14 @@
+/**
+ * {@link RichDoc} → markdown — the serializer (inverse of `mdToDoc`).
+ *
+ * Segments the flat text by `blocks[]` (raw chunks verbatim, heading lines
+ * prefixed, remaining lines as paragraphs), then serializes inline spans per
+ * segment via elementary runs + a close/reopen delimiter stack (valid nesting
+ * from arbitrarily overlapping spans).
+ *
+ * Round-trip contract: `mdToDoc(docToMd(doc))` is structurally equal to a
+ * *normalized* `doc` — emphasis markers, hard breaks (→ paragraph breaks), and
+ * blank lines normalize; `raw` blocks round-trip byte-for-byte.
+ */
+import type { RichDoc } from '@sigx/lynx-richtext';
+export declare function docToMd(doc: RichDoc): string;

package/dist/editor/convert/docToMd.js

@@ -0,0 +1,201 @@
+/**
+ * {@link RichDoc} → markdown — the serializer (inverse of `mdToDoc`).
+ *
+ * Segments the flat text by `blocks[]` (raw chunks verbatim, heading lines
+ * prefixed, remaining lines as paragraphs), then serializes inline spans per
+ * segment via elementary runs + a close/reopen delimiter stack (valid nesting
+ * from arbitrarily overlapping spans).
+ *
+ * Round-trip contract: `mdToDoc(docToMd(doc))` is structurally equal to a
+ * *normalized* `doc` — emphasis markers, hard breaks (→ paragraph breaks), and
+ * blank lines normalize; `raw` blocks round-trip byte-for-byte.
+ */
+import { computeRuns, markPriority } from './overlap.js';
+export function docToMd(doc) {
+    const parts = [];
+    for (const seg of segmentize(doc)) {
+        if (seg.type === 'raw') {
+            parts.push(doc.text.slice(seg.start, seg.end));
+            continue;
+        }
+        const inline = serializeInline(doc, seg.start, seg.end, seg.type === 'paragraph');
+        if (seg.type === 'heading') {
+            const level = Math.min(6, Math.max(1, seg.level ?? 1));
+            parts.push(`${'#'.repeat(level)} ${inline}`);
+        }
+        else if (inline !== '') {
+            parts.push(inline);
+        }
+        // Empty paragraph lines are visual spacing only — they normalize away.
+    }
+    return parts.join('\n\n');
+}
+/** Cover the text with block segments; uncovered regions split per line into paragraphs. */
+function segmentize(doc) {
+    const segments = [];
+    const text = doc.text;
+    const blocks = [...doc.blocks]
+        .map((b) => ({
+        ...b,
+        start: Math.max(0, Math.min(b.start, text.length)),
+        end: Math.max(0, Math.min(b.end, text.length)),
+    }))
+        .filter((b) => b.end >= b.start)
+        .sort((a, b) => a.start - b.start);
+    /**
+     * Split an uncovered region `[from, to)` into per-line paragraph segments.
+     * A `\n` ends the line before it; a region ending exactly on a separator
+     * `\n` emits no phantom trailing line.
+     */
+    const emitLines = (from, to) => {
+        let lineStart = from;
+        for (let i = from; i < to; i++) {
+            if (text[i] === '\n') {
+                segments.push({ start: lineStart, end: i, type: 'paragraph' });
+                lineStart = i + 1;
+            }
+        }
+        if (lineStart < to)
+            segments.push({ start: lineStart, end: to, type: 'paragraph' });
+    };
+    let cursor = 0;
+    for (const block of blocks) {
+        const start = Math.max(cursor, block.start);
+        if (start > cursor)
+            emitLines(cursor, start);
+        const end = Math.max(start, block.end);
+        // Block ranges include their trailing newline (paragraphRange
+        // semantics) — content excludes it.
+        const contentEnd = end > start && text[end - 1] === '\n' ? end - 1 : end;
+        if (block.type === 'heading') {
+            segments.push({ start, end: contentEnd, type: 'heading', level: block.level });
+        }
+        else if (block.type === 'raw') {
+            segments.push({ start, end: contentEnd, type: 'raw' });
+        }
+        else {
+            // Unknown/unstyled block types degrade to paragraphs (per line).
+            emitLines(start, contentEnd);
+        }
+        cursor = end;
+    }
+    if (cursor < text.length)
+        emitLines(cursor, text.length);
+    return segments;
+}
+/** Serialize one segment's text + spans into markdown inline syntax. */
+function serializeInline(doc, start, end, escapeLineStart) {
+    const runs = computeRuns(doc.spans, start, end);
+    if (runs.length === 0) {
+        return escapeText(doc.text.slice(start, end), escapeLineStart);
+    }
+    // Extent-aware nesting (the ProseMirror-serializer trick): per run, order
+    // marks so the one that stays active the LONGEST sits outermost. A shorter
+    // mark is closed-and-reopened inside it, which avoids the unserializable
+    // adjacent-delimiter runs (`***`) that naive close/reopen produces.
+    const contEnd = [];
+    for (let i = runs.length - 1; i >= 0; i--) {
+        const map = new Map();
+        for (const mark of runs[i].active) {
+            const next = i + 1 < runs.length ? contEnd[i + 1].get(mark.key) : undefined;
+            map.set(mark.key, next !== undefined && runs[i + 1].start === runs[i].end ? next : runs[i].end);
+        }
+        contEnd[i] = map;
+    }
+    let out = '';
+    const open = [];
+    let first = true;
+    for (let i = 0; i < runs.length; i++) {
+        const run = runs[i];
+        const desired = [...run.active].sort((a, b) => {
+            const ea = contEnd[i].get(a.key) ?? run.end;
+            const eb = contEnd[i].get(b.key) ?? run.end;
+            return eb - ea || markPriority(a) - markPriority(b);
+        });
+        // Keep the common open-stack prefix; close the rest (innermost first).
+        let keep = 0;
+        while (keep < open.length && keep < desired.length && open[keep].key === desired[keep].key)
+            keep++;
+        for (let j = open.length - 1; j >= keep; j--)
+            out += delimiter(open[j], doc, 'close');
+        open.length = keep;
+        for (let j = keep; j < desired.length; j++) {
+            out += delimiter(desired[j], doc, 'open');
+            open.push(desired[j]);
+        }
+        const slice = doc.text.slice(run.start, run.end);
+        out += open.some((m) => m.type === 'code')
+            ? slice
+            : escapeText(slice, escapeLineStart && first && open.length === 0);
+        first = false;
+    }
+    for (let j = open.length - 1; j >= 0; j--)
+        out += delimiter(open[j], doc, 'close');
+    return out;
+}
+function delimiter(mark, doc, side) {
+    switch (mark.type) {
+        case 'bold':
+            return '**';
+        case 'italic':
+            // `_` (not `*`) so a bold/italic split never emits an ambiguous
+            // `***` delimiter run (`**a*b***c*` parses wrong; `**a_b_**_c_`
+            // can't collide). Trade-off: mid-word italic won't re-parse
+            // (intraword `_` rule) — documented normalization.
+            return '_';
+        case 'strike':
+            return '~~';
+        case 'code': {
+            // Widen the fence beyond any backtick run in the content.
+            const fence = '`'.repeat(maxBacktickRun(doc.text) + 1);
+            return fence.length > 1 ? fence : '`';
+        }
+        case 'link':
+            return side === 'open' ? '[' : `](${escapeLinkDest(String(mark.attrs?.href ?? ''))})`;
+        case 'mention':
+            // P3 — until the mention plugin lands, serialize as plain label.
+            return '';
+        default:
+            return '';
+    }
+}
+/**
+ * Escape a link destination so it re-parses to the same href (mirrors
+ * `scanLinkDest`'s two accepted forms):
+ *
+ * - bare form: backslash-escape `\`, `(`, `)`, `<` (a leading `<` would
+ *   otherwise flip the parser into the angle branch) — valid as long as
+ *   the destination has no whitespace;
+ * - whitespace anywhere → angle form `<…>`, whose only terminators are `>`
+ *   and newline; those get percent-encoded (they're invalid raw in URLs
+ *   anyway, so this is normalization, not loss).
+ */
+function escapeLinkDest(href) {
+    if (/\s/.test(href)) {
+        return `<${href.replace(/>/g, '%3E').replace(/\n/g, '%0A')}>`;
+    }
+    return href.replace(/[\\()<]/g, (c) => `\\${c}`);
+}
+function maxBacktickRun(text) {
+    let max = 0;
+    let run = 0;
+    for (const ch of text) {
+        run = ch === '`' ? run + 1 : 0;
+        if (run > max)
+            max = run;
+    }
+    return max;
+}
+/** Escape markdown-significant characters in literal text. */
+function escapeText(text, atLineStart) {
+    let out = text.replace(/([\\`*_~[\]])/g, '\\$1');
+    if (atLineStart) {
+        // Constructs that only bind at the start of a line.
+        out = out
+            .replace(/^(#{1,6})(\s)/, '\\$1$2')
+            .replace(/^>/, '\\>')
+            .replace(/^([-+])(\s)/, '\\$1$2')
+            .replace(/^(\d+)([.)])(\s)/, '$1\\$2$3');
+    }
+    return out;
+}

package/dist/editor/convert/mdToDoc.d.ts

@@ -0,0 +1,19 @@
+/**
+ * markdown → {@link RichDoc} — flatten the parsed AST into the rich-text
+ * element's flat text+spans+blocks model.
+ *
+ * v1 models paragraphs, headings, and the inline set
+ * (bold/italic/strike/code/link). Everything else — lists, blockquotes, code
+ * blocks, tables, thematic breaks, and any paragraph containing an
+ * unrepresentable inline (images) — becomes a **`raw` block**: the original
+ * markdown source verbatim, edited as source and serialized back
+ * byte-for-byte. That's the lossless escape hatch that makes the round trip
+ * safe long before every node type is WYSIWYG-editable.
+ *
+ * Line convention (chat-style): every `\n` in `doc.text` is a paragraph
+ * boundary. Markdown hard breaks split into separate doc lines; `docToMd`
+ * serializes doc lines back as blank-line-separated paragraphs (hard breaks
+ * normalize to paragraph breaks — documented).
+ */
+import type { RichDoc } from '@sigx/lynx-richtext';
+export declare function mdToDoc(markdown: string, v?: number): RichDoc;

package/dist/editor/convert/mdToDoc.js

@@ -0,0 +1,187 @@
+/**
+ * markdown → {@link RichDoc} — flatten the parsed AST into the rich-text
+ * element's flat text+spans+blocks model.
+ *
+ * v1 models paragraphs, headings, and the inline set
+ * (bold/italic/strike/code/link). Everything else — lists, blockquotes, code
+ * blocks, tables, thematic breaks, and any paragraph containing an
+ * unrepresentable inline (images) — becomes a **`raw` block**: the original
+ * markdown source verbatim, edited as source and serialized back
+ * byte-for-byte. That's the lossless escape hatch that makes the round trip
+ * safe long before every node type is WYSIWYG-editable.
+ *
+ * Line convention (chat-style): every `\n` in `doc.text` is a paragraph
+ * boundary. Markdown hard breaks split into separate doc lines; `docToMd`
+ * serializes doc lines back as blank-line-separated paragraphs (hard breaks
+ * normalize to paragraph breaks — documented).
+ */
+import { parseBlocks } from '../../parser/blocks.js';
+export function mdToDoc(markdown, v = 0) {
+    const ast = parseBlocks(markdown ?? '');
+    let text = '';
+    const spans = [];
+    const blocks = [];
+    /** Append one doc line (or multi-line raw chunk) plus its block attr. */
+    const push = (chunk, attr) => {
+        // Raw chunks may carry trailing blank lines consumed by the block
+        // parser (loose lists) — the inter-block separator is reconstructed
+        // by the serializer's join, so strip them here for stable round trips.
+        if (attr?.type === 'raw')
+            chunk = chunk.replace(/\n+$/, '');
+        const start = text.length;
+        text += chunk;
+        if (attr) {
+            // Range includes the trailing newline once it exists — matching how
+            // native paragraph ranges read back (paragraphRange semantics).
+            blocks.push({ start, end: text.length + 1, ...attr });
+        }
+        text += '\n';
+    };
+    for (const block of ast) {
+        switch (block.type) {
+            case 'paragraph': {
+                if (!inlineRepresentable(block.children)) {
+                    push(block.raw, { type: 'raw' });
+                    break;
+                }
+                for (const line of splitOnBreaks(block.children)) {
+                    const flat = flattenInline(line, text.length);
+                    spans.push(...flat.spans);
+                    push(flat.text);
+                }
+                break;
+            }
+            case 'heading': {
+                if (!inlineRepresentable(block.children)) {
+                    push(block.raw, { type: 'raw' });
+                    break;
+                }
+                const flat = flattenInline(block.children, text.length);
+                spans.push(...flat.spans);
+                push(flat.text, { type: 'heading', level: block.level });
+                break;
+            }
+            default:
+                push(block.raw, { type: 'raw' });
+        }
+    }
+    // Drop the final separator newline; clamp any block range that reached
+    // past it (the "+1 for trailing newline" of the last block).
+    if (text.endsWith('\n'))
+        text = text.slice(0, -1);
+    for (const b of blocks) {
+        if (b.end > text.length)
+            b.end = text.length;
+    }
+    return { text, spans, blocks, v };
+}
+/** Inline node types the editor can model in-field. */
+function inlineRepresentable(nodes) {
+    for (const node of nodes) {
+        switch (node.type) {
+            case 'text':
+            case 'br':
+            case 'codeSpan':
+            case 'autolink':
+                break;
+            case 'strong':
+            case 'em':
+            case 'del':
+                if (!inlineRepresentable(node.children))
+                    return false;
+                break;
+            case 'link':
+                if (!inlineRepresentable(node.children))
+                    return false;
+                break;
+            default:
+                return false; // image, future extension nodes
+        }
+    }
+    return true;
+}
+/** Split a paragraph's inline children into visual lines at top-level hard breaks. */
+function splitOnBreaks(nodes) {
+    const lines = [];
+    let current = [];
+    for (const node of nodes) {
+        if (node.type === 'br') {
+            lines.push(current);
+            current = [];
+        }
+        else {
+            current.push(node);
+        }
+    }
+    lines.push(current);
+    return lines;
+}
+/** Depth-first flatten of an inline tree into text + overlapping spans. */
+function flattenInline(nodes, base) {
+    let text = '';
+    const spans = [];
+    const walk = (list) => {
+        for (const node of list) {
+            switch (node.type) {
+                case 'text':
+                    text += node.value;
+                    break;
+                case 'br':
+                    // Nested hard break (inside emphasis) — degrade to a space.
+                    text += ' ';
+                    break;
+                case 'codeSpan': {
+                    const start = base + text.length;
+                    text += node.value;
+                    spans.push({ start, end: base + text.length, type: 'code' });
+                    break;
+                }
+                case 'strong': {
+                    const start = base + text.length;
+                    walk(node.children);
+                    spans.push({ start, end: base + text.length, type: 'bold' });
+                    break;
+                }
+                case 'em': {
+                    const start = base + text.length;
+                    walk(node.children);
+                    spans.push({ start, end: base + text.length, type: 'italic' });
+                    break;
+                }
+                case 'del': {
+                    const start = base + text.length;
+                    walk(node.children);
+                    spans.push({ start, end: base + text.length, type: 'strike' });
+                    break;
+                }
+                case 'link': {
+                    const start = base + text.length;
+                    walk(node.children);
+                    spans.push({
+                        start,
+                        end: base + text.length,
+                        type: 'link',
+                        attrs: { href: node.href },
+                    });
+                    break;
+                }
+                case 'autolink': {
+                    const start = base + text.length;
+                    text += node.value;
+                    spans.push({
+                        start,
+                        end: base + text.length,
+                        type: 'link',
+                        attrs: { href: node.href },
+                    });
+                    break;
+                }
+                default:
+                    break; // unreachable — filtered by inlineRepresentable
+            }
+        }
+    };
+    walk(nodes);
+    // Zero-length spans (empty emphasis) carry no information — drop them.
+    return { text, spans: spans.filter((s) => s.end > s.start) };
+}

package/dist/editor/convert/overlap.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Elementary-run computation for inline serialization.
+ *
+ * The doc model permits arbitrarily overlapping spans; markdown needs properly
+ * nested delimiters. Step one of the serializer is to slice a text range into
+ * **elementary runs** — maximal intervals over which the set of active marks
+ * is constant. The emitter (docToMd) then walks the runs with a close/reopen
+ * stack, which is guaranteed to produce valid nesting.
+ */
+import type { InlineSpan, InlineSpanType } from '@sigx/lynx-richtext';
+export interface ActiveMark {
+    type: InlineSpanType;
+    /** Identity key — distinguishes links by href so adjacent different links don't merge. */
+    key: string;
+    attrs?: Record<string, string>;
+}
+export interface Run {
+    start: number;
+    end: number;
+    /** Marks active over the whole run. */
+    active: ActiveMark[];
+}
+export declare function markPriority(mark: ActiveMark): number;
+/**
+ * Slice `[start, end)` into elementary runs for the given spans.
+ *
+ * `code` is terminal: within a code span every other mark except an enclosing
+ * `link` is suppressed (markdown cannot style inside code spans, but
+ * `[`code`](href)` is valid).
+ */
+export declare function computeRuns(spans: InlineSpan[], start: number, end: number): Run[];

package/dist/editor/convert/overlap.js

@@ -0,0 +1,70 @@
+/**
+ * Elementary-run computation for inline serialization.
+ *
+ * The doc model permits arbitrarily overlapping spans; markdown needs properly
+ * nested delimiters. Step one of the serializer is to slice a text range into
+ * **elementary runs** — maximal intervals over which the set of active marks
+ * is constant. The emitter (docToMd) then walks the runs with a close/reopen
+ * stack, which is guaranteed to produce valid nesting.
+ */
+/** Outer-to-inner nesting priority (lower index opens first / sits outermost). */
+const PRIORITY = { link: 0, code: 1, bold: 2, italic: 3, strike: 4 };
+export function markPriority(mark) {
+    return PRIORITY[mark.type] ?? 99;
+}
+/**
+ * Slice `[start, end)` into elementary runs for the given spans.
+ *
+ * `code` is terminal: within a code span every other mark except an enclosing
+ * `link` is suppressed (markdown cannot style inside code spans, but
+ * `[`code`](href)` is valid).
+ */
+export function computeRuns(spans, start, end) {
+    if (end <= start)
+        return [];
+    const relevant = spans
+        .filter((s) => s.end > start && s.start < end && s.end > s.start)
+        .map((s) => ({
+        start: Math.max(s.start, start),
+        end: Math.min(s.end, end),
+        mark: toMark(s),
+    }));
+    const boundaries = new Set([start, end]);
+    for (const s of relevant) {
+        boundaries.add(s.start);
+        boundaries.add(s.end);
+    }
+    const points = [...boundaries].sort((a, b) => a - b);
+    const runs = [];
+    for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i];
+        const b = points[i + 1];
+        if (b <= a)
+            continue;
+        let active = relevant
+            .filter((s) => s.start <= a && s.end >= b)
+            .map((s) => s.mark);
+        active = dedupe(active);
+        if (active.some((m) => m.type === 'code')) {
+            active = active.filter((m) => m.type === 'code' || m.type === 'link');
+        }
+        active.sort((x, y) => markPriority(x) - markPriority(y) || x.key.localeCompare(y.key));
+        runs.push({ start: a, end: b, active });
+    }
+    return runs;
+}
+function toMark(span) {
+    const key = span.type === 'link' ? `link:${span.attrs?.href ?? ''}` : span.type;
+    return { type: span.type, key, ...(span.attrs ? { attrs: span.attrs } : {}) };
+}
+function dedupe(marks) {
+    const seen = new Set();
+    const out = [];
+    for (const m of marks) {
+        if (!seen.has(m.key)) {
+            seen.add(m.key);
+            out.push(m);
+        }
+    }
+    return out;
+}

package/dist/index.d.ts

@@ -1,15 +1,15 @@
-import './jsx-augment.js';
 export { MarkdownView } from './render/MarkdownView.js';
 export type { MarkdownViewProps } from './render/MarkdownView.js';
 export { defaultComponents } from './render/components.js';
 export type { MarkdownComponents, MarkdownChild, RootProps, HeadingProps, ParagraphProps, BlockquoteProps, ListProps, ListItemProps, CodeProps, ThematicBreakProps, TableProps, TableRowProps, TableCellProps, StrongProps, EmProps, DelProps, CodeSpanProps, LinkProps, AutolinkProps, ImageProps, } from './render/components.js';
+export { MarkdownEditor } from './editor/MarkdownEditor.js';
+export type { MarkdownEditorProps, MarkdownEditorController, MarkdownEditorMode, } from './editor/MarkdownEditor.js';
+export { mdToDoc } from './editor/convert/mdToDoc.js';
+export { docToMd } from './editor/convert/docToMd.js';
 export { createMarkdownStream } from './stream.js';
 export type { MarkdownStream, CreateMarkdownStreamOptions } from './stream.js';
-export { XMarkdown } from './XMarkdown.js';
-export type { XMarkdownProps, XMarkdownEffect } from './XMarkdown.js';
 export { createIncrementalEngine } from './parser/incremental.js';
 export type { IncrementalEngine } from './parser/incremental.js';
 export { parseBlocks } from './parser/blocks.js';
 export { parseInline } from './parser/inline.js';
 export type * from './ast.js';
-export type { XMarkdownAttributes, MarkdownLinkEvent, MarkdownLinkEventDetail, MarkdownImageTapEvent, MarkdownImageTapEventDetail, MarkdownParseEndEvent, MarkdownParseEndEventDetail, } from './jsx-augment.js';

package/dist/index.js

@@ -1,13 +1,15 @@
-import './jsx-augment.js';
 // Primary: the SignalX-native streaming renderer. (An editable `MarkdownEditor`
 // is planned as a sibling export.)
 export { MarkdownView } from './render/MarkdownView.js';
 // Generic render-function override API (design systems plug in here).
 export { defaultComponents } from './render/components.js';
+// True-WYSIWYG editor on the native <sigx-richtext> element
+// (requires the optional @sigx/lynx-richtext peer).
+export { MarkdownEditor } from './editor/MarkdownEditor.js';
+export { mdToDoc } from './editor/convert/mdToDoc.js';
+export { docToMd } from './editor/convert/docToMd.js';
 // Streaming controller for AI token loops.
 export { createMarkdownStream } from './stream.js';
-// Native `<x-markdown>` wrapper, preserved for platforms that ship the element.
-export { XMarkdown } from './XMarkdown.js';
 // Parser primitives (for advanced consumers / testing).
 export { createIncrementalEngine } from './parser/incremental.js';
 export { parseBlocks } from './parser/blocks.js';

package/dist/render/MarkdownView.d.ts

@@ -2,9 +2,8 @@
  * `<MarkdownView>` — a SignalX-native, streaming-aware markdown renderer.
  *
  * Parses markdown in JS (zero dependencies) and renders to Lynx primitives, so
- * it works identically on every platform — unlike {@link XMarkdown}, which wraps
- * the platform-gated native `<x-markdown>` element. For an editable counterpart,
- * see `MarkdownEditor`.
+ * it works identically on every platform. For an editable counterpart, see
+ * `MarkdownEditor`.
  *
  * Rendering is **generic**: the package ships neutral, theme-agnostic defaults
  * and exposes a `components` map so any design system can fully control the look

package/dist/render/MarkdownView.js

@@ -2,9 +2,8 @@
  * `<MarkdownView>` — a SignalX-native, streaming-aware markdown renderer.
  *
  * Parses markdown in JS (zero dependencies) and renders to Lynx primitives, so
- * it works identically on every platform — unlike {@link XMarkdown}, which wraps
- * the platform-gated native `<x-markdown>` element. For an editable counterpart,
- * see `MarkdownEditor`.
+ * it works identically on every platform. For an editable counterpart, see
+ * `MarkdownEditor`.
  *
  * Rendering is **generic**: the package ships neutral, theme-agnostic defaults
  * and exposes a `components` map so any design system can fully control the look

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sigx/lynx-markdown",
-  "version": "0.4.6",
-  "description": "SignalX-native streaming markdown renderer for Lynx. Parses markdown in JS (zero deps) and renders to native <view>/<text> primitives, with incremental streaming for AI output. Also ships XMarkdown, the native <x-markdown> wrapper.",
+  "version": "0.4.8",
+  "description": "SignalX-native streaming markdown renderer for Lynx. Parses markdown in JS (zero deps) and renders to native <view>/<text> primitives, with incremental streaming for AI output.",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -19,13 +19,20 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "@sigx/lynx": "^0.4.6"
+    "@sigx/lynx": "^0.4.8",
+    "@sigx/lynx-richtext": "^0.4.8"
+  },
+  "peerDependenciesMeta": {
+    "@sigx/lynx-richtext": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "typescript": "^6.0.3",
-    "@sigx/lynx": "^0.4.6",
-    "@sigx/lynx-testing": "^0.4.6"
+    "@sigx/lynx": "^0.4.8",
+    "@sigx/lynx-richtext": "^0.4.8",
+    "@sigx/lynx-testing": "^0.4.8"
   },
   "author": "Andreas Ekdahl",
   "license": "MIT",
@@ -48,8 +55,7 @@
     "markdown",
     "native",
     "streaming",
-    "ai",
-    "x-markdown"
+    "ai"
   ],
   "scripts": {
     "build": "node ../../scripts/clean.mjs dist && tsgo",

package/dist/XMarkdown.d.ts

@@ -1,36 +0,0 @@
-import { type Define } from '@sigx/lynx';
-import './jsx-augment.js';
-import type { MarkdownLinkEvent, MarkdownImageTapEvent, MarkdownParseEndEvent } from './jsx-augment.js';
-export type XMarkdownEffect = 'typewriter' | 'none' | (string & {});
-export type XMarkdownProps = Define.Prop<'value', string, false> & Define.Prop<'effect', XMarkdownEffect, false> & Define.Prop<'attachments', ReadonlyArray<unknown>, false> & Define.Prop<'class', string, false> & Define.Prop<'style', string | Record<string, string | number>, false> & Define.Prop<'onLink', (e: MarkdownLinkEvent) => void, false> & Define.Prop<'onImageTap', (e: MarkdownImageTapEvent) => void, false> & Define.Prop<'onParseEnd', (e: MarkdownParseEndEvent) => void, false>;
-/**
- * Render a markdown document using Lynx's native `<x-markdown>` XElement.
- *
- * This is the thin wrapper over the platform's native markdown element. It is
- * fast where available but platform-gated (Harmony 3.7.0+, Android 3.8.0-rc.0+,
- * iOS not yet in a tagged release) and opaque — the engine owns parsing and
- * styling. For a cross-platform, fully-controllable, streaming-aware renderer
- * built on Lynx `<view>`/`<text>` primitives, use {@link Markdown} instead.
- *
- * The markdown source is passed via the `value` prop; it is delivered to the
- * native element as a raw-text child (per the 3.7.0 "raw-text node
- * optimization" path). Event props use signalx's automatic
- * `onLink`→`bindlink` mapping in `nodeOps.parseEventProp`, so handlers wire
- * up without any per-event glue.
- *
- * @example
- * ```tsx
- * <XMarkdown
- *   value={"# Hello\n\nThis is **markdown**."}
- *   effect="typewriter"
- *   onLink={(e) => console.log('tapped', e.detail.url)}
- * />
- * ```
- *
- * @remarks
- * Availability of the `<x-markdown>` element is platform-dependent — see
- * `jsx-augment.ts` for the per-platform schedule. On platforms where the
- * native element is not registered, the engine logs a warning and renders
- * no view; there is no JS-side feature gate.
- */
-export declare const XMarkdown: import("@sigx/runtime-core").ComponentFactory<XMarkdownProps, void, {}>;

package/dist/XMarkdown.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
-import { component } from '@sigx/lynx';
-import './jsx-augment.js';
-/**
- * Render a markdown document using Lynx's native `<x-markdown>` XElement.
- *
- * This is the thin wrapper over the platform's native markdown element. It is
- * fast where available but platform-gated (Harmony 3.7.0+, Android 3.8.0-rc.0+,
- * iOS not yet in a tagged release) and opaque — the engine owns parsing and
- * styling. For a cross-platform, fully-controllable, streaming-aware renderer
- * built on Lynx `<view>`/`<text>` primitives, use {@link Markdown} instead.
- *
- * The markdown source is passed via the `value` prop; it is delivered to the
- * native element as a raw-text child (per the 3.7.0 "raw-text node
- * optimization" path). Event props use signalx's automatic
- * `onLink`→`bindlink` mapping in `nodeOps.parseEventProp`, so handlers wire
- * up without any per-event glue.
- *
- * @example
- * ```tsx
- * <XMarkdown
- *   value={"# Hello\n\nThis is **markdown**."}
- *   effect="typewriter"
- *   onLink={(e) => console.log('tapped', e.detail.url)}
- * />
- * ```
- *
- * @remarks
- * Availability of the `<x-markdown>` element is platform-dependent — see
- * `jsx-augment.ts` for the per-platform schedule. On platforms where the
- * native element is not registered, the engine logs a warning and renders
- * no view; there is no JS-side feature gate.
- */
-export const XMarkdown = component(({ props }) => {
-    return () => (_jsx("x-markdown", { "markdown-effect": props.effect, "text-mark-attachments": props.attachments, class: props.class, style: props.style, bindlink: props.onLink, bindimageTap: props.onImageTap, bindparseEnd: props.onParseEnd, children: props.value ?? '' }));
-});

package/dist/jsx-augment.d.ts

@@ -1,83 +0,0 @@
-/**
- * JSX intrinsic type augmentation for Lynx's `<x-markdown>` XElement.
- *
- * Importing this module registers `'x-markdown'` as a valid JSX intrinsic
- * with its 3.7.0+ attributes and events. Pulled in automatically by
- * `@sigx/lynx-markdown`'s entry point so consumers do not need to import
- * it directly.
- *
- * The native element ships per-platform on different schedules:
- *   - Harmony: available since 3.7.0
- *   - Android: available since 3.8.0-rc.0 (artifact `lynx_xelement_markdown`)
- *   - iOS:     not yet in any tagged release; lands on the main branch
- *               post-3.8.0
- *
- * `<x-markdown>` props in JSX still type-check on every platform. At
- * runtime the SignalX renderer issues a `__CreateElement('x-markdown')`
- * op unconditionally; on platforms where the native element is not
- * registered, the underlying engine handles the unknown tag (today it
- * logs a warning and emits no view). There is no JS-side feature gate
- * in this package — once you upgrade to a Lynx release that ships the
- * element on your target platforms, rendering activates automatically.
- */
-import type { LynxCommonAttributes, LynxEventHandler } from '@sigx/lynx-runtime';
-/** Detail payload of `bindlink` — the engine ships `url` plus optional fields. */
-export interface MarkdownLinkEventDetail {
-    url: string;
-    [k: string]: unknown;
-}
-export interface MarkdownLinkEvent {
-    type: 'link';
-    detail: MarkdownLinkEventDetail;
-}
-/** Detail payload of `bindimageTap`. */
-export interface MarkdownImageTapEventDetail {
-    src: string;
-    [k: string]: unknown;
-}
-export interface MarkdownImageTapEvent {
-    type: 'imageTap';
-    detail: MarkdownImageTapEventDetail;
-}
-/** Detail payload of `bindparseEnd`. */
-export interface MarkdownParseEndEventDetail {
-    [k: string]: unknown;
-}
-export interface MarkdownParseEndEvent {
-    type: 'parseEnd';
-    detail: MarkdownParseEndEventDetail;
-}
-export interface XMarkdownAttributes extends LynxCommonAttributes {
-    /**
-     * Raw markdown source. Lynx parses the first text child of
-     * `<x-markdown>` per the 3.7.0 raw-text-node optimization. Passing a
-     * single string here is the common path; JSX expressions resolving to
-     * a string also work.
-     */
-    children?: any;
-    /**
-     * Render-time effect applied to the parsed markdown output.
-     * Known values: `'typewriter'`, `'none'`. The engine treats unknown
-     * strings as `'none'`.
-     */
-    'markdown-effect'?: string;
-    /**
-     * Inline view attachments referenced by markdown text marks. Shape is
-     * engine-defined; passed through as-is.
-     */
-    'text-mark-attachments'?: ReadonlyArray<unknown>;
-    /** Fires when the user taps an `[anchor](url)` link. */
-    bindlink?: LynxEventHandler<MarkdownLinkEvent>;
-    /** Fires when the user taps an inline image. */
-    bindimageTap?: LynxEventHandler<MarkdownImageTapEvent>;
-    /** Fires once the engine finishes parsing the source. */
-    bindparseEnd?: LynxEventHandler<MarkdownParseEndEvent>;
-}
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'x-markdown': XMarkdownAttributes;
-        }
-    }
-}
-export {};

package/dist/jsx-augment.js

@@ -1 +0,0 @@
-export {};