@ethlete/core 5.0.0-next.58 → 5.0.0-next.59

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @ethlete/core
 
+## 5.0.0-next.59
+
+### Patch Changes
+
+- The legacy theme stylesheets carry the page's `ngCspNonce`, and `et-structured-data` no longer writes a static `style` attribute, so both pass a strict `style-src`.
+- `markdownToHtml` renders block and table-cell alignment as an `et-rte-align-*` class instead of an inline `text-align` style, which a strict `style-src` dropped; `htmlToMarkdown` reads both.
+
 ## 5.0.0-next.58
 
 ### Minor Changes

package/fesm2022/ethlete-core.mjs

@@ -3470,7 +3470,9 @@ const parseSeparatorAligns = (line) => parseTableRow(line).map((cell) => {
 });
 /** The GFM separator token for a column alignment. */
 const separatorFor = (align) => align === 'center' ? ':---:' : align === 'right' ? '---:' : align === 'left' ? ':---' : '---';
-const alignStyle = (align) => (align ? ` style="text-align: ${align}"` : '');
+const alignClass = (align) => (align ? ` class="et-rte-align-${align}"` : '');
+const alignOf = (attrs) => (/\bclass\s*=\s*["'][^"']*\bet-rte-align-([a-z]+)/i.exec(attrs)?.[1] ??
+    /\bstyle\s*=\s*["'][^"']*text-align:\s*([a-z]+)/i.exec(attrs)?.[1])?.toLowerCase() ?? null;
 /** Wraps `content` in an emphasis `marker`, hoisting boundary whitespace outside the delimiters -
  *  CommonMark emphasis must not face whitespace on the inside (`** fett**` doesn't parse), and
  *  ` ` counts as whitespace there too. Whitespace-only content stays unwrapped. */
@@ -3737,11 +3739,11 @@ const markdownToHtml = (markdown) => {
         // Rebuild it instead of passing it through verbatim: only the alignment survives on the tag
         // (no other attributes, e.g. event handlers) and the inner markup is reduced to the editor's
         // own inline vocabulary.
-        const aligned = /^<(p|h[1-6]|div)\b[^>]*\bstyle=["'][^"']*text-align:\s*([a-z]+)[^>]*>([\s\S]*)<\/\1>$/i.exec(trimmed);
-        if (aligned) {
+        const aligned = /^<(p|h[1-6]|div)\b([^>]*)>([\s\S]*)<\/\1>$/i.exec(trimmed);
+        const align = aligned ? alignOf(aligned[2] ?? '') : null;
+        if (aligned && align) {
             const tag = (aligned[1] ?? 'p').toLowerCase();
-            const align = (aligned[2] ?? 'left').toLowerCase();
-            return `<${tag} style="text-align: ${align}">${sanitizeInlineHtml(aligned[3] ?? '')}</${tag}>`;
+            return `<${tag}${alignClass(align)}>${sanitizeInlineHtml(aligned[3] ?? '')}</${tag}>`;
         }
         // Heading
         const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
@@ -3758,13 +3760,13 @@ const markdownToHtml = (markdown) => {
             const aligns = parseSeparatorAligns(tableLines[1] ?? '');
             const headers = parseTableRow(tableLines[0] ?? '');
             const thead = `<thead><tr>${headers
-                .map((h, i) => `<th${alignStyle(aligns[i] ?? null)}>${processInline(h)}</th>`)
+                .map((h, i) => `<th${alignClass(aligns[i] ?? null)}>${processInline(h)}</th>`)
                 .join('')}</tr></thead>`;
             const bodyRows = tableLines.slice(2);
             const tbody = bodyRows.length > 0
                 ? `<tbody>${bodyRows
                     .map((row) => `<tr>${parseTableRow(row)
-                    .map((cell, i) => `<td${alignStyle(aligns[i] ?? null)}>${processInline(cell)}</td>`)
+                    .map((cell, i) => `<td${alignClass(aligns[i] ?? null)}>${processInline(cell)}</td>`)
                     .join('')}</tr>`)
                     .join('')}</tbody>`
                 : '';
@@ -3805,7 +3807,10 @@ const htmlToMarkdown = (html) => {
     // inner markup stays HTML) and round-trip via a placeholder - extracted before the block passes
     // below rewrite them, restored after the final tag-strip.
     const alignedBlocks = [];
-    md = md.replace(/<(p|h[1-6]|div)\b[^>]*\bstyle="[^"]*text-align[^"]*"[^>]*>[\s\S]*?<\/\1>/gi, (match) => makePlaceholder('ALIGN', alignedBlocks.push(match) - 1));
+    md = md.replace(/<(p|h[1-6]|div)\b([^>]*\b(?:style="[^"]*text-align|class="[^"]*\bet-rte-align-)[^>]*)>([\s\S]*?)<\/\1>/gi, (_, tag, attrs, inner) => {
+        const name = tag.toLowerCase();
+        return makePlaceholder('ALIGN', alignedBlocks.push(`<${name} style="text-align: ${alignOf(attrs)}">${inner}</${name}>`) - 1);
+    });
     // Code blocks - process before inline code
     md = md.replace(/<pre[^>]*><code[^>]*class="language-([^"]+)"[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, lang, code) => `\n\`\`\`${lang}\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
     md = md.replace(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, (_, code) => `\n\`\`\`\n${unescapeHtml(code.trim())}\n\`\`\`\n`);
@@ -3859,8 +3864,8 @@ const htmlToMarkdown = (html) => {
         const extractCells = (row) => [...row.matchAll(/<t[hd][^>]*>([\s\S]*?)<\/t[hd]>/gi)].map((m) => stripTags((m[1] ?? '').replace(/<br\s*\/?>/gi, ' ')).trim());
         // GFM alignment is per column, read from the header cells' text-align styles
         const extractAligns = (row) => [...row.matchAll(/<t[hd]([^>]*)>/gi)].map((m) => {
-            const align = /text-align:\s*(left|center|right)/i.exec(m[1] ?? '')?.[1]?.toLowerCase();
-            return align ?? null;
+            const align = alignOf(m[1] ?? '');
+            return align === 'left' || align === 'center' || align === 'right' ? align : null;
         });
         const theadMatch = tableContent.match(/<thead[^>]*>([\s\S]*?)<\/thead>/i);
         const firstTrMatch = tableContent.match(/<tr[^>]*>([\s\S]*?)<\/tr>/i);
@@ -6236,7 +6241,7 @@ class StructuredDataComponent {
         ...(ngDevMode ? [{ debugName: "jsonLD" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StructuredDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StructuredDataComponent, isStandalone: true, selector: "et-structured-data", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "jsonLD()" }, styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StructuredDataComponent, isStandalone: true, selector: "et-structured-data", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"none\"", "innerHTML": "jsonLD()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StructuredDataComponent, decorators: [{
             type: Component,
@@ -6245,7 +6250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     template: '',
                     encapsulation: ViewEncapsulation.None,
                     host: {
-                        style: 'display: none',
+                        '[style.display]': '"none"',
                         '[innerHTML]': 'jsonLD()',
                     },
                 }]
@@ -9703,6 +9708,14 @@ const injectDefaultColorTheme = () => {
     return theme;
 };
 
+/** Reads the nonce where Angular's default `CSP_NONCE` does, since these run outside any injector. */
+const createNoncedStyle = () => {
+    const style = document.createElement('style');
+    const nonce = document.body?.querySelector('[ngCspNonce]')?.getAttribute('ngCspNonce');
+    if (nonce)
+        style.setAttribute('nonce', nonce);
+    return style;
+};
 /**
  * @deprecated Migrate to Tailwind v4. Intent to remove in v6.
  */
@@ -9788,7 +9801,7 @@ const createRootThemeCss = (themes) => {
   }
   `;
     document.getElementById('et-root-themes')?.remove();
-    const style = document.createElement('style');
+    const style = createNoncedStyle();
     style.id = `et-root-themes`;
     style.appendChild(document.createTextNode(css));
     document.head.appendChild(style);
@@ -9815,7 +9828,7 @@ const createThemeStyle = (theme, isAlt) => {
   }
   `;
     document.getElementById(`${classPrefix}--${cssThemeName}`)?.remove();
-    const style = document.createElement('style');
+    const style = createNoncedStyle();
     style.id = `${classPrefix}--${cssThemeName}`;
     style.appendChild(document.createTextNode(css));
     document.head.appendChild(style);
@@ -10061,7 +10074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/core` this build was cut from. */
-const CORE_VERSION = '5.0.0-next.58';
+const CORE_VERSION = '5.0.0-next.59';
 
 /**
  * Generated bundle index. Do not edit.