@kubex/zinc 1.1.165 → 1.1.168

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

@@ -1,9 +1,10 @@
 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";
+import {pastedRemarkd} from './paste';
 import {property, query, state} from 'lit/decorators.js';
 import {parse as remarkdParse} from "remarkd-js";
 import {ToolbarOverflowController} from '../../internal/toolbar-overflow';
@@ -15,6 +16,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 +980,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 +1017,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);
   };
 
@@ -1061,12 +1077,28 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
 
   private handleEditPaste = (e: ClipboardEvent) => {
     const file = Array.from(e.clipboardData?.files ?? []).find(f => f.type.startsWith('image/'));
-    if (!file) return;
+    if (!file) {
+      this.pasteFormatted(e);
+      return;
+    }
     e.preventDefault();
     const index = this.editingIndex ?? this.blocks.length;
     void this.insertImage(file, index + 1);
   };
 
+  /** Pastes rich clipboard content as remarkd source, keeping its lists and formatting. */
+  private pasteFormatted = (e: ClipboardEvent) => {
+    const source = pastedRemarkd(e.clipboardData);
+    if (source === null) return;
+    e.preventDefault();
+    const input = e.target as HTMLTextAreaElement;
+    // insertText keeps the paste on the native undo stack; it fires `input` like a typed paste.
+    if (!document.execCommand('insertText', false, source)) {
+      input.setRangeText(source, input.selectionStart, input.selectionEnd, 'end');
+      input.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
+    }
+  };
+
   private handleDragOver = (e: DragEvent) => {
     if (this.rawMode) return;
     if (e.dataTransfer?.types.includes('Files')) e.preventDefault();
@@ -2006,6 +2038,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                 .value=${this.value}
                 @input=${this.handleRawInput}
                 @keydown=${this.handleRawKeydown}
+                @paste=${this.pasteFormatted}
                 @blur=${this.commitRaw}></textarea>`;
   }
 

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

@@ -649,6 +649,90 @@ 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');
+    });
+  });
+
+  describe('paste', () => {
+    const paste = (input: HTMLTextAreaElement, data: Record<string, string>) => {
+      const clipboardData = new DataTransfer();
+      for (const [type, value] of Object.entries(data)) clipboardData.setData(type, value);
+      const event = new ClipboardEvent('paste', {clipboardData, bubbles: true, composed: true, cancelable: true});
+      input.dispatchEvent(event);
+      return event;
+    };
+
+    it('should paste rich content as remarkd source at the caret', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value="Intro"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      const input = typeInBlock(el, 'Intro\n');
+      input.focus();
+
+      const event = paste(input, {'text/html': '<ol><li>a<ol><li>b</li></ol></li></ol>', 'text/plain': 'a\nb'});
+      expect(event.defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(input.value).to.equal('Intro\n1. a\n1.1. b');
+    });
+
+    it('should leave a plain-text paste to the browser', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value="Intro"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+      expect(paste(input, {'text/plain': 'just text'}).defaultPrevented).to.be.false;
+    });
+
+    it('should paste rich content in the raw source view', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor allow-raw value=""></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.focus();
+
+      expect(paste(raw, {'text/html': '<ul><li>a</li></ul>'}).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(el.value).to.equal('- a');
+    });
   });
 
   it('should insert a placeholder when nothing is selected', async () => {
@@ -915,7 +999,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 () => {