@liminis/editor 0.1.0-rc.1

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

@@ -0,0 +1,151 @@
+/**
+ * FootnoteNode — Inline decorator node for footnote references ([^id]).
+ * Renders as a superscript label and preserves the footnote identifier
+ * for correct round-trip serialization back to markdown.
+ */
+import { DecoratorNode, TEXT_TYPE_TO_FORMAT, toggleTextFormatType, $applyNodeReplacement, } from 'lexical';
+import { createElement } from 'react';
+// ---------------------------------------------------------------------------
+// DOM conversion (copy/paste support)
+// ---------------------------------------------------------------------------
+function $convertFootnoteElement(domNode) {
+    const id = domNode.getAttribute('data-footnote-id');
+    if (id) {
+        return { node: $createFootnoteNode(id) };
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// FootnoteNode
+// ---------------------------------------------------------------------------
+export class FootnoteNode extends DecoratorNode {
+    __footnoteId;
+    __format;
+    __strongMarker;
+    __emphasisMarker;
+    static getType() {
+        return 'footnote';
+    }
+    static clone(node) {
+        const cloned = new FootnoteNode(node.__footnoteId, node.__key);
+        cloned.__format = node.__format;
+        cloned.__strongMarker = node.__strongMarker;
+        cloned.__emphasisMarker = node.__emphasisMarker;
+        return cloned;
+    }
+    constructor(footnoteId, key) {
+        super(key);
+        this.__footnoteId = footnoteId;
+        this.__format = 0;
+        this.__strongMarker = null;
+        this.__emphasisMarker = null;
+    }
+    getFootnoteId() {
+        return this.__footnoteId;
+    }
+    // Inline node — sits within text flow
+    isInline() {
+        return true;
+    }
+    // Serialization
+    static importJSON(serializedNode) {
+        const node = $createFootnoteNode(serializedNode.footnoteId).setFormat(serializedNode.format ?? 0);
+        if (serializedNode.strongMarker) {
+            node.setStrongMarker(serializedNode.strongMarker);
+        }
+        if (serializedNode.emphasisMarker) {
+            node.setEmphasisMarker(serializedNode.emphasisMarker);
+        }
+        return node;
+    }
+    exportJSON() {
+        return {
+            type: 'footnote',
+            version: 1,
+            footnoteId: this.__footnoteId,
+            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
+    // `_[^1]_`/`__[^1]__` span with no text sibling can still recover 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('sup');
+        el.className = 'footnote-ref';
+        el.style.cursor = 'default';
+        el.style.color = '#3c87f7';
+        el.style.fontSize = '0.75em';
+        return el;
+    }
+    updateDOM() {
+        return false;
+    }
+    // DOM export (copy/paste)
+    exportDOM() {
+        const el = document.createElement('sup');
+        el.setAttribute('data-footnote-id', this.__footnoteId);
+        el.textContent = `[^${this.__footnoteId}]`;
+        return { element: el };
+    }
+    static importDOM() {
+        return {
+            sup: (domNode) => {
+                if (!domNode.hasAttribute('data-footnote-id'))
+                    return null;
+                return { conversion: $convertFootnoteElement, priority: 1 };
+            },
+        };
+    }
+    // Render as React element
+    decorate() {
+        return createElement('span', null, `[${this.__footnoteId}]`);
+    }
+}
+// ---------------------------------------------------------------------------
+// Factory + type guard
+// ---------------------------------------------------------------------------
+export function $createFootnoteNode(footnoteId) {
+    return $applyNodeReplacement(new FootnoteNode(footnoteId));
+}
+export function $isFootnoteNode(node) {
+    return node instanceof FootnoteNode;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * FrontmatterNode - A CodeNode variant for YAML frontmatter
+ * Extends CodeNode to get all the code editing behavior, but serializes as --- delimited frontmatter
+ */
+import { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, Spread } from 'lexical';
+import { CodeNode, SerializedCodeNode } from '@lexical/code';
+export type SerializedFrontmatterNode = Spread<{
+    type: 'frontmatter';
+}, SerializedCodeNode>;
+export declare class FrontmatterNode extends CodeNode {
+    static getType(): string;
+    static clone(node: FrontmatterNode): FrontmatterNode;
+    constructor(key?: NodeKey);
+    getLanguage(): string;
+    setLanguage(_language: string | null | undefined): this;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: FrontmatterNode, dom: HTMLElement, config: EditorConfig): boolean;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(serializedNode: SerializedFrontmatterNode): FrontmatterNode;
+    exportJSON(): SerializedFrontmatterNode;
+}
+export declare function $createFrontmatterNode(): FrontmatterNode;
+export declare function $isFrontmatterNode(node: LexicalNode | null | undefined): node is FrontmatterNode;

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

@@ -0,0 +1,88 @@
+/**
+ * FrontmatterNode - A CodeNode variant for YAML frontmatter
+ * Extends CodeNode to get all the code editing behavior, but serializes as --- delimited frontmatter
+ */
+import { $applyNodeReplacement, $createTextNode, } from 'lexical';
+import { CodeNode } from '@lexical/code';
+export class FrontmatterNode extends CodeNode {
+    static getType() {
+        return 'frontmatter';
+    }
+    static clone(node) {
+        return new FrontmatterNode(node.__key);
+    }
+    constructor(key) {
+        super('yaml', key);
+    }
+    // Override to always return yaml
+    getLanguage() {
+        return 'yaml';
+    }
+    // Prevent language from being changed
+    setLanguage(_language) {
+        // No-op - frontmatter is always yaml
+        return this;
+    }
+    createDOM(config) {
+        void config;
+        const dom = super.createDOM(config);
+        dom.classList.add('frontmatter-code');
+        return dom;
+    }
+    updateDOM(prevNode, dom, config) {
+        void config;
+        const updated = super.updateDOM(prevNode, dom, config);
+        dom.classList.add('frontmatter-code');
+        return updated;
+    }
+    exportDOM() {
+        const element = document.createElement('pre');
+        element.setAttribute('data-frontmatter', 'true');
+        const code = document.createElement('code');
+        code.className = 'language-yaml';
+        code.textContent = this.getTextContent();
+        element.appendChild(code);
+        return { element };
+    }
+    static importDOM() {
+        return {
+            pre: (node) => {
+                const element = node;
+                if (element.getAttribute('data-frontmatter') === 'true') {
+                    return {
+                        conversion: convertPreElement,
+                        priority: 2, // Higher priority than CodeNode
+                    };
+                }
+                return null;
+            },
+        };
+    }
+    static importJSON(serializedNode) {
+        void serializedNode;
+        const node = $createFrontmatterNode();
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'frontmatter',
+        };
+    }
+}
+function convertPreElement(domNode) {
+    const element = domNode;
+    const code = element.querySelector('code');
+    const value = code?.textContent || '';
+    const node = $createFrontmatterNode();
+    if (value) {
+        node.append($createTextNode(value));
+    }
+    return { node };
+}
+export function $createFrontmatterNode() {
+    return $applyNodeReplacement(new FrontmatterNode());
+}
+export function $isFrontmatterNode(node) {
+    return node instanceof FrontmatterNode;
+}

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

@@ -0,0 +1,17 @@
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
+export type SerializedHorizontalRuleNode = SerializedLexicalNode;
+export declare class HorizontalRuleNode extends DecoratorNode<JSX.Element> {
+    static getType(): string;
+    static clone(node: HorizontalRuleNode): HorizontalRuleNode;
+    constructor(key?: NodeKey);
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+    static importJSON(_serializedNode: SerializedHorizontalRuleNode): HorizontalRuleNode;
+    exportJSON(): SerializedHorizontalRuleNode;
+    decorate(): JSX.Element;
+    isInline(): boolean;
+}
+export declare function $createHorizontalRuleNode(): HorizontalRuleNode;
+export declare function $isHorizontalRuleNode(node: LexicalNode | null | undefined): node is HorizontalRuleNode;

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

@@ -0,0 +1,57 @@
+import { DecoratorNode, } from 'lexical';
+export class HorizontalRuleNode extends DecoratorNode {
+    static getType() {
+        return 'horizontalrule';
+    }
+    static clone(node) {
+        return new HorizontalRuleNode(node.__key);
+    }
+    constructor(key) {
+        super(key);
+    }
+    createDOM() {
+        const element = document.createElement('hr');
+        element.className = 'divider-block';
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importDOM() {
+        return {
+            hr: () => ({
+                conversion: () => {
+                    return { node: new HorizontalRuleNode() };
+                },
+                priority: 0,
+            }),
+        };
+    }
+    exportDOM() {
+        const element = document.createElement('hr');
+        element.className = 'divider-block';
+        return { element };
+    }
+    static importJSON(_serializedNode) {
+        return new HorizontalRuleNode();
+    }
+    exportJSON() {
+        return {
+            type: 'horizontalrule',
+            version: 1,
+        };
+    }
+    decorate() {
+        // This will be rendered by React
+        return null;
+    }
+    isInline() {
+        return false;
+    }
+}
+export function $createHorizontalRuleNode() {
+    return new HorizontalRuleNode();
+}
+export function $isHorizontalRuleNode(node) {
+    return node instanceof HorizontalRuleNode;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * HtmlNode — Decorator node that carries raw HTML markup opaquely through
+ * the mdast <-> Lexical pipeline for round-trip fidelity. The content is
+ * never rendered as live DOM (never assigned via innerHTML) — it is always
+ * displayed as inert text, matching the "opaque preservation, not live
+ * rendering" scope decision for issue #909.
+ */
+import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+export type SerializedHtmlNode = Spread<{
+    html: string;
+    inline: boolean;
+}, SerializedLexicalNode>;
+export declare class HtmlNode extends DecoratorNode<JSX.Element> {
+    __html: string;
+    __inline: boolean;
+    static getType(): string;
+    static clone(node: HtmlNode): HtmlNode;
+    constructor(html: string, inline?: boolean, key?: NodeKey);
+    static importJSON(serializedNode: SerializedHtmlNode): HtmlNode;
+    exportJSON(): SerializedHtmlNode;
+    createDOM(): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    updateDOM(prevNode: HtmlNode): boolean;
+    getTextContent(): string;
+    getHtml(): string;
+    setHtml(html: string): void;
+    isInline(): boolean;
+    decorate(): JSX.Element;
+}
+export declare function $createHtmlNode(html: string, inline?: boolean): HtmlNode;
+export declare function $isHtmlNode(node: LexicalNode | null | undefined): node is HtmlNode;

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

@@ -0,0 +1,121 @@
+/**
+ * HtmlNode — Decorator node that carries raw HTML markup opaquely through
+ * the mdast <-> Lexical pipeline for round-trip fidelity. The content is
+ * never rendered as live DOM (never assigned via innerHTML) — it is always
+ * displayed as inert text, matching the "opaque preservation, not live
+ * rendering" scope decision for issue #909.
+ */
+import { DecoratorNode, $applyNodeReplacement, } from 'lexical';
+import { createElement, Fragment } from 'react';
+// btoa/atob only support Latin1 — encode/decode through UTF-8 percent-escaping
+// first so HTML containing non-Latin1 characters (emoji, accents, CJK, etc.)
+// doesn't throw during copy/paste DOM export/import.
+function encodeUnicodeBase64(str) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16))));
+}
+function decodeUnicodeBase64(str) {
+    return decodeURIComponent(atob(str)
+        .split('')
+        .map((c) => '%' + c.charCodeAt(0).toString(16).padStart(2, '0'))
+        .join(''));
+}
+function $convertHtmlElement(domNode) {
+    const encoded = domNode.getAttribute('data-lexical-html');
+    const inline = domNode.getAttribute('data-lexical-inline') === 'true';
+    if (encoded === null) {
+        return null;
+    }
+    // Malformed/hand-edited clipboard data can contain an invalid base64
+    // payload — decode defensively so a bad paste doesn't crash the whole
+    // paste operation.
+    try {
+        const html = decodeUnicodeBase64(encoded);
+        return { node: $createHtmlNode(html, inline) };
+    }
+    catch {
+        return null;
+    }
+}
+export class HtmlNode extends DecoratorNode {
+    __html;
+    __inline;
+    static getType() {
+        return 'html';
+    }
+    static clone(node) {
+        return new HtmlNode(node.__html, node.__inline, node.__key);
+    }
+    constructor(html, inline, key) {
+        super(key);
+        this.__html = html;
+        this.__inline = inline ?? false;
+    }
+    static importJSON(serializedNode) {
+        return $createHtmlNode(serializedNode.html, serializedNode.inline);
+    }
+    exportJSON() {
+        return {
+            type: 'html',
+            version: 1,
+            html: this.getHtml(),
+            inline: this.__inline,
+        };
+    }
+    createDOM() {
+        const element = document.createElement(this.__inline ? 'span' : 'div');
+        element.className = 'editor-raw-html';
+        return element;
+    }
+    exportDOM() {
+        const element = document.createElement(this.__inline ? 'span' : 'div');
+        // Encode as base64 to avoid attribute-escaping issues with copy/paste
+        element.setAttribute('data-lexical-html', encodeUnicodeBase64(this.__html));
+        element.setAttribute('data-lexical-inline', `${this.__inline}`);
+        element.textContent = this.__html;
+        return { element };
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-html')) {
+                    return null;
+                }
+                return { conversion: $convertHtmlElement, priority: 2 };
+            },
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-html')) {
+                    return null;
+                }
+                return { conversion: $convertHtmlElement, priority: 1 };
+            },
+        };
+    }
+    updateDOM(prevNode) {
+        return this.__inline !== prevNode.__inline;
+    }
+    getTextContent() {
+        return this.__html;
+    }
+    getHtml() {
+        return this.__html;
+    }
+    setHtml(html) {
+        const writable = this.getWritable();
+        writable.__html = html;
+    }
+    isInline() {
+        return this.__inline;
+    }
+    decorate() {
+        // createDOM() already provides the wrapping element (with class
+        // 'editor-raw-html') that this content is portaled into — render only
+        // the text here, not another nested copy of the same wrapper.
+        return createElement(Fragment, null, this.__html);
+    }
+}
+export function $createHtmlNode(html, inline = false) {
+    return $applyNodeReplacement(new HtmlNode(html, inline));
+}
+export function $isHtmlNode(node) {
+    return node instanceof HtmlNode;
+}

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

@@ -0,0 +1,11 @@
+import { NodeKey } from 'lexical';
+interface ImageComponentProps {
+    src: string;
+    alt: string;
+    title?: string;
+    width?: number;
+    height?: number;
+    nodeKey: NodeKey;
+}
+export declare function ImageComponent({ src, alt, title, width, height, nodeKey, }: ImageComponentProps): JSX.Element;
+export {};