@kubex/zinc 1.1.165 → 1.1.167

package/docs/pages/components/remarkd-editor.md

@@ -160,7 +160,7 @@ outgrows the 20rem cap set here."
 ### Actions
 
 The toolbar and the `/` slash menu are driven by one shared registry of actions, grouped
-under ten headings: **Text**, **Inline**, **Lists**, **Admonitions**, **Blocks**,
+under ten headings: **Text**, **Inline**, **Lists**, **Alerts**, **Blocks**,
 **Structured**, **Media**, **Objects**, **Breaks**, and **Logic**. The toolbar shows as
 many groups as fit its width and folds the rest into an overflow menu; the slash menu
 carries every action regardless of width, and typing narrows it by label or keyword — so

package/package.json

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

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

@@ -42,7 +42,7 @@ export const ACTION_GROUPS: { id: ActionGroup; label: string }[] = [
   // they are among the last groups to collapse, not the first.
   {id: 'inline', label: 'Inline'},
   {id: 'lists', label: 'Lists'},
-  {id: 'admonitions', label: 'Admonitions'},
+  {id: 'admonitions', label: 'Alerts'},
   {id: 'blocks', label: 'Blocks'},
   {id: 'structured', label: 'Structured'},
   {id: 'media', label: 'Media'},
@@ -67,7 +67,7 @@ export const EDITOR_ACTIONS: EditorAction[] = [
   {key: 'checkboxes', label: 'Checklist', icon: 'list-todo@lu', group: 'lists', prefix: '- [ ] ', keywords: ['task', 'todo']},
   {key: 'definition-list', label: 'Definition list', icon: 'book-a@lu', group: 'lists', prefix: 'Term:: Definition'},
 
-  // Admonitions
+  // Alerts
   {key: 'admonition', label: 'Note', icon: 'info@lu', group: 'admonitions', prefix: 'NOTE: '},
   {key: 'tip', label: 'Tip', icon: 'lightbulb@lu', group: 'admonitions', prefix: 'TIP: '},
   {key: 'warning', label: 'Warning', icon: 'triangle-alert@lu', group: 'admonitions', prefix: 'WARNING: '},

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

@@ -1,4 +1,4 @@
-import {continueList} from './list-continuation';
+import {continueList, indentList} 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. */
@@ -12,15 +12,23 @@ describe('continueList', () => {
     expect(enter('- a')).to.equal('- a\n- |');
     expect(enter('* a')).to.equal('* a\n* |');
     expect(enter('-- nested')).to.equal('-- nested\n-- |');
+    expect(enter('- a\n---- deep\n---- deeper')).to.equal('- a\n---- deep\n---- deeper\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. |');
+    expect(enter('1. a\n1.1. b')).to.equal('1. a\n1.1. b\n1.2. |');
+  });
+
+  it('should number skipped levels from one', () => {
+    expect(enter('1. a\n1.1.1. b\n2. c', 4)).to.equal('1. a\n2. |\n2.1.1. b\n3. c');
   });
 
   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');
+    expect(enter('1. a\n1.1. b\n2. c', 4)).to.equal('1. a\n2. |\n2.1. b\n3. c');
+    expect(enter('1. a\n-- x\n2. b', 4)).to.equal('1. a\n2. |\n-- x\n3. b');
   });
 
   it('should continue checklists unticked, keeping the editable kind', () => {
@@ -35,6 +43,7 @@ describe('continueList', () => {
   });
 
   it('should end the list when Enter is pressed on an empty item', () => {
+    expect(enter('1. a\n1.1. ')).to.equal('1. a\n|');
     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|');
@@ -65,3 +74,70 @@ describe('continueList', () => {
     expect(continueList('- abc', 2, 4)).to.be.null;
   });
 });
+
+/** Tab over `[start, end]` (a caret at the end by default), rendered with `[`/`]` around the selection, or null. */
+function tab(value: string, outdent = false, start = value.length, end = start): string | null {
+  const edit = indentList(value, start, end, outdent);
+  if (!edit) return null;
+  const v = edit.value;
+  return edit.start === edit.end
+    ? `${v.slice(0, edit.start)}|${v.slice(edit.start)}`
+    : `${v.slice(0, edit.start)}[${v.slice(edit.start, edit.end)}]${v.slice(edit.end)}`;
+}
+
+describe('indentList', () => {
+  it('should nest a bullet item one level deeper on Tab', () => {
+    expect(tab('- a')).to.equal('-- a|');
+    expect(tab('* a')).to.equal('** a|');
+    expect(tab('- [ ] task')).to.equal('-- [ ] task|');
+    expect(tab('- a\n- b')).to.equal('- a\n-- b|');
+    expect(tab('---- a\n---- b')).to.equal('---- a\n----- b|');
+  });
+
+  it('should un-nest a bullet item on Shift+Tab, stopping at the top level', () => {
+    expect(tab('--- a', true)).to.equal('-- a|');
+    expect(tab('- a', true)).to.equal('- a|');
+  });
+
+  it('should stop at the deepest level the parser supports', () => {
+    expect(tab('---------- a')).to.equal('---------- a|');
+  });
+
+  it('should keep the caret on the same text', () => {
+    expect(tab('- hello', false, 4)).to.equal('-- he|llo');
+    expect(tab('-- hello', true, 5)).to.equal('- he|llo');
+    expect(tab('- a', false, 0)).to.equal('|-- a');
+  });
+
+  it('should nest every bullet item a selection touches', () => {
+    const value = '- a\n- b\n- c';
+    expect(tab(value, false, 4, 11)).to.equal('- a\n[-- b\n-- c]');
+    expect(tab(value, false, 0, 4)).to.equal('[-- a\n]- b\n- c');
+  });
+
+  it('should nest a numbered item under the one above, renumbering the items after it', () => {
+    expect(tab('1. a\n2. b')).to.equal('1. a\n1.1. b|');
+    expect(tab('1. a\n2. b\n3. c', false, 9)).to.equal('1. a\n1.1. b|\n2. c');
+    expect(tab('1. a\n1.1. b\n2. c')).to.equal('1. a\n1.1. b\n1.2. c|');
+    expect(tab('1. a\n-- x\n2. b')).to.equal('1. a\n-- x\n1.1. b|');
+    expect(tab('1. first')).to.equal('1. first|');
+    expect(tab('1. a\n1.1. b')).to.equal('1. a\n1.1. b|');
+    expect(tab('1. a\n1.1. b\n1.2. c')).to.equal('1. a\n1.1. b\n1.1.1. c|');
+  });
+
+  it('should un-nest a numbered item on Shift+Tab, adopting the items after it', () => {
+    expect(tab('1. a\n1.1. b\n1.2. c\n2. d', true, 10)).to.equal('1. a\n2. |b\n2.1. c\n3. d');
+    expect(tab('1. a', true)).to.equal('1. a|');
+  });
+
+  it('should keep the caret on the same text when the marker changes length', () => {
+    expect(tab('1. a\n2. hello', false, 10)).to.equal('1. a\n1.1. he|llo');
+    expect(tab('1. a\n1.1. hello', true, 12)).to.equal('1. a\n2. he|llo');
+  });
+
+  it('should leave Tab alone outside list items', () => {
+    expect(tab('plain text')).to.be.null;
+    expect(tab('CPU:: x')).to.be.null;
+    expect(tab('```\n- a')).to.be.null;
+  });
+});

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

@@ -4,14 +4,15 @@ export interface TextEdit {
   caret: number;
 }
 
-// Nesting depth is the marker's repeat count (`--`, `**`), never indentation.
-const LIST_ITEM = /^(-+|\*+|(\d+)\.) (\[[ xX_*]\] )?/;
-const ORDERED_ITEM = /^(\d+)\. /;
+// Nesting depth is the marker's repeat count (`--`, `**`) or dot count (`1.2.`), never indentation.
+const LIST_ITEM = /^(-+|\*+|((?:\d+\.)+)) (\[[ xX_*]\] )?/;
+const ORDERED_PATH = /^(?:\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,})/;
+// A `----`/`....` delimiter is the whole line; `---- x` is a fourth-level bullet.
+const VERBATIM_DELIMITER = /^(?:`{3,}|-{4,} *$|\.{4,} *$)/;
 
 function insideVerbatim(before: string): boolean {
   return before.split('\n').filter(line => VERBATIM_DELIMITER.test(line)).length % 2 === 1;
@@ -58,22 +59,122 @@ export function continueList(value: string, start: number, end: number): TextEdi
   }
 
   const [, bullet, ordinal, box] = item!;
-  const next = (ordinal ? `${Number(ordinal) + 1}.` : bullet) + ' ' + (box ? nextCheckbox(box) : '');
+  const own = ordinal ? parsePath(ordinal) : null;
+  const path = own && nextPath(own, own.length);
+  const next = (path ? formatPath(path) : 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};
+  const edited = head + value.slice(start).replace(/^ +/, '');
+  if (!path) return {value: edited, caret: head.length};
+
+  const lines = edited.split('\n');
+  renumber(lines, head.split('\n').length);
+  return {value: lines.join('\n'), caret: head.length};
+}
+
+/** The numbers of an ordered marker: `1.2.` is `[1, 2]`. */
+function parsePath(marker: string): number[] {
+  return marker.split('.').filter(Boolean).map(Number);
+}
+
+function formatPath(path: number[]): string {
+  return path.map(n => `${n}.`).join('');
+}
+
+/** The marker of the ordered item at `depth` that follows the one numbered `previous`. */
+function nextPath(previous: number[], depth: number): number[] {
+  if (depth <= previous.length) return [...previous.slice(0, depth - 1), previous[depth - 1] + 1];
+  return [...previous, ...Array<number>(depth - previous.length).fill(1)];
+}
+
+/** The number of the nearest ordered item above line `i` in the same list, passing over nested bullets. */
+function orderedAbove(lines: string[], i: number): number[] | null {
+  for (let j = i - 1; j >= 0; j--) {
+    const item = LIST_ITEM.exec(lines[j]);
+    if (!item) return null;
+    if (item[2]) return parsePath(item[2]);
+  }
+  return null;
+}
+
+/**
+ * Renumbers the ordered items from line `from` on as an outline counting on from the item above,
+ * so the source stays in step with the rendered numbering. Bullet items nested among them are
+ * passed over; any other line ends the list. With no ordered item above, the first keeps its
+ * number.
+ */
+function renumber(lines: string[], from: number) {
+  let path = orderedAbove(lines, from);
+  for (let i = from; i < lines.length; i++) {
+    const item = LIST_ITEM.exec(lines[i]);
+    if (!item) break;
+    if (!item[2]) continue;
+    const own = parsePath(item[2]);
+    path = path ? nextPath(path, own.length) : own;
+    lines[i] = lines[i].replace(ORDERED_PATH, formatPath(path));
+  }
 }
 
+/** A textarea edit that keeps a selection: the new value and the selected range in it. */
+export interface RangeEdit {
+  value: string;
+  start: number;
+  end: number;
+}
+
+// The parser caps bullet depth at ten marker characters.
+const MAX_BULLET_DEPTH = 10;
+
 /**
- * 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.
+ * What Tab (or Shift+Tab when `outdent`) does on the list items the selection touches: nests
+ * each one level deeper or shallower, renumbering the ordered items that follow. Null when no
+ * list item is touched, so Tab keeps its default. Items already at the limit are left as they
+ * are, but the key is still claimed.
  */
-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}. `);
+export function indentList(value: string, start: number, end: number, outdent: boolean): RangeEdit | null {
+  const firstStart = value.lastIndexOf('\n', start - 1) + 1;
+  if (insideVerbatim(value.slice(0, firstStart))) return null;
+  // A selection ending at the start of a line does not touch that line.
+  const last = end > start && value[end - 1] === '\n' ? end - 1 : end;
+
+  const before = value.split('\n');
+  const lines = [...before];
+  const first = value.slice(0, firstStart).split('\n').length - 1;
+  const lastIndex = value.slice(0, last).split('\n').length - 1;
+
+  let touched = false;
+  let renumberFrom = -1;
+  for (let i = first; i <= lastIndex; i++) {
+    const item = LIST_ITEM.exec(lines[i]);
+    if (!item) continue;
+    touched = true;
+    const [, bullet, ordinal] = item;
+    if (ordinal) {
+      const own = parsePath(ordinal);
+      // An item nests at most one level below the item above it.
+      const deepest = (orderedAbove(lines, i)?.length ?? 0) + 1;
+      if (outdent ? own.length === 1 : own.length >= deepest) continue;
+      lines[i] = lines[i].replace(ORDERED_PATH, formatPath(outdent ? own.slice(0, -1) : [...own, 1]));
+      if (renumberFrom === -1) renumberFrom = i;
+    } else if (outdent ? bullet.length > 1 : bullet.length < MAX_BULLET_DEPTH) {
+      lines[i] = outdent ? lines[i].slice(1) : bullet[0] + lines[i];
+    }
   }
-  return lines.join('\n');
+  if (!touched) return null;
+  if (renumberFrom !== -1) renumber(lines, renumberFrom);
+
+  const move = (pos: number) => {
+    let oldAt = 0;
+    let newAt = 0;
+    for (let i = 0; i < before.length; i++) {
+      const oldEnd = oldAt + before[i].length;
+      if (pos <= oldEnd) {
+        const delta = lines[i].length - before[i].length;
+        return pos > oldAt ? Math.max(newAt, pos + (newAt - oldAt) + delta) : newAt;
+      }
+      oldAt = oldEnd + 1;
+      newAt += lines[i].length + 1;
+    }
+    return pos;
+  };
+  return {value: lines.join('\n'), start: move(start), end: move(end)};
 }

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

@@ -1,6 +1,6 @@
 import {ACTION_GROUPS, EDITOR_ACTIONS, matchesShortcut, shortcutLabel, slashItems} from './actions';
 import {classMap} from "lit/directives/class-map.js";
-import {continueList, isEmptyListItem} from './list-continuation';
+import {continueList, indentList, isEmptyListItem} 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";
@@ -15,6 +15,7 @@ import ZnMenu from "../menu";
 import ZnMenuItem from "../menu-item";
 import ZnSlashMenu, {SlashMenuController, type SlashMenuItem} from "../slash-menu";
 import type {EditorAction, InlineMark} from './actions';
+import type {RangeEdit} from './list-continuation';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnFile from "../file";
 
@@ -978,6 +979,11 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       if (!edit) return;
       e.preventDefault();
       this.applyDraftEdit(input, edit.value, edit.caret, edit.caret);
+    } else if (this.isListTab(e)) {
+      const edit = indentList(input.value, input.selectionStart, input.selectionEnd, e.shiftKey);
+      if (!edit) return;
+      e.preventDefault();
+      this.applyDraftEdit(input, edit.value, edit.start, edit.end);
     } else if (e.key === 'Enter' && e.shiftKey) {
       e.preventDefault();
       this.suppressBlurCommit = true;
@@ -1010,14 +1016,23 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     return e.key === 'Enter' && !e.isComposing && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey;
   }
 
+  private isListTab(e: KeyboardEvent): boolean {
+    return e.key === 'Tab' && !e.isComposing && !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);
+    let edit: RangeEdit | null = null;
+    if (this.isPlainEnter(e)) {
+      const next = continueList(input.value, input.selectionStart, input.selectionEnd);
+      edit = next && {value: next.value, start: next.caret, end: next.caret};
+    } else if (this.isListTab(e)) {
+      edit = indentList(input.value, input.selectionStart, input.selectionEnd, e.shiftKey);
+    }
     if (!edit) return;
     e.preventDefault();
     input.value = edit.value;
-    input.setSelectionRange(edit.caret, edit.caret);
+    input.setSelectionRange(edit.start, edit.end);
     this.handleRawInput(e);
   };
 

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

@@ -649,6 +649,43 @@ Second"></zn-remarkd-editor>`);
       await el.updateComplete;
       expect(el.value).to.equal('- [ ] first\n- [ ] ');
     });
+
+    const tab = (input: HTMLTextAreaElement, shiftKey = false) => {
+      const event = new KeyboardEvent('keydown', {key: 'Tab', shiftKey, bubbles: true, composed: true, cancelable: true});
+      input.dispatchEvent(event);
+      return event;
+    };
+
+    it('should nest and un-nest a list item on Tab and Shift+Tab in the open block', async () => {
+      const {el, input} = await editDraft('- a\n- b');
+      expect(tab(input).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(input.value).to.equal('- a\n-- b');
+      expect(input.selectionStart).to.equal(8);
+
+      expect(tab(input, true).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(input.value).to.equal('- a\n- b');
+    });
+
+    it('should leave Tab alone outside a list', async () => {
+      const {input} = await editDraft('hello');
+      expect(tab(input).defaultPrevented).to.be.false;
+    });
+
+    it('should nest a list item on Tab 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(7, 7);
+
+      expect(tab(raw).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(el.value).to.equal('-- first');
+    });
   });
 
   it('should insert a placeholder when nothing is selected', async () => {
@@ -915,7 +952,7 @@ Second"></zn-remarkd-editor>`);
 
     const menu = el.shadowRoot!.querySelector<ZnSlashMenu>('zn-slash-menu')!;
     expect(menu.items.length).to.equal(EDITOR_ACTIONS.length);
-    expect(menu.items.some(item => item.group === 'Admonitions')).to.be.true;
+    expect(menu.items.some(item => item.group === 'Alerts')).to.be.true;
   });
 
   it('should omit the Include action from the slash menu without an include-url', async () => {