@kubex/zinc 1.1.163 → 1.1.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.163",
+  "version": "1.1.164",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/menu/menu.scss

@@ -17,9 +17,27 @@
   // Same surface as the shell-header menus below, so every dropdown in the
   // product reads as one material rather than splitting into --zn-panel menus
   // and --zn-color-navigation ones depending on where it was mounted.
-  // (No backdrop-filter here: at 0.95 the blur is not worth the GPU cost on
-  // every dropdown, and .menu--shell keeps it for the chrome look.)
-  background-color: rgba(var(--zn-color-navigation, 255, 255, 255), 0.95);
+  background-color: rgb(var(--zn-color-navigation, 255, 255, 255));
+}
+
+// A submenu's border sits on its parent menu's edge border, so the two share one line.
+:host([slot="submenu"]) .menu {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+// Set by the submenu controller while this submenu extends past its parent's bottom edge.
+:host([slot="submenu"][data-extends-below]) .menu {
+  border-end-start-radius: var(--zn-border-radius);
+}
+
+// Set by the submenu controller on the parent menu while a submenu covers that corner.
+:host([data-submenu-top]) .menu {
+  border-start-end-radius: 0;
+}
+
+:host([data-submenu-bottom]) .menu {
+  border-end-end-radius: 0;
 }
 
 // A capped menu has to look scrollable, so the bar is always drawn rather than

package/src/components/menu-item/menu-item.component.ts

@@ -260,7 +260,7 @@ export default class ZnMenuItem extends ZincElement {
           </span>` : ''}
 
         <span part="submenu-icon" class="menu-item__chevron">
-          <zn-icon src=${isRtl ? 'chevron_left' : 'chevron_right'} aria-hidden="true"></zn-icon>
+          <zn-icon src=${isRtl ? 'chevron_left' : 'chevron_right'} size="18" aria-hidden="true"></zn-icon>
         </span>
 
         ${this.submenuController.renderSubmenu()}

package/src/components/menu-item/menu-item.scss

@@ -1,8 +1,9 @@
 @use "../../wc";
 
 :host {
+  // Overlaps the parent menu's padding so the submenu's border lands on the parent's.
+  --submenu-offset: 1px;
   // Baseline — standalone items (e.g. app/sidebar navigation): primary hover
-  --submenu-offset: -2px;
   --color: var(--zn-text-menu-link-color);
   --hover-color: rgb(var(--zn-primary));
   --hover-bg: rgba(var(--zn-color-navigation-highlight), var(--zn-panel-highlight-opacity));
@@ -239,6 +240,8 @@
 
 .menu-item--has-submenu .menu-item__chevron {
   display: flex;
+  height: auto;
+  margin-inline-start: var(--zn-spacing-x-small);
 }
 
 :host(:not([role="menuitemcheckbox"])) .menu-item .menu-item__check {
@@ -251,9 +254,7 @@
   display: flex;
 }
 
-/* Add elevation and z-index to submenus */
 zn-popup::part(popup) {
-  box-shadow: var(--zn-shadow-large);
   z-index: 100;
   margin-left: var(--submenu-offset);
 }

package/src/components/menu-item/submenu-controller.ts

@@ -210,6 +210,16 @@ export class SubmenuController implements ReactiveController {
 
     const {left, top, width, height} = menu.getBoundingClientRect();
 
+    const parentMenu = this.host.parentElement;
+    const parentPanel = parentMenu?.shadowRoot?.querySelector('.menu') ?? parentMenu;
+    if (parentMenu && parentPanel) {
+      const parent = parentPanel.getBoundingClientRect();
+      menu.toggleAttribute('data-extends-below', top + height > parent.bottom + 1);
+      // Flags the parent's corners the submenu covers, so the parent squares them off.
+      parentMenu.toggleAttribute('data-submenu-top', top <= parent.top + 1);
+      parentMenu.toggleAttribute('data-submenu-bottom', top + height >= parent.bottom - 1);
+    }
+
     this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);
     this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);
     this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);
@@ -223,6 +233,10 @@ export class SubmenuController implements ReactiveController {
         this.host.requestUpdate();
       }
     }
+    if (!state) {
+      this.host.parentElement?.removeAttribute('data-submenu-top');
+      this.host.parentElement?.removeAttribute('data-submenu-bottom');
+    }
   }
 
   // Shows the submenu. Supports disabling the opening delay, e.g. for keyboard events that want to set the focus to the
@@ -244,21 +258,12 @@ export class SubmenuController implements ReactiveController {
 
   // Calculate the space the top of a menu takes-up, for aligning the popup menu-item with the activating element.
   private updateSkidding(): void {
-    // .computedStyleMap() not always available.
-    if (!this.host.parentElement?.computedStyleMap) {
-      return;
-    }
-    const styleMap: StylePropertyMapReadOnly = this.host.parentElement.computedStyleMap();
-    const attrs: string[] = ['padding-top', 'border-top-width', 'margin-top'];
-
-    const skidding = attrs.reduce((accumulator, attr) => {
-      const styleValue: CSSStyleValue = styleMap.get(attr) ?? new CSSUnitValue(0, 'px');
-      const unitValue = styleValue instanceof CSSUnitValue ? styleValue : new CSSUnitValue(0, 'px');
-      const pxValue = unitValue.to('px');
-      return accumulator - pxValue.value;
-    }, 0);
-
-    this.skidding = skidding;
+    // zn-menu's padding and border sit on its inner `.menu`, not the host.
+    const menu = this.host.parentElement;
+    const panel = menu?.shadowRoot?.querySelector('.menu') ?? menu;
+    if (!panel) return;
+    const style = getComputedStyle(panel);
+    this.skidding = -(parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth) + parseFloat(style.marginTop));
   }
 
   isExpanded(): boolean {

package/src/components/popup/popup.component.ts

@@ -31,7 +31,7 @@ function isVirtualElement(e: unknown): e is VirtualElement {
  *
  * @dependency zn-example
  *
- * @event zn-event-name - Emitted as an example.
+ * @event zn-reposition - Emitted each time the popup is positioned.
  *
  * @slot - The default slot.
  * @slot example - An example slot.
@@ -418,6 +418,8 @@ export default class ZnPopup extends ZincElement {
         this.popup.showPopover();
       }
 
+      this.emit('zn-reposition');
+
       if (this.arrow) {
         const arrowX = middlewareData.arrow!.x;
         const arrowY = middlewareData.arrow!.y;

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

@@ -10,6 +10,12 @@ export interface InlineMark {
   placeholder?: string;
 }
 
+/** A shortcut on the platform modifier: Cmd on Apple devices, Ctrl elsewhere. */
+export interface Shortcut {
+  key: string;
+  shift?: boolean;
+}
+
 export interface EditorAction {
   /** Stable id, used for toolbar keys and tests. */
   key: string;
@@ -26,6 +32,7 @@ export interface EditorAction {
   caretOffset?: number;
   /** Actions that open their own picker instead of inserting text. */
   opens?: 'image' | 'include' | 'link';
+  shortcut?: Shortcut;
 }
 
 /** Toolbar order, most-used first — the last groups are the first to collapse. */
@@ -116,23 +123,43 @@ export const EDITOR_ACTIONS: EditorAction[] = [
   {key: 'ifeval', label: 'If expression', icon: 'equal@lu', group: 'logic', prefix: 'ifeval::[1 > 0]\n\nendif::[]', caretOffset: 9},
 
   // Inline — applied to the selection in the open block
-  {key: 'inline-formatting', label: 'Strong', icon: 'bold@lu', group: 'inline', keywords: ['bold'], inline: {before: '**', placeholder: 'text'}},
-  {key: 'emphasis', label: 'Emphasis', icon: 'italic@lu', group: 'inline', keywords: ['italic'], inline: {before: '__', placeholder: 'text'}},
-  {key: 'inline-code', label: 'Code', icon: 'square-code@lu', group: 'inline', inline: {before: '`', placeholder: 'code'}},
-  {key: 'underline', label: 'Underline', icon: 'underline@lu', group: 'inline', inline: {before: '___', placeholder: 'text'}},
-  {key: 'strike', label: 'Strikethrough', icon: 'strikethrough@lu', group: 'inline', keywords: ['delete'], inline: {before: '~~', placeholder: 'text'}},
-  {key: 'subscript', label: 'Subscript', icon: 'subscript@lu', group: 'inline', inline: {before: '~', placeholder: '2'}},
-  {key: 'superscript', label: 'Superscript', icon: 'superscript@lu', group: 'inline', inline: {before: '^', placeholder: '2'}},
+  {key: 'inline-formatting', label: 'Strong', icon: 'bold@lu', group: 'inline', keywords: ['bold'], inline: {before: '**', placeholder: 'text'}, shortcut: {key: 'b'}},
+  {key: 'emphasis', label: 'Emphasis', icon: 'italic@lu', group: 'inline', keywords: ['italic'], inline: {before: '__', placeholder: 'text'}, shortcut: {key: 'i'}},
+  {key: 'inline-code', label: 'Code', icon: 'square-code@lu', group: 'inline', inline: {before: '`', placeholder: 'code'}, shortcut: {key: 'e'}},
+  {key: 'underline', label: 'Underline', icon: 'underline@lu', group: 'inline', inline: {before: '___', placeholder: 'text'}, shortcut: {key: 'u'}},
+  {key: 'strike', label: 'Strikethrough', icon: 'strikethrough@lu', group: 'inline', keywords: ['delete'], inline: {before: '~~', placeholder: 'text'}, shortcut: {key: 'x', shift: true}},
+  {key: 'subscript', label: 'Subscript', icon: 'subscript@lu', group: 'inline', inline: {before: '~', placeholder: '2'}, shortcut: {key: ','}},
+  {key: 'superscript', label: 'Superscript', icon: 'superscript@lu', group: 'inline', inline: {before: '^', placeholder: '2'}, shortcut: {key: '.'}},
   {key: 'keyboard', label: 'Keyboard', icon: 'keyboard@lu', group: 'inline', keywords: ['kbd', 'shortcut'], inline: {before: 'kbd:[', after: ']', placeholder: 'Ctrl+C'}},
   {key: 'footnote', label: 'Footnote', icon: 'asterisk@lu', group: 'inline', inline: {before: 'footnote:[', after: ']', placeholder: 'Note'}},
   {key: 'tooltip', label: 'Tooltip', icon: 'message-circle-question-mark@lu', group: 'inline', keywords: ['term'], inline: {before: '{', after: '}(Explanation)', placeholder: 'Term'}},
   {key: 'cross-reference', label: 'Cross reference', icon: 'link-2@lu', group: 'inline', keywords: ['xref'], inline: {before: '<<', after: '>>', placeholder: 'section,Label'}},
-  {key: 'links-and-images', label: 'Link', icon: 'link@lu', group: 'inline', inline: {before: '[', after: '](https://)', placeholder: 'Label'}},
-  {key: 'document-link', label: 'Link to article', icon: 'file-symlink@lu', group: 'inline', keywords: ['article', 'document', 'kb'], opens: 'link'},
+  {key: 'links-and-images', label: 'Link', icon: 'link@lu', group: 'inline', inline: {before: '[', after: '](https://)', placeholder: 'Label'}, shortcut: {key: 'k'}},
+  {key: 'document-link', label: 'Link to article', icon: 'file-symlink@lu', group: 'inline', keywords: ['article', 'document', 'kb'], opens: 'link', shortcut: {key: 'k', shift: true}},
   {key: 'passthrough', label: 'Passthrough', icon: 'shield@lu', group: 'inline', keywords: ['raw', 'literal'], inline: {before: 'pass:[', after: ']', placeholder: 'raw'}},
   {key: 'curly-bang-passthrough', label: 'Literal braces', icon: 'braces@lu', group: 'inline', inline: {before: '{!', after: '!}', placeholder: 'raw'}},
 ];
 
+export function isApple(): boolean {
+  // Safari and Firefox have no userAgentData yet.
+  const platform = (navigator as Navigator & { userAgentData?: { platform: string } }).userAgentData?.platform
+    ?? navigator.userAgent;
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+
+export function matchesShortcut(e: KeyboardEvent, shortcut: Shortcut): boolean {
+  // Ctrl+Alt is AltGr on Windows keyboards, so Alt must be up for the combo to count.
+  const mod = isApple() ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+  return mod && !e.altKey && e.shiftKey === !!shortcut.shift && e.key.toLowerCase() === shortcut.key;
+}
+
+/** The shortcut as shown to people, e.g. `⌘⇧X` or `Ctrl+Shift+X`. */
+export function shortcutLabel(shortcut: Shortcut): string {
+  const key = shortcut.key.toUpperCase();
+  if (isApple()) return `⌘${shortcut.shift ? '⇧' : ''}${key}`;
+  return `Ctrl+${shortcut.shift ? 'Shift+' : ''}${key}`;
+}
+
 /** The registry as slash menu entries. Picker actions insert nothing; the menu emits their action id. */
 export function slashItems(actions: EditorAction[]): SlashMenuItem[] {
   const label = (id: ActionGroup) => ACTION_GROUPS.find(group => group.id === id)?.label;

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

@@ -0,0 +1,67 @@
+import {continueList} from './list-continuation';
+import {expect} from '@open-wc/testing';
+
+/** Enter at `caret` (the end by default), rendered as the new value with `|` at the caret, or null. */
+function enter(value: string, caret = value.length): string | null {
+  const edit = continueList(value, caret, caret);
+  return edit ? `${edit.value.slice(0, edit.caret)}|${edit.value.slice(edit.caret)}` : null;
+}
+
+describe('continueList', () => {
+  it('should continue bullet lists with the same marker, including nested depth', () => {
+    expect(enter('- a')).to.equal('- a\n- |');
+    expect(enter('* a')).to.equal('* a\n* |');
+    expect(enter('-- nested')).to.equal('-- nested\n-- |');
+  });
+
+  it('should continue numbered lists with the next number', () => {
+    expect(enter('1. hello')).to.equal('1. hello\n2. |');
+    expect(enter('9. nine')).to.equal('9. nine\n10. |');
+  });
+
+  it('should renumber the items after one inserted mid-list', () => {
+    expect(enter('1. a\n2. b\n3. c', 4)).to.equal('1. a\n2. |\n3. b\n4. c');
+  });
+
+  it('should continue checklists unticked, keeping the editable kind', () => {
+    expect(enter('- [ ] a')).to.equal('- [ ] a\n- [ ] |');
+    expect(enter('- [x] done')).to.equal('- [x] done\n- [ ] |');
+    expect(enter('- [_] editable')).to.equal('- [_] editable\n- [_] |');
+    expect(enter('- [*] editable done')).to.equal('- [*] editable done\n- [_] |');
+  });
+
+  it('should continue definition lists with the caret on the new term', () => {
+    expect(enter('CPU:: Central processor')).to.equal('CPU:: Central processor\n|:: ');
+  });
+
+  it('should end the list when Enter is pressed on an empty item', () => {
+    expect(enter('- a\n- ')).to.equal('- a\n|');
+    expect(enter('1. a\n2. ')).to.equal('1. a\n|');
+    expect(enter('- [ ] a\n- [ ] ')).to.equal('- [ ] a\n|');
+    expect(enter('CPU:: x\n:: ')).to.equal('CPU:: x\n|');
+  });
+
+  it('should carry the text after the caret into the new item', () => {
+    expect(enter('- hello world', 7)).to.equal('- hello\n- |world');
+  });
+
+  it('should leave Enter alone outside list items', () => {
+    expect(enter('plain text')).to.be.null;
+    expect(enter('---')).to.be.null;
+    expect(enter('NOTE: hi')).to.be.null;
+    expect(enter('include::file[]')).to.be.null;
+    expect(enter('ifdef::flag[]')).to.be.null;
+    // Caret before the marker ends, e.g. at the start of the line.
+    expect(enter('- a', 0)).to.be.null;
+  });
+
+  it('should leave Enter alone inside verbatim blocks', () => {
+    expect(enter('```\n- a')).to.be.null;
+    expect(enter('----\n1. a')).to.be.null;
+    expect(enter('```\ncode\n```\n- a')).to.equal('```\ncode\n```\n- a\n- |');
+  });
+
+  it('should leave Enter alone with a selection', () => {
+    expect(continueList('- abc', 2, 4)).to.be.null;
+  });
+});

package/src/components/remarkd-editor/list-continuation.ts

@@ -0,0 +1,73 @@
+/** A textarea edit: the new value and where the caret lands in it. */
+export interface TextEdit {
+  value: string;
+  caret: number;
+}
+
+// Nesting depth is the marker's repeat count (`--`, `**`), never indentation.
+const LIST_ITEM = /^(-+|\*+|(\d+)\.) (\[[ xX_*]\] )?/;
+const ORDERED_ITEM = /^(\d+)\. /;
+// `::` must end the line or be followed by a space, so macros (`include::x[]`) never match.
+const DEFINITION = /^[^:\s][^\n]*?::(?: |$)/;
+
+// Code, listing and literal blocks — their content is verbatim, so a `- ` there is not a list.
+const VERBATIM_DELIMITER = /^(`{3,}|-{4,}|\.{4,})/;
+
+function insideVerbatim(before: string): boolean {
+  return before.split('\n').filter(line => VERBATIM_DELIMITER.test(line)).length % 2 === 1;
+}
+
+/** A new checklist item starts unticked, keeping the editable/readonly kind of the one above. */
+function nextCheckbox(box: string): string {
+  return box === '[_] ' || box === '[*] ' ? '[_] ' : '[ ] ';
+}
+
+/**
+ * What Enter does on a list line: continues the list with the next marker, or ends it by
+ * clearing the marker of an item that has no text. Null when Enter should just insert a
+ * newline — no list line, a selection, or the caret before the marker.
+ */
+export function continueList(value: string, start: number, end: number): TextEdit | null {
+  if (start !== end) return null;
+
+  const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+  const newline = value.indexOf('\n', start);
+  const lineEnd = newline === -1 ? value.length : newline;
+  const line = value.slice(lineStart, lineEnd);
+
+  if (insideVerbatim(value.slice(0, lineStart))) return null;
+  const clearLine = {value: value.slice(0, lineStart) + value.slice(lineEnd), caret: lineStart};
+  // The bare `:: ` a definition continuation leaves behind.
+  if (line.trim() === '::') return clearLine;
+
+  const item = LIST_ITEM.exec(line);
+  const definition = item ? null : DEFINITION.exec(line);
+  const marker = item?.[0] ?? definition?.[0];
+  if (!marker || start - lineStart < marker.length) return null;
+  if (item && line.slice(marker.length).trim() === '') return clearLine;
+
+  if (definition) {
+    // The caret goes before `::` — the term is typed first.
+    return {value: `${value.slice(0, start)}\n:: ${value.slice(start).replace(/^ +/, '')}`, caret: start + 1};
+  }
+
+  const [, bullet, ordinal, box] = item!;
+  const next = (ordinal ? `${Number(ordinal) + 1}.` : bullet) + ' ' + (box ? nextCheckbox(box) : '');
+  const head = `${value.slice(0, start)}\n${next}`;
+  const rest = value.slice(start).replace(/^ +/, '');
+  const tail = ordinal ? renumber(rest, Number(ordinal) + 2) : rest;
+  return {value: head + tail, caret: head.length};
+}
+
+/**
+ * Shifts the ordered items that directly follow the split line up by one, so the source keeps
+ * counting in step. `text` starts with the rest of the split line, which is left alone.
+ */
+function renumber(text: string, from: number): string {
+  const lines = text.split('\n');
+  for (let i = 1, n = from; i < lines.length; i++, n++) {
+    if (!ORDERED_ITEM.test(lines[i])) break;
+    lines[i] = lines[i].replace(ORDERED_ITEM, `${n}. `);
+  }
+  return lines.join('\n');
+}

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

@@ -1,5 +1,6 @@
-import {ACTION_GROUPS, EDITOR_ACTIONS, slashItems} from './actions';
+import {ACTION_GROUPS, EDITOR_ACTIONS, matchesShortcut, shortcutLabel, slashItems} from './actions';
 import {classMap} from "lit/directives/class-map.js";
+import {continueList} from './list-continuation';
 import {type CSSResultGroup, html, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
@@ -954,7 +955,17 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     // The slash menu claims navigation, Enter and Escape in the capture phase.
     if (this.slashController.open) return;
 
-    if (e.key === 'Enter' && e.shiftKey) {
+    const shortcutAction = EDITOR_ACTIONS.find(action =>
+      action.shortcut && matchesShortcut(e, action.shortcut) && this.actionAvailable(action));
+    if (shortcutAction) {
+      e.preventDefault();
+      this.activateAction(shortcutAction);
+    } else if (this.isPlainEnter(e)) {
+      const edit = continueList(input.value, input.selectionStart, input.selectionEnd);
+      if (!edit) return;
+      e.preventDefault();
+      this.applyDraftEdit(input, edit.value, edit.caret, edit.caret);
+    } else if (e.key === 'Enter' && e.shiftKey) {
       e.preventDefault();
       this.suppressBlurCommit = true;
       const next = this.commitEdit();
@@ -968,6 +979,21 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     }
   };
 
+  private isPlainEnter(e: KeyboardEvent): boolean {
+    return e.key === 'Enter' && !e.isComposing && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey;
+  }
+
+  private handleRawKeydown = (e: KeyboardEvent) => {
+    if (!this.isPlainEnter(e)) return;
+    const input = e.target as HTMLTextAreaElement;
+    const edit = continueList(input.value, input.selectionStart, input.selectionEnd);
+    if (!edit) return;
+    e.preventDefault();
+    input.value = edit.value;
+    input.setSelectionRange(edit.caret, edit.caret);
+    this.handleRawInput(e);
+  };
+
   /** Whether the block being edited is nothing but the slash command. */
   private isSlashBlock(): boolean {
     const value = this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')?.value ?? '';
@@ -1404,7 +1430,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   /**
    * Applies an inline mark to the open block's textarea: wraps the selection, toggles the
    * mark off when it is already wrapped, or inserts a selected placeholder when there is
-   * no selection. Goes through `editingDraft` so `zn-input` still fires.
+   * no selection.
    */
   private applyInline(mark: InlineMark) {
     const input = this.shadowRoot?.querySelector<HTMLTextAreaElement>('.remarkd-editor__input');
@@ -1451,10 +1477,15 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       caret = [start + mark.before.length, start + mark.before.length + body.length];
     }
 
-    this.editingDraft = next;
-    input.value = next;
-    input.setSelectionRange(caret[0], caret[1]);
-    this.editShell = this.computeEditShell(next);
+    this.applyDraftEdit(input, next, caret[0], caret[1]);
+  }
+
+  /** Writes a programmatic edit to the open block's textarea. Goes through `editingDraft` so `zn-input` still fires. */
+  private applyDraftEdit(input: HTMLTextAreaElement, value: string, selectionStart: number, selectionEnd: number) {
+    this.editingDraft = value;
+    input.value = value;
+    input.setSelectionRange(selectionStart, selectionEnd);
+    this.editShell = this.computeEditShell(value);
     this.autosize(input);
     input.focus({preventScroll: true});
     this.emit('zn-input');
@@ -1824,7 +1855,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                  plain
                  icon=${action.icon}
                  icon-size="18"
-                 tooltip=${action.label}
+                 label=${action.label}
+                 tooltip=${action.shortcut ? `${action.label} (${shortcutLabel(action.shortcut)})` : action.label}
                  ?disabled=${this.isActionDisabled(action)}
                  @mousedown=${(e: MouseEvent) => e.preventDefault()}
                  @click=${() => this.activateAction(action)}></zn-button>`;
@@ -1838,6 +1870,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
         @click=${() => this.activateAction(action)}>
         <zn-icon slot="prefix" src=${action.icon} size="18"></zn-icon>
         ${action.label}
+        ${action.shortcut ? html`
+          <span slot="suffix" class="remarkd-editor__shortcut">${shortcutLabel(action.shortcut)}</span>` : ''}
       </zn-menu-item>`;
   }
 
@@ -1892,7 +1926,14 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                                tooltip="More"
                                @mousedown=${(e: MouseEvent) => e.preventDefault()}></zn-button>
                     <zn-menu>
-                      ${overflowed.flatMap(entry => entry.actions).map(action => this.renderMenuAction(action))}
+                      ${overflowed.map(entry => html`
+                        <zn-menu-item>
+                          <zn-icon slot="prefix" src=${entry.actions[0].icon} size="18"></zn-icon>
+                          ${entry.group.label}
+                          <zn-menu slot="submenu">
+                            ${entry.actions.map(action => this.renderMenuAction(action))}
+                          </zn-menu>
+                        </zn-menu-item>`)}
                     </zn-menu>
                   </zn-dropdown>` : ''}`;
             })()}
@@ -1937,6 +1978,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                 spellcheck="false"
                 .value=${this.value}
                 @input=${this.handleRawInput}
+                @keydown=${this.handleRawKeydown}
                 @blur=${this.commitRaw}></textarea>`;
   }
 

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

@@ -534,3 +534,8 @@
   text-decoration-style: wavy;
   text-decoration-color: rgb(var(--zn-color-error));
 }
+
+.remarkd-editor__shortcut {
+  color: rgb(var(--zn-text-muted));
+  font-size: var(--zn-font-size-x-small);
+}