@kubex/zinc 1.1.75 → 1.1.77

package/docs/pages/components/preview-frame.md

@@ -56,7 +56,13 @@ handlers can't be cancelled from out here — blocking pointer input is the only
 way to stop them, and hover goes with it. Scrolling doesn't: an overflowing page
 is scrolled by the panel instead, as below.
 
-Set `interactive` when the embed is meant to be used rather than looked at.
+Set `interactive` when the embed is meant to be used rather than looked at. The
+frame then behaves as a viewport: it stays the panel's own height and the embed
+scrolls itself, so there's a single scrollbar and the embed's `100vh`,
+`position: fixed` and sticky content size to what's actually on screen. The
+[reported content height](#overflowing-content) is ignored while `interactive`
+is set — it exists to make an *inert* frame's overflow reachable, which an
+interactive one does for itself.
 
 ```html:preview
 <zn-preview-frame
@@ -73,11 +79,13 @@ Set `interactive` when the embed is meant to be used rather than looked at.
 
 ## Overflowing Content
 
-A page taller than the panel is scrolled by the panel, not inside the frame. The
-frame can't do it itself: a cross-origin document can't be scrolled from the host
-(`contentWindow.scrollTo` is blocked), and with pointer input off the wheel never
-reaches it anyway. So the frame is instead laid out at its full content height —
-nothing scrolls inside it — and the panel scrolls that.
+An inert page taller than the panel is scrolled by the panel, not inside the
+frame. The frame can't do it itself: a cross-origin document can't be scrolled
+from the host (`contentWindow.scrollTo` is blocked), and with pointer input off
+the wheel never reaches it anyway. So the frame is instead laid out at its full
+content height — nothing scrolls inside it — and the panel scrolls that. An
+[`interactive`](#interactivity) frame doesn't need any of this and opts out of
+it: it keeps the panel's height and the embed scrolls itself.
 
 For the frame to be sized that way, the embed reports its height alongside
 `hp-preview:rendered`:

package/docs/pages/components/theme-editor.md

@@ -24,6 +24,10 @@ Set `controls-caption` and `preview-caption` to label each column's header
 row — both are empty by default, rendering no text (the controls column's
 header row still renders either way, so the two columns stay aligned).
 
+The preview is [interactive](/components/preview-frame/#interactivity): the
+embedded page can be clicked and hovered, and it scrolls itself, so the preview
+column never adds a second scrollbar beside the embed's own.
+
 The preview always fills its column, leaving no dead space beneath it.
 `min-height` (default `480`) is a floor for that column, not a fixed height —
 it's still forwarded to the [preview frame](/components/preview-frame/), which

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.75",
+  "version": "1.1.77",
   "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);
+  });
 });

package/src/components/preview-frame/preview-frame.component.ts

@@ -111,6 +111,12 @@ export default class ZnPreviewFrame extends ZincElement {
    * be reached from here to cancel its own handlers, so this blocks pointer
    * input entirely — hover goes with it. Scrolling doesn't: an overflowing
    * page is scrolled by the panel rather than by the frame (see _contentHeight).
+   *
+   * Set, the frame becomes a real viewport instead: it stays the panel's own
+   * height and the embed scrolls itself, so there is one scrollbar rather than
+   * a panel scrolling an oversized frame, and the embed's viewport-relative
+   * layout (`100vh`, `position: fixed`, sticky headers) sizes to what's on
+   * screen. _contentHeight is ignored while this is set.
    */
   @property({type: Boolean, reflect: true}) interactive = false;
 
@@ -125,7 +131,8 @@ export default class ZnPreviewFrame extends ZincElement {
    * height rather than the panel's, so the page never scrolls inside the frame
    * — the panel scrolls instead, which is what makes an overflowing preview
    * reachable while pointer input to the frame is blocked. 0 = unknown, and the
-   * frame falls back to filling the panel.
+   * frame falls back to filling the panel. Kept up to date either way, but only
+   * laid out when the frame is inert: an `interactive` frame scrolls itself.
    */
   @state() private _contentHeight = 0;
 
@@ -396,7 +403,10 @@ export default class ZnPreviewFrame extends ZincElement {
     // transformed back down, so the frame fills the panel while the content
     // renders smaller and more of the page is visible. Percentage width means
     // nothing is measured — no layout feedback loop.
-    const content = this.error ? 0 : this._contentHeight;
+    // Growing the frame past the panel is the workaround for an inert frame not
+    // being scrollable; interactive, that trades one scrollbar for two and hands
+    // the embed a viewport taller than the panel it's shown in.
+    const content = this.error || this.interactive ? 0 : this._contentHeight;
     const iframeStyles = this.fill
       ? {width: '100%', height: content ? `max(${content}px, 100%)` : '100%'}
       : {

package/src/components/preview-frame/preview-frame.test.ts

@@ -683,6 +683,44 @@ describe('<zn-preview-frame>', () => {
       const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
       expect(stage.style.height).to.equal('max(1500px, 100%)');
     });
+
+    it('leaves an interactive frame at the panel height, so the embed scrolls itself', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          fill
+          interactive></zn-preview-frame>`);
+
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      const panel = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+      const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+
+      reportHeight(el, 1500);
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      expect(iframe.style.height).to.equal('100%');
+      expect(stage.style.height).to.equal('');
+      expect(panel.scrollHeight).to.equal(panel.clientHeight);
+    });
+
+    it('inflates the frame again when interactive is turned off', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          interactive></zn-preview-frame>`) as HTMLElement & {interactive: boolean};
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+      reportHeight(el, 1400);
+      await new Promise(resolve => setTimeout(resolve, 50));
+      expect(iframe.style.height).to.equal('480px');
+
+      el.interactive = false;
+      await waitUntil(() => iframe.style.height === '1400px', 'kept the reported height unused');
+    });
   });
 
   it('skips the config fetch when data-uri is empty', async () => {

package/src/components/theme-editor/theme-editor.component.ts

@@ -840,12 +840,14 @@ export default class ZnThemeEditor extends ZincElement {
                 <slot @slotchange="${this._onSlotChange}"></slot>
                 ${this._hasNestedGroups()
                   ? this._renderTabs(section => html`
-                      ${this._hasAssignedControls(section.name) ? html`
-                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>` : nothing}
-                      ${this._renderGroups(section)}`)
+                    ${this._hasAssignedControls(section.name) ? html`
+                      <slot name="${section.name}" class="editor__section-slot"
+                            @slotchange="${this._onSlotChange}"></slot>` : nothing}
+                    ${this._renderGroups(section)}`)
                   : this.sectionLayout === 'tabs'
                     ? this._renderTabs(section => html`
-                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>`)
+                      <slot name="${section.name}" class="editor__section-slot"
+                            @slotchange="${this._onSlotChange}"></slot>`)
                     : this._renderSections()}
               </div>
               ${this.hasSlotController.test('footer') ? html`
@@ -910,6 +912,7 @@ export default class ZnThemeEditor extends ZincElement {
               device="${this.device}"
               min-height="${this.minHeight}"
               fill
+              interactive
               backdrop="${this.standalone ? 'panel' : 'dots'}"
               exportparts="base:preview__base,stage:preview__stage,iframe:preview__iframe,error:preview__error"
               @zn-error="${this._onFrameError}"></zn-preview-frame>

package/src/components/theme-editor/theme-editor.scss

@@ -180,9 +180,11 @@
   margin-top: auto;
 }
 
-// The preview's scroll region: the toolbar above stays put.
+// Holds the preview below the toolbar, and never scrolls: the frame is its own
+// scroll region (interactive, the embed is), so a scroller here would only ever
+// be a second scrollbar beside that one.
 .editor__preview {
-  overflow: auto;
+  overflow: hidden;
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;

package/src/components/theme-editor/theme-editor.test.ts

@@ -729,6 +729,22 @@ describe('<zn-theme-editor>', () => {
       expect(controlsHeader).to.exist;
       expect(controlsHeader!.textContent?.trim()).to.equal('');
     });
+
+    it('gives the preview an interactive frame that scrolls itself, so the column never adds a second scrollbar', async () => {
+      const el = await fixture(FIXTURE);
+      await (el as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
+
+      const preview = el.shadowRoot!.querySelector<HTMLElement>('[part="preview"]')!;
+      const frame = el.shadowRoot!.querySelector<HTMLElement>('zn-preview-frame')!;
+      await (frame as HTMLElement & {updateComplete: Promise<unknown>}).updateComplete;
+
+      expect(frame.hasAttribute('interactive')).to.equal(true);
+      expect(getComputedStyle(preview).overflowY).to.equal('hidden');
+      expect(preview.scrollHeight).to.equal(preview.clientHeight);
+
+      const iframe = frame.shadowRoot!.querySelector('iframe')!;
+      expect(getComputedStyle(iframe).pointerEvents).to.equal('auto');
+    });
   });
 
   describe('tabbed sections (section-layout="tabs")', () => {