@kubex/zinc 1.1.162 → 1.1.164

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";
@@ -279,7 +280,8 @@ function renderConditionalParts(parts: ConditionalPart[]): TemplateResult {
       ${parts.map(part => {
         if (part.kind === 'nested') return renderConditionalWrapper(part.label, part.parts);
         const text = part.lines.join('\n').trim();
-        return text ? html`<div class="remarkd-editor__rendered--parsed">${unsafeHTML(safeParse(text))}</div>` : '';
+        return text ? html`
+          <div class="remarkd-editor__rendered--parsed">${unsafeHTML(safeParse(text))}</div>` : '';
       })}
     </div>`;
 }
@@ -953,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();
@@ -967,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 ?? '';
@@ -1232,7 +1259,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       fetch(url, {headers: {Accept: 'application/json'}})
         .then(res => {
           if (!res.ok) throw new Error(`link search failed: ${res.status}`);
-          return res.json() as Promise<{items?: LinkOption[]}>;
+          return res.json() as Promise<{ items?: LinkOption[] }>;
         })
         .then(data => {
           if (token !== this.linkSearchToken) return;
@@ -1329,7 +1356,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       this.includeRequest = fetch(this.includeUrl, {headers: {Accept: 'application/json'}})
         .then(res => {
           if (!res.ok) throw new Error(`include list request failed: ${res.status}`);
-          return res.json() as Promise<{items?: IncludeOption[]}>;
+          return res.json() as Promise<{ items?: IncludeOption[] }>;
         })
         .then(data => {
           const items = data.items ?? [];
@@ -1367,7 +1394,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     fetch(url, {headers: {Accept: 'application/json'}})
       .then(res => {
         if (!res.ok) throw new Error(`link resolve failed: ${res.status}`);
-        return res.json() as Promise<{items?: LinkOption[]}>;
+        return res.json() as Promise<{ items?: LinkOption[] }>;
       })
       .then(data => {
         const known = new Map((data.items ?? []).map(item => [item.ref, item]));
@@ -1403,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');
@@ -1450,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');
@@ -1529,7 +1561,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   private renderImageControls() {
     const data = this.imageEdit;
     if (!data) return '';
-    const aligns: {value: ImageBlockData['align']; icon: string; label: string}[] = [
+    const aligns: { value: ImageBlockData['align']; icon: string; label: string }[] = [
       {value: '', icon: 'align-left@lu', label: 'Align left'},
       {value: 'center', icon: 'align-center@lu', label: 'Align center'},
       {value: 'right', icon: 'align-right@lu', label: 'Align right'},
@@ -1558,7 +1590,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
             <span>Alignment</span>
             <zn-button-group>
               ${aligns.map(align => html`
-                <zn-button type="button" icon-button="small" icon=${align.icon}
+                <zn-button icon-button="small"
+                           icon=${align.icon}
                            ?plain=${data.align !== align.value}
                            tooltip=${align.label}
                            @click=${() => this.updateImageEdit({align: align.value})}></zn-button>`)}
@@ -1581,12 +1614,15 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
           </label>
         </div>
         <div class="remarkd-editor__image-buttons">
-          <zn-button type="button" color="primary" size="small" @click=${this.saveImageEdit}>Save</zn-button>
-          <zn-button type="button" color="secondary" size="small" @click=${this.closeImageEdit}>Cancel</zn-button>
+          <zn-button color="primary" size="small" @click=${this.saveImageEdit}>Save</zn-button>
+          <zn-button color="secondary" size="small" @click=${this.closeImageEdit}>Cancel</zn-button>
           <span class="remarkd-editor__image-buttons-spacer"></span>
-          <zn-button type="button" icon-button="small" plain icon="code@lu"
-                     tooltip="Edit source" @click=${this.editImageSource}></zn-button>
-          <zn-button type="button" icon-button="small" plain icon="trash-2@lu" color="error"
+          <zn-button icon-button="small"
+                     plain
+                     icon="code@lu"
+                     tooltip="Edit source"
+                     @click=${this.editImageSource}></zn-button>
+          <zn-button icon-button="small" plain icon="trash-2@lu" color="error"
                      tooltip="Delete image" @click=${this.deleteImageBlock}></zn-button>
         </div>
       </div>`;
@@ -1744,12 +1780,19 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                   @pointerdown=${this.handleHandlePointerDown}>
               <zn-icon src="grip-vertical@lu" size="16"></zn-icon>
             </span>
-            <zn-button type="button" icon-button="small" plain icon="plus@lu" icon-size="16"
+            <zn-button icon-button="small"
+                       plain
+                       icon="plus@lu"
+                       icon-size="16"
                        tooltip="Add block below"
                        @click=${() => this.insertDraftBlock(index + 1)}></zn-button>
           </div>
           <zn-button class="remarkd-editor__delete"
-                     type="button" icon-button="small" plain icon="x@lu" icon-size="16" color="error"
+                     icon-button="small"
+                     plain
+                     icon="x@lu"
+                     icon-size="16"
+                     color="error"
                      tooltip="Delete block"
                      @click=${() => this.deleteBlock(index)}></zn-button>`}
         <div part="rendered"
@@ -1808,8 +1851,12 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
   /** A single toolbar action button, shared by the toolbar bar and the overflow menu. */
   private renderAction(action: EditorAction) {
     return html`
-      <zn-button type="button" icon-button plain icon=${action.icon} icon-size="18"
-                 tooltip=${action.label}
+      <zn-button icon-button="small"
+                 plain
+                 icon=${action.icon}
+                 icon-size="18"
+                 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>`;
@@ -1823,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>`;
   }
 
@@ -1869,17 +1918,31 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                                  // the textarea out from under it.
                                  if (!this.linkPickerOpen) this.suppressBlurCommit = false;
                                }}>
-                    <zn-button slot="trigger" type="button" icon-button plain icon="ellipsis@lu"
-                               icon-size="18" tooltip="More"
+                    <zn-button slot="trigger"
+                               icon-button="small"
+                               plain
+                               icon="ellipsis@lu"
+                               icon-size="18"
+                               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>` : ''}`;
             })()}
             ${this.allowRaw ? html`
-              <zn-button part="raw-toggle" class="remarkd-editor__raw-toggle"
-                         type="button" icon-button icon="code-xml@lu" icon-size="18"
+              <zn-button part="raw-toggle"
+                         class="remarkd-editor__raw-toggle"
+                         icon-button="small"
+                         icon="code-xml@lu"
+                         icon-size="18"
                          ?plain=${!this.rawMode}
                          tooltip=${this.rawMode ? 'Show blocks' : 'Show raw source'}
                          @click=${this.toggleRawMode}></zn-button>` : ''}
@@ -1915,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>`;
   }
 
@@ -1944,12 +2008,17 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                  @input=${(e: Event) => {
                    this.includeQuery = (e.target as HTMLInputElement).value;
                  }}>
-          <zn-button type="button" icon-button="small" plain icon="x@lu"
-                     tooltip="Cancel" @click=${this.closeIncludePicker}></zn-button>
+          <zn-button icon-button="small"
+                     plain
+                     icon="x@lu"
+                     tooltip="Cancel"
+                     @click=${this.closeIncludePicker}></zn-button>
         </div>
         ${this.includeOptions === null
-          ? html`<div class="remarkd-editor__include-picker-empty">${
-            this.includeLoadFailed ? 'Could not load Includes' : '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"
@@ -1959,7 +2028,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                 <span class="remarkd-editor__include-option-meta">${item.scope ?? ''}${
                   item.languages ? ` · ${item.languages}` : ' · No content'}</span>
               </button>`)
-            : html`<div class="remarkd-editor__include-picker-empty">No Includes found</div>`}
+            : html`
+              <div class="remarkd-editor__include-picker-empty">No Includes found</div>`}
       </div>`;
   }
 
@@ -1975,12 +2045,17 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                    this.linkQuery = (e.target as HTMLInputElement).value;
                    this.searchLinks(this.linkQuery);
                  }}>
-          <zn-button type="button" icon-button="small" plain icon="x@lu"
-                     tooltip="Cancel" @click=${this.closeLinkPicker}></zn-button>
+          <zn-button icon-button="small"
+                     plain
+                     icon="x@lu"
+                     tooltip="Cancel"
+                     @click=${this.closeLinkPicker}></zn-button>
         </div>
         ${this.linkResults === null
-          ? html`<div class="remarkd-editor__link-picker-empty">${
-            this.linkSearchFailed ? 'Could not search for articles' : 'Searching…'}</div>`
+          ? html`
+            <div class="remarkd-editor__link-picker-empty">${
+              this.linkSearchFailed ? 'Could not search for articles' : 'Searching…'}
+            </div>`
           : this.linkResults.length
             ? this.linkResults.map(item => html`
               <button type="button" class="remarkd-editor__link-option"
@@ -1990,7 +2065,8 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                   [kinds[item.kind] ?? item.kind, item.context, item.status === 'published' ? '' : item.status]
                     .filter(Boolean).join(' · ')}</span>
               </button>`)
-            : html`<div class="remarkd-editor__link-picker-empty">No articles found</div>`}
+            : html`
+              <div class="remarkd-editor__link-picker-empty">No articles found</div>`}
       </div>`;
   }
 
@@ -2024,7 +2100,9 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                  accept="image/*"
                  droparea
                  @zn-change=${this.handleImagePicked}></zn-file>
-        <zn-button type="button" icon-button="small" plain icon="x@lu"
+        <zn-button icon-button="small"
+                   plain
+                   icon="x@lu"
                    tooltip="Cancel"
                    @click=${this.closeImagePicker}></zn-button>
       </div>`;

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);
+}