@kubex/zinc 1.1.78 → 1.1.80

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

@@ -1,8 +1,20 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import type ZnInlineEdit from '../inline-edit/inline-edit.component';
+import type ZnSlashMenu from '../slash-menu/slash-menu.component';
+import type ZnTextarea from '../textarea/textarea.component';
 import type ZnTranslations from './translations.component';
 
+// The auto-resizing textarea's ResizeObserver can emit a benign "loop completed with undelivered
+// notifications" warning while the slash menu is positioned. It's not a real error — ignore it so the
+// test runner doesn't treat it as an uncaught exception (capture phase runs before the runner's).
+window.addEventListener('error', (e: ErrorEvent) => {
+  if (typeof e.message === 'string' && e.message.includes('ResizeObserver loop')) {
+    e.stopImmediatePropagation();
+    e.preventDefault();
+  }
+}, true);
+
 describe('<zn-translations>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-translations></zn-translations> `);
@@ -37,4 +49,80 @@ describe('<zn-translations>', () => {
     await expect(el.values['en']).to.equal('Hello World');
     await expect(JSON.parse(el.value)).to.deep.equal({'en': 'Hello World'});
   });
+
+  describe('slash menu', () => {
+    /** Puts the active language's field into edit mode, the way clicking it does. */
+    async function textareaOf(el: ZnTranslations) {
+      await el.updateComplete;
+      const inlineEdit = el.shadowRoot!.querySelector<ZnInlineEdit>('zn-inline-edit')!;
+      await inlineEdit.updateComplete;
+
+      inlineEdit.shadowRoot!.querySelector<HTMLElement>('.ai__left')!
+        .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+      await inlineEdit.updateComplete;
+
+      const textarea = inlineEdit.shadowRoot!.querySelector<ZnTextarea>('zn-textarea')!;
+      await textarea.updateComplete;
+
+      return textarea;
+    }
+
+    async function openSlashMenu(textarea: ZnTextarea) {
+      textarea.focus();
+      textarea.input.value = '/';
+      textarea.input.setSelectionRange(1, 1);
+      textarea.input.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));
+
+      const menuOf = () => textarea.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu');
+      await waitUntil(() => menuOf()?.open, 'the slash menu never opened');
+
+      return menuOf()!;
+    }
+
+    it('offers its slash items on the textarea', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="textarea"
+                         slash-items="Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-translations>`);
+      const menu = await openSlashMenu(await textareaOf(el));
+
+      expect(menu.items.map(item => item.label)).to.deep.equal(['Brand name', 'Support email']);
+    });
+
+    it('offers the same items after switching language', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="textarea"
+                         slash-items="Brand name={{BRAND_NAME}}"></zn-translations>`);
+      el.languages = {'en': 'EN', 'fr': 'FR'};
+      el.values = {'en': '', 'fr': ''};
+      el.setActiveLanguage('fr');
+
+      const menu = await openSlashMenu(await textareaOf(el));
+
+      expect(el.getActiveLanguage()).to.equal('fr');
+      expect(menu.items.map(item => item.label)).to.deep.equal(['Brand name']);
+    });
+
+    it('inserts the token into the active language only', async () => {
+      const el = await fixture<ZnTranslations>(html`
+        <zn-translations input-type="textarea"
+                         slash-items="Brand name={{BRAND_NAME}}"></zn-translations>`);
+      el.languages = {'en': 'EN', 'fr': 'FR'};
+      el.values = {'en': 'Hello', 'fr': ''};
+      el.setActiveLanguage('fr');
+
+      const textarea = await textareaOf(el);
+      await openSlashMenu(textarea);
+
+      textarea.input.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Enter',
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      }));
+      await el.updateComplete;
+
+      expect(el.values.fr).to.equal('{{BRAND_NAME}}');
+      expect(el.values.en, 'the other languages should be untouched').to.equal('Hello');
+    });
+  });
 });

package/src/events/events.ts

@@ -19,3 +19,5 @@ export type {ZnPageChangeEvent} from './zn-page-change';
 export type {ZnPageSelectionChangeEvent} from './zn-page-selection-change';
 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';

package/src/events/zn-slash-insert.ts

@@ -0,0 +1,9 @@
+import type {SlashMenuItem} from "../components/slash-menu/slash-menu-items";
+
+export type ZnSlashInsertEvent = CustomEvent<{ item: SlashMenuItem; value: string }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-slash-insert': ZnSlashInsertEvent;
+  }
+}

package/src/events/zn-slash-select.ts

@@ -0,0 +1,9 @@
+import type {SlashMenuItem} from "../components/slash-menu/slash-menu-items";
+
+export type ZnSlashSelectEvent = CustomEvent<{ item: SlashMenuItem; query: string }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'zn-slash-select': ZnSlashSelectEvent;
+  }
+}

package/src/utilities/caret-position.ts

@@ -0,0 +1,118 @@
+export interface CaretCoordinates {
+  top: number;
+  left: number;
+  height: number;
+}
+
+export type TextField = HTMLTextAreaElement | HTMLInputElement;
+
+// Properties that affect where a character lands, copied onto the mirror so it
+// wraps text identically to the field itself.
+const mirroredProperties = [
+  'direction',
+  'boxSizing',
+  'width',
+  'height',
+  'overflowX',
+  'overflowY',
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+  'borderStyle',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'fontStretch',
+  'fontSize',
+  'fontSizeAdjust',
+  'lineHeight',
+  'fontFamily',
+  'textAlign',
+  'textTransform',
+  'textIndent',
+  'textDecoration',
+  'letterSpacing',
+  'wordSpacing',
+  'tabSize'
+];
+
+function lineHeightOf(computed: CSSStyleDeclaration): number {
+  const lineHeight = parseFloat(computed.lineHeight);
+  if (!Number.isNaN(lineHeight)) return lineHeight;
+
+  const fontSize = parseFloat(computed.fontSize);
+  return Number.isNaN(fontSize) ? 16 : fontSize * 1.2;
+}
+
+/**
+ * Measures where the caret sits inside a text field, relative to the field's own top/left corner.
+ * There is no browser API for this, so the field is mirrored into an off-screen div and the offset
+ * of a marker span at `index` is read back.
+ */
+export function getCaretCoordinates(field: TextField, index: number): CaretCoordinates {
+  const doc = field.ownerDocument;
+  const computed = getComputedStyle(field);
+  const isInput = field.nodeName === 'INPUT';
+  const mirror = doc.createElement('div');
+  const style = mirror.style as unknown as Record<string, string>;
+  const source = computed as unknown as Record<string, string>;
+
+  style.position = 'absolute';
+  style.visibility = 'hidden';
+  style.top = '0';
+  style.left = '-9999px';
+  style.whiteSpace = isInput ? 'pre' : 'pre-wrap';
+  style.overflow = 'hidden';
+  if (!isInput) style.wordWrap = 'break-word';
+
+  mirroredProperties.forEach(prop => {
+    const value = source[prop];
+    if (typeof value === 'string') style[prop] = value;
+  });
+
+  // Inputs are single line, so the mirror has to grow with its content instead
+  if (isInput) style.height = 'auto';
+
+  const before = field.value.slice(0, index);
+  mirror.textContent = isInput ? before.replace(/\s/g, '\u00a0') : before;
+
+  const marker = doc.createElement('span');
+  // A non-empty marker is needed for the browser to give it a position
+  marker.textContent = field.value.slice(index) || '.';
+  mirror.appendChild(marker);
+
+  doc.body.appendChild(mirror);
+  const coordinates: CaretCoordinates = {
+    top: marker.offsetTop + (parseFloat(computed.borderTopWidth) || 0),
+    left: marker.offsetLeft + (parseFloat(computed.borderLeftWidth) || 0),
+    height: lineHeightOf(computed)
+  };
+  mirror.remove();
+
+  return coordinates;
+}
+
+/**
+ * Projects measured caret coordinates onto the viewport, clamped to the field's box so a caret
+ * scrolled out of view doesn't drag anchored content off with it. Split from the measurement so a
+ * cached measurement can be re-projected as the field scrolls or moves.
+ */
+export function caretRectFrom(field: TextField, {top, left, height}: CaretCoordinates): DOMRect {
+  const fieldRect = field.getBoundingClientRect();
+
+  const maxTop = Math.max(fieldRect.top, fieldRect.bottom - height);
+  const y = Math.min(Math.max(fieldRect.top + top - field.scrollTop, fieldRect.top), maxTop);
+  const x = Math.min(Math.max(fieldRect.left + left - field.scrollLeft, fieldRect.left), fieldRect.right);
+
+  return new DOMRect(x, y, 1, height);
+}
+
+/** The caret's position as a viewport rect. */
+export function getCaretRect(field: TextField, index: number): DOMRect {
+  return caretRectFrom(field, getCaretCoordinates(field, index));
+}

package/src/zinc.ts

@@ -112,6 +112,8 @@ export { default as PagePaletteItem } from './components/page-builder/modules/pa
 export { default as PageSectionCard } from './components/page-builder/modules/page-section-card';
 export { default as PreviewFrame } from './components/preview-frame';
 export { default as ThemeEditor } from './components/theme-editor';
+export { default as SlashMenu } from './components/slash-menu';
+export { default as SlashItem } from './components/slash-item';
 /* plop:component */
 
 // Base Component
@@ -122,6 +124,7 @@ export * from './utilities/on';
 export * from './utilities/query';
 export * from './utilities/lit-to-html';
 export * from './utilities/form';
+export * from './utilities/caret-position';
 
 // Events
 export * from './events/events';