@moldable-ai/editor 0.1.1 → 0.1.2

package/dist/components/markdown.d.ts

@@ -0,0 +1,2 @@
+export { Markdown } from '@moldable/ui';
+//# sourceMappingURL=markdown.d.ts.map

package/dist/components/markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/components/markdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/markdown.js

@@ -0,0 +1,2 @@
+// Re-export from @moldable/ui where the Markdown component now lives
+export { Markdown } from '@moldable/ui';

package/dist/lib/lexical/mention-node.d.ts

@@ -0,0 +1,28 @@
+import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedTextNode, type Spread, TextNode } from 'lexical';
+export type SerializedMentionNode = Spread<{
+    username: string;
+}, SerializedTextNode>;
+/**
+ * MentionNode - A custom node for @mentions
+ * Extends TextNode to inherit text behavior but with custom styling
+ */
+export declare class MentionNode extends TextNode {
+    __username: string;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    constructor(username: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+    static importJSON(serializedNode: SerializedMentionNode): MentionNode;
+    exportJSON(): SerializedMentionNode;
+    getUsername(): string;
+    getTextContent(): string;
+    canInsertTextBefore(): boolean;
+    canInsertTextAfter(): boolean;
+    isTextEntity(): true;
+}
+export declare function $createMentionNode(username: string): MentionNode;
+export declare function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode;
+//# sourceMappingURL=mention-node.d.ts.map

package/dist/lib/lexical/mention-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-node.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/mention-node.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EAErB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,kBAAkB,EACvB,KAAK,MAAM,EACX,QAAQ,EACT,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,qBAAqB,GAAG,MAAM,CACxC;IACE,QAAQ,EAAE,MAAM,CAAA;CACjB,EACD,kBAAkB,CACnB,CAAA;AAiBD;;;GAGG;AACH,qBAAa,WAAY,SAAQ,QAAQ;IACvC,UAAU,EAAE,MAAM,CAAA;IAElB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,WAAW;gBAIhC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAK3C,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAQ5C,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,GAAG,OAAO;IAQ1E,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAc3C,SAAS,IAAI,eAAe;IAQ5B,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,qBAAqB,GAAG,WAAW;IASrE,UAAU,IAAI,qBAAqB;IAQnC,WAAW,IAAI,MAAM;IAIrB,cAAc,IAAI,MAAM;IAIxB,mBAAmB,IAAI,OAAO;IAI9B,kBAAkB,IAAI,OAAO;IAI7B,YAAY,IAAI,IAAI;CAGrB;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAIhE;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,WAAW,CAErB"}

package/dist/lib/lexical/mention-node.js

@@ -0,0 +1,102 @@
+import { $applyNodeReplacement, TextNode, } from 'lexical';
+function $convertMentionElement(domNode) {
+    const textContent = domNode.textContent;
+    if (textContent !== null) {
+        // Extract username from @username format
+        const username = textContent.startsWith('@')
+            ? textContent.slice(1)
+            : textContent;
+        const node = $createMentionNode(username);
+        return { node };
+    }
+    return null;
+}
+/**
+ * MentionNode - A custom node for @mentions
+ * Extends TextNode to inherit text behavior but with custom styling
+ */
+export class MentionNode extends TextNode {
+    __username;
+    static getType() {
+        return 'mention';
+    }
+    static clone(node) {
+        return new MentionNode(node.__username, node.__key);
+    }
+    constructor(username, key) {
+        super(`@${username}`, key);
+        this.__username = username;
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        dom.className = 'mention';
+        dom.setAttribute('data-lexical-mention', 'true');
+        dom.setAttribute('data-mention-username', this.__username);
+        return dom;
+    }
+    updateDOM(prevNode, dom, config) {
+        const isUpdated = super.updateDOM(prevNode, dom, config);
+        if (prevNode.__username !== this.__username) {
+            dom.setAttribute('data-mention-username', this.__username);
+        }
+        return isUpdated;
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (domNode.hasAttribute('data-lexical-mention')) {
+                    return {
+                        conversion: $convertMentionElement,
+                        priority: 1,
+                    };
+                }
+                return null;
+            },
+        };
+    }
+    exportDOM() {
+        const element = document.createElement('span');
+        element.setAttribute('data-lexical-mention', 'true');
+        element.setAttribute('data-mention-username', this.__username);
+        element.textContent = this.getTextContent();
+        return { element };
+    }
+    static importJSON(serializedNode) {
+        const node = $createMentionNode(serializedNode.username);
+        node.setFormat(serializedNode.format);
+        node.setDetail(serializedNode.detail);
+        node.setMode(serializedNode.mode);
+        node.setStyle(serializedNode.style);
+        return node;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'mention',
+            username: this.__username,
+        };
+    }
+    getUsername() {
+        return this.__username;
+    }
+    getTextContent() {
+        return `@${this.__username}`;
+    }
+    canInsertTextBefore() {
+        return false;
+    }
+    canInsertTextAfter() {
+        return false;
+    }
+    isTextEntity() {
+        return true;
+    }
+}
+export function $createMentionNode(username) {
+    const mentionNode = new MentionNode(username);
+    mentionNode.setMode('segmented').toggleDirectionless();
+    return $applyNodeReplacement(mentionNode);
+}
+export function $isMentionNode(node) {
+    return node instanceof MentionNode;
+}

package/dist/lib/lexical/translation.d.ts

@@ -0,0 +1,53 @@
+import { ElementNode, LexicalEditor, LexicalNode } from 'lexical';
+/**
+ * A block (paragraph, heading, etc.) ready for translation
+ */
+export interface TranslatableBlock {
+    /** The block node's key */
+    nodeKey: string;
+    /** XML string with text wrapped in <x id="nodeKey"> tags */
+    xml: string;
+    /** Map of text node keys to their format info */
+    formatMap: Map<string, number>;
+    /** Original node keys in order (for rebuilding if order changes) */
+    nodeOrder: string[];
+}
+/**
+ * Extract translatable blocks from the editor.
+ * Each block's text nodes are wrapped in XML tags with their node keys as IDs.
+ */
+export declare function $extractTranslatableBlocks(_editor: LexicalEditor): TranslatableBlock[];
+/**
+ * Parse translated XML response, extracting text by node ID.
+ * Returns a map of nodeKey -> translated text, plus the new order of nodes.
+ */
+export declare function parseTranslatedXml(xml: string): {
+    translations: Map<string, string>;
+    newOrder: string[];
+};
+/**
+ * Apply translations to a block node.
+ * Rebuilds the text nodes with translated content, preserving original formatting.
+ */
+export declare function $applyBlockTranslation(blockNode: ElementNode, translations: Map<string, string>, formatMap: Map<string, number>, newOrder: string[]): void;
+/**
+ * Get a node by its key from the editor
+ */
+export declare function $getNodeByKey(key: string): LexicalNode | null;
+export interface TranslatableSegment {
+    nodeKey: string;
+    text: string;
+    type: string;
+}
+/** @deprecated Use $extractTranslatableBlocks instead */
+export declare function $extractTranslatableSegments(): TranslatableSegment[];
+/** @deprecated */
+export declare function $applyTranslations(translations: Map<string, string>): void;
+/** @deprecated */
+export declare function $getTextSegmentsForTranslation(): {
+    texts: string[];
+    nodeKeys: string[];
+};
+/** @deprecated Use block-level translation */
+export declare function translateEditorState(editor: LexicalEditor, translateFn: (texts: string[]) => Promise<string[]>): Promise<string>;
+//# sourceMappingURL=translation.d.ts.map

package/dist/lib/lexical/translation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/translation.ts"],"names":[],"mappings":"AAIA,OAAO,EAOL,WAAW,EACX,aAAa,EACb,WAAW,EACZ,MAAM,SAAS,CAAA;AAEhB;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAA;IACX,iDAAiD;IACjD,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,oEAAoE;IACpE,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,aAAa,GACrB,iBAAiB,EAAE,CAkFrB;AAUD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG;IAC/C,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB,CAgBA;AAUD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,WAAW,EACtB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EACjC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,QAAQ,EAAE,MAAM,EAAE,GACjB,IAAI,CAeN;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAE7D;AAMD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb;AAED,yDAAyD;AACzD,wBAAgB,4BAA4B,IAAI,mBAAmB,EAAE,CA0BpE;AAED,kBAAkB;AAClB,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAmB1E;AAED,kBAAkB;AAClB,wBAAgB,8BAA8B,IAAI;IAChD,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB,CAqBA;AAED,8CAA8C;AAC9C,wBAAsB,oBAAoB,CACxC,MAAM,EAAE,aAAa,EACrB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,GAClD,OAAO,CAAC,MAAM,CAAC,CA2EjB"}

package/dist/lib/lexical/translation.js

@@ -0,0 +1,267 @@
+import { $isCodeNode } from '@lexical/code';
+import { $isLinkNode } from '@lexical/link';
+import { $isListItemNode } from '@lexical/list';
+import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
+import { $createTextNode, $getRoot, $isElementNode, $isParagraphNode, $isTextNode, $getNodeByKey as $lexicalGetNodeByKey, } from 'lexical';
+/**
+ * Extract translatable blocks from the editor.
+ * Each block's text nodes are wrapped in XML tags with their node keys as IDs.
+ */
+export function $extractTranslatableBlocks(_editor) {
+    const blocks = [];
+    const root = $getRoot();
+    function processBlockNode(node) {
+        const formatMap = new Map();
+        const nodeOrder = [];
+        let xml = '';
+        function processChildren(parent) {
+            if ($isTextNode(parent)) {
+                const key = parent.getKey();
+                const text = parent.getTextContent();
+                const format = parent.getFormat();
+                formatMap.set(key, format);
+                nodeOrder.push(key);
+                xml += `<x id="${key}">${escapeXml(text)}</x>`;
+            }
+            else if ($isLinkNode(parent)) {
+                // For links, wrap the whole link content but track inner text nodes
+                const href = parent.getURL();
+                const linkKey = parent.getKey();
+                xml += `<a href="${escapeXml(href)}" id="${linkKey}">`;
+                for (const child of parent.getChildren()) {
+                    processChildren(child);
+                }
+                xml += '</a>';
+            }
+            else if ($isElementNode(parent)) {
+                for (const child of parent.getChildren()) {
+                    processChildren(child);
+                }
+            }
+        }
+        processChildren(node);
+        // Skip empty blocks
+        if (!xml.trim() || nodeOrder.length === 0) {
+            return null;
+        }
+        return {
+            nodeKey: node.getKey(),
+            xml,
+            formatMap,
+            nodeOrder,
+        };
+    }
+    function walkTree(node) {
+        // Skip code blocks - don't translate code
+        if ($isCodeNode(node)) {
+            return;
+        }
+        // These are our translatable block types
+        if ($isParagraphNode(node) ||
+            $isHeadingNode(node) ||
+            $isQuoteNode(node) ||
+            $isListItemNode(node)) {
+            const block = processBlockNode(node);
+            if (block) {
+                blocks.push(block);
+            }
+            return;
+        }
+        // For lists and other containers, recurse into children
+        if ($isElementNode(node)) {
+            for (const child of node.getChildren()) {
+                walkTree(child);
+            }
+        }
+    }
+    for (const child of root.getChildren()) {
+        walkTree(child);
+    }
+    return blocks;
+}
+function escapeXml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+/**
+ * Parse translated XML response, extracting text by node ID.
+ * Returns a map of nodeKey -> translated text, plus the new order of nodes.
+ */
+export function parseTranslatedXml(xml) {
+    const translations = new Map();
+    const newOrder = [];
+    // Simple regex-based parser for our known XML structure
+    // Matches <x id="...">content</x> and <a href="..." id="...">...</a>
+    const tagRegex = /<x id="([^"]+)">([^<]*)<\/x>/g;
+    let match;
+    while ((match = tagRegex.exec(xml)) !== null) {
+        const [, id, content] = match;
+        translations.set(id, unescapeXml(content));
+        newOrder.push(id);
+    }
+    return { translations, newOrder };
+}
+function unescapeXml(text) {
+    return text
+        .replace(/&quot;/g, '"')
+        .replace(/&gt;/g, '>')
+        .replace(/&lt;/g, '<')
+        .replace(/&amp;/g, '&');
+}
+/**
+ * Apply translations to a block node.
+ * Rebuilds the text nodes with translated content, preserving original formatting.
+ */
+export function $applyBlockTranslation(blockNode, translations, formatMap, newOrder) {
+    // Clear existing children
+    blockNode.clear();
+    // Rebuild in the new order with translated text and original formatting
+    for (const nodeKey of newOrder) {
+        const translatedText = translations.get(nodeKey);
+        const format = formatMap.get(nodeKey) ?? 0;
+        if (translatedText !== undefined) {
+            const textNode = $createTextNode(translatedText);
+            textNode.setFormat(format);
+            blockNode.append(textNode);
+        }
+    }
+}
+/**
+ * Get a node by its key from the editor
+ */
+export function $getNodeByKey(key) {
+    return $lexicalGetNodeByKey(key);
+}
+/** @deprecated Use $extractTranslatableBlocks instead */
+export function $extractTranslatableSegments() {
+    const segments = [];
+    const root = $getRoot();
+    function extractFromNode(node) {
+        if ($isTextNode(node)) {
+            const text = node.getTextContent();
+            if (text.trim()) {
+                segments.push({
+                    nodeKey: node.getKey(),
+                    text: text,
+                    type: 'text',
+                });
+            }
+        }
+        else if ($isElementNode(node)) {
+            for (const child of node.getChildren()) {
+                extractFromNode(child);
+            }
+        }
+    }
+    for (const child of root.getChildren()) {
+        extractFromNode(child);
+    }
+    return segments;
+}
+/** @deprecated */
+export function $applyTranslations(translations) {
+    const root = $getRoot();
+    function applyToNode(node) {
+        if ($isTextNode(node)) {
+            const translation = translations.get(node.getKey());
+            if (translation !== undefined) {
+                node.setTextContent(translation);
+            }
+        }
+        else if ($isElementNode(node)) {
+            for (const child of node.getChildren()) {
+                applyToNode(child);
+            }
+        }
+    }
+    for (const child of root.getChildren()) {
+        applyToNode(child);
+    }
+}
+/** @deprecated */
+export function $getTextSegmentsForTranslation() {
+    const texts = [];
+    const nodeKeys = [];
+    const root = $getRoot();
+    function processNode(node) {
+        if ($isTextNode(node)) {
+            texts.push(node.getTextContent());
+            nodeKeys.push(node.getKey());
+        }
+        else if ($isElementNode(node)) {
+            for (const child of node.getChildren()) {
+                processNode(child);
+            }
+        }
+    }
+    for (const child of root.getChildren()) {
+        processNode(child);
+    }
+    return { texts, nodeKeys };
+}
+/** @deprecated Use block-level translation */
+export async function translateEditorState(editor, translateFn) {
+    const segments = await new Promise((resolve) => {
+        editor.getEditorState().read(() => {
+            resolve($extractTranslatableSegments());
+        });
+    });
+    if (segments.length === 0) {
+        return '';
+    }
+    const textsToTranslate = segments.map((s) => s.text);
+    const translations = await translateFn(textsToTranslate);
+    const translationsByIndex = new Map();
+    translations.forEach((translation, index) => {
+        translationsByIndex.set(index, translation);
+    });
+    const { createMoldableHeadlessEditor } = await import('./headless-editor');
+    const translatedEditor = createMoldableHeadlessEditor();
+    const { $convertToMarkdownString, $convertFromMarkdownString, markdownTransformers, } = await import('./markdown-transformers');
+    const originalMarkdown = await new Promise((resolve) => {
+        editor.getEditorState().read(() => {
+            resolve($convertToMarkdownString({ transformers: markdownTransformers }));
+        });
+    });
+    await new Promise((resolve) => {
+        translatedEditor.update(() => {
+            $convertFromMarkdownString({
+                markdown: originalMarkdown,
+                transformers: markdownTransformers,
+            });
+            resolve();
+        });
+    });
+    await new Promise((resolve) => {
+        translatedEditor.update(() => {
+            let index = 0;
+            const root = $getRoot();
+            function applyToNode(node) {
+                if ($isTextNode(node)) {
+                    const translation = translationsByIndex.get(index);
+                    if (translation !== undefined) {
+                        node.setTextContent(translation);
+                    }
+                    index++;
+                }
+                else if ($isElementNode(node)) {
+                    for (const child of node.getChildren()) {
+                        applyToNode(child);
+                    }
+                }
+            }
+            for (const child of root.getChildren()) {
+                applyToNode(child);
+            }
+            resolve();
+        });
+    });
+    return new Promise((resolve) => {
+        translatedEditor.getEditorState().read(() => {
+            resolve($convertToMarkdownString({ transformers: markdownTransformers }));
+        });
+    });
+}

package/dist/lib/lexical/translation.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=translation.test.d.ts.map

package/dist/lib/lexical/translation.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation.test.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/translation.test.ts"],"names":[],"mappings":""}

package/dist/lib/lexical/translation.test.js

@@ -0,0 +1,329 @@
+import { describe, expect, it } from 'vitest';
+import { createMoldableHeadlessEditor } from './headless-editor';
+import { $extractTranslatableSegments, $applyTranslations, $getTextSegmentsForTranslation, translateEditorState, } from './translation';
+import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers } from './markdown-transformers';
+describe('Translation Utilities', () => {
+    describe('$extractTranslatableSegments', () => {
+        it('extracts text from a simple paragraph', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: 'Hello world' });
+                    resolve();
+                });
+            });
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            expect(segments).toHaveLength(1);
+            expect(segments[0].text).toBe('Hello world');
+        });
+        it('extracts text from multiple paragraphs', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: 'First paragraph\n\nSecond paragraph' });
+                    resolve();
+                });
+            });
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            expect(segments).toHaveLength(2);
+            expect(segments[0].text).toBe('First paragraph');
+            expect(segments[1].text).toBe('Second paragraph');
+        });
+        it('extracts text from headings', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: '# Title\n\nContent' });
+                    resolve();
+                });
+            });
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            expect(segments).toHaveLength(2);
+            expect(segments[0].text).toBe('Title');
+            expect(segments[1].text).toBe('Content');
+        });
+        it('extracts text from list items', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: '- Item 1\n- Item 2\n- Item 3' });
+                    resolve();
+                });
+            });
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            expect(segments).toHaveLength(3);
+            expect(segments[0].text).toBe('Item 1');
+            expect(segments[1].text).toBe('Item 2');
+            expect(segments[2].text).toBe('Item 3');
+        });
+        it('handles bold and italic text as separate segments', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: 'This is **bold** and *italic* text' });
+                    resolve();
+                });
+            });
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            // Bold and italic are separate text nodes
+            expect(segments.length).toBeGreaterThanOrEqual(3);
+            const allText = segments.map(s => s.text).join('');
+            expect(allText).toContain('bold');
+            expect(allText).toContain('italic');
+        });
+        it('extracts text from blockquotes', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: '> This is a quote' });
+                    resolve();
+                });
+            });
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            expect(segments).toHaveLength(1);
+            expect(segments[0].text).toBe('This is a quote');
+        });
+    });
+    describe('$applyTranslations', () => {
+        it('applies translations to text nodes', async () => {
+            const editor = createMoldableHeadlessEditor();
+            // Set up initial content
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: 'Hello world' });
+                    resolve();
+                });
+            });
+            // Get segments
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            // Apply translations
+            const translationMap = new Map();
+            translationMap.set(segments[0].nodeKey, 'Hej verden');
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $applyTranslations(translationMap);
+                    resolve();
+                });
+            });
+            // Verify translation was applied
+            const result = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($convertToMarkdownString({ transformers: markdownTransformers }));
+                });
+            });
+            expect(result).toBe('Hej verden');
+        });
+        it('preserves structure when applying translations', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: '# Title\n\n- Item 1\n- Item 2' });
+                    resolve();
+                });
+            });
+            const segments = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($extractTranslatableSegments());
+                });
+            });
+            // Translate each segment
+            const translationMap = new Map();
+            segments.forEach((seg) => {
+                if (seg.text === 'Title')
+                    translationMap.set(seg.nodeKey, 'Titel');
+                if (seg.text === 'Item 1')
+                    translationMap.set(seg.nodeKey, 'Element 1');
+                if (seg.text === 'Item 2')
+                    translationMap.set(seg.nodeKey, 'Element 2');
+            });
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $applyTranslations(translationMap);
+                    resolve();
+                });
+            });
+            const result = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($convertToMarkdownString({ transformers: markdownTransformers }));
+                });
+            });
+            expect(result).toContain('# Titel');
+            expect(result).toContain('- Element 1');
+            expect(result).toContain('- Element 2');
+        });
+    });
+    describe('$getTextSegmentsForTranslation', () => {
+        it('returns parallel arrays of texts and keys', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: 'Hello\n\nWorld' });
+                    resolve();
+                });
+            });
+            const result = await new Promise((resolve) => {
+                editor.getEditorState().read(() => {
+                    resolve($getTextSegmentsForTranslation());
+                });
+            });
+            expect(result.texts).toHaveLength(2);
+            expect(result.nodeKeys).toHaveLength(2);
+            expect(result.texts[0]).toBe('Hello');
+            expect(result.texts[1]).toBe('World');
+        });
+    });
+    describe('translateEditorState', () => {
+        it('translates content and returns markdown', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: '# Hello\n\nWorld' });
+                    resolve();
+                });
+            });
+            // Mock translate function
+            const translateFn = async (texts) => {
+                return texts.map((t) => {
+                    if (t === 'Hello')
+                        return 'Bonjour';
+                    if (t === 'World')
+                        return 'Monde';
+                    return t;
+                });
+            };
+            const result = await translateEditorState(editor, translateFn);
+            expect(result).toContain('# Bonjour');
+            expect(result).toContain('Monde');
+        });
+        it('preserves formatting during translation', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({
+                        markdown: '**Bold text** and *italic text*'
+                    });
+                    resolve();
+                });
+            });
+            const translateFn = async (texts) => {
+                return texts.map((t) => `[${t}]`); // Just wrap for testing
+            };
+            const result = await translateEditorState(editor, translateFn);
+            // Should preserve bold and italic markers
+            expect(result).toContain('**');
+            expect(result).toContain('*');
+        });
+        it('handles complex medical note structure', async () => {
+            const editor = createMoldableHeadlessEditor();
+            const medicalNote = `# Patient Notes
+
+## Chief Complaint
+Patient presents with chest pain.
+
+## Assessment
+- Stable condition
+- No immediate concerns
+
+> Doctor's note: Follow up in 2 weeks`;
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: medicalNote });
+                    resolve();
+                });
+            });
+            // Simple translation that uppercases everything
+            const translateFn = async (texts) => {
+                return texts.map((t) => t.toUpperCase());
+            };
+            const result = await translateEditorState(editor, translateFn);
+            // Should preserve structure
+            expect(result).toContain('# PATIENT NOTES');
+            expect(result).toContain('## CHIEF COMPLAINT');
+            expect(result).toContain('- STABLE CONDITION');
+            expect(result).toContain('>');
+        });
+        it('handles empty content', async () => {
+            const editor = createMoldableHeadlessEditor();
+            await new Promise((resolve) => {
+                editor.update(() => {
+                    $convertFromMarkdownString({ markdown: '' });
+                    resolve();
+                });
+            });
+            const translateFn = async (texts) => texts;
+            const result = await translateEditorState(editor, translateFn);
+            expect(result).toBe('');
+        });
+    });
+    describe('round-trip translation', () => {
+        const testCases = [
+            { name: 'simple paragraph', markdown: 'Hello world' },
+            { name: 'heading', markdown: '# Title' },
+            { name: 'multiple headings', markdown: '# H1\n\n## H2\n\n### H3' },
+            { name: 'bullet list', markdown: '- Item 1\n- Item 2\n- Item 3' },
+            { name: 'numbered list', markdown: '1. First\n2. Second\n3. Third' },
+            { name: 'blockquote', markdown: '> This is a quote' },
+            { name: 'bold text', markdown: '**bold**' },
+            { name: 'italic text', markdown: '*italic*' },
+            { name: 'mixed formatting', markdown: 'Normal **bold** and *italic*' },
+            { name: 'code inline', markdown: 'Use `code` here' },
+            { name: 'horizontal rule', markdown: 'Before\n\n***\n\nAfter' },
+        ];
+        testCases.forEach(({ name, markdown }) => {
+            it(`preserves structure for ${name}`, async () => {
+                const editor = createMoldableHeadlessEditor();
+                await new Promise((resolve) => {
+                    editor.update(() => {
+                        $convertFromMarkdownString({ markdown });
+                        resolve();
+                    });
+                });
+                // Identity translation (no change)
+                const translateFn = async (texts) => texts;
+                const result = await translateEditorState(editor, translateFn);
+                // Re-import and re-export to normalize
+                const editor2 = createMoldableHeadlessEditor();
+                await new Promise((resolve) => {
+                    editor2.update(() => {
+                        $convertFromMarkdownString({ markdown });
+                        resolve();
+                    });
+                });
+                const expected = await new Promise((resolve) => {
+                    editor2.getEditorState().read(() => {
+                        resolve($convertToMarkdownString({ transformers: markdownTransformers }));
+                    });
+                });
+                expect(result).toBe(expected);
+            });
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/editor",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Rich text markdown editor for Moldable applications",
   "author": "Desiderata LLC",
   "license": "Elastic-2.0",
@@ -32,6 +32,15 @@
     "src/styles",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
+    "format": "prettier --write . --ignore-path ../../.prettierignore",
+    "check-types": "tsc --noEmit"
+  },
   "dependencies": {
     "@lexical/clipboard": "^0.39.0",
     "@lexical/code": "^0.39.0",
@@ -43,6 +52,7 @@
     "@lexical/react": "^0.39.0",
     "@lexical/rich-text": "^0.39.0",
     "@lexical/selection": "^0.39.0",
+    "@lexical/headless": "^0.39.0",
     "@lexical/utils": "^0.39.0",
     "lexical": "^0.39.0",
     "lucide-react": "^0.473.0",
@@ -51,31 +61,21 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
-    "@lexical/headless": "^0.39.0",
+    "@moldable-ai/eslint-config": "workspace:*",
+    "@moldable-ai/prettier-config": "workspace:*",
+    "@moldable-ai/typescript-config": "workspace:*",
+    "@moldable-ai/ui": "workspace:^",
     "@types/jsdom": "^27.0.0",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "jsdom": "^27.4.0",
     "typescript": "^5.8.3",
-    "vitest": "^4.0.16",
-    "@moldable-ai/eslint-config": "0.0.1",
-    "@moldable-ai/prettier-config": "0.0.1",
-    "@moldable-ai/typescript-config": "0.0.1",
-    "@moldable-ai/ui": "^0.1.1"
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
+    "@moldable-ai/ui": "workspace:^",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@moldable-ai/ui": "^0.1.1"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
-    "format": "prettier --write . --ignore-path ../../.prettierignore",
-    "check-types": "tsc --noEmit"
+    "react-dom": "^19.0.0"
   }
-}
+}