@sd-angular/core 19.0.0-beta.55 → 19.0.0-beta.57

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

@@ -364,7 +364,10 @@ function createHeadingHandler(editor, modelName, headingDefaults) {
 }
 
 class VariablePlugin extends Plugin {
-    // Khai báo dependencies nếu cần (VD: Widget)
+    // Tên plugin đăng ký với CKEditor — bắt buộc để tìm kiếm bằng string và ổn định trong build minified
+    static get pluginName() {
+        return 'VariablePlugin';
+    }
     static get requires() {
         return [Widget];
     }
@@ -379,9 +382,11 @@ class VariablePlugin extends Plugin {
             allowWhere: '$text',
             isInline: true,
             isObject: true,
-            allowAttributes: ['id', 'uuid', 'value', 'display'],
+            allowAttributes: ['id', 'uuid', 'value', 'display', 'bindingValue'],
         });
         // 2. Model -> HTML
+        // model là string 'variable' → chỉ chạy khi element được TẠO MỚI (không reconvert khi attribute đổi)
+        // Luôn render trạng thái UNBOUND tại đây — binding state được xử lý riêng bởi converter bên dưới
         conversion.for('downcast').elementToElement({
             model: 'variable',
             view: (modelItem, { writer: viewWriter }) => {
@@ -395,18 +400,40 @@ class VariablePlugin extends Plugin {
                     'data-uuid': uuid,
                     'data-value': value,
                     'data-display': display,
+                    'data-binding': 'false', // Luôn bắt đầu unbound — binding chỉ set qua bindValue()
                 });
                 const innerText = viewWriter.createText(`{{${display}}}`);
                 viewWriter.insert(viewWriter.createPositionAt(widgetElement, 0), innerText);
                 return toWidget(widgetElement, viewWriter);
             },
         });
+        // 2b. One-way attribute converter cho bindingValue (chỉ editing view, không ảnh hưởng getData())
+        // Chỉ chạy khi bindValue() / clearValue() gọi model.change → setAttribute/removeAttribute
+        // Binding được persist vào HTML (getData() và setData() có binding state)
+        // conversion.for('downcast') ảnh hưởng cả editing view và data view (getData)
+        conversion.for('downcast').add(dispatcher => {
+            dispatcher.on('attribute:bindingValue:variable', (evt, data, conversionApi) => {
+                if (!conversionApi.consumable.consume(data.item, evt.name))
+                    return;
+                const viewWriter = conversionApi.writer;
+                const viewElement = conversionApi.mapper.toViewElement(data.item);
+                if (!viewElement)
+                    return;
+                const bindingValue = data.attributeNewValue;
+                const isBound = !!bindingValue;
+                const display = data.item.getAttribute('display');
+                // Cập nhật data-binding attribute trên container span
+                viewWriter.setAttribute('data-binding', isBound ? 'true' : 'false', viewElement);
+                // Xóa text node cũ và chèn text mới (bound value hoặc {{display}})
+                viewWriter.remove(viewWriter.createRangeIn(viewElement));
+                viewWriter.insert(viewWriter.createPositionAt(viewElement, 0), viewWriter.createText(isBound ? bindingValue : `{{${display}}}`));
+            });
+        });
         // 3. HTML -> Model
         conversion.for('upcast').elementToElement({
-            // NOTE: Khi bổ sung thêm attribute vào element variable, dev nên bổ sung thêm "[atribute]: true" vào view
-            // Để:
-            // - Nếu lọc chính xác sẽ không sinh ra thẻ span thừa bọc ngoài
-            // - Nếu chưa bổ sung thì sẽ sinh ra thẻ <span> bọc ngoài kèm [atribute] chưa lọc
+            // NOTE: Chỉ khai báo các attribute CẦN THIẾT để nhận biết variable widget.
+            // - data-binding KHÔNG được đưa vào required attributes (HTML cũ không có sẽ không được nhận biết).
+            // - Nếu data-binding="true" trong HTML → đọc text content làm bindingValue để restore trạng thái bound.
             view: {
                 name: 'span',
                 classes: 'variable-widget ck-widget',
@@ -419,11 +446,23 @@ class VariablePlugin extends Plugin {
                 },
             },
             model: (viewElement, { writer: modelWriter }) => {
+                const isBound = viewElement.getAttribute('data-binding') === 'true';
+                let bindingValue;
+                if (isBound) {
+                    // Đọc text content làm bindingValue (bound value được lưu trực tiếp vào innerHTML)
+                    for (const child of viewElement.getChildren()) {
+                        if (child.is('$text')) {
+                            bindingValue = child.data;
+                            break;
+                        }
+                    }
+                }
                 return modelWriter.createElement('variable', {
                     id: viewElement.getAttribute('data-id'),
                     uuid: viewElement.getAttribute('data-uuid'),
                     value: viewElement.getAttribute('data-value'),
                     display: viewElement.getAttribute('data-display'),
+                    ...(bindingValue ? { bindingValue } : {}),
                 });
             },
         });
@@ -443,7 +482,8 @@ class VariablePlugin extends Plugin {
                 const getOption = config.get('getOption');
                 const option = getOption?.();
                 if (option?.onDropVariable) {
-                    const result = await SdResolveMaybeAsync(option.onDropVariable(variable, 0));
+                    // Bug 4 Fix (Q2-A): Xóa tham số dropIndex — không còn tryền giá trị hardcode 0
+                    const result = await SdResolveMaybeAsync(option.onDropVariable(variable));
                     // * Hỗ trợ dữ liệu có sẵn sẽ chỉ cần nhận vào boolean có cho phép thả hay không?
                     if (typeof result === 'boolean') {
                         if (!result) {
@@ -460,11 +500,13 @@ class VariablePlugin extends Plugin {
                         }
                     }
                 }
+                let insertedUuid = '';
                 editor.model.change(writer => {
                     // 4.1. Chèn biến
+                    insertedUuid = v4();
                     const variableElem = writer.createElement('variable', {
                         id: variable.id,
-                        uuid: v4(),
+                        uuid: insertedUuid,
                         value: variable.value,
                         display: variable.display,
                     });
@@ -472,6 +514,9 @@ class VariablePlugin extends Plugin {
                     // 4.2. Đặt con trỏ ra sau biến
                     writer.setSelection(variableElem, 'after');
                 });
+                // onAfterDropVariable: fires SAU model.change() → variable đã có trong model
+                // Consumer có thể gọi variable.all() tại đây và thấy biến mới nhất
+                option?.onAfterDropVariable?.({ ...variable, uuid: insertedUuid });
             }
             catch (e) {
                 // Đặt con trỏ ngay tại vị trí lỗi
@@ -493,20 +538,66 @@ class VariablePlugin extends Plugin {
                 });
             }
         });
-        // 5. Lắng nghe sự kiện bàn phím
+        // -------------------------------------------------------------------------
+        // 5 & 6. Navigation (Arrow keys + Mouse) + Cursor spacing sau variable
+        // -------------------------------------------------------------------------
+        // Bug 1 Fix: isNavigating cần được reset sau mỗi lần change:range xử lý xong
+        // để tránh logic chèn \u00A0 chạy lặp khi có selection change programmatic.
         let isNavigating = false;
-        this.editor.editing.view.document.on('keydown', (evt, data) => {
+        // Opt 1: Gộp arrow-key detection + Backspace/Delete handler vào 1 listener keydown
+        // Bug 3 Fix: Dùng this.listenTo() thay .on() để CKEditor tự cleanup khi plugin destroy
+        this.listenTo(editingView.document, 'keydown', (evt, data) => {
+            const keyCode = data.keyCode;
+            // --- Arrow key navigation detection (priority: high) ---
             // Mã phím mũi tên: 37 (Left), 38 (Up), 39 (Right), 40 (Down)
-            const isArrowKey = data.keyCode >= 37 && data.keyCode <= 40;
+            const isArrowKey = keyCode >= 37 && keyCode <= 40;
             if (isArrowKey) {
                 isNavigating = true;
+                return; // không xử lý thêm cho arrow key ở đây
             }
-            else {
+            // Reset flag nếu nhấn phím khác (không phải arrow, không phải Backspace/Delete)
+            const btnBackspace = keyCode === 8;
+            const btnDelete = keyCode === 46;
+            if (!btnBackspace && !btnDelete) {
                 isNavigating = false;
+                return;
             }
-        }, { priority: 'high' });
-        // 6. Lắng nghe sự kiện Click chuột
-        this.editor.editing.view.document.on('mousedown', () => {
+            // --- Opt 1: Backspace / Delete handler (đã gộp vào cùng listener) ---
+            // priority: highest — chạy trước mọi handler khác để bắt xóa variable 2 bước
+            const selection = editor.model.document.selection;
+            const model = editor.model;
+            // CASE 1: Nếu con trỏ đang nhấp nháy (Collapsed)
+            if (selection.isCollapsed) {
+                const position = selection.getFirstPosition();
+                // Với Backspace ta kiểm tra nodeBefore, với Delete ta kiểm tra nodeAfter
+                const targetNode = btnBackspace ? position?.nodeBefore : position?.nodeAfter;
+                if (targetNode && targetNode.is('element', 'variable')) {
+                    data.preventDefault();
+                    evt.stop();
+                    model.change(writer => {
+                        // Chọn bao quanh Variable đó (lần bấm tiếp theo sẽ xóa)
+                        writer.setSelection(targetNode, 'on');
+                    });
+                    return;
+                }
+            }
+            // CASE 2: Nếu đang có một vùng chọn (đã được highlight từ lần bấm trước)
+            else {
+                const selectedElement = selection.getSelectedElement();
+                // Nếu phần tử đang được chọn chính là variable → xóa hẳn
+                if (selectedElement && selectedElement.is('element', 'variable')) {
+                    data.preventDefault();
+                    evt.stop();
+                    model.change(writer => {
+                        writer.remove(selectedElement);
+                    });
+                }
+            }
+        }, 
+        // priority: highest — Backspace/Delete phải chạy trước CKEditor default để bắt 2-step deletion
+        { priority: 'highest' });
+        // Bug 3 Fix: mousedown cũng dùng this.listenTo() để tránh memory leak
+        this.listenTo(editingView.document, 'mousedown', () => {
             isNavigating = true;
         });
         this.listenTo(editor.model.document.selection, 'change:range', () => {
@@ -514,6 +605,9 @@ class VariablePlugin extends Plugin {
             if (!isNavigating) {
                 return;
             }
+            // Bug 1 Fix: Reset ngay sau khi vào handler để tránh chạy lặp
+            // khi có thêm selection change programmatic (VD: writer.insertText bên dưới tự trigger lại)
+            isNavigating = false;
             const model = editor.model;
             const selection = model.document.selection;
             if (!selection.isCollapsed)
@@ -526,105 +620,64 @@ class VariablePlugin extends Plugin {
             if (nodeBefore && nodeBefore.is('element', 'variable')) {
                 // Lấy node ngay sau variable để kiểm tra
                 const nextNode = nodeBefore.nextSibling;
-                // Logic: Nếu phía sau KHÔNG CÓ GÌ hoặc KHÔNG PHẢI LÀ TEXT
+                // Logic: Nếu phía sau KHÔNG CÓ GÌ hoặc KHÔNG PHẢI LÀ TEXT → chèn \u00A0 để có thể gõ tiếp
                 if (!nextNode || !nextNode.is('$text')) {
                     model.change(writer => {
-                        // Chèn thêm con trỏ variable
                         writer.insertText('\u00A0', nodeBefore, 'after');
                         // Lấy vị trí ngay sau variable (lúc này đang là đầu của text node mới)
                         const posAfterVariable = writer.createPositionAfter(nodeBefore);
                         // Dịch chuyển vị trí đó sang phải 1 đơn vị (bỏ qua ký tự vừa thêm)
                         const targetPos = posAfterVariable.getShiftedBy(1);
-                        // 3. Đặt con trỏ vào vị trí đã tính toán
                         writer.setSelection(targetPos);
                     });
                 }
             }
         });
-        // 7. Handle xóa variable
-        this.editor.editing.view.document.on('keydown', (evt, data) => {
-            // Mã phím 8 là Backspace, 46 là Delete
-            const btnBackspace = data.keyCode === 8;
-            const btnDelete = data.keyCode === 46;
-            if (btnBackspace || btnDelete) {
-                const selection = editor.model.document.selection;
-                const model = editor.model;
-                // CASE 1: Nếu con trỏ đang nhấp nháy (Collapsed)
-                if (selection.isCollapsed) {
-                    const position = selection.getFirstPosition();
-                    // Với Backspace ta kiểm tra nodeBefore, với Delete ta kiểm tra nodeAfter
-                    const targetNode = data.keyCode === 8 ? position?.nodeBefore : position?.nodeAfter;
-                    if (targetNode && targetNode.is('element', 'variable')) {
-                        data.preventDefault();
-                        evt.stop();
-                        model.change(writer => {
-                            // Chọn bao quanh Variable đó
-                            writer.setSelection(targetNode, 'on');
-                        });
-                        return;
-                    }
-                }
-                // CASE 2: Nếu đang có một vùng chọn (đã được highlight từ lần bấm trước)
-                else {
-                    const selectedElement = selection.getSelectedElement();
-                    // Nếu phần tử đang được chọn chính là variable
-                    if (selectedElement && selectedElement.is('element', 'variable')) {
-                        // Cho phép hành động mặc định diễn ra (CKEditor sẽ tự xóa phần tử đang được chọn)
-                        // Hoặc chủ động xóa để chắc chắn:
-                        data.preventDefault();
-                        evt.stop();
-                        model.change(writer => {
-                            writer.remove(selectedElement);
-                        });
-                    }
-                }
-            }
-        }, { priority: 'highest' });
-        // 8. Xử lý sự kiện Copy (Clipboard Output)
-        // Chỉ set thêm text/plain fallback, không thay đổi HTML content
+        // -------------------------------------------------------------------------
+        // 8. Xử lý sự kiện Copy / Cut (Clipboard Output)
+        // -------------------------------------------------------------------------
+        // priority: low — chạy sau CKEditor để bổ sung text/plain fallback, không can thiệp HTML
         this.listenTo(editor.editing.view.document, 'clipboardOutput', (evt, data) => {
             const isCopyOrCut = data.method === 'copy' || data.method === 'cut';
             if (!isCopyOrCut)
                 return;
-            // Set thêm plain text fallback cho external apps
             const dataTransfer = data.dataTransfer;
             const content = data.content;
-            // Lấy tất cả text từ content (bao gồm cả variable dạng {{text}})
+            // Opt 3: Chỉ visit element nodes, bỏ qua các node không liên quan
             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 (item.is('$text')) {
+                    plainText += item.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ý
+            // HTML content giữ nguyên — CKEditor sẽ tự xử lý upcast khi paste lại
         }, { 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) => {
+        this.listenTo(editor.editing.view.document, 'clipboardInput', async (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ý
+                return;
             }
             // Chỉ xử lý nếu chỉ có plain text với pattern {{text}}
-            let text = dataTransfer.getData('text/plain');
+            const text = dataTransfer.getData('text/plain');
             if (!text)
                 return;
-            // Kiểm tra có chứa pattern {{text}} không (không cần id, value)
+            // Kiểm tra có chứa pattern {{text}} không
             const variablePattern = /\{\{([^}]+)\}\}/g;
             if (!variablePattern.test(text)) {
                 return;
@@ -632,53 +685,85 @@ class VariablePlugin extends Plugin {
             // 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),
-                        });
+            // Bug 2 Fix (Q1-A): Lấy option để gọi onPasteVariable callback nếu có
+            const config = editor.config;
+            const getOption = config.get('getOption');
+            const option = getOption?.();
+            // 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) });
+                }
+                fragments.push({ type: 'variable', content: match[0], display: match[1] });
+                lastIndex = match.index + match[0].length;
+            }
+            // 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) });
+            }
+            // Bug 2 Fix: Resolve tất cả variable fragments trước khi thực hiện model.change
+            // Tránh async operation bên trong model.change (CKEditor không hỗ trợ async writer)
+            // Xây dựng lookup map từ variables đang có trong document (theo display name)
+            // Dùng để fallback khi không có onPasteVariable — giữ lại đầy đủ id/value của biến gốc
+            // khi copy-paste nội bộ bị mất HTML (chỉ còn plain text {{display}})
+            const existingVariableMap = this.#buildDisplayMap();
+            const resolvedFragments = [];
+            for (const fragment of fragments) {
+                if (fragment.type === 'variable' && fragment.display) {
+                    let resolved = null;
+                    if (option?.onPasteVariable) {
+                        try {
+                            resolved = await SdResolveMaybeAsync(option.onPasteVariable(fragment.display));
+                        }
+                        catch (e) {
+                            console.warn(`[VariablePlugin] onPasteVariable("${fragment.display}") thất bại:`, e);
+                        }
+                    }
+                    // Fallback 1: Tra cứu variable đang có trong document theo display name
+                    // → Giữ lại đầy đủ id/value khi copy-paste nội bộ bị mất HTML
+                    if (!resolved) {
+                        resolved = existingVariableMap.get(fragment.display) ?? null;
                     }
-                    // Thêm variable
-                    const display = match[1];
-                    fragments.push({
+                    // Fallback 2: Không tìm thấy → tạo variable sentinel với id = ''
+                    // Consumer có thể filter qua variable.all() và nhận biết bằng id === ''
+                    resolvedFragments.push({
                         type: 'variable',
-                        content: match[0],
-                        display,
+                        content: fragment.content,
+                        variable: resolved ?? {
+                            id: '',
+                            uuid: v4(),
+                            value: fragment.display,
+                            display: fragment.display,
+                        },
                     });
-                    lastIndex = match.index + match[0].length;
                 }
-                // 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),
-                    });
+                else {
+                    resolvedFragments.push({ type: 'text', content: fragment.content });
                 }
-                // Chèn từng fragment vào document
+            }
+            // Chèn từng fragment vào document
+            editor.model.change(writer => {
+                const selection = editor.model.document.selection;
+                const position = selection.getFirstPosition();
+                if (!position)
+                    return;
                 let currentPosition = position;
-                for (const fragment of fragments) {
+                for (const fragment of resolvedFragments) {
                     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) {
+                    else if (fragment.type === 'variable' && fragment.variable) {
                         const variableElem = writer.createElement('variable', {
-                            id: v4(),
-                            uuid: v4(),
-                            value: fragment.display,
-                            display: fragment.display,
+                            id: fragment.variable.id,
+                            uuid: fragment.variable.uuid ?? v4(),
+                            value: fragment.variable.value,
+                            display: fragment.variable.display,
                         });
                         writer.insert(variableElem, currentPosition);
                         currentPosition = writer.createPositionAfter(variableElem);
@@ -698,6 +783,204 @@ class VariablePlugin extends Plugin {
             typeof obj.value === 'string' &&
             typeof obj.display === 'string');
     };
+    /**
+     * Quét tất cả variable elements trong document hiện tại, trả về Map<display, SdDocumentBuilderVariable>.
+     * Dùng làm fallback khi paste {{display}} mà không có onPasteVariable callback:
+     * nếu document đã có variable cùng display → tái sử dụng id/value của biến gốc.
+     * Nếu có nhiều variable cùng display → lấy cái đầu tiên tìm được.
+     */
+    #buildDisplayMap = () => {
+        const map = new Map();
+        const root = this.editor.model.document.getRoot();
+        if (!root)
+            return map;
+        const range = this.editor.model.createRangeIn(root);
+        for (const item of range.getItems()) {
+            if (item.is('element', 'variable')) {
+                const display = item.getAttribute('display');
+                // Chỉ lưu lần đầu tiên gặp display này
+                if (display && !map.has(display)) {
+                    map.set(display, {
+                        id: item.getAttribute('id'),
+                        uuid: item.getAttribute('uuid'),
+                        value: item.getAttribute('value'),
+                        display,
+                    });
+                }
+            }
+        }
+        return map;
+    };
+    // =========================================================================
+    // PUBLIC API — Variable management
+    // =========================================================================
+    /**
+     * Lấy tất cả variables trong document.
+     * @returns Danh sách tất cả variables (bao gồm bindingValue nếu đã binding)
+     */
+    all() {
+        const model = this.editor.model;
+        const root = model.document.getRoot();
+        if (!root)
+            return [];
+        const variables = [];
+        try {
+            const range = model.createRangeIn(root);
+            for (const item of range.getItems()) {
+                if (item.is('element', 'variable')) {
+                    variables.push({
+                        id: item.getAttribute('id'),
+                        uuid: item.getAttribute('uuid'),
+                        value: item.getAttribute('value'),
+                        display: item.getAttribute('display'),
+                        bindingValue: item.getAttribute('bindingValue'),
+                    });
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+            return [];
+        }
+        return variables;
+    }
+    /**
+     * Scroll tới vị trí của variable theo uuid.
+     * @param uuid - uuid của variable (FE tự sinh sau mỗi lần drop)
+     */
+    scroll(uuid) {
+        const model = this.editor.model;
+        const root = model.document.getRoot();
+        if (!root)
+            return;
+        let targetElement = null;
+        const range = model.createRangeIn(root);
+        for (const item of range.getItems()) {
+            if (item.is('element', 'variable') && item.getAttribute('uuid') === uuid) {
+                targetElement = item;
+                break;
+            }
+        }
+        if (targetElement) {
+            const viewElement = this.editor.editing.mapper.toViewElement(targetElement);
+            if (viewElement) {
+                const domElement = this.editor.editing.view.domConverter.viewToDom(viewElement);
+                if (domElement) {
+                    domElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    model.change(writer => {
+                        writer.setSelection(targetElement, 'on');
+                    });
+                }
+            }
+        }
+        else {
+            console.warn(`Variable với uuid "${uuid}" không tìm thấy trong tài liệu.`);
+        }
+    }
+    /**
+     * Gán giá trị cho TẤT CẢ variable có cùng id trong document.
+     * Nếu value rỗng → tự động gọi clearValue(id).
+     * @param id    - id của variable definition
+     * @param value - giá trị binding cần hiển thị
+     * @returns số instance đã được cập nhật
+     */
+    bindValue(id, value) {
+        if (!value)
+            return this.clearValue(id);
+        const model = this.editor.model;
+        const root = model.document.getRoot();
+        if (!root)
+            return 0;
+        let count = 0;
+        model.change(writer => {
+            const range = model.createRangeIn(root);
+            for (const item of range.getItems()) {
+                if (item.is('element', 'variable') && item.getAttribute('id') === id) {
+                    writer.setAttribute('bindingValue', value, item);
+                    count++;
+                }
+            }
+        });
+        return count;
+    }
+    /**
+     * Xóa binding value của TẤT CẢ variable có cùng id.
+     * @param id - id của variable definition
+     * @returns số instance đã được cập nhật
+     */
+    clearValue(id) {
+        const model = this.editor.model;
+        const root = model.document.getRoot();
+        if (!root)
+            return 0;
+        let count = 0;
+        model.change(writer => {
+            const range = model.createRangeIn(root);
+            for (const item of range.getItems()) {
+                if (item.is('element', 'variable') && item.getAttribute('id') === id && item.hasAttribute('bindingValue')) {
+                    writer.removeAttribute('bindingValue', item);
+                    count++;
+                }
+            }
+        });
+        return count;
+    }
+    /**
+     * Batch bind nhiều variables theo map { id → value }.
+     * Toàn bộ thực hiện trong 1 model.change() → 1 undo step duy nhất.
+     * @param map - { [id]: boundValue }
+     */
+    bindValues(map) {
+        if (!Object.keys(map).length)
+            return;
+        const model = this.editor.model;
+        const root = model.document.getRoot();
+        if (!root)
+            return;
+        model.change(writer => {
+            const range = model.createRangeIn(root);
+            for (const item of range.getItems()) {
+                if (!item.is('element', 'variable'))
+                    continue;
+                const id = item.getAttribute('id');
+                if (!(id in map))
+                    continue;
+                const value = map[id];
+                if (value) {
+                    writer.setAttribute('bindingValue', value, item);
+                }
+                else if (item.hasAttribute('bindingValue')) {
+                    writer.removeAttribute('bindingValue', item);
+                }
+            }
+        });
+    }
+    /**
+     * Batch clear binding của nhiều variables.
+     * @param ids - danh sách id cần clear; nếu không truyền/rỗng → clear TẤT CẢ
+     */
+    clearValues(ids) {
+        const model = this.editor.model;
+        const root = model.document.getRoot();
+        if (!root)
+            return;
+        const idSet = ids?.length ? new Set(ids) : null;
+        model.change(writer => {
+            const range = model.createRangeIn(root);
+            for (const item of range.getItems()) {
+                if (!item.is('element', 'variable') || !item.hasAttribute('bindingValue'))
+                    continue;
+                const id = item.getAttribute('id');
+                if (!idSet || idSet.has(id)) {
+                    writer.removeAttribute('bindingValue', item);
+                }
+            }
+        });
+    }
+    /** Xóa toàn bộ binding values trong document. Shorthand của clearValues(). */
+    clearAllValues() {
+        this.clearValues();
+    }
 }
 
 class TableCustom extends Plugin {
@@ -3201,9 +3484,14 @@ class CkCommentPlugin extends Plugin {
                 tooltip: true,
                 isEnabled: false,
             });
-            // Enable khi có selection và không phải chỉ khoảng trắng
+            // Enable khi có selection, không phải chỉ khoảng trắng, và allowCreating = true
             const selection = editor.model.document.selection;
             this.listenTo(selection, 'change', () => {
+                // Disabled ngay khi allowCreating = false
+                if (!(this.#config.allowCreating ?? true)) {
+                    view.isEnabled = false;
+                    return;
+                }
                 const isCollapsed = selection.isCollapsed;
                 const range = selection.getFirstRange();
                 // Kiểm tra xem selection có content không phải khoảng trắng không
@@ -3419,6 +3707,11 @@ class CkCommentPlugin extends Plugin {
                 this.#log('Skipping clear pending - isCreatingPending flag is set');
             }
             if (!selection.isCollapsed) {
+                // Chỉ hiện balloon khi allowCreating = true (mặc định)
+                if (!(this.#config.allowCreating ?? true)) {
+                    this.#hideBalloon();
+                    return;
+                }
                 const range = selection.getFirstRange();
                 if (range) {
                     // Chỉ hiện balloon khi selection có content không phải khoảng trắng và không vượt quá max length
@@ -3740,6 +4033,15 @@ class CkCommentPlugin extends Plugin {
         if (!range || range.isCollapsed) {
             return null;
         }
+        // Validate: start/end không được nằm bên trong isObject element (path.length > 2)
+        // Trường hợp xảy ra khi user drag-select qua bound variable widget
+        if (range.start.path.length > 2 || range.end.path.length > 2) {
+            this.#warn('Selection contains invalid path (inside isObject element) - aborting comment creation', {
+                startPath: Array.from(range.start.path),
+                endPath: Array.from(range.end.path),
+            });
+            return null;
+        }
         const text = this.#getTextFromRange(range);
         const trimmedText = text.trim();
         if (!trimmedText) {
@@ -3765,6 +4067,11 @@ class CkCommentPlugin extends Plugin {
         if (leadingWhitespace > 0 || trailingWhitespace > 0) {
             adjustedRange = this.#adjustRangeForTrim(range, leadingWhitespace, trailingWhitespace);
         }
+        // Validate lại sau khi trim
+        if (adjustedRange.start.path.length > 2 || adjustedRange.end.path.length > 2) {
+            this.#warn('Adjusted range has invalid path depth - aborting');
+            return null;
+        }
         return {
             range: adjustedRange,
             startPath: Array.from(adjustedRange.start.path),
@@ -3773,10 +4080,32 @@ class CkCommentPlugin extends Plugin {
         };
     }
     /**
-     * Điều chỉnh range để loại bỏ khoảng trắng đầu/cuối
+     * Điều chỉnh range để loại bỏ khoảng trắng đầu/cuối.
+     * Đảm bảo các vị trí sau khi dịch chuyển không rơi vào bên trong isObject element
+     * (ví dụ: variable widget đã bound) để tránh lỗi document-selection-wrong-position.
      */
     #adjustRangeForTrim(range, leadingTrim, trailingTrim) {
         const model = this.editor.model;
+        /** Kiểm tra pos có hợp lệ (không nằm bên trong isObject element) */
+        const isValidPosition = (pos) => {
+            try {
+                // path.length > 2 nghĩa là position nằm sâu hơn paragraph → bên trong element
+                if (pos.path && pos.path.length > 2)
+                    return false;
+                // Kiểm tra node tại vị trí đó
+                const nodeAfter = pos.nodeAfter;
+                const nodeBefore = pos.nodeBefore;
+                // Không cho phép position bắt đầu/kết thúc bên trong isObject
+                if (nodeAfter && model.schema.isObject(nodeAfter))
+                    return true; // trước object = ok
+                if (nodeBefore && model.schema.isObject(nodeBefore))
+                    return true; // sau object = ok
+                return model.schema.checkChild(pos, '$text') || true;
+            }
+            catch {
+                return false;
+            }
+        };
         return model.change(writer => {
             let startPos = range.start;
             let endPos = range.end;
@@ -3784,7 +4113,7 @@ class CkCommentPlugin extends Plugin {
             if (leadingTrim > 0) {
                 for (let i = 0; i < leadingTrim && startPos; i++) {
                     const nextPos = startPos.getShiftedBy(1);
-                    if (nextPos) {
+                    if (nextPos && isValidPosition(nextPos)) {
                         startPos = nextPos;
                     }
                     else {
@@ -3796,7 +4125,7 @@ class CkCommentPlugin extends Plugin {
             if (trailingTrim > 0) {
                 for (let i = 0; i < trailingTrim && endPos; i++) {
                     const prevPos = endPos.getShiftedBy(-1);
-                    if (prevPos && prevPos.isAfter(startPos)) {
+                    if (prevPos && prevPos.isAfter(startPos) && isValidPosition(prevPos)) {
                         endPos = prevPos;
                     }
                     else {
@@ -4456,75 +4785,18 @@ class SdDocumentBuilder {
     // ========================================================================
     // 3. QUẢN LÝ VARIABLE
     // ========================================================================
-    variable = {
-        /**
-         * Lấy tất cả variabes trong document
-         * @returns Danh sách tất cả variables
-         */
-        all: () => {
-            if (!this.#editor)
-                return [];
-            const model = this.#editor.model;
-            const root = model.document.getRoot();
-            if (!root)
-                return [];
-            const variables = [];
-            try {
-                const range = model.createRangeIn(root);
-                for (const item of range.getItems()) {
-                    // Sử dụng item.is('element', 'variable') là chính xác
-                    if (item.is('element', 'variable')) {
-                        variables.push({
-                            id: item.getAttribute('id'),
-                            uuid: item.getAttribute('uuid'),
-                            value: item.getAttribute('value'),
-                            display: item.getAttribute('display'),
-                        });
-                    }
-                }
-            }
-            catch (e) {
-                console.error(e);
-                return [];
-            }
-            return variables;
-        },
-        /**
-         * Scroll tới vị trí của variable
-         * @param uuid - uuid của variable FE sẽ tự sinh sau mỗi lần drop vào editor
-         */
-        scroll: (uuid) => {
-            if (!this.#editor)
-                return;
-            const model = this.#editor.model;
-            const root = model.document.getRoot();
-            if (!root)
-                return;
-            let targetElement = null;
-            const range = model.createRangeIn(root);
-            for (const item of range.getItems()) {
-                if (item.is('element', 'variable') && item.getAttribute('uuid') === uuid) {
-                    targetElement = item;
-                    break;
-                }
-            }
-            if (targetElement) {
-                const viewElement = this.#editor.editing.mapper.toViewElement(targetElement);
-                if (viewElement) {
-                    const domElement = this.#editor.editing.view.domConverter.viewToDom(viewElement);
-                    if (domElement) {
-                        domElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                        model.change(writer => {
-                            writer.setSelection(targetElement, 'on');
-                        });
-                    }
-                }
-            }
-            else {
-                console.warn(`Variable với id ${uuid} không tìm thấy trong tài liệu.`);
-            }
-        },
-    };
+    getVariablePluginAPI() {
+        if (!this.#editor)
+            return null;
+        try {
+            // Dùng class reference (không dùng string) → an toàn trong build minified, TypeScript-typed
+            return this.#editor.plugins.get(VariablePlugin);
+        }
+        catch (error) {
+            console.warn('VariablePlugin not available:', error);
+            return null;
+        }
+    }
     // ========================================================================
     // 4. HÀM EXPORT DOCX (FULL HEADER/FOOTER + PAGE NUMBER)
     // ========================================================================
@@ -4656,11 +4928,11 @@ class SdDocumentBuilder {
         });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDocumentBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400;font-size:inherit;line-height:inherit;margin-bottom:4px}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0;cursor:default}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SdDocumentBuilder, isStandalone: true, selector: "sd-document-builder", inputs: { option: "option", _disabled: ["disabled", "_disabled"] }, outputs: { contentChange: "contentChange" }, ngImport: i0, template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400;font-size:inherit;line-height:inherit;margin-bottom:4px}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]){background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]).ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .variable-widget[data-binding=true]{background-color:#4caf501f;color:#2e7d32;border-bottom:2px solid #4caf50!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:#4caf5038}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5047}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdDocumentBuilder, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400;font-size:inherit;line-height:inherit;margin-bottom:4px}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-weight:600;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:10px;-webkit-user-select:none;user-select:none;display:inline-block;margin:0 4px;vertical-align:middle;font-size:0;cursor:default}:host ::ng-deep .variable-widget:before{content:attr(data-display);font-size:10px}:host ::ng-deep .variable-widget:hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget.ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"] }]
+            args: [{ selector: 'sd-document-builder', standalone: true, imports: [CommonModule, CKEditorModule], template: "<div class=\"builder-container\">\n  <ckeditor\n    style=\"width: 100%\"\n    [editor]=\"Editor\" \n    [config]=\"config\" \n    (ready)=\"onReady($event)\"\n    [disabled]=\"disabled\">\n  </ckeditor>\n</div>", styles: ["@charset \"UTF-8\";.builder-container{background-color:#f3f4f6;height:100%;overflow-y:auto;width:100%;display:flex;flex-direction:column;align-items:center}:host{display:inline-block}:host ::ng-deep .ck-editor{display:flex;flex-direction:column;align-items:center;width:100%;--ck-content-font-family: \"Times New Roman\", serif !important;--ck-content-font-size: 13pt;--ck-content-line-height: 1.15}:host ::ng-deep .ck-editor__top,:host ::ng-deep .ck-editor__main{border:none!important;box-shadow:none!important}:host ::ng-deep .ck-editor__top{position:sticky;top:0;z-index:100;width:100%;min-width:600px;margin-bottom:10px}:host ::ng-deep .ck-editor__top .ck-sticky-panel__content{border:none!important}:host ::ng-deep .ck-editor__top .ck-toolbar{background:#fff!important;box-shadow:0 4px 6px -1px #0000001a!important;padding:8px!important}:host ::ng-deep .ck-editor__top .ck-toolbar .ck-toolbar__items{display:flex;justify-content:center;flex-wrap:wrap;align-items:center}:host ::ng-deep .ck-content{background-color:#fff;width:210mm;min-height:1123px;padding:20mm!important;box-sizing:border-box!important;box-shadow:0 10px 15px -3px #0000001a}:host ::ng-deep .ck-content h1,:host ::ng-deep .ck-content h2,:host ::ng-deep .ck-content h3,:host ::ng-deep .ck-content h4,:host ::ng-deep .ck-content h5,:host ::ng-deep .ck-content h6{font-weight:400;font-size:inherit;line-height:inherit;margin-bottom:4px}:host ::ng-deep .ck-content.landscape{width:297mm}:host ::ng-deep .ck-content>*{max-width:100%!important;box-sizing:border-box!important}:host ::ng-deep .ck-content p{margin-bottom:4px;text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{padding-left:20px!important;margin-left:0!important;margin-bottom:4px}:host ::ng-deep .ck-content li{margin-bottom:0}:host ::ng-deep .ck-content table{margin-bottom:4px}\n", ":host ::ng-deep .ck-heading-highlight{background-color:#fef08a}\n", "@charset \"UTF-8\";::ng-deep .ck-clipboard-drop-target-line{display:none!important}:host ::ng-deep .variable-widget{display:inline-block;-webkit-user-select:none;user-select:none}:host ::ng-deep .variable-widget:not([data-binding=true]){background-color:#e3f2fd;color:#1976d2;border:1px solid #90caf9!important;border-radius:4px;padding:2px 6px;font-size:0;margin:0 2px;vertical-align:middle;font-weight:600;cursor:default}:host ::ng-deep .variable-widget:not([data-binding=true]):before{content:attr(data-display);font-size:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:host ::ng-deep .variable-widget:not([data-binding=true]):hover{background-color:#bbdefb;box-shadow:0 1px 2px #0000001a}:host ::ng-deep .variable-widget:not([data-binding=true]).ck-widget_selected{outline:2px solid #2196f3;background-color:#bbdefb}:host ::ng-deep .variable-widget[data-binding=true]{background-color:#4caf501f;color:#2e7d32;border-bottom:2px solid #4caf50!important;border-radius:0;padding:0 1px;font-size:inherit;cursor:default}:host ::ng-deep .variable-widget[data-binding=true]:before{content:none}:host ::ng-deep .variable-widget[data-binding=true]:hover{background-color:#4caf5038}:host ::ng-deep .variable-widget[data-binding=true].ck-widget_selected{outline:2px solid #4caf50;background-color:#4caf5047}:host ::ng-deep .ck.ck-content .ck-widget,:host ::ng-deep .ck.ck-content .ck-widget:hover,:host ::ng-deep .ck.ck-content .ck-widget:focus,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected,:host ::ng-deep .ck.ck-content .ck-widget.ck-widget_selected:hover{outline:none!important;box-shadow:none!important}\n", ":host ::ng-deep .highlight-range{background-color:#ffeb3b80;border-bottom:2px solid #fbc02d;transition:background-color .2s;cursor:pointer}\n", ":host ::ng-deep .ck-comment-marker{background-color:var(--comment-bg, rgba(59, 130, 246, .3));border-bottom:2px solid rgb(59,130,246);cursor:pointer;transition:all .2s ease}:host ::ng-deep .ck-comment-marker:hover{opacity:.8}:host ::ng-deep .ck-comment-marker.ck-comment-pending{background-color:var(--comment-pending-bg, rgba(245, 158, 11, .4));border-bottom-color:#f59e0b}:host ::ng-deep .ck-comment-marker.ck-comment-normal{background-color:var(--comment-bg, rgba(59, 130, 246, .2));border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-selected{background-color:var(--comment-selected-bg, 59, 130, 246, .5);border-bottom-color:#3b82f6}:host ::ng-deep .ck-comment-marker.ck-comment-modified{background-color:var(--comment-modified-bg, rgba(249, 115, 22, .3));border-bottom-color:#f97316}:host ::ng-deep .ck-comment-marker.ck-comment-broken{background-color:var(--comment-broken-bg, rgba(239, 68, 68, .3));border-bottom-color:#ef4444;text-decoration:line-through;text-decoration-color:#ef4444}:host ::ng-deep .ck-balloon-panel .ck-button.ck-on:hover,:host ::ng-deep .ck-balloon-panel .ck-button.ck-off:hover{background:var(--ck-color-button-default-hover-background)}\n"] }]
         }], propDecorators: { option: [{
                 type: Input,
                 args: [{ required: true }]