@libs-ui/components-inputs-quill2x 0.2.357-16 → 0.2.357-18

package/fesm2022/libs-ui-components-inputs-quill2x.mjs

@@ -683,23 +683,63 @@ const getStylesConvertInline = (customStyles) => {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const Embed = Quill2x.import('blots/embed');
+// Đặt trên WRAPPER riêng vì Embed constructor của quill 2 sẽ bọc children vào contentNode — style
+// để trên node ngoài sẽ không còn ôm trực tiếp các piece sau khi bị bọc.
+const CHIP_WRAPPER_STYLE = 'display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;max-width:100%;overflow:hidden;border-radius:4px;background:#f1f3f5;vertical-align:middle;white-space:nowrap;user-select:none';
+// Dựng nội dung chip từ attr `chip` (JSON mảng pieces) — textContent thuần, KHÔNG innerHTML (an toàn XSS).
+// JSON hỏng → fallback hiển thị text `value` như blot thường.
+const buildChipContent = (node, chip, value) => {
+    let pieces;
+    try {
+        pieces = JSON.parse(chip);
+    }
+    catch {
+        node.innerText += value;
+        return;
+    }
+    if (!Array.isArray(pieces) || !pieces.length) {
+        node.innerText += value;
+        return;
+    }
+    const wrapper = document.createElement('span');
+    wrapper.setAttribute('style', CHIP_WRAPPER_STYLE);
+    pieces.forEach((piece) => {
+        const span = document.createElement('span');
+        if (piece.className) {
+            span.className = piece.className;
+        }
+        if (piece.text !== undefined) {
+            span.textContent = piece.text;
+        }
+        wrapper.appendChild(span);
+    });
+    node.appendChild(wrapper);
+};
 class QuillMention2xBlot extends Embed {
     static blotName = 'mention';
     static tagName = 'span';
     static className = 'libs-ui-quill-mention';
     static create(data) {
         const node = super.create();
-        node.innerText += data.value;
         node.setAttribute('id', data.id);
         node.setAttribute('feId', data.feId);
         node.setAttribute('value', data.value);
+        if (data.chip) {
+            // Chip giàu (icon + nhãn) — pieces do consumer cấp qua IMentionItem.mentionInsertData.
+            node.setAttribute('chip', data.chip);
+            buildChipContent(node, data.chip, data.value);
+            return node;
+        }
+        node.innerText += data.value;
         return node;
     }
     static value(domNode) {
+        const chip = domNode.getAttribute('chip');
         return {
             id: domNode.getAttribute('id'),
             feId: domNode.getAttribute('feId'),
             value: domNode.getAttribute('value'),
+            ...(chip ? { chip } : {}),
         };
     }
     attach() {
@@ -1638,7 +1678,12 @@ class LibsUiComponentsInputsQuill2xComponent {
                             handler: (range) => this.noPreventEmbedDeletion(range),
                         },
                         enter: {
-                            key: 13,
+                            // Quill 2 match binding theo event.key (string) — key số 13 (keyCode kiểu Quill 1) không bao giờ
+                            // match ⇒ Enter khi mention đang mở vẫn chèn newline (insertMention từng phải bù thủ công).
+                            key: 'Enter',
+                            // shiftKey: null ⇒ match cả Enter lẫn Shift+Enter. Mention directive KHÔNG loại trừ shiftKey khi
+                            // chèn mention, nên thiếu dòng này thì Shift+Enter vẫn rơi vào default handler và chèn newline dư.
+                            shiftKey: null,
                             handler: () => !this.showMention(),
                         },
                     },
@@ -2192,20 +2237,24 @@ class LibsUiComponentsInputsQuill2xComponent {
         instance?.outClose.subscribe(() => this.dynamicComponentService.delete(this.addEditLinkComponentRef()));
         this.dynamicComponentService.addToBody(this.addEditLinkComponentRef());
     }
+    // Chèn blot mention thay cho chuỗi '<triggerChar><search>' người dùng vừa gõ.
+    // Caret đang đứng NGAY SAU chuỗi đó (lengthKey ký tự, tính cả trigger char) → vị trí chèn = caret - lengthKey.
+    // Công thức cũ trừ thêm 1 (heuristic '@') làm cửa sổ xóa lệch trái 1 ký tự: sót trigger char trong nội dung,
+    // nuốt nhầm ký tự đứng trước; mention ở đầu document còn ra index -1 → insertEmbed throw IndexSizeError.
     insertMention(event) {
-        const range = this.quill?.getSelection();
+        // Click chuột chọn item trên list (append body) có thể làm editor mất selection → getSelection(true)
+        // focus lại editor và trả về range đã lưu trước khi blur.
+        const range = this.quill?.getSelection() ?? this.quill?.getSelection(true);
         if (!range) {
             return;
         }
-        const indexSubtract = this.quill?.getText(range.index - 1, 1)?.includes('@') ? 0 : 1;
-        const cursorPos = range.index - indexSubtract;
-        const startPosInsert = cursorPos - event.lengthKey;
-        this.quill?.deleteText(startPosInsert, event.lengthKey, Quill2x.sources.SILENT);
+        // Kẹp CẢ vị trí lẫn độ dài: nếu lengthKey > range.index (caret chưa đủ ký tự phía trước, vd range khôi
+        // phục về 0) mà chỉ kẹp vị trí thì cửa sổ xóa trượt phải và nuốt mất ký tự đứng sau caret.
+        const startPosInsert = Math.max(range.index - event.lengthKey, 0);
+        const lengthDelete = Math.min(event.lengthKey, range.index);
+        this.quill?.deleteText(startPosInsert, lengthDelete, Quill2x.sources.SILENT);
         this.quill?.insertEmbed(startPosInsert, 'mention', event.data, Quill2x.sources.SILENT);
         this.insertText(' ', startPosInsert + 1);
-        if (indexSubtract) {
-            this.quill?.deleteText(startPosInsert + 3, 1, Quill2x.sources.SILENT);
-        }
         this.quill?.setSelection(startPosInsert + 2, 0, Quill2x.sources.SILENT);
     }
     updateValueByRootQuillHtml() {