@liminis/editor 0.5.0 → 0.6.0

package/README.md

@@ -17,7 +17,8 @@ travelled with the code, are recorded in [`docs/provenance.md`](./docs/provenanc
   ordered lists), footnotes, definition lists, callouts, toggles, code blocks
   with Prism highlighting, images, LaTeX equations, Mermaid diagrams, C4
   diagrams, YAML frontmatter, and wiki-links — including block-scoped links
-  and live transclusion (`[[file#^id]]` / `![[file#^id]]`).
+  and live transclusion (`[[file#^id]]` / `![[file#^id]]`), with a `^ULID`
+  block anchor at its definition site rendering as a compact, copyable badge.
 - **A markdown pipeline** — `parseMarkdown` / `stringifyMarkdown` and the mdast
   ↔ Lexical mappers, usable with no editor mounted.
 - **An annotation mechanism** — range-anchored markers over document text that
@@ -486,6 +487,26 @@ today's file-only wiki-link navigation when it doesn't — no extra host
 wiring required beyond the resolver above, which also backs its
 "does this block exist" styling.
 
+## Block anchor badges
+
+A block anchor — a bare `^ULID` at the point it was defined, most commonly
+trailing an action-item checkbox (`- [ ] ... ^01M00VDX0S4JHMDNA7F776Y8R8`) —
+renders as a compact badge instead of the raw 26-character id sitting inline
+in the prose. Hover the badge to see the full id, or click it to copy the
+exact id to the clipboard — the same id a `[[file#^id]]` reference above
+needs. The underlying markdown, and the id itself, are never changed by
+this: it is a display concern only, and the badge edits and deletes like
+ordinary text.
+
+Detection accepts every id form `[[file#^id]]` and its resolver accept —
+ULIDs, raw-decimal snowflake ids, NanoID-style ids, mixed-case base62, UUIDs,
+short alphanumeric ids — so the badge and the resolver agree on what counts
+as an anchor. A caret in ordinary prose (`x^2`, `2^10`, `mc^2`, `a ^ b`) is
+never mistaken for one, by the same position rule the resolver itself uses:
+the caret must start a token, and the id must run to end of line — see
+`docs/markdown-pipeline.md`'s "Block anchor badges" section for the full
+rationale.
+
 ## Documentation
 
 - [`docs/editor-api.md`](./docs/editor-api.md) — the `<Editor>` props and the

package/dist/app/editor/editorNodes.js

@@ -3,7 +3,7 @@ import { CodeNode, CodeHighlightNode } from '@lexical/code';
 import { AutoLinkNode } from '@lexical/link';
 import { MarkNode } from '@lexical/mark';
 import { TableNode, TableRowNode, TableCellNode } from '@lexical/table';
-import { CalloutNode, ToggleContainerNode, ToggleTitleNode, ToggleContentNode, ImageNode, HorizontalRuleNode, EquationNode, MermaidNode, C4Node, FrontmatterNode, FootnoteNode, HtmlNode, ListItemParagraphBreakNode, CustomLinkNode, CustomListNode, DefinitionListNode, DefinitionTermNode, DefinitionDescriptionNode, CustomListItemNode, TransclusionNode, } from './nodes/index.js';
+import { CalloutNode, ToggleContainerNode, ToggleTitleNode, ToggleContentNode, ImageNode, HorizontalRuleNode, EquationNode, MermaidNode, C4Node, FrontmatterNode, FootnoteNode, BlockAnchorNode, HtmlNode, ListItemParagraphBreakNode, CustomLinkNode, CustomListNode, DefinitionListNode, DefinitionTermNode, DefinitionDescriptionNode, CustomListItemNode, TransclusionNode, } from './nodes/index.js';
 export const editorNodes = [
     HeadingNode,
     QuoteNode,
@@ -28,6 +28,7 @@ export const editorNodes = [
     C4Node,
     FrontmatterNode,
     FootnoteNode,
+    BlockAnchorNode,
     DefinitionListNode,
     DefinitionTermNode,
     DefinitionDescriptionNode,

package/dist/app/editor/nodes/BlockAnchorComponent.d.ts

@@ -0,0 +1,5 @@
+interface BlockAnchorComponentProps {
+    id: string;
+}
+export default function BlockAnchorComponent({ id }: BlockAnchorComponentProps): JSX.Element;
+export {};

package/dist/app/editor/nodes/BlockAnchorComponent.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BlockAnchorComponent — the compact badge a `BlockAnchorNode` decorates
+ * itself with (#122).
+ *
+ * User Story 2 (the id must remain readable and copyable) is satisfied with
+ * no new interaction pattern: the full id is exposed via the native `title`
+ * tooltip on hover, and a click copies it via `navigator.clipboard.writeText`
+ * with brief "Copied" feedback — mirroring `CodeBlockPlugin.tsx`'s existing
+ * copy-button pattern.
+ */
+import { useCallback, useState } from 'react';
+const COPIED_FEEDBACK_MS = 1500;
+export default function BlockAnchorComponent({ id }) {
+    const [copied, setCopied] = useState(false);
+    const handleClick = useCallback(() => {
+        void navigator.clipboard.writeText(id).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+        });
+    }, [id]);
+    return (_jsx("button", { type: "button", className: "block-anchor-badge", title: id, "aria-label": `Block anchor ${id}. Click to copy.`, onClick: handleClick, contentEditable: false, style: {
+            display: 'inline-block',
+            cursor: 'pointer',
+            border: 'none',
+            font: 'inherit',
+            fontSize: '0.75em',
+            lineHeight: '1.4em',
+            padding: '0 0.4em',
+            marginLeft: '0.3em',
+            borderRadius: '1em',
+            backgroundColor: 'var(--liminis-editor-muted-100)',
+            color: 'var(--liminis-editor-muted-foreground)',
+            userSelect: 'none',
+            verticalAlign: 'middle',
+        }, children: copied ? 'Copied' : '^' }));
+}

package/dist/app/editor/nodes/BlockAnchorNode.d.ts

@@ -0,0 +1,42 @@
+/**
+ * BlockAnchorNode — Inline decorator node for a block anchor (`^ULID`, #122).
+ * Renders a compact badge at the anchor's definition site instead of the raw
+ * `^ULID` text, and preserves the id for byte-identical round-trip back to
+ * markdown (`stringify.ts`'s `blockAnchor` handler emits `^` + this id, and
+ * nothing else).
+ */
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread, TextFormatType } from 'lexical';
+export type SerializedBlockAnchorNode = Spread<{
+    id: string;
+    format?: number;
+    strongMarker?: '_' | '*' | null;
+    emphasisMarker?: '_' | '*' | null;
+}, SerializedLexicalNode>;
+export declare class BlockAnchorNode extends DecoratorNode<JSX.Element> {
+    __id: string;
+    __format: number;
+    __strongMarker: '_' | '*' | null;
+    __emphasisMarker: '_' | '*' | null;
+    static getType(): string;
+    static clone(node: BlockAnchorNode): BlockAnchorNode;
+    constructor(id: string, key?: NodeKey);
+    getId(): string;
+    isInline(): boolean;
+    static importJSON(serializedNode: SerializedBlockAnchorNode): BlockAnchorNode;
+    exportJSON(): SerializedBlockAnchorNode;
+    getFormat(): number;
+    hasFormat(type: TextFormatType): boolean;
+    setFormat(format: number): this;
+    toggleFormat(type: TextFormatType): this;
+    getStrongMarker(): '_' | '*' | null;
+    setStrongMarker(marker: '_' | '*' | null): this;
+    getEmphasisMarker(): '_' | '*' | null;
+    setEmphasisMarker(marker: '_' | '*' | null): this;
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    decorate(): JSX.Element;
+}
+export declare function $createBlockAnchorNode(id: string): BlockAnchorNode;
+export declare function $isBlockAnchorNode(node: LexicalNode | null | undefined): node is BlockAnchorNode;

package/dist/app/editor/nodes/BlockAnchorNode.js

@@ -0,0 +1,151 @@
+/**
+ * BlockAnchorNode — Inline decorator node for a block anchor (`^ULID`, #122).
+ * Renders a compact badge at the anchor's definition site instead of the raw
+ * `^ULID` text, and preserves the id for byte-identical round-trip back to
+ * markdown (`stringify.ts`'s `blockAnchor` handler emits `^` + this id, and
+ * nothing else).
+ */
+import { DecoratorNode, TEXT_TYPE_TO_FORMAT, toggleTextFormatType, $applyNodeReplacement, } from 'lexical';
+import { createElement } from 'react';
+import BlockAnchorComponent from './BlockAnchorComponent.js';
+// ---------------------------------------------------------------------------
+// DOM conversion (copy/paste support)
+// ---------------------------------------------------------------------------
+function $convertBlockAnchorElement(domNode) {
+    const id = domNode.getAttribute('data-block-anchor-id');
+    if (id) {
+        return { node: $createBlockAnchorNode(id) };
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// BlockAnchorNode
+// ---------------------------------------------------------------------------
+export class BlockAnchorNode extends DecoratorNode {
+    __id;
+    __format;
+    __strongMarker;
+    __emphasisMarker;
+    static getType() {
+        return 'blockAnchor';
+    }
+    static clone(node) {
+        const cloned = new BlockAnchorNode(node.__id, node.__key);
+        cloned.__format = node.__format;
+        cloned.__strongMarker = node.__strongMarker;
+        cloned.__emphasisMarker = node.__emphasisMarker;
+        return cloned;
+    }
+    constructor(id, key) {
+        super(key);
+        this.__id = id;
+        this.__format = 0;
+        this.__strongMarker = null;
+        this.__emphasisMarker = null;
+    }
+    getId() {
+        return this.__id;
+    }
+    // Inline node — sits within text flow
+    isInline() {
+        return true;
+    }
+    // Serialization
+    static importJSON(serializedNode) {
+        const node = $createBlockAnchorNode(serializedNode.id).setFormat(serializedNode.format ?? 0);
+        if (serializedNode.strongMarker) {
+            node.setStrongMarker(serializedNode.strongMarker);
+        }
+        if (serializedNode.emphasisMarker) {
+            node.setEmphasisMarker(serializedNode.emphasisMarker);
+        }
+        return node;
+    }
+    exportJSON() {
+        return {
+            type: 'blockAnchor',
+            version: 1,
+            id: this.__id,
+            format: this.__format,
+            strongMarker: this.__strongMarker,
+            emphasisMarker: this.__emphasisMarker,
+        };
+    }
+    // Mirrors TextNode's format bitmask API so this node can carry
+    // bold/italic/strikethrough state through the mdast<->Lexical round-trip.
+    getFormat() {
+        return this.getLatest().__format;
+    }
+    hasFormat(type) {
+        const formatFlag = TEXT_TYPE_TO_FORMAT[type];
+        return (this.getFormat() & formatFlag) !== 0;
+    }
+    setFormat(format) {
+        const self = this.getWritable();
+        self.__format = format;
+        return self;
+    }
+    toggleFormat(type) {
+        const format = this.getFormat();
+        const newFormat = toggleTextFormatType(format, type, null);
+        return this.setFormat(newFormat);
+    }
+    // Mirrors TextNode's --md-strong-marker/--md-emphasis-marker style hooks
+    // (via setMarkdownMarker/getMarkdownMarker in the mappers) so a bare
+    // anchor sitting inside `**bold**`/`_italic_` still round-trips its
+    // original underscore-vs-asterisk marker on export.
+    getStrongMarker() {
+        return this.getLatest().__strongMarker;
+    }
+    setStrongMarker(marker) {
+        const self = this.getWritable();
+        self.__strongMarker = marker;
+        return self;
+    }
+    getEmphasisMarker() {
+        return this.getLatest().__emphasisMarker;
+    }
+    setEmphasisMarker(marker) {
+        const self = this.getWritable();
+        self.__emphasisMarker = marker;
+        return self;
+    }
+    // DOM creation (editor view)
+    createDOM() {
+        const el = document.createElement('span');
+        el.className = 'block-anchor';
+        return el;
+    }
+    updateDOM() {
+        return false;
+    }
+    // DOM export (copy/paste)
+    exportDOM() {
+        const el = document.createElement('span');
+        el.setAttribute('data-block-anchor-id', this.__id);
+        el.textContent = `^${this.__id}`;
+        return { element: el };
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-block-anchor-id'))
+                    return null;
+                return { conversion: $convertBlockAnchorElement, priority: 1 };
+            },
+        };
+    }
+    // Render as React element
+    decorate() {
+        return createElement(BlockAnchorComponent, { id: this.__id });
+    }
+}
+// ---------------------------------------------------------------------------
+// Factory + type guard
+// ---------------------------------------------------------------------------
+export function $createBlockAnchorNode(id) {
+    return $applyNodeReplacement(new BlockAnchorNode(id));
+}
+export function $isBlockAnchorNode(node) {
+    return node instanceof BlockAnchorNode;
+}

package/dist/app/editor/nodes/index.d.ts

@@ -24,6 +24,8 @@ export { CustomListItemNode, $createCustomListItemNode, $isCustomListItemNode }
 export type { SerializedCustomListItemNode } from './CustomListItemNode.js';
 export { FootnoteNode, $createFootnoteNode, $isFootnoteNode } from './FootnoteNode.js';
 export type { SerializedFootnoteNode } from './FootnoteNode.js';
+export { BlockAnchorNode, $createBlockAnchorNode, $isBlockAnchorNode } from './BlockAnchorNode.js';
+export type { SerializedBlockAnchorNode } from './BlockAnchorNode.js';
 export { DefinitionListNode, DefinitionTermNode, DefinitionDescriptionNode, $createDefinitionListNode, $createDefinitionTermNode, $createDefinitionDescriptionNode, $isDefinitionListNode, $isDefinitionTermNode, $isDefinitionDescriptionNode, } from './DefinitionListNode.js';
 export type { SerializedDefinitionListNode, SerializedDefinitionTermNode, SerializedDefinitionDescriptionNode, } from './DefinitionListNode.js';
 export { HtmlNode, $createHtmlNode, $isHtmlNode } from './HtmlNode.js';

package/dist/app/editor/nodes/index.js

@@ -13,6 +13,7 @@ export { CustomLinkNode, $createCustomLinkNode, $isCustomLinkNode } from './Cust
 export { CustomListNode, $createCustomListNode, $isCustomListNode } from './CustomListNode.js';
 export { CustomListItemNode, $createCustomListItemNode, $isCustomListItemNode } from './CustomListItemNode.js';
 export { FootnoteNode, $createFootnoteNode, $isFootnoteNode } from './FootnoteNode.js';
+export { BlockAnchorNode, $createBlockAnchorNode, $isBlockAnchorNode } from './BlockAnchorNode.js';
 export { DefinitionListNode, DefinitionTermNode, DefinitionDescriptionNode, $createDefinitionListNode, $createDefinitionTermNode, $createDefinitionDescriptionNode, $isDefinitionListNode, $isDefinitionTermNode, $isDefinitionDescriptionNode, } from './DefinitionListNode.js';
 export { HtmlNode, $createHtmlNode, $isHtmlNode } from './HtmlNode.js';
 export { ListItemParagraphBreakNode, $createListItemParagraphBreakNode, $isListItemParagraphBreakNode, } from './ListItemParagraphBreakNode.js';

package/dist/app/mapper/lexicalToMdast.js

@@ -5,7 +5,7 @@ import { $isCodeNode } from '@lexical/code';
 import { $isLinkNode } from '@lexical/link';
 import { $isMarkNode } from '@lexical/mark';
 import { $isTableNode, $isTableRowNode, $isTableCellNode } from '@lexical/table';
-import { $isHorizontalRuleNode, $isImageNode, $isCalloutNode, $isToggleContainerNode, $isToggleTitleNode, $isToggleContentNode, $isEquationNode, $isMermaidNode, $isC4Node, $isFrontmatterNode, $isFootnoteNode, $isCustomListNode, $isDefinitionListNode, $isDefinitionTermNode, $isDefinitionDescriptionNode, $isCustomListItemNode, $isHtmlNode, $isListItemParagraphBreakNode, $isTransclusionNode, } from '../editor/nodes/index.js';
+import { $isHorizontalRuleNode, $isImageNode, $isCalloutNode, $isToggleContainerNode, $isToggleTitleNode, $isToggleContentNode, $isEquationNode, $isMermaidNode, $isC4Node, $isFrontmatterNode, $isFootnoteNode, $isBlockAnchorNode, $isCustomListNode, $isDefinitionListNode, $isDefinitionTermNode, $isDefinitionDescriptionNode, $isCustomListItemNode, $isHtmlNode, $isListItemParagraphBreakNode, $isTransclusionNode, } from '../editor/nodes/index.js';
 import { SENTINEL_CLOSE_END, SENTINEL_CLOSE_START, SENTINEL_OPEN_END, SENTINEL_OPEN_START, stripAnnotateSentinels, } from '../../markdown/annotate-sentinels.js';
 // Convert Lexical editor state to mdast tree
 export function exportLexicalToMdast(editor, options = {}) {
@@ -245,6 +245,7 @@ function isHoistableConstruct(node) {
         $isImageNode(node) ||
         $isEquationNode(node) ||
         $isFootnoteNode(node) ||
+        $isBlockAnchorNode(node) ||
         $isHtmlNode(node) ||
         $isTransclusionNode(node));
 }
@@ -377,26 +378,32 @@ function canCarryHoistedTokens(parent) {
  * The same question asked of the *construct* rather than its container, because
  * one container routes its children unevenly.
  *
- * `convertListItemNode` sends only text runs, line breaks and links through the
- * inline phrasing path; every other child goes to the block dispatcher, which
- * has nowhere to put a phrasing token. Hoisting a boundary onto one of those
- * would drop the token silently, and `locateLiveMarkdownRange` would then fail
- * to find the mark at all.
+ * `convertListItemNode` sends only text runs, line breaks, links and block
+ * anchors through the inline phrasing path; every other child goes to the
+ * block dispatcher, which has nowhere to put a phrasing token. Hoisting a
+ * boundary onto one of those would drop the token silently, and
+ * `locateLiveMarkdownRange` would then fail to find the mark at all.
  *
- * No document reaches that state today, which is why this is a guard rather
- * than a fix: an image, inline equation, footnote reference or inline HTML
- * inside a list item is *itself* block-promoted by that same dispatcher, so it
- * does not survive a round trip inline (`- The value $x^2$ matters` exports as
- * three blocks) and any range over it is already rejected by
- * `locateLiveMarkdownRange`'s slice check. Repairing that unrelated,
- * pre-existing round-trip defect must not silently regress annotation ranges as
- * its side effect.
+ * No document reaches that state today for the remaining types, which is why
+ * this is a guard rather than a fix: an image, inline equation, footnote
+ * reference or inline HTML inside a list item is *itself* block-promoted by
+ * that same dispatcher, so it does not survive a round trip inline (`- The
+ * value $x^2$ matters` exports as three blocks) and any range over it is
+ * already rejected by `locateLiveMarkdownRange`'s slice check. Repairing that
+ * unrelated, pre-existing round-trip defect must not silently regress
+ * annotation ranges as its side effect.
+ *
+ * Block anchors are the one exception (#122): `- [ ] ... ^ULID` is the
+ * primary real-world shape this issue targets, so `convertListItemNode` keeps
+ * a `BlockAnchorNode` inline rather than letting it fall to the block
+ * dispatcher — see the `$isBlockAnchorNode` branch there — and a hoisted
+ * boundary onto one genuinely does reach the output.
  */
 function hoistedTokenReachesOutput(node) {
     let parent = node.getParent();
     while (parent && $isMarkNode(parent))
         parent = parent.getParent();
-    return $isListItemNode(parent) ? $isLinkNode(node) : true;
+    return $isListItemNode(parent) ? ($isLinkNode(node) || $isBlockAnchorNode(node)) : true;
 }
 /**
  * The node a mark's boundary token should be emitted outside of, or null to
@@ -716,6 +723,9 @@ function convertFootnoteInlineChildren(labelNode) {
                 label: child.getFootnoteId(),
             });
         }
+        else if ($isBlockAnchorNode(child)) {
+            contentChildren.push({ type: 'blockAnchor', id: child.getId() });
+        }
         contentChildren.push(...hoistedTokenNodesFor(child, 'after'));
         restIndex++;
         child = rest[restIndex] ?? null;
@@ -967,6 +977,30 @@ function convertListItemNode(node, _ordered, spread) {
             // be emitted here too.
             inlineChildren.push(...hoistedTokenNodesFor(child, 'before'), convertLinkNode(child), ...hoistedTokenNodesFor(child, 'after'));
         }
+        else if ($isBlockAnchorNode(child)) {
+            // A block anchor sitting directly under a ListItemNode — the primary
+            // real-world shape this issue targets (`- [ ] ... ^ULID`, #122) — must
+            // stay inline rather than fall to the block dispatcher below: unlike
+            // image/equation/footnote/html (a documented, pre-existing gap this
+            // issue does not touch — see `hoistedTokenReachesOutput`'s docstring),
+            // a dropped anchor here would break the checkbox-action-item pattern
+            // the spec calls out as the primary usage.
+            //
+            // Unlike the $isLinkNode branch above, a link's format lives on its
+            // text children (applied on import via applyFormatToLinkChildren), but
+            // a BlockAnchorNode carries its own format bits directly (like
+            // FootnoteNode/EquationNode) — so they must be wrapped here explicitly,
+            // the same way the general inline path does via getMergeableFormat +
+            // buildFormattedContent, or a bold/italic badge would silently lose its
+            // markers on export.
+            flushTextRun();
+            const anchorMdast = { type: 'blockAnchor', id: child.getId() };
+            const format = getMergeableFormat(child) ?? 0;
+            const anchorContent = format
+                ? wrapWithFormat([anchorMdast], format, child.getStrongMarker(), child.getEmphasisMarker())
+                : anchorMdast;
+            inlineChildren.push(...hoistedTokenNodesFor(child, 'before'), anchorContent, ...hoistedTokenNodesFor(child, 'after'));
+        }
         else {
             // Any other block-type child (ParagraphNode, CodeNode, TableNode,
             // QuoteNode, etc.) — flush accumulated inline text first, then delegate
@@ -1304,7 +1338,7 @@ function getMergeableFormat(child) {
     if ($isTextNode(child)) {
         return child.getFormat() & MERGEABLE_FORMAT_MASK;
     }
-    if ($isEquationNode(child) || $isFootnoteNode(child)) {
+    if ($isEquationNode(child) || $isFootnoteNode(child) || $isBlockAnchorNode(child)) {
         return child.getFormat() & MERGEABLE_FORMAT_MASK;
     }
     return null;
@@ -1348,6 +1382,10 @@ function convertSingleInlineChild(child) {
                 label: child.getFootnoteId(),
             }];
     }
+    else if ($isBlockAnchorNode(child)) {
+        // Block anchor badge (#122): convert back to a blockAnchor mdast node
+        return [{ type: 'blockAnchor', id: child.getId() }];
+    }
     else if ($isHtmlNode(child)) {
         // Inline HTML preserved opaquely: convert back to a phrasing html mdast node
         return [{ type: 'html', value: child.getHtml() }];
@@ -1431,6 +1469,10 @@ function convertLeavesRaw(nodes) {
                 label: node.getFootnoteId(),
             });
         }
+        else if ($isBlockAnchorNode(node)) {
+            flushCode();
+            content.push({ type: 'blockAnchor', id: node.getId() });
+        }
     }
     flushCode();
     return content;
@@ -1457,7 +1499,7 @@ function resolveMarkers(nodes) {
             strongMarker = strongMarker ?? getMarkdownMarker(style, '--md-strong-marker');
             emphasisMarker = emphasisMarker ?? getMarkdownMarker(style, '--md-emphasis-marker');
         }
-        else if ($isEquationNode(node) || $isFootnoteNode(node)) {
+        else if ($isEquationNode(node) || $isFootnoteNode(node) || $isBlockAnchorNode(node)) {
             strongMarker = strongMarker ?? node.getStrongMarker();
             emphasisMarker = emphasisMarker ?? node.getEmphasisMarker();
         }
@@ -1837,6 +1879,9 @@ function convertLinkNode(node) {
                 label: child.getFootnoteId(),
             });
         }
+        else if ($isBlockAnchorNode(child)) {
+            children.push({ type: 'blockAnchor', id: child.getId() });
+        }
         else if ($isHtmlNode(child)) {
             children.push({ type: 'html', value: child.getHtml() });
         }

package/dist/app/mapper/mdastToLexical.js

@@ -2,7 +2,7 @@ import { $createParagraphNode, $createTextNode, $createLineBreakNode, $isLineBre
 import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
 import { $createCodeNode } from '@lexical/code';
 import { $isLinkNode } from '@lexical/link';
-import { $createHorizontalRuleNode, $createImageNode, $isImageNode, $createCalloutNode, $createToggleContainerNode, $createToggleTitleNode, $createToggleContentNode, $createEquationNode, $isEquationNode, $createFootnoteNode, $isFootnoteNode, $createHtmlNode, $isHtmlNode, $createMermaidNode, $createC4Node, $createFrontmatterNode, $createCustomLinkNode, $createCustomListNode, $createDefinitionListNode, $createDefinitionTermNode, $createDefinitionDescriptionNode, $createCustomListItemNode, $createListItemParagraphBreakNode, $createTransclusionNode, } from '../editor/nodes/index.js';
+import { $createHorizontalRuleNode, $createImageNode, $isImageNode, $createCalloutNode, $createToggleContainerNode, $createToggleTitleNode, $createToggleContentNode, $createEquationNode, $isEquationNode, $createFootnoteNode, $isFootnoteNode, $createBlockAnchorNode, $isBlockAnchorNode, $createHtmlNode, $isHtmlNode, $createMermaidNode, $createC4Node, $createFrontmatterNode, $createCustomLinkNode, $createCustomListNode, $createDefinitionListNode, $createDefinitionTermNode, $createDefinitionDescriptionNode, $createCustomListItemNode, $createListItemParagraphBreakNode, $createTransclusionNode, } from '../editor/nodes/index.js';
 import { parseFormattedAlias } from '../editor/MarkdownShortcutsPlugin.js';
 import { $createTableNode, $createTableRowNode, $createTableCellNode, TableCellHeaderStates } from '@lexical/table';
 import { getFileType } from '../../utils/file-types.js';
@@ -845,6 +845,12 @@ function convertInlineNode(node) {
             const fnRef = node;
             return [$createFootnoteNode(fnRef.identifier)];
         }
+        case 'blockAnchor': {
+            // Block anchor badge (#122): render `^ULID` as a compact badge instead
+            // of raw text, using BlockAnchorNode to preserve the id for round-trip.
+            const anchor = node;
+            return [$createBlockAnchorNode(anchor.id)];
+        }
         case 'wikiLink': {
             // Wiki-links from mdast-util-wiki-link: [[path|alias]]
             const wikiLink = node;
@@ -991,7 +997,7 @@ function convertStrong(node) {
                 applyFormatToLinkChildren(n, 'bold', marker);
                 nodes.push(n);
             }
-            else if ($isEquationNode(n) || $isFootnoteNode(n)) {
+            else if ($isEquationNode(n) || $isFootnoteNode(n) || $isBlockAnchorNode(n)) {
                 if (!n.hasFormat('bold')) {
                     n.toggleFormat('bold');
                 }
@@ -1026,7 +1032,7 @@ function convertEmphasis(node) {
                 applyFormatToLinkChildren(n, 'italic', marker);
                 nodes.push(n);
             }
-            else if ($isEquationNode(n) || $isFootnoteNode(n)) {
+            else if ($isEquationNode(n) || $isFootnoteNode(n) || $isBlockAnchorNode(n)) {
                 if (!n.hasFormat('italic')) {
                     n.toggleFormat('italic');
                 }
@@ -1125,7 +1131,7 @@ function convertDelete(node) {
                 applyFormatToLinkChildren(n, 'strikethrough');
                 nodes.push(n);
             }
-            else if ($isEquationNode(n) || $isFootnoteNode(n)) {
+            else if ($isEquationNode(n) || $isFootnoteNode(n) || $isBlockAnchorNode(n)) {
                 if (!n.hasFormat('strikethrough')) {
                     n.toggleFormat('strikethrough');
                 }