officeparser 7.2.3 → 7.3.0

package/dist/generators/HtmlGenerator.js

@@ -2,6 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlGenerator = void 0;
 const BaseGenerator_js_1 = require("./BaseGenerator.js");
+const sanitize_js_1 = require("../utils/sanitize.js");
+/**
+ * Normalizes `HtmlGeneratorConfig.standalone` (`boolean | StandaloneConfig`) into a fully
+ * resolved object. `true`/undefined turns every part on (a complete standalone document);
+ * `false` turns every part off (a bare content fragment). When an object is passed, any field
+ * left unspecified defaults to its "on" value, matching the boolean-shorthand semantics.
+ */
+function resolveStandalone(standalone) {
+    const uniform = (on) => ({
+        document: on,
+        metaTags: on,
+        styles: on ? 'full' : 'none',
+        scripts: on,
+        headInjections: on,
+        bodyInjections: on,
+    });
+    if (standalone === undefined || typeof standalone === 'boolean') {
+        return uniform(standalone ?? true);
+    }
+    const on = uniform(true);
+    return {
+        document: standalone.document ?? on.document,
+        metaTags: standalone.metaTags ?? on.metaTags,
+        styles: standalone.styles ?? on.styles,
+        scripts: standalone.scripts ?? on.scripts,
+        headInjections: standalone.headInjections ?? on.headInjections,
+        bodyInjections: standalone.bodyInjections ?? on.bodyInjections,
+    };
+}
 /**
  * Generates semantic, high-fidelity HTML from an AST.
  */
@@ -29,11 +58,31 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             containerClass = 'pdf-container';
         let bodyContent = await this.processNodeArray(this.ast.content);
         if (this.collectedNotes.length > 0) {
-            let notesHtml = '';
-            for (const note of this.collectedNotes) {
-                notesHtml += await this.processNodeRecursive(note, this.nodeProcessor.bind(this));
+            // Footnotes/endnotes get their own <section data-footnotes> (the agreed
+            // contract with inscript-editor's footnote node); other note types (e.g.
+            // slide speaker notes) keep the existing generic notes wrapper.
+            const footnotes = this.collectedNotes.filter(n => {
+                const t = n.metadata?.noteType;
+                return t === 'footnote' || t === 'endnote';
+            });
+            const otherNotes = this.collectedNotes.filter(n => !footnotes.includes(n));
+            if (footnotes.length > 0) {
+                let footnotesHtml = '';
+                for (const note of footnotes) {
+                    footnotesHtml += await this.processNodeRecursive(note, this.nodeProcessor.bind(this));
+                }
+                // data-footnotes carries an explicit empty value (not a bare attribute) so
+                // the markup is valid XHTML too - EpubGenerator embeds this verbatim, and
+                // XML rejects valueless attributes. HtmlParser only checks for presence.
+                bodyContent += `\n<section data-footnotes="">\n${footnotesHtml}\n</section>\n`;
+            }
+            if (otherNotes.length > 0) {
+                let notesHtml = '';
+                for (const note of otherNotes) {
+                    notesHtml += await this.processNodeRecursive(note, this.nodeProcessor.bind(this));
+                }
+                bodyContent += `\n<div class="document-notes-section">\n<hr class="page-break">\n${notesHtml}\n</div>\n`;
             }
-            bodyContent += `\n<div class="document-notes-section">\n<hr class="page-break">\n${notesHtml}\n</div>\n`;
         }
         const metadataBlock = this.config.renderMetadata ? this.renderMetadataSummary() : '';
         let title = 'Document';
@@ -214,28 +263,38 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
     else window.addEventListener('load', switchSheet);
 </script>`;
         }
-        if (this.config.htmlConfig.standalone) {
+        const sa = resolveStandalone(this.config.htmlConfig.standalone);
+        if (sa.document && sa.metaTags) {
             title = this.ast.metadata?.title || 'Document';
             metaTags = this.renderMetaTags();
         }
-        const styles = this.config.htmlConfig.standalone ? '' : `<style>${this.getPremiumStyles(this.isSpreadsheetMode, isPresentation, isPdf)}</style>`;
+        const styleBlock = sa.styles === 'none' ? '' : `<style>${sa.styles === 'scoped'
+            ? this.getScopedPremiumStyles(this.isSpreadsheetMode, isPresentation, isPdf)
+            : this.getPremiumStyles(this.isSpreadsheetMode, isPresentation, isPdf)}</style>`;
+        // 'scoped' styles are anchored to this wrapper via CSS @scope, so custom properties and
+        // base body-level styling attach here instead of leaking onto a host page's real <html>/
+        // <body> when the output is embedded as a fragment.
+        const scopeOpen = sa.styles === 'scoped' ? '<div class="op-html-scope">' : '';
+        const scopeClose = sa.styles === 'scoped' ? '</div>' : '';
         const inj = this.config.htmlConfig.injections;
-        const value = this.config.htmlConfig.standalone ? `<!DOCTYPE html>
+        const headInjectionsOn = sa.document && sa.headInjections;
+        const chartScriptTag = (sa.scripts && this.config.includeCharts) ? `<script src="${this.config.htmlConfig.chartJsSrc}"></script>` : '';
+        const spreadsheetScriptOut = sa.scripts ? spreadsheetScript : '';
+        const value = sa.document ? `<!DOCTYPE html>
 <html lang="en">
 <head>
-    ${inj.headStart}
+    ${headInjectionsOn ? inj.headStart : ''}
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>${this.escape(title)}</title>
     ${metaTags}
-    ${this.config.includeCharts ? `<script src="${this.config.htmlConfig.chartJsSrc}"></script>` : ''}
-    <style>
-        ${this.getPremiumStyles(this.isSpreadsheetMode, isPresentation, isPdf)}
-    </style>
-    ${inj.headEnd}
+    ${chartScriptTag}
+    ${styleBlock}
+    ${headInjectionsOn ? inj.headEnd : ''}
 </head>
 <body>
-    ${inj.bodyStart}
+    ${sa.bodyInjections ? inj.bodyStart : ''}
+    ${scopeOpen}
     <div class="${containerClass}">
         <article>
             ${metadataBlock}
@@ -243,10 +302,11 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
         </article>
         ${spreadsheetTabs}
     </div>
-    ${spreadsheetScript}
-    ${inj.bodyEnd}
+    ${scopeClose}
+    ${spreadsheetScriptOut}
+    ${sa.bodyInjections ? inj.bodyEnd : ''}
 </body>
-</html>` : `${styles}<div class="${containerClass}">${metadataBlock}${bodyContent}${spreadsheetTabs}</div>${spreadsheetScript}`;
+</html>` : `${styleBlock}${sa.bodyInjections ? inj.bodyStart : ''}${scopeOpen}<div class="${containerClass}">${metadataBlock}${bodyContent}${spreadsheetTabs}</div>${scopeClose}${spreadsheetScriptOut}${sa.bodyInjections ? inj.bodyEnd : ''}`;
         return {
             value,
             messages: this.messages
@@ -261,10 +321,12 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             tags.push(`<meta name="author" content="${this.escape(m.author)}">`);
         if (m.description)
             tags.push(`<meta name="description" content="${this.escape(m.description)}">`);
-        if (m.created)
-            tags.push(`<meta name="dcterms.created" content="${new Date(m.created).toISOString()}">`);
-        if (m.modified)
-            tags.push(`<meta name="dcterms.modified" content="${new Date(m.modified).toISOString()}">`);
+        const created = this.toIsoDate(m.created);
+        const modified = this.toIsoDate(m.modified);
+        if (created)
+            tags.push(`<meta name="dcterms.created" content="${created}">`);
+        if (modified)
+            tags.push(`<meta name="dcterms.modified" content="${modified}">`);
         if (m.lastModifiedBy)
             tags.push(`<meta name="lastModifiedBy" content="${this.escape(m.lastModifiedBy)}">`);
         if (m.customProperties) {
@@ -312,12 +374,18 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
      */
     async processNodeArray(nodes) {
         let html = '';
-        // Stack to track active lists: { indentation, type }
+        // Stack to track active lists: { indentation, type, isTask }
         const listStack = [];
+        const openListTag = (type, isTask) => {
+            if (isTask)
+                return '<ul data-type="taskList">';
+            return type === 'ordered' ? '<ol>' : '<ul>';
+        };
+        const closeListTag = (type) => type === 'ordered' ? '</ol>' : '</ul>';
         const closeListsToLevel = (level) => {
             while (listStack.length > 0 && listStack[listStack.length - 1].indentation > level) {
                 const list = listStack.pop();
-                html += (list?.type === 'ordered' ? '</ol>' : '</ul>') + '\n\n';
+                html += closeListTag(list.type) + '\n\n';
             }
         };
         for (const node of nodes) {
@@ -329,23 +397,24 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             if (node.type === 'list') {
                 const meta = node.metadata;
                 const type = meta?.listType === 'ordered' ? 'ordered' : 'unordered';
+                const isTask = !!meta?.isTask;
                 const indentation = meta?.indentation || 0;
                 // Close deeper lists
                 closeListsToLevel(indentation);
                 // Handle current level
                 if (listStack.length > 0 && listStack[listStack.length - 1].indentation === indentation) {
-                    if (listStack[listStack.length - 1].type !== type) {
+                    if (listStack[listStack.length - 1].type !== type || listStack[listStack.length - 1].isTask !== isTask) {
                         // Type changed at same level
                         const last = listStack.pop();
-                        html += (last?.type === 'ordered' ? '</ol>' : '</ul>') + '\n';
-                        html += (type === 'ordered' ? '<ol>' : '<ul>') + '\n';
-                        listStack.push({ indentation, type });
+                        html += closeListTag(last.type) + '\n';
+                        html += openListTag(type, isTask) + '\n';
+                        listStack.push({ indentation, type, isTask });
                     }
                 }
                 else {
                     // Start a new nested list
-                    html += (type === 'ordered' ? '<ol>' : '<ul>') + '\n';
-                    listStack.push({ indentation, type });
+                    html += openListTag(type, isTask) + '\n';
+                    listStack.push({ indentation, type, isTask });
                 }
                 html += await this.processNodeRecursive(node, this.nodeProcessor.bind(this), override);
             }
@@ -405,6 +474,18 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
                 result += await this.processNodeRecursive(note, processor);
             }
         }
+        else if (node.notes && node.notes.length > 0) {
+            // Emit the reference marker at the point of citation. Without this, a
+            // footnote/endnote would only ever show up in the collected footnotes
+            // section, with no indication of where it was originally cited.
+            for (const note of node.notes) {
+                const meta = note.metadata;
+                if (meta?.noteType === 'footnote' || meta?.noteType === 'endnote') {
+                    const key = this.escape(this.getFootnoteKey(note));
+                    result += `<sup data-footnote-ref="${key}" id="footnote-ref-${key}"><a href="#footnote-${key}">${key}</a></sup>`;
+                }
+            }
+        }
         return result;
     }
     /**
@@ -442,9 +523,9 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             }
         }
         if (anchorIds.length > 0) {
-            idAttr = ` id="${anchorIds[0]}"`;
+            idAttr = ` id="${this.escape(anchorIds[0])}"`;
             if (anchorIds.length > 1) {
-                extraAnchors = anchorIds.slice(1).map(aid => `<a id="${aid}" name="${aid}"></a>`).join('');
+                extraAnchors = anchorIds.slice(1).map(aid => `<a id="${this.escape(aid)}" name="${this.escape(aid)}"></a>`).join('');
             }
         }
         // Inline Styles for structural nodes
@@ -469,7 +550,30 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
                         src = `data:${attachment.mimeType || 'image/png'};base64,${attachment.data}`;
                     }
                 }
-                const img = `<img src="${this.escape(src)}" alt="${this.escape(node.text || meta?.altText || '')}"${className}${mappedAttrs}${styleAttr}>`;
+                // Match CustomImage's exact data-width/data-align + style contract so a loaded
+                // image re-hydrates the editor node without losing size/alignment.
+                let imgDataAttrs = '';
+                const imgStyleParts = [];
+                const baseImgStyle = this.getInlineStyles(node);
+                if (baseImgStyle)
+                    imgStyleParts.push(baseImgStyle);
+                if (meta?.width) {
+                    imgDataAttrs += ` data-width="${this.escape(meta.width)}"`;
+                    // Sanitize before it enters the style="" attribute: an unescaped width
+                    // (e.g. `1px" onerror="alert(1)`) would otherwise break out and inject an
+                    // event handler, and a CSS `url(...)` would fetch a remote resource.
+                    const safeWidth = (0, sanitize_js_1.sanitizeCssValue)(meta.width);
+                    if (safeWidth)
+                        imgStyleParts.push(`width: ${safeWidth}`);
+                }
+                if (meta?.align) {
+                    imgDataAttrs += ` data-align="${this.escape(meta.align)}"`;
+                    const ml = meta.align === 'left' ? '0' : 'auto';
+                    const mr = meta.align === 'right' ? '0' : 'auto';
+                    imgStyleParts.push('display: block', `margin-left: ${ml}`, `margin-right: ${mr}`);
+                }
+                const imgStyleAttr = imgStyleParts.length > 0 ? ` style="${imgStyleParts.join('; ')}"` : '';
+                const img = `<img src="${(0, sanitize_js_1.sanitizeImageUrl)(src)}" alt="${this.escape(node.text || meta?.altText || '')}"${className}${mappedAttrs}${imgDataAttrs}${imgStyleAttr}>`;
                 const content = this.config.includeFormatting ? `<div class="image-container">${img}<div class="caption">${this.escape(attachmentName || '')}</div></div>` : img;
                 return `${extraAnchors}<div${idAttr}>${content}</div>`;
             }
@@ -489,7 +593,7 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
     (function() {
         const initChart = () => {
             const ctx = document.getElementById('${chartId}').getContext('2d');
-            const chartData = ${JSON.stringify(chartData)};
+            const chartData = ${(0, sanitize_js_1.serializeForInlineScript)(chartData)};
             const getRandomColor = (index, alpha) => {
                 const colors = [
                     'rgba(255, 99, 132, ' + alpha + ')',
@@ -556,6 +660,15 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
                 return node.metadata?.breakType === 'page' ? '<hr class="page-break">' : '<br>';
             case 'code': {
                 const meta = node.metadata;
+                if (meta?.math) {
+                    // No pinned editor contract yet (inscript-editor's math node is v1.2,
+                    // not built) - this is the proposed shape: data-math signals the
+                    // display mode, and the visible text keeps its $ delimiters so the
+                    // raw LaTeX degrades gracefully without a KaTeX renderer.
+                    const delimited = meta.math === 'block' ? `$$${node.text || ''}$$` : `$${node.text || ''}$`;
+                    const tag = meta.math === 'block' ? 'div' : 'span';
+                    return `${extraAnchors}<${tag} class="math math-${this.escape(meta.math)}" data-math="${this.escape(meta.math)}"${idAttr}${mappedAttrs}${styleAttr}>${this.escape(delimited)}</${tag}>`;
+                }
                 const lang = meta?.language ? ` class="language-${this.escape(meta.language)}"` : '';
                 const codeHtml = `<code${lang}>${this.escape(node.text || '')}</code>`;
                 if (node.text && node.text.includes('\n')) {
@@ -567,6 +680,11 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             }
             case 'list': {
                 const meta = node.metadata;
+                if (meta?.isTask) {
+                    const checkedAttr = ` data-checked="${meta.checked ? 'true' : 'false'}"`;
+                    const checkedBool = meta.checked ? ' checked' : '';
+                    return `${extraAnchors}<li${checkedAttr}${idAttr}${className}${mappedAttrs}${styleAttr}><label><input type="checkbox"${checkedBool}><span></span></label><div>${childrenOutput}</div></li>`;
+                }
                 const value = (meta?.listType === 'ordered' && typeof meta.itemIndex === 'number')
                     ? ` value="${meta.itemIndex + 1}"`
                     : '';
@@ -595,7 +713,21 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
                         finalChildren = `<thead>${headOutput}</thead><tbody>${bodyOutput}</tbody>`;
                     }
                 }
-                const tableHtml = `<table${idAttr}${className}${mappedAttrs}${styleAttr}>${finalChildren}</table>`;
+                // Match CustomTable's exact data-align + margin style contract so a loaded
+                // table re-hydrates the editor node without losing its layout alignment.
+                const tableMeta = node.metadata;
+                let tableDataAttrs = '';
+                let tableStyleAttr = styleAttr;
+                if (tableMeta?.align) {
+                    tableDataAttrs = ` data-align="${this.escape(tableMeta.align)}"`;
+                    const ml = tableMeta.align === 'left' ? '0' : 'auto';
+                    const mr = tableMeta.align === 'right' ? '0' : 'auto';
+                    const marginStyle = `margin-left: ${ml}; margin-right: ${mr}`;
+                    tableStyleAttr = styleAttr
+                        ? ` style="${styleAttr.replace(/^ style="|"$/g, '')}; ${marginStyle}"`
+                        : ` style="${marginStyle}"`;
+                }
+                const tableHtml = `<table${idAttr}${className}${mappedAttrs}${tableDataAttrs}${tableStyleAttr}>${finalChildren}</table>`;
                 const result = this.tableNestingLevel > 1 ? tableHtml : `<div class="table-container">${tableHtml}</div>`;
                 return `${extraAnchors}${result}`;
             }
@@ -714,7 +846,7 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
                             }
                             const rAnchorIds = this.config.ignoreInternalLinks ? [] : [...(rowNode.metadata?.anchorIds || [])];
                             if (rAnchorIds.length > 0) {
-                                trAttrs += ` id="${rAnchorIds[0]}"`;
+                                trAttrs += ` id="${this.escape(rAnchorIds[0])}"`;
                             }
                             if (this.config.includeFormatting) {
                                 const styles = this.getInlineStyles(rowNode);
@@ -779,19 +911,50 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             }
             case 'slide': {
                 const meta = node.metadata;
-                const slideNum = meta?.slideNumber || '';
+                const slideNum = this.escape(String(meta?.slideNumber || ''));
                 return `${extraAnchors}<section class="slide" data-slide-num="${slideNum}"${idAttr}${className}${mappedAttrs}${styleAttr}>${childrenOutput}</section>`;
             }
             case 'page': {
                 const meta = node.metadata;
-                const pageNum = meta?.pageNumber || '';
+                const pageNum = this.escape(String(meta?.pageNumber || ''));
                 return `${extraAnchors}<section class="page" data-page-num="${pageNum}"${idAttr}${className}${mappedAttrs}${styleAttr}>${childrenOutput}</section>`;
             }
             case 'note': {
                 const meta = node.metadata;
-                const noteClass = meta?.noteType ? ` note-${meta.noteType}` : '';
+                if (meta?.noteType === 'footnote' || meta?.noteType === 'endnote') {
+                    const key = this.escape(this.getFootnoteKey(node));
+                    return `<p id="footnote-${key}" data-footnote-id="${key}">${childrenOutput} <a href="#footnote-ref-${key}">↩</a></p>`;
+                }
+                const noteClass = meta?.noteType ? ` note-${this.escape(meta.noteType)}` : '';
                 return `${extraAnchors}<div class="slide-note${noteClass}"${idAttr}${className}${mappedAttrs}${styleAttr}>${childrenOutput}</div>`;
             }
+            case 'embed': {
+                // Match the Youtube extension's exact wrapper shape so a loaded embed
+                // re-hydrates the editor's Youtube node.
+                const meta = node.metadata;
+                const id = meta?.videoId || '';
+                const width = meta?.width || '100%';
+                const align = meta?.align || 'center';
+                const ml = align === 'left' ? '0' : 'auto';
+                const mr = align === 'right' ? '0' : 'auto';
+                const iframe = id
+                    ? `<iframe src="https://www.youtube.com/embed/${this.escape(id)}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`
+                    : '';
+                return `${extraAnchors}<div data-youtube-video="${this.escape(id)}" data-width="${this.escape(width)}" data-align="${this.escape(align)}" class="youtube-embed"${idAttr}${mappedAttrs} style="width: ${(0, sanitize_js_1.sanitizeCssValue)(width)}; margin-left: ${ml}; margin-right: ${mr};">${iframe}</div>`;
+            }
+            case 'admonition': {
+                // Match inscript-editor's Admonition node wrapper so a loaded admonition
+                // reaches the editor as that node instead of a plain blockquote.
+                const meta = node.metadata;
+                const admonitionType = this.escape(meta?.admonitionType || 'note');
+                return `${extraAnchors}<div class="admonition admonition-${admonitionType}" data-type="${admonitionType}"${idAttr}${mappedAttrs}${styleAttr}>${childrenOutput}</div>`;
+            }
+            case 'definitionList':
+                return `${extraAnchors}<dl${idAttr}${className}${mappedAttrs}${styleAttr}>${childrenOutput}</dl>`;
+            case 'definitionTerm':
+                return `${extraAnchors}<dt${idAttr}${className}${mappedAttrs}${styleAttr}>${childrenOutput}</dt>`;
+            case 'definitionDescription':
+                return `${extraAnchors}<dd${idAttr}${className}${mappedAttrs}${styleAttr}>${childrenOutput}</dd>`;
             default:
                 return childrenOutput;
         }
@@ -829,24 +992,50 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             }
         }
         const meta = node.metadata;
-        if (meta?.link) {
+        if (meta?.wikilink) {
+            // No pinned editor contract yet for wikilinks - data-wikilink-page preserves the
+            // exact page name separately from the display text/alias and from href (which
+            // the host app's resolver may rewrite to a real URL).
+            if (!this.config.ignoreInternalLinks) {
+                result = `<a href="#${this.escape(this.slugify(meta.link || ''))}" data-wikilink-page="${this.escape(meta.link || '')}">${result}</a>`;
+            }
+        }
+        else if (meta?.link) {
             const isInternal = meta.linkType !== 'external';
             if (!this.config.ignoreInternalLinks || !isInternal) {
-                result = `<a href="${meta.link}"${meta.linkType === 'external' ? ' target="_blank"' : ''}>${result}</a>`;
+                result = `<a href="${(0, sanitize_js_1.sanitizeUrl)(meta.link)}"${meta.linkType === 'external' ? ' target="_blank"' : ''}>${result}</a>`;
             }
         }
+        if (meta?.abbreviationTitle) {
+            result = `<abbr title="${this.escape(meta.abbreviationTitle)}">${result}</abbr>`;
+        }
+        if (meta?.citationKey) {
+            // No pinned editor contract yet for citations (unlike footnotes/admonitions) -
+            // this is the proposed shape: a <cite> carrying the bare key, matching Pandoc's
+            // [@citekey] on the Markdown side. Keep in sync if inscript-editor's citation
+            // node lands with a different attribute name.
+            result = `<cite data-citation-key="${this.escape(meta.citationKey)}">[@${this.escape(meta.citationKey)}]</cite>`;
+        }
         return result;
     }
     getInlineStyles(node) {
         const styles = [];
+        // Colors/sizes/fonts/alignments are free strings from an untrusted document;
+        // run each through sanitizeCssValue so it can't break out of the style="" attribute
+        // or inject a resource-fetching CSS construct. Drop the declaration if nothing survives.
+        const pushSafe = (prop, value) => {
+            const safe = (0, sanitize_js_1.sanitizeCssValue)(value);
+            if (safe)
+                styles.push(`${prop}: ${safe}`);
+        };
         if (node.metadata) {
             const meta = node.metadata;
             if (meta.alignment)
-                styles.push(`text-align: ${meta.alignment}`);
+                pushSafe('text-align', meta.alignment);
             if (meta.backgroundColor)
-                styles.push(`background-color: ${meta.backgroundColor}`);
+                pushSafe('background-color', meta.backgroundColor);
             if (meta.verticalAlign)
-                styles.push(`vertical-align: ${meta.verticalAlign}`);
+                pushSafe('vertical-align', meta.verticalAlign);
             if (meta.paragraphIndentation) {
                 const ind = meta.paragraphIndentation;
                 if (ind.left)
@@ -860,13 +1049,16 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
         if (node.formatting) {
             const f = node.formatting;
             if (f.color)
-                styles.push(`color: ${f.color}`);
+                pushSafe('color', f.color);
             if (f.backgroundColor)
-                styles.push(`background-color: ${f.backgroundColor}`);
+                pushSafe('background-color', f.backgroundColor);
             if (f.size)
-                styles.push(`font-size: ${f.size}`);
-            if (f.font)
-                styles.push(`font-family: ${f.font}, sans-serif`);
+                pushSafe('font-size', f.size);
+            if (f.font) {
+                const safeFont = (0, sanitize_js_1.sanitizeCssValue)(f.font);
+                if (safeFont)
+                    styles.push(`font-family: ${safeFont}, sans-serif`);
+            }
         }
         return styles.join('; ');
     }
@@ -1431,6 +1623,20 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
             ${this.config.htmlConfig.customCss}
         `;
     }
+    /**
+     * Same as `getPremiumStyles()`, but wrapped in a CSS `@scope` block anchored to the
+     * `.op-html-scope` wrapper so the rules only apply within the generated fragment - they
+     * cannot leak onto a host page's own elements. `:root` and `body` selectors specifically
+     * target the real page root/body, so they're remapped to `:scope` (the scope root, i.e. the
+     * `.op-html-scope` wrapper) first; every other selector is naturally confined by `@scope`
+     * without needing per-selector rewriting. `customCss` is included in this scoping too.
+     */
+    getScopedPremiumStyles(isSpreadsheet = false, isPresentation = false, isPdf = false) {
+        const css = this.getPremiumStyles(isSpreadsheet, isPresentation, isPdf)
+            .replace(/:root(\s*\{)/g, ':scope$1')
+            .replace(/(^|\n)(\s*)body(\s*\{)/g, '$1$2:scope$3');
+        return `@scope (.op-html-scope) {\n${css}\n}`;
+    }
     slugify(text) {
         return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
     }
@@ -1443,10 +1649,19 @@ class HtmlGenerator extends BaseGenerator_js_1.BaseGenerator {
         }
         return letter;
     }
+    // Attribute/text escaping, URL sanitizing, and inline-script serialization all
+    // live in ../utils/sanitize.js so every generator shares one implementation.
+    // escape() stays as a thin wrapper because it has many call sites here.
     escape(text) {
-        if (typeof text !== 'string')
-            return text;
-        return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+        return (0, sanitize_js_1.escapeHtml)(text);
+    }
+    /** Converts a document-supplied date to an ISO string, or '' if it is invalid
+     *  (a malformed date would otherwise throw a RangeError and abort generation). */
+    toIsoDate(value) {
+        if (value === undefined || value === null || value === '')
+            return '';
+        const d = new Date(value);
+        return isNaN(d.getTime()) ? '' : d.toISOString();
     }
 }
 exports.HtmlGenerator = HtmlGenerator;

package/dist/generators/MarkdownGenerator.d.ts

@@ -27,11 +27,27 @@ import { BaseGenerator } from './BaseGenerator.js';
 export declare class MarkdownGenerator extends BaseGenerator<'md'> {
     private isInsideTable;
     private hoistedContent;
+    private collectedAbbreviations;
     constructor(ast: OfficeParserAST, config?: GeneratorConfig<'md'>);
     /**
      * Renders anchor tags if HTML fallback is allowed.
      */
     private renderAnchors;
+    /**
+     * Serializes a frontmatter array as a YAML flow sequence (e.g. `[a, b]`), matching
+     * MarkdownParser's frontmatter array handling. Plain strings are left bare; anything
+     * that would break flow-array syntax (or isn't a string) falls back to JSON encoding.
+     */
+    private serializeFrontmatterArray;
+    /**
+     * Renders a Pandoc-style attribute list (e.g. `{width=50% align=left}`) from
+     * ImageMetadata/TableMetadata's width/align fields - the canonical form is always
+     * `key=value`, matching MarkdownParser's own vocabulary (MARKDOWN_DIALECT.md §15).
+     */
+    private renderAttributeList;
+    /** Converts a document-supplied date to an ISO string, or '' if invalid
+     *  (a malformed date would otherwise throw a RangeError and abort generation). */
+    private toIsoDate;
     /**
      * Generates Markdown string from the provided AST.
      *