@xlabs-store/core 0.0.1

package/dist/collection/components/x-editor/editor-parser.js

@@ -0,0 +1,326 @@
+/**
+ * HTML ↔ State Parser
+ *
+ * Converts between HTML DOM and EditorState (JSON schema-based).
+ */
+import { 
+// BlockType,
+// HeadingLevel,
+// FormatType,
+// FORMAT_TAG_MAP,
+// BLOCK_TAG_MAP,
+HEADING_TAG_MAP, } from "./types";
+/**
+ * Parses a raw HTML string into a structured `EditorState` object.
+ * Useful for loading saved HTML content into the editor's internal format.
+ *
+ * Flow:
+ * 1. Uses native `DOMParser` to create a virtual document.
+ * 2. Iterates through the body elements.
+ * 3. Maps each HTML tag (P, H1, etc.) to a `BlockNode`.
+ *
+ * @param {string} html - HTML string to parse.
+ * @returns {EditorState} The resulting structured state.
+ */
+export function parseHTML(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+    const body = doc.body;
+    const blocks = [];
+    for (let i = 0; i < body.children.length; i++) {
+        const element = body.children[i];
+        const block = parseBlockElement(element);
+        if (block) {
+            blocks.push(block);
+        }
+    }
+    // Ensure we always have at least one empty block
+    if (blocks.length === 0) {
+        blocks.push({ type: 'paragraph', content: [] });
+    }
+    return { blocks };
+}
+/**
+ * Converts a single block-level Element into a `BlockNode`.
+ * Handles Paragraphs, Headings (H1-H3), Blockquotes, and Code blocks.
+ */
+function parseBlockElement(element) {
+    const tagName = element.tagName.toLowerCase();
+    switch (tagName) {
+        case 'p':
+            return {
+                type: 'paragraph',
+                content: parseInlineContent(element),
+            };
+        case 'h1':
+            return {
+                type: 'heading',
+                level: 1,
+                content: parseInlineContent(element),
+            };
+        case 'h2':
+            return {
+                type: 'heading',
+                level: 2,
+                content: parseInlineContent(element),
+            };
+        case 'h3':
+            return {
+                type: 'heading',
+                level: 3,
+                content: parseInlineContent(element),
+            };
+        case 'blockquote':
+            return {
+                type: 'blockquote',
+                content: parseInlineContent(element),
+            };
+        case 'pre': {
+            // Specifically look for <code> wrapper inside <pre> for code blocks
+            const codeElement = element.querySelector('code');
+            if (codeElement) {
+                return {
+                    type: 'code',
+                    content: parseInlineContent(codeElement),
+                };
+            }
+            return {
+                type: 'code',
+                content: parseInlineContent(element),
+            };
+        }
+        default:
+            // Unknown container elements are treated as paragraphs to preserve text
+            return {
+                type: 'paragraph',
+                content: parseInlineContent(element),
+            };
+    }
+}
+/**
+ * Recursively parses the children of an element into a list of `InlineNode`s.
+ * Handles text nodes, formatting tags (strong, em, u), and style-based variants from other editors.
+ */
+function parseInlineContent(element) {
+    const nodes = [];
+    if (element.childNodes.length === 0) {
+        const text = element.textContent || '';
+        if (text) {
+            nodes.push({ type: 'text', text });
+        }
+        return nodes;
+    }
+    for (let i = 0; i < element.childNodes.length; i++) {
+        const node = element.childNodes[i];
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || '';
+            if (text) {
+                nodes.push({ type: 'text', text });
+            }
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            const childElement = node;
+            const tagName = childElement.tagName.toLowerCase();
+            switch (tagName) {
+                case 'strong':
+                case 'b':
+                    nodes.push({
+                        type: 'bold',
+                        content: parseInlineContent(childElement),
+                    });
+                    break;
+                case 'em':
+                case 'i':
+                    nodes.push({
+                        type: 'italic',
+                        content: parseInlineContent(childElement),
+                    });
+                    break;
+                case 'u':
+                    nodes.push({
+                        type: 'underline',
+                        content: parseInlineContent(childElement),
+                    });
+                    break;
+                case 'br':
+                    // Newlines are mapped to text nodes for the internal schema
+                    nodes.push({ type: 'text', text: '\n' });
+                    break;
+                case 'span': {
+                    // Fallback for pasted content that uses CSS styles instead of tags
+                    const style = childElement.style;
+                    if (style && (style.fontWeight === 'bold' || style.fontWeight === '700')) {
+                        nodes.push({
+                            type: 'bold',
+                            content: parseInlineContent(childElement),
+                        });
+                    }
+                    else if (style.fontStyle === 'italic') {
+                        nodes.push({
+                            type: 'italic',
+                            content: parseInlineContent(childElement),
+                        });
+                    }
+                    else if (style.textDecoration?.includes('underline')) {
+                        nodes.push({
+                            type: 'underline',
+                            content: parseInlineContent(childElement),
+                        });
+                    }
+                    else {
+                        nodes.push(...parseInlineContent(childElement));
+                    }
+                    break;
+                }
+                default:
+                    // Unwrap other inline elements to get their text/formatting
+                    nodes.push(...parseInlineContent(childElement));
+            }
+        }
+    }
+    return nodes;
+}
+/**
+ * Serializes an `EditorState` back into a plain HTML string.
+ * Useful for saving content to a database.
+ */
+export function stateToHTML(state) {
+    return state.blocks.map(block => blockToHTML(block)).join('');
+}
+/** Converts a single block node to its HTML string representation. */
+function blockToHTML(block) {
+    let tag;
+    switch (block.type) {
+        case 'paragraph':
+            tag = 'p';
+            break;
+        case 'heading':
+            tag = HEADING_TAG_MAP[block.level];
+            break;
+        case 'blockquote':
+            tag = 'blockquote';
+            break;
+        case 'code':
+            tag = 'pre';
+            break;
+        default:
+            tag = 'p';
+    }
+    const content = block.content.map(inlineToHTML).join('');
+    if (block.type === 'code') {
+        return `<pre><code>${content}</code></pre>`;
+    }
+    return `<${tag}>${content}</${tag}>`;
+}
+/** Recursively converts an inline node to HTML. */
+function inlineToHTML(node) {
+    switch (node.type) {
+        case 'text':
+            return escapeHTML(node.text);
+        case 'bold':
+            return `<strong>${node.content.map(inlineToHTML).join('')}</strong>`;
+        case 'italic':
+            return `<em>${node.content.map(inlineToHTML).join('')}</em>`;
+        case 'underline':
+            return `<u>${node.content.map(inlineToHTML).join('')}</u>`;
+        default:
+            return '';
+    }
+}
+/** Sanitizes text to prevent XSS and HTML breaking characters. */
+function escapeHTML(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+}
+/**
+ * Directly parses an active HTMLElement (the editor root) into an `EditorState`.
+ * This is the bridge between the live DOM and the JSON state.
+ */
+export function parseDOM(root) {
+    const blocks = [];
+    for (let i = 0; i < root.children.length; i++) {
+        const element = root.children[i];
+        const block = parseBlockElement(element);
+        if (block) {
+            blocks.push(block);
+        }
+    }
+    if (blocks.length === 0) {
+        blocks.push({ type: 'paragraph', content: [] });
+    }
+    return { blocks };
+}
+/**
+ * Reconstructs the DOM tree from a given `EditorState`.
+ * Clears the current root content before appending new nodes.
+ */
+export function stateToDOM(state, root) {
+    root.innerHTML = '';
+    for (const block of state.blocks) {
+        const element = blockToDOMElement(block);
+        root.appendChild(element);
+    }
+}
+/** Converts a BlockNode to an actual HTMLElement. */
+function blockToDOMElement(block) {
+    let tag;
+    switch (block.type) {
+        case 'paragraph':
+            tag = 'p';
+            break;
+        case 'heading':
+            tag = HEADING_TAG_MAP[block.level];
+            break;
+        case 'blockquote':
+            tag = 'blockquote';
+            break;
+        case 'code':
+            tag = 'pre';
+            break;
+        default:
+            tag = 'p';
+    }
+    const element = document.createElement(tag);
+    if (block.type === 'code') {
+        const codeElement = document.createElement('code');
+        for (const inline of block.content) {
+            codeElement.appendChild(inlineToDOMNode(inline));
+        }
+        element.appendChild(codeElement);
+    }
+    else {
+        for (const inline of block.content) {
+            element.appendChild(inlineToDOMNode(inline));
+        }
+    }
+    return element;
+}
+/** Converts an InlineNode to a DOM Node (Text or Element). */
+function inlineToDOMNode(node) {
+    switch (node.type) {
+        case 'text':
+            return document.createTextNode(node.text);
+        case 'bold': {
+            const strong = document.createElement('strong');
+            for (const child of node.content) {
+                strong.appendChild(inlineToDOMNode(child));
+            }
+            return strong;
+        }
+        case 'italic': {
+            const em = document.createElement('em');
+            for (const child of node.content) {
+                em.appendChild(inlineToDOMNode(child));
+            }
+            return em;
+        }
+        case 'underline': {
+            const u = document.createElement('u');
+            for (const child of node.content) {
+                u.appendChild(inlineToDOMNode(child));
+            }
+            return u;
+        }
+        default:
+            return document.createTextNode('');
+    }
+}