@kubex/zinc 1.1.181 → 1.1.183

package/docs/pages/components/content-block.md

@@ -52,6 +52,53 @@ layout: component
 </zn-content-block>
 ```
 
+### Editor Formatting
+
+Text that holds escaped HTML, such as a note saved from `zn-editor`, is sanitized and rendered with the
+editor's formatting. Only the text and background colour survive from a `style` attribute.
+
+```html:preview
+
+<zn-content-block
+  time="16 Jun 2025, 13:00"
+  sender="John Smith"
+  avatar="JS"
+>
+  <div slot="text">
+    &lt;p&gt;&lt;strong&gt;Bold&lt;/strong&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;em&gt;Italic&lt;/em&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;u&gt;Underline&lt;/u&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;s&gt;Strikethrough&lt;/s&gt;&lt;/p&gt;
+    &lt;blockquote&gt;Blockquote&lt;/blockquote&gt;
+    &lt;p&gt;&lt;code&gt;Inline code&lt;/code&gt;&lt;/p&gt;
+    &lt;pre data-language=plain&gt;Code block&lt;/pre&gt;
+    &lt;p&gt;&lt;span style=color:red&gt;Coloured text&lt;/span&gt;&lt;/p&gt;
+    &lt;ul&gt;&lt;li&gt;Bullet&lt;/li&gt;&lt;li&gt;Bullet&lt;ul&gt;&lt;li&gt;Nested bullet&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;
+    &lt;ol&gt;&lt;li&gt;Numbered&lt;ol&gt;&lt;li&gt;Nested numbered&lt;/li&gt;&lt;li&gt;Nested numbered&lt;/li&gt;&lt;/ol&gt;&lt;/li&gt;&lt;/ol&gt;
+    &lt;ul&gt;&lt;li data-list=checked&gt;Checked&lt;/li&gt;&lt;li data-list=unchecked&gt;Unchecked&lt;/li&gt;&lt;/ul&gt;
+    &lt;hr class=ql-hr&gt;
+    &lt;p&gt;Divider above&lt;/p&gt;
+    &lt;p&gt;&lt;a href=https://example.com&gt;Link&lt;/a&gt;&lt;/p&gt;
+  </div>
+  <div slot="html">
+    <p><strong>Bold</strong></p>
+    <p><em>Italic</em></p>
+    <p><u>Underline</u></p>
+    <p><s>Strikethrough</s></p>
+    <blockquote>Blockquote</blockquote>
+    <p><code>Inline code</code></p>
+    <pre data-language="plain">Code block</pre>
+    <p><span style="color:red">Coloured text</span></p>
+    <ul><li>Bullet</li><li>Bullet<ul><li>Nested bullet</li></ul></li></ul>
+    <ol><li>Numbered<ol><li>Nested numbered</li><li>Nested numbered</li></ol></li></ol>
+    <ul><li data-list="checked">Checked</li><li data-list="unchecked">Unchecked</li></ul>
+    <hr class="ql-hr">
+    <p>Divider above</p>
+    <p><a href="https://example.com">Link</a></p>
+  </div>
+</zn-content-block>
+```
+
 ### Attachments
 
 Attachments render in a row at the bottom of the content and are only visible while the block

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.181",
+  "version": "1.1.183",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/cols/cols.component.ts

@@ -1,5 +1,5 @@
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
@@ -65,14 +65,43 @@ export default class ZnCols extends ZincElement {
   // the whole subtree, to avoid reacting to unrelated content updates deeper in a column.
   private readonly childObserver: MutationObserver = new MutationObserver(() => this.requestUpdate());
 
+  private readonly resizeObserver: ResizeObserver = new ResizeObserver(() => this.markRowEnds());
+
   connectedCallback() {
     super.connectedCallback();
     this.childObserver.observe(this, {childList: true});
+    this.resizeObserver.observe(this);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.childObserver.disconnect();
+    this.resizeObserver.disconnect();
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    this.markRowEnds();
+  }
+
+  /**
+   * Flags each child that ends its row as laid out, so `divide` only draws between neighbours on the same row
+   * however the columns have wrapped.
+   */
+  private markRowEnds() {
+    const children = Array.from(this.querySelectorAll(':scope > *:not([slot])'));
+    if (!this.divide) {
+      children.forEach((child) => child.removeAttribute('data-row-end'));
+      return;
+    }
+
+    const rects = children.map((child) => child.getBoundingClientRect());
+    children.forEach((child, i) => {
+      const rect = rects[i];
+      const rowEnd = !rects.some((other) =>
+        other !== rect && other.top < rect.bottom && other.bottom > rect.top && other.left > rect.left);
+      child.toggleAttribute('data-row-end', rowEnd);
+    });
   }
 
   /**

package/src/components/cols/cols.scss

@@ -63,6 +63,10 @@
         background-color: rgb(var(--zn-border-color));
       }
     }
+
+    ::slotted([data-row-end]):after {
+      display: none;
+    }
   }
 
   &--no-gap {

package/src/components/cols/cols.test.ts

@@ -135,4 +135,35 @@ describe('<zn-cols>', () => {
       expect(orderOf(el.querySelector('#usage'))).to.equal('-1');
     });
   });
+
+  describe('dividers', () => {
+    const dividerOf = (el: Element | null) => getComputedStyle(el!, '::after').display;
+
+    it('should only divide neighbours on the same row', async () => {
+      const el = await cols(`
+        <zn-cols layout="1,1" divide style="width: 600px">
+          <div id="a" style="height: 20px"></div>
+          <div id="b" style="height: 20px"></div>
+          <div id="c" style="height: 20px"></div>
+          <div id="d" style="height: 20px"></div>
+        </zn-cols>`);
+
+      expect(dividerOf(el.querySelector('#a'))).to.equal('block');
+      expect(dividerOf(el.querySelector('#b'))).to.equal('none');
+      expect(dividerOf(el.querySelector('#c'))).to.equal('block');
+    });
+
+    it('should drop the dividers once the columns wrap', async () => {
+      const el = await cols(`
+        <zn-cols layout="1,1" divide style="width: 600px">
+          <div id="a" style="height: 20px"></div>
+          <div id="b" style="height: 20px"></div>
+        </zn-cols>`);
+
+      el.style.width = '400px';
+      await aTimeout(100);
+
+      expect(dividerOf(el.querySelector('#a'))).to.equal('none');
+    });
+  });
 });

package/src/components/content-block/content-block.component.ts

@@ -13,6 +13,21 @@ import type ZnTile from "../tile";
 
 import styles from './content-block.scss';
 
+// What the editor (Quill) can produce beyond the sanitizer's defaults
+const EDITOR_TAGS = ['s', 'code', 'pre', 'blockquote', 'hr', 'span'];
+
+// The iframe can't see the shadow styles, so editor formatting is restyled to match the text view
+const IFRAME_STYLES = 'html,body{background-color:#fff;margin:0}img{max-width:100%;max-height:500px}'
+  + 'p{margin:0}ul,ol{margin:0;padding-left:1.5em}'
+  + 'blockquote{border-left:4px solid #ddd;margin:5px 0;padding-left:16px}'
+  + 'code{background-color:#f0f0f0;border-radius:3px;font-size:85%;padding:2px 4px}'
+  + 'pre{background-color:#23241f;border-radius:3px;margin:5px 0;padding:5px 10px;color:#f8f8f2;overflow:auto}'
+  + 'pre code{background:none;padding:0}'
+  + 'hr{border:none;border-top:1px solid #ddd;margin:8px 0}'
+  + 'li[data-list=checked],li[data-list=unchecked]{list-style:none}'
+  + 'li[data-list=checked]::before{content:"☑";color:#777;margin:0 .3em 0 -1.5em}'
+  + 'li[data-list=unchecked]::before{content:"☐";color:#777;margin:0 .3em 0 -1.5em}';
+
 interface TextRow {
   lines: string[];
   type: 'reply' | 'text';
@@ -70,14 +85,13 @@ export default class ContentBlock extends ZincElement {
       if (iframe.contentDocument) {
         const div = this.htmlNodes[0] as HTMLDivElement;
         if (div) {
-          let convertedHtml = div?.innerHTML ?? '';
-          convertedHtml = convertedHtml.replace(/ /g, ' ');
-          convertedHtml = convertedHtml.replace(/&lt;/g, '<');
-          convertedHtml = convertedHtml.replace(/&gt;/g, '>');
+          // Escaped source has no element children; textContent decodes it once, including &amp;nbsp;
+          let convertedHtml = div.children.length ? div.innerHTML : div.textContent ?? '';
           convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
 
-          const baseStyles = "<style>body,html{background-color: #ffffff}img{max-width:100%; max-height: 500px;}</style>";
-          iframe.srcdoc = baseStyles + convertedHtml;
+          const {fontFamily, fontSize, lineHeight, color} = getComputedStyle(this.shadowRoot?.querySelector('.text-section') ?? this);
+          iframe.srcdoc = `<style>body{font-family:${fontFamily};font-size:${fontSize};line-height:${lineHeight};color:${color}}${IFRAME_STYLES}</style>`
+            + convertedHtml;
         }
       }
 
@@ -366,7 +380,7 @@ export default class ContentBlock extends ZincElement {
     const textRows: TextRow[] = [];
 
     if (textContent && looksLikeHtml(textContent.innerText)) {
-      this._textRows = [{lines: [sanitizeHtml(textContent.innerText)], type: 'text', html: true}];
+      this._textRows = [{lines: [sanitizeHtml(textContent.innerText, EDITOR_TAGS, true)], type: 'text', html: true}];
       return this._textRows;
     }
 

package/src/components/content-block/content-block.scss

@@ -118,6 +118,38 @@
     font-size: var(--zn-font-size-small);
     opacity: 0.8;
   }
+
+  p {
+    margin: 0;
+  }
+
+  blockquote {
+    border-left: 4px solid rgb(var(--zn-border-color));
+    margin: 5px 0;
+    padding-left: 16px;
+  }
+
+  code {
+    background-color: #f0f0f0;
+    border-radius: 3px;
+    font-size: 85%;
+    padding: 2px 4px;
+  }
+
+  pre {
+    background-color: #23241f;
+    border-radius: 3px;
+    margin-block: 5px;
+    padding: 5px 10px;
+    color: #f8f8f2;
+    overflow: auto;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid rgb(var(--zn-border-color));
+    margin: var(--zn-spacing-small) 0;
+  }
 }
 
 .hidden {
@@ -139,6 +171,10 @@ ol, ul {
   margin: 0;
 }
 
+li > ol, li > ul {
+  padding-left: 1.5em;
+}
+
 li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
   color: #777;
 }

package/src/components/content-block/content-block.test.ts

@@ -17,6 +17,16 @@ describe('<zn-content-block>', () => {
     expect(el).to.exist;
   });
 
+  it('should decode escaped source in the html body once', async () => {
+    const el = await fixture<LitElement>(
+      '<zn-content-block><div slot="html">&lt;p&gt;Test&amp;nbsp;Format&lt;/p&gt;</div></zn-content-block>'
+    );
+    await el.updateComplete;
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+    expect(iframe.srcdoc).to.contain('<p>Test&nbsp;Format</p>');
+  });
+
   it('should render plain text in the text body as text', async () => {
     const content = await textSection('1 &lt; 2 &amp;&amp; 3 &gt; 2');
 
@@ -45,6 +55,21 @@ describe('<zn-content-block>', () => {
     expect(content.textContent).to.not.contain('<p>');
   });
 
+  it('should keep editor formatting and only colours from styles in the text body', async () => {
+    const content = await textSection(
+      '&lt;p&gt;&lt;s&gt;struck&lt;/s&gt; &lt;code&gt;inline&lt;/code&gt;&lt;/p&gt;&lt;blockquote&gt;quote&lt;/blockquote&gt;'
+      + '&lt;pre&gt;block&lt;/pre&gt;&lt;hr&gt;'
+      + '&lt;p&gt;&lt;span style="color: red; background-image: url(https://x.test/p.gif)"&gt;red&lt;/span&gt;&lt;/p&gt;'
+    );
+
+    expect(content.querySelector('s')?.textContent).to.equal('struck');
+    expect(content.querySelector('code')?.textContent).to.equal('inline');
+    expect(content.querySelector('blockquote')?.textContent).to.equal('quote');
+    expect(content.querySelector('pre')?.textContent).to.equal('block');
+    expect(content.querySelector('hr')).to.exist;
+    expect(content.querySelector('span')!.getAttribute('style')).to.equal('color: red;');
+  });
+
   it('should strip unsafe links and dropped elements from markup in the text body', async () => {
     const content = await textSection(
       '&lt;p&gt;&lt;a href="JavaScript:alert(1)"&gt;click&lt;/a&gt;&lt;/p&gt;'

package/src/components/stat/stat.component.ts

@@ -127,8 +127,8 @@ export default class ZnStatsTile extends ZincElement {
   }
 
   private renderAmount() {
-    return html`${this.getDisplayAmount()}${this.icon ? html`
-      <zn-icon class="icon" src="${this.icon}" size="20" color="${ifDefined(this.iconColor)}"></zn-icon>` : null}`;
+    return html`<span class="value">${this.getDisplayAmount()}${this.icon ? html`
+      <zn-icon class="icon" src="${this.icon}" size="20" color="${ifDefined(this.iconColor)}"></zn-icon>` : null}</span>`;
   }
 
   private renderValueFirst() {

package/src/components/stat/stat.scss

@@ -73,6 +73,12 @@
     }
   }
 
+  .value {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
   .icon {
     margin-left: var(--zn-spacing-x-small);
   }
@@ -89,13 +95,19 @@
 
     .amount {
       flex-grow: 0;
-      gap: var(--zn-spacing-x-small);
+      flex-wrap: wrap;
+      column-gap: var(--zn-spacing-x-small);
       color: inherit;
     }
 
+    .value {
+      gap: var(--zn-spacing-x-small);
+    }
+
     .diff {
       font-size: var(--zn-font-size-small);
       font-weight: 400;
+      white-space: nowrap;
     }
 
     .diff .neutral,

package/src/utilities/sanitize-html.ts

@@ -16,11 +16,12 @@ const DROPPED = [
 /**
  * Sanitizes untrusted HTML down to formatting tags, keeping only a link's href when it is http(s) or mailto.
  * Tags in `keep` are allowed as they are, so a block such as `pre` isn't turned into a paragraph.
+ * With `colors`, a `style` attribute survives holding only its text and background colour.
  */
-export function sanitizeHtml(source: string, keep: string[] = []): string {
+export function sanitizeHtml(source: string, keep: string[] = [], colors = false): string {
   const fragment = DOMPurify.sanitize(source, {
     ALLOWED_TAGS: [...FORMATTING, ...BLOCKS, ...keep],
-    ALLOWED_ATTR: ['href'],
+    ALLOWED_ATTR: colors ? ['href', 'style'] : ['href'],
     ALLOWED_URI_REGEXP: /^(?:https?|mailto):/i,
     FORBID_CONTENTS: DROPPED,
     RETURN_DOM_FRAGMENT: true,
@@ -36,6 +37,14 @@ export function sanitizeHtml(source: string, keep: string[] = []): string {
   fragment.querySelectorAll('p').forEach(p => {
     if (!p.textContent?.trim()) p.remove();
   });
+  // Any other declaration could load a remote url(), which in an email is a tracking pixel
+  fragment.querySelectorAll<HTMLElement>('[style]').forEach(el => {
+    const {color, backgroundColor} = el.style;
+    el.removeAttribute('style');
+    el.style.color = color;
+    el.style.backgroundColor = backgroundColor;
+    if (!el.getAttribute('style')) el.removeAttribute('style');
+  });
   fragment.querySelectorAll('a[href]').forEach(link => {
     try {
       link.setAttribute('href', new URL(link.getAttribute('href')!.trim()).href);