@kubex/zinc 1.1.95 → 1.1.96

package/src/components/page-builder/page.types.ts

@@ -8,25 +8,10 @@ export interface PageSection {
   label?: string;
   /** Section content, keyed by field name (the inspector's `name` attributes). */
   data: Record<string, unknown>;
-  /** Container instances only: the editor-chosen layout. */
-  layout?: PageContainerLayout;
-  /** Container instances only: one ordered stack per cell, row-major. */
-  cells?: PageSection[][];
-  /**
-   * @deprecated The pre-cells fixed-slot shape. Read on load and migrated to
-   * `cells`; never written back.
-   */
+  /** Slot contents for container sections, sized to the type's `slots`. Empty slots are null. */
   children?: (PageSection | null)[];
 }
 
-/** A container instance's editor-chosen layout. */
-export interface PageContainerLayout {
-  /** One weight per column; the array length IS the column count. */
-  widths: number[];
-  /** When true the builder offers a trailing empty row instead of a pinned cell count. */
-  grow: boolean;
-}
-
 /** The complete serialisable state of a page. Order = render order. */
 export interface PageState {
   sections: PageSection[];
@@ -53,65 +38,18 @@ export interface PageSectionType {
   configTemplate?: HTMLTemplateElement;
   /** Programmatic inspector body — takes precedence over `configTemplate`. */
   renderConfig?: (section: PageSection, update: (data: Record<string, unknown>) => void) => TemplateResult;
-  /** Marks this type a container: its card renders a grid of cells on the canvas. */
-  container?: boolean;
   /**
-   * Column weights a new instance of this container starts with. Stored as parsed, not
-   * guaranteed sanitised — route through `sanitiseWidths`/`defaultLayout` before use.
-   */
-  defaultWidths?: number[];
-  /** Whether a new instance of this container starts growable. */
-  defaultGrow?: boolean;
-  /**
-   * @deprecated Use `container` with `columns`/`widths`. Read as a container of
-   * `DEFAULT_WIDTHS` columns with the cell count pinned to this number.
+   * Number of child slots this section offers on the canvas (a container tile);
+   * rendered as a 3-column grid. Containers cannot be placed inside other containers.
    */
   slots?: number;
-  /**
-   * Section type keys allowed in this container's cells. On a `container` type,
-   * omitting it allows any type, subject to the nesting cap — that is how nesting
-   * is reachable without enumerating types. The deprecated `slots=` alias keeps the
-   * old rule instead: omitting it there allows any non-container type.
-   */
+  /** Section type keys allowed in this container's slots. Omit to allow any non-container type. */
   accepts?: string[];
 }
 
-/** Beyond 6 columns a card is under ~170px on the 1024px canvas — unreadable. */
-export const MAX_COLUMNS = 6;
-/** A single weight beyond 12 makes the other columns unusably thin. */
-export const MAX_WIDTH = 12;
-/** Container nesting levels: a top-level container is 1, one inside a cell is 2. */
-export const MAX_CONTAINER_LEVELS = 2;
-/** Global section budget; also the sanity clamp on an incoming `cells` length. */
-export const MAX_SECTIONS = 500;
-/** What a bare `container` declaration seeds. */
-export const DEFAULT_WIDTHS: readonly number[] = [1, 1, 1];
-
-/** Container-ness is a property of the registered type, never of the instance. */
-export function isContainer(type: PageSectionType | undefined): boolean {
-  return Boolean(type?.container ?? (type?.slots !== undefined && type.slots > 0));
-}
-
-/**
- * Coerces a weights list into a usable one: each entry a whole number from 1 to
- * MAX_WIDTH (anything unusable becomes 1), at most MAX_COLUMNS entries, falling
- * back to DEFAULT_WIDTHS only when nothing usable remains.
- */
-export function sanitiseWidths(raw: unknown): number[] {
-  const list = Array.isArray(raw) ? raw.slice(0, MAX_COLUMNS) : [];
-  const clean = list.map(entry => {
-    const n = typeof entry === 'number' && Number.isFinite(entry) ? Math.floor(entry) : 1;
-    return Math.min(Math.max(n, 1), MAX_WIDTH);
-  });
-  return clean.length ? clean : [...DEFAULT_WIDTHS];
-}
-
-/** The layout a newly placed instance of a container type starts with. */
-export function defaultLayout(type: PageSectionType | undefined): PageContainerLayout {
-  return {
-    widths: sanitiseWidths(type?.defaultWidths ?? [...DEFAULT_WIDTHS]),
-    grow: Boolean(type?.defaultGrow),
-  };
+/** A container section's slot contents, padded/truncated to the type's slot count. */
+export function sectionChildren(section: PageSection, type: PageSectionType): (PageSection | null)[] {
+  return Array.from({length: type.slots ?? 0}, (_, i) => section.children?.[i] ?? null);
 }
 
 /** Drag-and-drop MIME carrying a section type id from the palette to the canvas. */
@@ -147,12 +85,6 @@ function optionLabel(type: PageSectionType | undefined, name: string, value: str
  * so a tile reads as its linked item however its other fields were filled in.
  */
 export function sectionSummary(section: PageSection, type?: PageSectionType): string {
-  if (isContainer(type)) {
-    const columns = sanitiseWidths(section.layout?.widths ?? type?.defaultWidths).length;
-    const count = (section.cells ?? []).reduce((n, cell) => n + cell.length, 0);
-    const col = `${columns} column${columns === 1 ? '' : 's'}`;
-    return `${col} · ${count} section${count === 1 ? '' : 's'}`;
-  }
   const strings = Object.entries(section.data)
     .filter((entry): entry is [string, string] => typeof entry[1] === 'string' && entry[1].trim() !== '');
   for (const [name, value] of strings) {

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

@@ -4,12 +4,10 @@ import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
 import {property, query, state} from 'lit/decorators.js';
 import {parse as remarkdParse} from "remarkd-js";
-import {SlashMenuController} from "../slash-menu/slash-menu-controller";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
-import ZnSlashMenu from "../slash-menu";
-import type {SlashMenuItem} from "../slash-menu/slash-menu-items";
+import ZnSlashMenu, {SlashMenuController, type SlashMenuItem} from "../slash-menu";
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnFile from "../file";
 
@@ -159,6 +157,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   @state() private editShell = '';
   @state() private rawMode = false;
   @state() private includeOptions: IncludeOption[] | null = null;
+  @state() private includeLoadFailed = false;
   @state() private includePickerIndex: number | null = null;
   @state() private includeQuery = '';
 
@@ -274,6 +273,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   handleIncludeUrlChange() {
     this.includeRequest = null;
     this.includeOptions = null;
+    this.includeLoadFailed = false;
     if (this.hasIncludeBlock()) void this.loadIncludeOptions();
   }
 
@@ -827,6 +827,20 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     return data.uploadPath;
   }
 
+  /**
+   * Resolves an app-relative path the way the console's pagelet handler does:
+   * an app fragment's URLs sit under the app base, and the console puts the app's
+   * `gaid` on the host element. Links rendered here live in the shadow root,
+   * where a click retargets to the host, so that handler never sees them — the
+   * href has to carry the base itself.
+   */
+  private appPath(path: string): string {
+    const gaid = this.getAttribute('gaid') ?? '';
+    const trimmed = path.replace(/^\/+/, '');
+    if (!gaid || trimmed.startsWith(gaid)) return path;
+    return `/${gaid}/${trimmed}`;
+  }
+
   private hasIncludeBlock(): boolean {
     return this.blocks.some(block => this.parseIncludeBlock(block) !== null);
   }
@@ -836,15 +850,25 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     if (!this.includeUrl) return Promise.resolve([]);
     if (!this.includeRequest) {
       this.includeRequest = fetch(this.includeUrl, {headers: {Accept: 'application/json'}})
-        .then(res => res.ok ? res.json() as Promise<{items?: IncludeOption[]}> : {items: []})
-        .then(data => data.items ?? [])
-        .catch(error => {
-          console.error('[zn-remarkd-editor] include list failed', error);
-          return [] as IncludeOption[];
+        .then(res => {
+          if (!res.ok) throw new Error(`include list request failed: ${res.status}`);
+          return res.json() as Promise<{items?: IncludeOption[]}>;
         })
-        .then(items => {
+        .then(data => {
+          const items = data.items ?? [];
           this.includeOptions = items;
+          this.includeLoadFailed = false;
           return items;
+        })
+        .catch(error => {
+          // A list that never arrived is not evidence an embed is broken: leave
+          // the options unresolved so chips keep their marker labels, and let
+          // the next picker open try again.
+          console.error('[zn-remarkd-editor] include list failed', error);
+          this.includeOptions = null;
+          this.includeLoadFailed = true;
+          this.includeRequest = null;
+          return [] as IncludeOption[];
         });
     }
     return this.includeRequest;
@@ -1009,7 +1033,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
           ? `Include not found · ${data.target}`
           : !option && filePath ? 'File include' : 'Included content'}</span>
         ${option?.url ? html`
-          <a class="remarkd-editor__include-link" href=${option.url} target="_blank" rel="noreferrer"
+          <a class="remarkd-editor__include-link" href=${this.appPath(option.url)}
+             target="_blank" rel="noreferrer"
              @click=${(e: MouseEvent) => e.stopPropagation()}>Open</a>` : ''}
       </div>`;
   }
@@ -1158,7 +1183,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                      tooltip="Cancel" @click=${this.closeIncludePicker}></zn-button>
         </div>
         ${this.includeOptions === null
-          ? html`<div class="remarkd-editor__include-picker-empty">Loading…</div>`
+          ? html`<div class="remarkd-editor__include-picker-empty">${
+            this.includeLoadFailed ? 'Could not load Includes' : 'Loading…'}</div>`
           : items.length
             ? items.map(item => html`
               <button type="button" class="remarkd-editor__include-option"

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

@@ -461,4 +461,83 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
       .map(button => button.getAttribute('tooltip'));
     expect(tooltips).to.not.contain('Include');
   });
+  // A list that never arrived is not evidence an embed is broken: flagging every
+  // chip "not found" on a failed request sends people hunting for the wrong bug.
+  it('should not flag includes when the list request fails', async () => {
+    const original = window.fetch;
+    window.fetch = () => Promise.resolve(new Response('nope', {status: 404}));
+    try {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor include-url="/options"
+                           value="include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
+      await el.updateComplete;
+      await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__include'),
+        'the chip never rendered');
+
+      const chip = el.shadowRoot!.querySelector('.remarkd-editor__include')!;
+      expect(chip.classList.contains('remarkd-editor__include--missing')).to.be.false;
+      expect(chip.querySelector('.remarkd-editor__include-title')!.textContent).to.contain('Payment Terms');
+    } finally {
+      window.fetch = original;
+    }
+  });
+
+  it('should say so in the picker when the list request fails', async () => {
+    const original = window.fetch;
+    window.fetch = () => Promise.resolve(new Response('nope', {status: 500}));
+    try {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor include-url="/options" value="# Title"></zn-remarkd-editor>`);
+      const buttons = el.shadowRoot!.querySelectorAll<HTMLElement>('.remarkd-editor__toolbar zn-button');
+      buttons[buttons.length - 1].dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+
+      await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__include-picker-empty')?.textContent
+        ?.includes('Could not load'), 'the picker never reported the failure');
+    } finally {
+      window.fetch = original;
+    }
+  });
+  // An app fragment's URLs are relative to its app base, and the console puts the
+  // app's gaid on the host element. A link built client-side from JSON is inside
+  // the shadow root, where a click retargets to the host, so the pagelet handler
+  // never sees it — the href has to carry the base itself.
+  it('should resolve an include link against the app base from gaid', async () => {
+    stubIncludeList([{id: 'inc-1', title: 'Payment Terms', scope: 'Global',
+      languages: 'English', url: '/global/includes/inc-1'}]);
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor include-url="/ch/kb/kb/kb1/documents/doc1/includes/options"
+                         gaid="ch/kb"
+                         value="include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
+
+    await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__include-link'),
+      'the include list never resolved');
+    expect(el.shadowRoot!.querySelector<HTMLAnchorElement>('.remarkd-editor__include-link')!
+      .getAttribute('href')).to.equal('/ch/kb/global/includes/inc-1');
+  });
+
+  it('should leave an include link alone when it already carries the app base', async () => {
+    stubIncludeList([{id: 'inc-1', title: 'Payment Terms', languages: 'English',
+      url: '/ch/kb/global/includes/inc-1'}]);
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor include-url="/options" gaid="ch/kb"
+                         value="include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
+
+    await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__include-link'),
+      'the include list never resolved');
+    expect(el.shadowRoot!.querySelector<HTMLAnchorElement>('.remarkd-editor__include-link')!
+      .getAttribute('href')).to.equal('/ch/kb/global/includes/inc-1');
+  });
+
+  it('should leave an include link alone without a gaid', async () => {
+    stubIncludeList([{id: 'inc-1', title: 'Payment Terms', languages: 'English',
+      url: '/global/includes/inc-1'}]);
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor include-url="/options"
+                         value="include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
+
+    await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__include-link'),
+      'the include list never resolved');
+    expect(el.shadowRoot!.querySelector<HTMLAnchorElement>('.remarkd-editor__include-link')!
+      .getAttribute('href')).to.equal('/global/includes/inc-1');
+  });
 });