@kubex/zinc 1.1.163 → 1.1.165

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

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
 import {aTimeout, expect, fixture, html, waitUntil} from '@open-wc/testing';
-import {EDITOR_ACTIONS} from './actions';
+import {EDITOR_ACTIONS, isApple} from './actions';
 import {FEATURE_KEYS} from './feature-keys';
 import {parse as remarkdParse} from 'remarkd-js';
 import type ZnButton from '../button';
@@ -352,8 +352,10 @@ Second"></zn-remarkd-editor>`);
       .filter(group => getComputedStyle(group).display === 'none');
     expect(collapsed.length, 'nothing collapsed at 240px').to.be.greaterThan(0);
 
-    // No action is lost: the collapsed groups' actions are all in the menu.
-    const menuItems = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar-more zn-menu-item');
+    // One top-level entry per collapsed group, each holding that group's actions.
+    const groupItems = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar-more > zn-menu > zn-menu-item');
+    expect(groupItems.length).to.equal(collapsed.length);
+    const menuItems = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar-more zn-menu[slot="submenu"] zn-menu-item');
     expect(menuItems.length).to.be.greaterThan(0);
 
     // The trigger itself must stay on-screen — a group that doesn't fit must not force its
@@ -372,7 +374,7 @@ Second"></zn-remarkd-editor>`);
       .to.equal(expectedCount);
   });
 
-  it('should scroll the overflow menu instead of running off the viewport', async () => {
+  it('should cap each overflow submenu so it scrolls instead of running off the viewport', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor style="width: 240px"></zn-remarkd-editor>`);
     await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__toolbar-more'),
@@ -384,14 +386,14 @@ Second"></zn-remarkd-editor>`);
     // wait used for the same reason in expanding-action's drop-panel overflow tests.
     await new Promise(resolve => requestAnimationFrame(resolve));
 
-    // At 240px, every action lands in the menu — enough zn-menu-items to overflow the
-    // max-height. The scroll container is zn-menu's own inner `.menu` div (set via the
-    // --zn-menu-max-height custom property), not the zn-menu host itself: a constraint on
-    // the host leaves the host with room to spare, so a wheel over an item finds `.menu`
-    // has nothing to scroll and never chains out to the host.
-    const menu = dropdown.querySelector('zn-menu')!;
+    // Inline is the longest group, so its submenu is the one that can outgrow the viewport.
+    // The cap lands on zn-menu's inner `.menu` div (via --zn-menu-max-height), not the host:
+    // a constraint on the host leaves `.menu` with nothing to scroll.
+    const inlineItem = [...dropdown.querySelectorAll(':scope > zn-menu > zn-menu-item')]
+      .find(item => item.textContent?.includes('Strong'))!;
+    const menu = inlineItem.querySelector('zn-menu[slot="submenu"]')!;
     const inner = menu.shadowRoot!.querySelector<HTMLElement>('.menu')!;
-    expect(inner.scrollHeight, 'the menu needs room to scroll').to.be.greaterThan(inner.clientHeight);
+    expect(getComputedStyle(inner).maxHeight).to.not.equal('none');
     expect(getComputedStyle(inner).overflow).to.equal('auto');
   });
 
@@ -416,7 +418,7 @@ Second"></zn-remarkd-editor>`);
     // trigger wouldn't actually move focus in a test DOM, so the blur is reproduced directly.
     input.dispatchEvent(new Event('blur'));
 
-    const strong = [...dropdown.querySelectorAll('zn-menu-item')]
+    const strong = [...dropdown.querySelectorAll('zn-menu[slot="submenu"] zn-menu-item')]
       .find(item => item.textContent?.includes('Strong'));
     expect(strong, 'Strong should be reachable through the overflow menu').to.exist;
     strong!.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
@@ -482,7 +484,7 @@ Second"></zn-remarkd-editor>`);
     const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
     input.setSelectionRange(0, 5);
     const strong = [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Strong')!;
+      .find(b => b.getAttribute('label') === 'Strong')!;
     strong.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
@@ -492,6 +494,163 @@ Second"></zn-remarkd-editor>`);
     expect([result.selectionStart, result.selectionEnd]).to.eql([2, 7]);
   });
 
+  describe('keyboard shortcuts', () => {
+    const apple = isApple();
+    const press = (input: HTMLTextAreaElement, key: string, init: KeyboardEventInit = {}) => {
+      const event = new KeyboardEvent('keydown', {key, bubbles: true, composed: true, cancelable: true, ...init});
+      input.dispatchEvent(event);
+      return event;
+    };
+    const mod = (init: KeyboardEventInit = {}): KeyboardEventInit =>
+      apple ? {metaKey: true, ...init} : {ctrlKey: true, ...init};
+
+    async function editing(value: string, start: number, end: number) {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value=${value}></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+      input.setSelectionRange(start, end);
+      return {el, input};
+    }
+
+    it('should bold the selection with the platform modifier + B', async () => {
+      const {el, input} = await editing('hello world', 0, 5);
+      const event = press(input, 'b', mod());
+      await el.updateComplete;
+      expect(event.defaultPrevented).to.be.true;
+      expect(input.value).to.equal('**hello** world');
+    });
+
+    it('should toggle the mark back off on a second press', async () => {
+      const {el, input} = await editing('hello world', 0, 5);
+      press(input, 'b', mod());
+      await el.updateComplete;
+      press(input, 'b', mod());
+      await el.updateComplete;
+      expect(input.value).to.equal('hello world');
+    });
+
+    it('should map shift shortcuts, e.g. strikethrough', async () => {
+      const {el, input} = await editing('hello world', 0, 5);
+      press(input, 'X', mod({shiftKey: true}));
+      await el.updateComplete;
+      expect(input.value).to.equal('~~hello~~ world');
+    });
+
+    it('should ignore the other platform\'s modifier', async () => {
+      const {el, input} = await editing('hello world', 0, 5);
+      const event = press(input, 'b', apple ? {ctrlKey: true} : {metaKey: true});
+      await el.updateComplete;
+      expect(event.defaultPrevented).to.be.false;
+      expect(input.value).to.equal('hello world');
+    });
+
+    it('should ignore AltGr (Ctrl+Alt) combinations', async () => {
+      const {el, input} = await editing('hello world', 0, 5);
+      press(input, 'b', mod({altKey: true}));
+      await el.updateComplete;
+      expect(input.value).to.equal('hello world');
+    });
+
+    it('should show the shortcut in the toolbar tooltip', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`<zn-remarkd-editor></zn-remarkd-editor>`);
+      const strong = [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
+        .find(b => b.getAttribute('label') === 'Strong')!;
+      expect(strong.getAttribute('tooltip')).to.equal(apple ? 'Strong (⌘B)' : 'Strong (Ctrl+B)');
+    });
+  });
+
+  describe('list continuation', () => {
+    const enter = (input: HTMLTextAreaElement) => {
+      const event = new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, composed: true, cancelable: true});
+      input.dispatchEvent(event);
+      return event;
+    };
+
+    it('should continue a numbered list on Enter in the open block', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value="1. hello"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+      input.setSelectionRange(8, 8);
+      let inputs = 0;
+      el.addEventListener('zn-input', () => inputs++);
+
+      expect(enter(input).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(input.value).to.equal('1. hello\n2. ');
+      expect(input.selectionStart).to.equal(12);
+      expect(inputs).to.equal(1);
+    });
+
+    it('should leave Enter as a plain newline outside a list', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value="hello"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+      input.setSelectionRange(5, 5);
+      expect(enter(input).defaultPrevented).to.be.false;
+    });
+
+    /** Opens the first block and replaces its draft with `draft`, caret at the end. */
+    async function editDraft(draft: string) {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value="placeholder"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      return {el, input: typeInBlock(el, draft)};
+    }
+
+    it('should finish the block on Enter at an empty trailing list item', async () => {
+      const {el, input} = await editDraft('- a\n- ');
+      expect(enter(input).defaultPrevented).to.be.true;
+      await el.updateComplete;
+
+      expect(el.value).to.equal('- a');
+      const draft = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+      expect(draft.value, 'a fresh block is opened below').to.equal('');
+    });
+
+    it('should finish the block on a double Enter after a paragraph', async () => {
+      const {el, input} = await editDraft('hello\n');
+      expect(enter(input).defaultPrevented).to.be.true;
+      await el.updateComplete;
+
+      expect(el.value).to.equal('hello');
+      expect(el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!.value).to.equal('');
+    });
+
+    it('should keep a blank line inside an open container', async () => {
+      const {input} = await editDraft('```\ncode\n');
+      expect(enter(input).defaultPrevented).to.be.false;
+    });
+
+    it('should clear a mid-list empty item without finishing the block', async () => {
+      const {el, input} = await editDraft('- a\n- \n- b');
+      input.setSelectionRange(6, 6);
+      expect(enter(input).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(input.value).to.equal('- a\n\n- b');
+    });
+
+    it('should continue a list on Enter in the raw source view', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor allow-raw value="- [ ] first"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector('.remarkd-editor__raw-toggle')!
+        .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+      await el.updateComplete;
+      const raw = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__raw')!;
+      raw.setSelectionRange(11, 11);
+
+      expect(enter(raw).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(el.value).to.equal('- [ ] first\n- [ ] ');
+    });
+  });
+
   it('should insert a placeholder when nothing is selected', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="hello"></zn-remarkd-editor>`);
@@ -501,7 +660,7 @@ Second"></zn-remarkd-editor>`);
     input.setSelectionRange(5, 5);
 
     [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Strong')!
+      .find(b => b.getAttribute('label') === 'Strong')!
       .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
@@ -519,7 +678,7 @@ Second"></zn-remarkd-editor>`);
     const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
     input.setSelectionRange(2, 7); // hello, inside the marks
     [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Strong')!
+      .find(b => b.getAttribute('label') === 'Strong')!
       .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
@@ -536,7 +695,7 @@ Second"></zn-remarkd-editor>`);
     input.setSelectionRange(2, 7); // hello, inside the strike marks
 
     [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Subscript')!
+      .find(b => b.getAttribute('label') === 'Subscript')!
       .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
@@ -549,11 +708,11 @@ Second"></zn-remarkd-editor>`);
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="hello" link-url="/links"></zn-remarkd-editor>`);
     const strong = [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Strong')!;
+      .find(b => b.getAttribute('label') === 'Strong')!;
     expect(strong.hasAttribute('disabled')).to.be.true;
 
     const link = [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Link to article')!;
+      .find(b => b.getAttribute('label') === 'Link to article')!;
     expect(link.hasAttribute('disabled')).to.be.true;
   });
 
@@ -566,7 +725,7 @@ Second"></zn-remarkd-editor>`);
     input.setSelectionRange(2, 7); // Label, inside the link markup
 
     [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Link')!
+      .find(b => b.getAttribute('label') === 'Link')!
       .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
@@ -587,7 +746,7 @@ Second"></zn-remarkd-editor>`);
     input.setSelectionRange(1, 6); // Label, inside the real link markup
 
     [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Link')!
+      .find(b => b.getAttribute('label') === 'Link')!
       .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
@@ -601,7 +760,7 @@ Second"></zn-remarkd-editor>`);
     // Two actions share the "Code" tooltip (inline-code in the inline group, code-fence in
     // the blocks group) — disambiguate by the group the button actually lives in.
     const codeButton = [...el.shadowRoot!.querySelectorAll<HTMLElement>('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Code'
+      .find(b => b.getAttribute('label') === 'Code'
         && b.closest('.toolbar__group')?.getAttribute('data-group') === 'blocks')!;
     codeButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
@@ -619,7 +778,7 @@ Second"></zn-remarkd-editor>`);
     await el.updateComplete;
 
     const strong = [...el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button')]
-      .find(b => b.getAttribute('tooltip') === 'Strong')!;
+      .find(b => b.getAttribute('label') === 'Strong')!;
     const mousedown = new MouseEvent('mousedown', {bubbles: true, composed: true, cancelable: true});
     strong.dispatchEvent(mousedown);
 
@@ -900,7 +1059,7 @@ Second"></zn-remarkd-editor>`);
   it('should show an inline zn-file picker from the toolbar image button', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor attachment-url="/upload"></zn-remarkd-editor>`);
-    const imageButton = el.shadowRoot!.querySelector('.remarkd-editor__toolbar zn-button[tooltip="Image"]')!;
+    const imageButton = el.shadowRoot!.querySelector('.remarkd-editor__toolbar zn-button[label="Image"]')!;
     imageButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await el.updateComplete;
 
@@ -1139,7 +1298,7 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
       <zn-remarkd-editor include-url="/options" value="# Title"></zn-remarkd-editor>`);
 
     const includeButton = el.shadowRoot!
-      .querySelector<HTMLElement>('.remarkd-editor__toolbar zn-button[tooltip="Include"]')!;
+      .querySelector<HTMLElement>('.remarkd-editor__toolbar zn-button[label="Include"]')!;
     includeButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
 
     await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__include-option'),
@@ -1176,7 +1335,7 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor include-url="/options" value="# Title"></zn-remarkd-editor>`);
     const includeButton = el.shadowRoot!
-      .querySelector<HTMLElement>('.remarkd-editor__toolbar zn-button[tooltip="Include"]')!;
+      .querySelector<HTMLElement>('.remarkd-editor__toolbar zn-button[label="Include"]')!;
     includeButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await waitUntil(() => el.shadowRoot!.querySelectorAll('.remarkd-editor__include-option').length === 2,
       'the include picker never listed both');
@@ -1195,7 +1354,7 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
     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'));
+      .map(button => button.getAttribute('label'));
     expect(tooltips).to.not.contain('Image');
   });
 
@@ -1203,7 +1362,7 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
     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'));
+      .map(button => button.getAttribute('label'));
     expect(tooltips).to.contain('Image');
   });
 
@@ -1211,7 +1370,7 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
     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'));
+      .map(button => button.getAttribute('label'));
     expect(tooltips).to.not.contain('Include');
   });
   // A list that never arrived is not evidence an embed is broken: flagging every
@@ -1242,7 +1401,7 @@ include::inc-1[Payment Terms]"></zn-remarkd-editor>`);
       const el = await fixture<ZnRemarkdEditor>(html`
         <zn-remarkd-editor include-url="/options" value="# Title"></zn-remarkd-editor>`);
       const includeButton = el.shadowRoot!
-        .querySelector<HTMLElement>('.remarkd-editor__toolbar zn-button[tooltip="Include"]')!;
+        .querySelector<HTMLElement>('.remarkd-editor__toolbar zn-button[label="Include"]')!;
       includeButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
 
       await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__include-picker-empty')?.textContent
@@ -1461,7 +1620,7 @@ const x = {product};
     await dropdown.show();
     await new Promise(resolve => requestAnimationFrame(resolve));
 
-    const linkItem = [...dropdown.querySelectorAll('zn-menu-item')]
+    const linkItem = [...dropdown.querySelectorAll('zn-menu[slot="submenu"] zn-menu-item')]
       .find(item => item.textContent?.includes('Link to article'));
     expect(linkItem, 'the article-link action should be reachable through the overflow menu').to.exist;
     // ZnButton overrides click() without dispatching a DOM event, so the menu item's
@@ -1584,7 +1743,7 @@ const x = {product};
     await el.updateComplete;
     const input = typeInBlock(el, text);
     input.setSelectionRange(from, to);
-    el.shadowRoot!.querySelector<ZnButton>('zn-button[tooltip="Link to article"]')!
+    el.shadowRoot!.querySelector<ZnButton>('zn-button[label="Link to article"]')!
       .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
     await waitUntil(() => el.shadowRoot!.querySelector('.remarkd-editor__link-picker'),
       'the link picker never opened');

package/src/events/events.ts

@@ -21,3 +21,4 @@ export type {ZnThemeChangeEvent} from './zn-theme-change';
 export type {ZnThemeSubmitEvent} from './zn-theme-submit';
 export type {ZnSlashSelectEvent} from './zn-slash-select';
 export type {ZnSlashInsertEvent} from './zn-slash-insert';
+export type {ZnRepositionEvent} from './zn-reposition';

package/src/events/zn-reposition.ts

@@ -0,0 +1,7 @@
+export type ZnRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-reposition': ZnRepositionEvent;
+  }
+}