@kubex/zinc 1.1.75 → 1.1.76

package/package.json

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

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

@@ -4,7 +4,6 @@ import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
-import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
 import type ZnTile from "../tile";
@@ -280,7 +279,7 @@ export default class ContentBlock extends ZincElement {
                 'text-section--text': section.type === 'text',
                 'hidden': section.type === 'reply'
               })}>
-                ${section.lines.map((line) => html`${unsafeHTML(line)}<br>`)}
+                ${section.lines.map((line) => html`${line}<br>`)}
               </div>
             `)}
           </div>
@@ -375,7 +374,7 @@ export default class ContentBlock extends ZincElement {
     const textRows: TextRow[] = [];
 
     if (textContent) {
-      const text = textContent.innerText;
+      const text = textContent.innerText.replace(/<br\s*\/?>/gi, '\n');
       const rows = text.split('\n');
       let previousType: TextRow['type'] | null = null;
       let forceReply = false;

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

@@ -1,10 +1,34 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture } from '@open-wc/testing';
+import type { LitElement } from 'lit';
+
+const textSection = async (body: string) => {
+  const el = await fixture<LitElement>(
+    `<zn-content-block><div slot="text">${body}</div></zn-content-block>`
+  );
+  await el.updateComplete;
+  return el.shadowRoot!.querySelector<HTMLDivElement>('.text-content')!;
+};
 
 describe('<zn-content-block>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <zn-content-block></zn-content-block> `);
+    const el = await fixture('<zn-content-block></zn-content-block>');
 
     expect(el).to.exist;
   });
+
+  it('should render markup in the text body as text', async () => {
+    const content = await textSection('&lt;img src="x" onerror="window.__xss = true"&gt; hello');
+
+    expect(content.querySelector('img')).to.be.null;
+    expect(content.textContent).to.contain('<img src="x" onerror="window.__xss = true"> hello');
+    expect((window as unknown as Record<string, unknown>).__xss).to.be.undefined;
+  });
+
+  it('should treat escaped breaks in the text body as line breaks', async () => {
+    const content = await textSection('line1&lt;br /&gt;line2');
+
+    expect(content.textContent).to.not.contain('<br');
+    expect(content.querySelectorAll('br').length).to.be.greaterThan(1);
+  });
 });