@sd-angular/core 19.0.0-beta.14 → 19.0.0-beta.15

package/components/document-builder/src/plugins/table-fit/table-fit.plugin.d.ts

@@ -1,4 +1,29 @@
 import { Plugin } from 'ckeditor5';
 export declare class TableFitPlugin extends Plugin {
     init(): void;
+    /**
+     * Apply default table width
+     */
+    private _applyTableDefaults;
+    /**
+     * Apply default borders to all cells in a table
+     */
+    private _applyCellBorders;
+    /**
+     * Setup listener to preserve cell/table styles when model changes
+     */
+    private _setupStylePreservationOnModelChange;
+    /**
+     * Find tables that need border fixes from model changes
+     */
+    private _findTablesNeedingFix;
+    /**
+     * Find parent table element
+     */
+    private _findParentTable;
+    /**
+     * Cleanup listeners when plugin is destroyed
+     * Note: this.listenTo() listeners are automatically cleaned up by super.destroy()
+     */
+    destroy(): void;
 }

package/fesm2022/sd-angular-core-components-document-builder.mjs

@@ -453,37 +453,111 @@ class VariablePlugin extends Plugin {
             }
         }, { priority: 'highest' });
         // 8. Xử lý sự kiện Copy (Clipboard Output)
-        // Khi copy, thay thế  variable bằng text
-        this.listenTo(editor.editing.view.document, 'clipboardOutput', (_, data) => {
+        // Chỉ set thêm text/plain fallback, không thay đổi HTML content
+        this.listenTo(editor.editing.view.document, 'clipboardOutput', (evt, data) => {
             const isCopyOrCut = data.method === 'copy' || data.method === 'cut';
-            // Nếu không phải hành động copy hoặc cut thì thoát hàm
-            if (!isCopyOrCut) {
+            if (!isCopyOrCut)
                 return;
-            }
+            // Set thêm plain text fallback cho external apps
+            const dataTransfer = data.dataTransfer;
             const content = data.content;
-            editor.editing.view.change(writer => {
-                // Tạo range bao quanh toàn bộ nội dung clipboard
-                const range = writer.createRangeIn(content);
-                const itemsToReplace = [];
-                // Duyệt qua tất cả các phần tử trong clipboard để tìm variable
-                for (const item of range.getItems()) {
-                    // Kiểm tra đúng là thẻ span và có class variable-widget
-                    if (item.is('element', 'span') && item.hasClass('variable-widget')) {
-                        itemsToReplace.push(item);
+            // Lấy tất cả text từ content (bao gồm cả variable dạng {{text}})
+            let plainText = '';
+            const viewRange = editor.editing.view.createRangeIn(content);
+            for (const item of viewRange.getItems()) {
+                if (item.is('$text') || item.is('element', 'span')) {
+                    const itemAny = item;
+                    if (item.is('$text') && itemAny.data) {
+                        plainText += itemAny.data;
+                    }
+                    else if (item.is('element', 'span') && item.hasClass('variable-widget')) {
+                        const display = item.getAttribute('data-display');
+                        if (display)
+                            plainText += `{{${display}}}`;
+                    }
+                }
+            }
+            if (plainText) {
+                dataTransfer.setData('text/plain', plainText);
+            }
+            // HTML content giữ nguyên - CKEditor sẽ tự xử lý
+        }, { priority: 'low' });
+        // 9. Xử lý sự kiện Paste (Clipboard Input)
+        // Nếu paste từ external source (chỉ có text, không có HTML variable)
+        // thì chuyển {{text}} thành variable widget
+        this.listenTo(editor.editing.view.document, 'clipboardInput', (evt, data) => {
+            const dataTransfer = data.dataTransfer;
+            // Nếu có HTML chứa variable-widget thì để CKEditor xử lý (upcast converter)
+            const html = dataTransfer.getData('text/html');
+            if (html && html.includes('variable-widget')) {
+                return; // Để CKEditor upcast converter xử lý
+            }
+            // Chỉ xử lý nếu chỉ có plain text với pattern {{text}}
+            let text = dataTransfer.getData('text/plain');
+            if (!text)
+                return;
+            // Kiểm tra có chứa pattern {{text}} không (không cần id, value)
+            const variablePattern = /\{\{([^}]+)\}\}/g;
+            if (!variablePattern.test(text)) {
+                return;
+            }
+            // Reset lastIndex sau khi test
+            variablePattern.lastIndex = 0;
+            evt.stop();
+            editor.model.change(writer => {
+                const selection = editor.model.document.selection;
+                const position = selection.getFirstPosition();
+                if (!position)
+                    return;
+                // Tách text thành các phần: normal text và variables
+                let lastIndex = 0;
+                let match;
+                const fragments = [];
+                while ((match = variablePattern.exec(text)) !== null) {
+                    // Thêm text trước variable
+                    if (match.index > lastIndex) {
+                        fragments.push({
+                            type: 'text',
+                            content: text.slice(lastIndex, match.index),
+                        });
                     }
+                    // Thêm variable
+                    const display = match[1];
+                    fragments.push({
+                        type: 'variable',
+                        content: match[0],
+                        display,
+                    });
+                    lastIndex = match.index + match[0].length;
                 }
-                // Thay thế  variable bằng text
-                for (const item of itemsToReplace) {
-                    const displayText = item.getAttribute('data-display');
-                    if (displayText) {
-                        // Tạo một node text thuần túy
-                        const textNode = writer.createText(`{{${displayText}}}`);
-                        // Chèn text node vào ngay trước widget cũ
-                        writer.insert(writer.createPositionBefore(item), textNode);
-                        // Xóa widget cũ đi
-                        writer.remove(item);
+                // Thêm text còn lại sau variable cuối cùng
+                if (lastIndex < text.length) {
+                    fragments.push({
+                        type: 'text',
+                        content: text.slice(lastIndex),
+                    });
+                }
+                // Chèn từng fragment vào document
+                let currentPosition = position;
+                for (const fragment of fragments) {
+                    if (fragment.type === 'text' && fragment.content) {
+                        const textNode = writer.createText(fragment.content);
+                        writer.insert(textNode, currentPosition);
+                        currentPosition = writer.createPositionAfter(textNode);
+                    }
+                    else if (fragment.type === 'variable' && fragment.display) {
+                        const variableElem = writer.createElement('variable', {
+                            id: v4(),
+                            uuid: v4(),
+                            value: fragment.display,
+                            display: fragment.display,
+                        });
+                        writer.insert(variableElem, currentPosition);
+                        currentPosition = writer.createPositionAfter(variableElem);
                     }
                 }
+                // Đặt con trỏ sau nội dung vừa paste
+                writer.setSelection(currentPosition);
             });
         });
     }
@@ -501,75 +575,20 @@ class VariablePlugin extends Plugin {
 class TableFitPlugin extends Plugin {
     init() {
         const editor = this.editor;
-        const applyTableDefaults = (writer, tableElement) => {
-            if (!tableElement)
-                return;
-            // Always force table width to 100% on paste/insert
-            writer.setAttribute('tableWidth', '100%', tableElement);
-        };
-        const applyCellBorders = (writer, tableElement) => {
-            if (!tableElement)
-                return;
-            for (const row of tableElement.getChildren()) {
-                for (const cell of row.getChildren()) {
-                    const hasBorderColor = cell.getAttribute('tableCellBorderColor');
-                    const hasBorderStyle = cell.getAttribute('tableCellBorderStyle');
-                    const hasBorderWidth = cell.getAttribute('tableCellBorderWidth');
-                    const hasPadding = cell.getAttribute('tableCellPadding');
-                    if (!hasBorderColor) {
-                        writer.setAttribute('tableCellBorderColor', '#000000', cell);
-                    }
-                    if (!hasBorderStyle) {
-                        writer.setAttribute('tableCellBorderStyle', 'solid', cell);
-                    }
-                    if (!hasBorderWidth) {
-                        writer.setAttribute('tableCellBorderWidth', '1pt', cell);
-                    }
-                    if (!hasPadding) {
-                        writer.setAttribute('tableCellPadding', '0.4em', cell);
-                    }
-                }
-            }
-        };
-        const listenAndApplyOnExecute = (commandName) => {
-            const cmd = editor.commands.get(commandName);
-            if (!cmd)
-                return;
-            this.listenTo(cmd, 'execute', () => {
-                editor.model.change(writer => {
-                    const selection = editor.model.document.selection;
-                    const position = selection.getFirstPosition();
-                    if (!position)
-                        return;
-                    const tableElement = position.findAncestor('table');
-                    applyTableDefaults(writer, tableElement);
-                    applyCellBorders(writer, tableElement);
-                });
-            });
-        };
         // Can thiệp vào quá trình convert từ View (HTML Paste) sang Model
         editor.conversion.for('upcast').add(dispatcher => {
-            dispatcher.on('element:table', (evt, data, conversionApi) => {
-                // 1. Gọi consume để báo với CKEditor là chúng ta sẽ xử lý element này
-                if (!conversionApi.consumable.consume(data.viewItem, { name: true })) {
+            dispatcher.on('element:table', (evt, data) => {
+                if (!data.modelRange)
                     return;
-                }
-                // 2. Thực hiện chuyển đổi mặc định để tạo ra model element
-                const { modelCursor, modelRange } = conversionApi.convertChildren(data.viewItem, data.modelCursor);
-                // 3. Bây giờ modelRange chắc chắn tồn tại, ta tìm element table trong đó
-                for (const item of modelRange.getItems()) {
+                for (const item of data.modelRange.getItems()) {
                     if (item.is('element', 'table')) {
                         editor.model.change(writer => {
-                            applyTableDefaults(writer, item);
-                            applyCellBorders(writer, item);
+                            this._applyTableDefaults(writer, item);
+                            this._applyCellBorders(writer, item);
                         });
                     }
                 }
-                // 4. Cập nhật modelCursor để dispatcher biết đã xử lý xong tới đâu
-                data.modelRange = modelRange;
-                data.modelCursor = modelCursor;
             }, { priority: 'low' });
-            // Chạy sau cùng để ghi đè các logic mặc định
         });
         const findInnerTable = (viewElement) => {
             if (!viewElement)
@@ -586,7 +605,6 @@ class TableFitPlugin extends Plugin {
             return null;
         };
         editor.conversion.for('downcast').add(dispatcher => {
-            // Handle when tableWidth attribute changes
             dispatcher.on('attribute:tableWidth:table', (evt, data, conversionApi) => {
                 const viewWriter = conversionApi.writer;
                 const viewElement = conversionApi.mapper.toViewElement(data.item);
@@ -598,10 +616,8 @@ class TableFitPlugin extends Plugin {
                 viewWriter.setStyle('border-collapse', 'collapse', innerTable);
                 viewWriter.setStyle('margin', '0', innerTable);
                 viewWriter.setStyle('width', '100%', innerTable);
-                // Set width on the wrapper container (ck-widget) as well
                 viewWriter.setStyle('width', '100%', viewElement);
             });
-            // Handle when table is first inserted
             dispatcher.on('insert:table', (evt, data, conversionApi) => {
                 const viewWriter = conversionApi.writer;
                 const viewElement = conversionApi.mapper.toViewElement(data.item);
@@ -613,40 +629,157 @@ class TableFitPlugin extends Plugin {
                 viewWriter.setStyle('border-collapse', 'collapse', innerTable);
                 viewWriter.setStyle('margin', '0', innerTable);
                 viewWriter.setStyle('width', '100%', innerTable);
-                // Set width on the wrapper container (ck-widget) as well
                 viewWriter.setStyle('width', '100%', viewElement);
             });
         });
-        // Lắng nghe lệnh insertTable để can thiệp ngay sau khi bảng được tạo
+        // Lắng nghe lệnh insertTable
         const insertTableCommand = editor.commands.get('insertTable');
         if (insertTableCommand) {
-            // Dùng 'on' event để hook vào sau khi lệnh thực thi
-            this.listenTo(insertTableCommand, 'execute', (evt, args) => {
+            this.listenTo(insertTableCommand, 'execute', () => {
                 editor.model.change(writer => {
-                    // Lấy vị trí con trỏ hiện tại (nơi bảng vừa được chèn)
-                    const selection = editor.model.document.selection;
-                    const position = selection.getFirstPosition();
+                    const position = editor.model.document.selection.getFirstPosition();
                     if (!position)
                         return;
-                    // Tìm element table vừa chèn (nó nằm ở vị trí cha của selection)
-                    // Khi vừa insert, con trỏ thường nằm trong ô đầu tiên của bảng
                     const tableElement = position.findAncestor('table');
                     if (tableElement) {
-                        // Ép width 100% cho bảng mới vẽ
-                        applyTableDefaults(writer, tableElement);
-                        // Apply border style 1pt solid black
+                        this._applyTableDefaults(writer, tableElement);
                         writer.setAttribute('tableBorderColor', '#000000', tableElement);
                         writer.setAttribute('tableBorderStyle', 'solid', tableElement);
                         writer.setAttribute('tableBorderWidth', '1pt', tableElement);
-                        applyCellBorders(writer, tableElement);
+                        this._applyCellBorders(writer, tableElement);
                     }
                 });
             });
         }
-        listenAndApplyOnExecute('insertTableRowAbove');
-        listenAndApplyOnExecute('insertTableRowBelow');
-        listenAndApplyOnExecute('insertTableColumnLeft');
-        listenAndApplyOnExecute('insertTableColumnRight');
+        // Listen for row/column commands
+        const tableCommands = [
+            'insertTableRowAbove',
+            'insertTableRowBelow',
+            'insertTableColumnLeft',
+            'insertTableColumnRight',
+            'resizeTableRow',
+            'resizeTableColumn',
+            'setTableColumnWidth',
+            'tableColumnWidth'
+        ];
+        tableCommands.forEach(cmdName => {
+            const cmd = editor.commands.get(cmdName);
+            if (cmd) {
+                this.listenTo(cmd, 'execute', () => {
+                    editor.model.change(writer => {
+                        const position = editor.model.document.selection.getFirstPosition();
+                        if (!position)
+                            return;
+                        const tableElement = position.findAncestor('table');
+                        if (tableElement) {
+                            this._applyTableDefaults(writer, tableElement);
+                            this._applyCellBorders(writer, tableElement);
+                        }
+                    });
+                });
+            }
+        });
+        // Setup style preservation on model change
+        this._setupStylePreservationOnModelChange();
+    }
+    /**
+     * Apply default table width
+     */
+    _applyTableDefaults(writer, tableElement) {
+        if (!tableElement)
+            return;
+        writer.setAttribute('tableWidth', '100%', tableElement);
+    }
+    /**
+     * Apply default borders to all cells in a table
+     */
+    _applyCellBorders(writer, tableElement) {
+        if (!tableElement)
+            return;
+        for (const row of tableElement.getChildren()) {
+            for (const cell of row.getChildren()) {
+                if (!cell.getAttribute('tableCellBorderColor')) {
+                    writer.setAttribute('tableCellBorderColor', '#000000', cell);
+                }
+                if (!cell.getAttribute('tableCellBorderStyle')) {
+                    writer.setAttribute('tableCellBorderStyle', 'solid', cell);
+                }
+                if (!cell.getAttribute('tableCellBorderWidth')) {
+                    writer.setAttribute('tableCellBorderWidth', '1pt', cell);
+                }
+                if (!cell.getAttribute('tableCellPadding')) {
+                    writer.setAttribute('tableCellPadding', '0.4em', cell);
+                }
+            }
+        }
+    }
+    /**
+     * Setup listener to preserve cell/table styles when model changes
+     */
+    _setupStylePreservationOnModelChange() {
+        const editor = this.editor;
+        // Use listenTo for proper cleanup via destroy()
+        this.listenTo(editor.model.document, 'change', (evt, batch) => {
+            if (batch?.isLocal === false)
+                return;
+            const changes = editor.model.document.differ.getChanges();
+            const tablesToFix = this._findTablesNeedingFix(changes);
+            if (tablesToFix.size > 0) {
+                editor.model.enqueueChange(() => {
+                    editor.model.change(writer => {
+                        for (const table of tablesToFix) {
+                            this._applyTableDefaults(writer, table);
+                            this._applyCellBorders(writer, table);
+                        }
+                    });
+                });
+            }
+        });
+    }
+    /**
+     * Find tables that need border fixes from model changes
+     */
+    _findTablesNeedingFix(changes) {
+        const tablesToFix = new Set();
+        for (const change of changes) {
+            if (change.type === 'attribute') {
+                const attrKey = change.attributeKey;
+                if (attrKey && (attrKey.includes('table') || attrKey.includes('column') || attrKey.includes('width'))) {
+                    const element = change.item;
+                    if (element) {
+                        const parentTable = this._findParentTable(element);
+                        if (parentTable)
+                            tablesToFix.add(parentTable);
+                    }
+                }
+            }
+            if (change.type === 'insert' && change.position) {
+                const tableElement = change.position.findAncestor?.('table') ||
+                    change.position.parent?.findAncestor?.('table');
+                if (tableElement)
+                    tablesToFix.add(tableElement);
+            }
+        }
+        return tablesToFix;
+    }
+    /**
+     * Find parent table element
+     */
+    _findParentTable(element) {
+        if (!element)
+            return null;
+        let parent = element;
+        while (parent && !parent.is?.('element', 'table')) {
+            parent = parent.parent;
+        }
+        return parent;
+    }
+    /**
+     * Cleanup listeners when plugin is destroyed
+     * Note: this.listenTo() listeners are automatically cleaned up by super.destroy()
+     */
+    destroy() {
+        super.destroy();
     }
 }