@kubex/zinc 1.1.141 → 1.1.142

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

@@ -331,7 +331,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should group the toolbar buttons', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+      <zn-remarkd-editor attachment-url="/attachments" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
     const groups = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar .toolbar__group');
 
     expect(groups.length).to.be.greaterThan(5);
@@ -343,7 +343,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should move toolbar groups into an overflow menu when narrow', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor style="width: 240px"></zn-remarkd-editor>`);
+      <zn-remarkd-editor attachment-url="/attachments" style="width: 240px"></zn-remarkd-editor>`);
     await el.updateComplete;
     await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__toolbar-more'),
       'the overflow trigger never appeared');
@@ -748,7 +748,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should list every action in the slash menu under its group', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
@@ -761,20 +761,32 @@ Second"></zn-remarkd-editor>`);
 
   it('should omit the Include action from the slash menu without an include-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" link-url="/links"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
     await waitUntil(() => el.shadowRoot!.querySelector('zn-slash-menu[open]'), 'the slash menu never opened');
 
     const menu = el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu')!;
-    expect(menu.items.length).to.equal(EDITOR_ACTIONS.length - 2);
+    expect(menu.items.length).to.equal(EDITOR_ACTIONS.length - 1);
     expect(menu.items.every(item => item.action !== 'include')).to.be.true;
   });
 
+  it('should omit the Image action from the slash menu without an attachment-url', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+    typeInBlock(el, '/');
+    await waitUntil(() => el.shadowRoot!.querySelector('zn-slash-menu[open]'), 'the slash menu never opened');
+
+    const menu = el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu')!;
+    expect(menu.items.every(item => item.action !== 'image')).to.be.true;
+  });
+
   it('should omit the article link action without a link-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello" include-url="/includes"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" include-url="/includes"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
@@ -787,7 +799,7 @@ Second"></zn-remarkd-editor>`);
 
   it('should offer the article link action with a link-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
-      <zn-remarkd-editor value="Hello" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
+      <zn-remarkd-editor value="Hello" attachment-url="/attachments" include-url="/includes" link-url="/links"></zn-remarkd-editor>`);
     el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
     await el.updateComplete;
     typeInBlock(el, '/');
@@ -1179,6 +1191,22 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
     expect(options[0].textContent).to.contain('Refund Policy');
   });
 
+  it('should offer no image entry points without an attachment-url', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title"></zn-remarkd-editor>`);
+    const tooltips = Array.from(el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button'))
+      .map(button => button.getAttribute('tooltip'));
+    expect(tooltips).to.not.contain('Image');
+  });
+
+  it('should offer the Image action with an attachment-url', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title" attachment-url="/attachments"></zn-remarkd-editor>`);
+    const tooltips = Array.from(el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button'))
+      .map(button => button.getAttribute('tooltip'));
+    expect(tooltips).to.contain('Image');
+  });
+
   it('should offer no include entry points without an include-url', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="# Title"></zn-remarkd-editor>`);

package/src/components/sp/sp.scss

@@ -15,6 +15,12 @@
   height: 100%;
 }
 
+// A form wrapping the whole panel is there to submit it, not to lay it out —
+// leaving it in the box tree floors the panel at the form's content height.
+:host([grow]) ::slotted(form:only-child) {
+  display: contents;
+}
+
 :host([max-full]) {
   max-height: 100%;
   overflow: hidden;

package/src/components/sp/sp.test.ts

@@ -8,6 +8,37 @@ describe('<zn-sp>', () => {
     expect(el).to.exist;
   });
 
+  it('should lay out through a form that wraps the whole panel', async () => {
+    const parent = await fixture(html`
+      <div style="display: flex; flex-direction: column; height: 400px; width: 600px;">
+        <zn-sp grow flush>
+          <form>
+            <div id="panel" style="height: 100%;">Content</div>
+          </form>
+        </zn-sp>
+      </div>
+    `);
+
+    const form = parent.querySelector('form')!;
+    expect(getComputedStyle(form).display).to.equal('contents');
+    expect(parent.querySelector<HTMLElement>('#panel')!.getBoundingClientRect().height).to.equal(400);
+  });
+
+  it('should leave a form that shares the panel with siblings alone', async () => {
+    const parent = await fixture(html`
+      <div style="display: flex; flex-direction: column; height: 400px;">
+        <zn-sp grow>
+          <h2>Heading</h2>
+          <form>
+            <div>Content</div>
+          </form>
+        </zn-sp>
+      </div>
+    `);
+
+    expect(getComputedStyle(parent.querySelector('form')!).display).to.equal('block');
+  });
+
   it('should fill its parent container height', async () => {
     const parent = await fixture(html`
       <div style="height: 300px;">

package/src/components/translations/translations.component.ts

@@ -13,6 +13,7 @@ import ZnChip from '../chip';
 import ZnInlineEdit from '../inline-edit';
 import ZnInput from '../input';
 import ZnOption from '../option';
+import ZnRemarkdEditor from '../remarkd-editor';
 import ZnSelect from '../select';
 import ZnTextarea from '../textarea';
 import type {PropertyValues} from 'lit';
@@ -64,6 +65,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     'zn-inline-edit': ZnInlineEdit,
     'zn-input': ZnInput,
     'zn-option': ZnOption,
+    'zn-remarkd-editor': ZnRemarkdEditor,
     'zn-select': ZnSelect,
     'zn-textarea': ZnTextarea
   };
@@ -96,11 +98,23 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({type: Boolean, reflect: true}) flush = false;
 
   /** The control each translation is edited through. */
-  @property({attribute: "input-type"}) inputType: 'text' | 'number' | 'textarea' = 'text';
+  @property({attribute: "input-type"}) inputType: 'text' | 'number' | 'textarea' | 'remarkd' = 'text';
 
   /** Rows of the textarea, when `input-type` is `textarea`. */
   @property({attribute: "textarea-rows", type: Number}) textareaRows: number | undefined;
 
+  /** Allows raw HTML blocks, when `input-type` is `remarkd`. */
+  @property({type: Boolean, attribute: 'allow-raw'}) allowRaw = false;
+
+  /** Where the remarkd editor uploads images, when `input-type` is `remarkd`. */
+  @property({attribute: 'attachment-url'}) attachmentUrl = '';
+
+  /** Where the remarkd editor lists embeddable includes, when `input-type` is `remarkd`. */
+  @property({attribute: 'include-url'}) includeUrl = '';
+
+  /** Where the remarkd editor searches link targets, when `input-type` is `remarkd`. */
+  @property({attribute: 'link-url'}) linkUrl = '';
+
   /**
    * Edits the translation through a `zn-inline-edit` — the value reads as text until it is clicked — rather than a
    * plain input or textarea.
@@ -325,7 +339,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   };
 
   private handleValueUpdate = (e: CustomEvent) => {
-    const target = e.target as (ZnInput | ZnInlineEdit | ZnTextarea);
+    const target = e.target as (ZnInput | ZnInlineEdit | ZnRemarkdEditor | ZnTextarea);
     if (this._activeLanguage) {
       const newValue: string = target.value as string;
       if (newValue !== this.values[this._activeLanguage]) {
@@ -387,6 +401,23 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
         ></zn-inline-edit>`;
     }
 
+    if (this.inputType === 'remarkd') {
+      return html`
+        <zn-remarkd-editor
+          .value=${live(value)}
+          name="${this.name}"
+          placeholder="${placeholder}"
+          dir="${dir}"
+          ?disabled="${this.disabled}"
+          ?allow-raw="${this.allowRaw}"
+          attachment-url="${this.attachmentUrl}"
+          include-url="${this.includeUrl}"
+          link-url="${this.linkUrl}"
+          @zn-change="${this.handleValueUpdate}"
+          @zn-input="${this.handleValueUpdate}"
+        ></zn-remarkd-editor>`;
+    }
+
     if (this.inputType === 'textarea') {
       return html`
         <zn-textarea

package/src/components/translations/translations.test.ts

@@ -219,6 +219,47 @@ describe('<zn-translations>', () => {
       expect(el.shadowRoot!.querySelector('zn-input')).to.be.null;
     });
 
+    it('renders a remarkd editor for input-type="remarkd"', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="remarkd" values='{"en":"= Hello"}'></zn-translations>`);
+      await el.updateComplete;
+
+      const editor = el.shadowRoot!.querySelector<HTMLElement & { value: string }>('zn-remarkd-editor');
+      expect(editor).to.exist;
+      expect(editor!.value).to.equal('= Hello');
+      expect(el.shadowRoot!.querySelector('zn-input')).to.be.null;
+      expect(el.shadowRoot!.querySelector('zn-textarea')).to.be.null;
+    });
+
+    it('passes its editor endpoints through to the remarkd editor', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="remarkd"
+                         allow-raw
+                         attachment-url="/a"
+                         include-url="/i"
+                         link-url="/l"></zn-translations>`);
+      await el.updateComplete;
+
+      const editor = el.shadowRoot!.querySelector('zn-remarkd-editor')!;
+      expect(editor.getAttribute('attachment-url')).to.equal('/a');
+      expect(editor.getAttribute('include-url')).to.equal('/i');
+      expect(editor.getAttribute('link-url')).to.equal('/l');
+      expect(editor.hasAttribute('allow-raw')).to.be.true;
+    });
+
+    it('writes a remarkd edit back to the active language', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="remarkd" values='{"en":"one"}'></zn-translations>`);
+      await el.updateComplete;
+
+      const editor = el.shadowRoot!.querySelector<HTMLElement & { value: string }>('zn-remarkd-editor')!;
+      editor.value = 'two';
+      editor.dispatchEvent(new CustomEvent('zn-change', {bubbles: true, composed: true}));
+      await el.updateComplete;
+
+      expect(el.values.en).to.equal('two');
+    });
+
     it('renders an inline edit when asked for one', async () => {
       const el = await fixture<ZnTranslations>(html`
         <zn-translations inline-edit values='{"en":"Hello"}'></zn-translations>`);