@kubex/zinc 1.1.164 → 1.1.165

package/package.json

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

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

@@ -22,6 +22,13 @@ function nextCheckbox(box: string): string {
   return box === '[_] ' || box === '[*] ' ? '[_] ' : '[ ] ';
 }
 
+/** Whether `line` is a list marker with nothing after it — `- `, `2. `, `- [ ] `, or a bare `::`. */
+export function isEmptyListItem(line: string): boolean {
+  if (line.trim() === '::') return true;
+  const item = LIST_ITEM.exec(line);
+  return !!item && line.slice(item[0].length).trim() === '';
+}
+
 /**
  * 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
@@ -36,15 +43,14 @@ export function continueList(value: string, start: number, end: number): TextEdi
   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;
+  if (isEmptyListItem(line)) {
+    return {value: value.slice(0, lineStart) + value.slice(lineEnd), caret: lineStart};
+  }
 
   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.

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} from './list-continuation';
+import {continueList, 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";
@@ -562,6 +562,11 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
    * delimited containers (``` ==== !!!! .... ---- ____ **** ////) as single blocks.
    */
   private splitBlocks(source: string): string[] {
+    return this.scanBlocks(source).blocks;
+  }
+
+  /** `splitBlocks`, plus whether the source ends inside an unclosed container, where a blank line does not split. */
+  private scanBlocks(source: string): { blocks: string[]; open: boolean } {
     const lines = source.replace(/\r\n/g, '\n').split('\n');
     const blocks: string[] = [];
     let current: string[] = [];
@@ -612,7 +617,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       current.push(line);
     }
     push();
-    return blocks;
+    return {blocks, open: fence !== null || depth > 0};
   }
 
   private fenceMarker(line: string): string | null {
@@ -961,6 +966,14 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
       e.preventDefault();
       this.activateAction(shortcutAction);
     } else if (this.isPlainEnter(e)) {
+      const finished = this.finishedDraft(input.value, input.selectionStart, input.selectionEnd);
+      if (finished !== null) {
+        e.preventDefault();
+        this.editingDraft = finished;
+        this.suppressBlurCommit = true;
+        this.insertDraftBlock(this.commitEdit());
+        return;
+      }
       const edit = continueList(input.value, input.selectionStart, input.selectionEnd);
       if (!edit) return;
       e.preventDefault();
@@ -979,6 +992,20 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     }
   };
 
+  /**
+   * The draft to commit when Enter should finish the block — pressed on a trailing blank line or
+   * empty list item, outside any container — with that line dropped. Null otherwise.
+   */
+  private finishedDraft(value: string, start: number, end: number): string | null {
+    if (start !== end || value.slice(start).trim() !== '') return null;
+    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+    const line = value.slice(lineStart);
+    if (line.trim() !== '' && !isEmptyListItem(line)) return null;
+    const before = value.slice(0, lineStart);
+    if (before.trim() === '' || this.scanBlocks(before).open) return null;
+    return before.trimEnd();
+  }
+
   private isPlainEnter(e: KeyboardEvent): boolean {
     return e.key === 'Enter' && !e.isComposing && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey;
   }

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

@@ -595,6 +595,47 @@ Second"></zn-remarkd-editor>`);
       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>`);