@textbus/xnote 0.0.4 → 0.0.6

package/bundles/index.js

@@ -8,6 +8,7 @@ var platformBrowser = require('@textbus/platform-browser');
 var platformBrowser$1 = require('@viewfly/platform-browser');
 var hooks = require('@viewfly/hooks');
 var highlightjs = require('highlight.js');
+var uuid = require('uuid');
 var Katex = require('katex');
 var adapterViewfly = require('@textbus/adapter-viewfly');
 var color = require('@tanbo/color');
@@ -29,7 +30,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __rest(s, e) {
@@ -482,7 +483,7 @@ var scopedId$h = "vf-c32a7b";
 function Keymap(props) {
     const arr = [];
     const keymap = props.keymap;
-    if (keymap.ctrlKey) {
+    if (keymap.modKey) {
         arr.push(platformBrowser.isMac() ? jsxRuntime.jsx("span", { class: "xnote-icon-command" }) : jsxRuntime.jsx("span", { children: "Ctrl" }));
     }
     if (keymap.shiftKey) {
@@ -504,6 +505,9 @@ function Keymap(props) {
         if (Array.isArray(keymap.key)) {
             arr.push(jsxRuntime.jsx("span", { children: keymap.key.join('/') }));
         }
+        else if (typeof keymap.key === 'object') {
+            arr.push(jsxRuntime.jsx("span", { children: keymap.key.name }));
+        }
         else {
             arr.push(jsxRuntime.jsx("span", { children: keymap.key }));
         }
@@ -604,7 +608,7 @@ function registerTextAlignShortcut(textbus) {
     keyboard.addShortcut({
         keymap: {
             key: 'lrej'.split(''),
-            ctrlKey: true
+            modKey: true
         },
         action(key) {
             const valueMap = {
@@ -662,7 +666,7 @@ function registerHeadingShortcut(textbus) {
     keyboard.addShortcut({
         keymap: {
             key: '0123456'.split(''),
-            ctrlKey: true
+            modKey: true
         },
         action(key) {
             if (key === '0') {
@@ -823,7 +827,7 @@ function registerBlockquoteShortcut(textbus) {
     const keyboard = textbus.get(core$1.Keyboard);
     keyboard.addShortcut({
         keymap: {
-            ctrlKey: true,
+            modKey: true,
             key: '\''
         },
         action() {
@@ -1770,16 +1774,16 @@ function AttrTool(props) {
         const states = checkStates();
         return (jsxRuntime.jsx(Dropdown, { width: 'auto', style: props.style, abreast: props.abreast, onCheck: updateAttr, trigger: 'hover', menu: [
                 {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'L', ctrlKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-left" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'L', modKey: true } }), checked: states.textAlign === 'left', children: "\u5DE6\u5BF9\u9F50" }),
                     value: 't-l'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'R', ctrlKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-right" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'R', modKey: true } }), checked: states.textAlign === 'right', children: "\u53F3\u5BF9\u9F50" }),
                     value: 't-r'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'E', ctrlKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-center" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'E', modKey: true } }), checked: states.textAlign === 'center', children: "\u5C45\u4E2D\u5BF9\u9F50" }),
                     value: 't-c'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'J', ctrlKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
+                    label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-paragraph-justify" }), desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'J', modKey: true } }), checked: states.textAlign === 'justify', children: "\u5206\u6563\u5BF9\u9F50" }),
                     value: 't-j'
                 }, {
                     label: jsxRuntime.jsx(Divider, {}),
@@ -1795,20 +1799,99 @@ function AttrTool(props) {
     });
 }
 
+class Rectangle {
+    constructor(x1, y1, x2, y2) {
+        this.x1 = x1;
+        this.y1 = y1;
+        this.x2 = x2;
+        this.y2 = y2;
+    }
+    intersects(other) {
+        return this.x1 < other.x2 && this.x2 > other.x1 && this.y1 < other.y2 && this.y2 > other.y1;
+    }
+    merge(other) {
+        return new Rectangle(Math.min(this.x1, other.x1), Math.min(this.y1, other.y1), Math.max(this.x2, other.x2), Math.max(this.y2, other.y2));
+    }
+}
+function findNonIntersectingRectangles(rectangles) {
+    const merged = [];
+    const remaining = [...rectangles];
+    while (remaining.length > 0) {
+        const current = remaining.shift();
+        let mergedWithCurrent = false;
+        for (let i = 0; i < merged.length; i++) {
+            if (current.intersects(merged[i])) {
+                merged[i] = current.merge(merged[i]);
+                mergedWithCurrent = true;
+                break;
+            }
+        }
+        if (!mergedWithCurrent) {
+            merged.push(current);
+        }
+    }
+    return merged;
+}
+function getMaxRectangle(start, rectangles) {
+    let merged = start;
+    const remaining = [...rectangles];
+    while (remaining.length > 0) {
+        const current = remaining.shift();
+        if (current.intersects(merged)) {
+            merged = current.merge(merged);
+        }
+    }
+    return merged;
+}
+function applyRectangles(rows, rectangles) {
+    const table = rows.map(row => {
+        return {
+            row,
+            cells: row.cells.map(cell => {
+                return {
+                    rowspan: 1,
+                    colspan: 1,
+                    visible: true,
+                    raw: cell
+                };
+            })
+        };
+    });
+    rectangles.forEach(rect => {
+        const { x1, y1, x2, y2 } = rect;
+        const rowspan = y2 - y1;
+        const colspan = x2 - x1;
+        for (let i = y1; i < y2; i++) {
+            for (let j = x1; j < x2; j++) {
+                const item = table[i].cells[j];
+                if (i === y1 && j === x1) {
+                    item.visible = true;
+                    item.rowspan = rowspan;
+                    item.colspan = colspan;
+                }
+                else {
+                    item.visible = false;
+                }
+            }
+        }
+    });
+    return table;
+}
+
 const defaultRowHeight = 30;
 const defaultColumnWidth = 100;
 class TableComponent extends core$1.Component {
     static fromJSON(textbus, json) {
         const registry = textbus.get(core$1.Registry);
         return new TableComponent(textbus, {
-            layoutWidth: json.layoutWidth || [],
+            columnsConfig: json.columnsConfig || [],
+            mergeConfig: json.mergeConfig || [],
             rows: json.rows.map(row => {
                 return {
                     height: row.height,
                     cells: row.cells.map(cell => {
                         return {
-                            colspan: cell.colspan,
-                            rowspan: cell.rowspan,
+                            id: cell.id,
                             slot: registry.createSlot(cell.slot)
                         };
                     })
@@ -1817,7 +1900,8 @@ class TableComponent extends core$1.Component {
         });
     }
     constructor(textbus, state = {
-        layoutWidth: Array.from({ length: 5 }).fill(100),
+        columnsConfig: Array.from({ length: 5 }).fill(defaultColumnWidth),
+        mergeConfig: {},
         rows: Array.from({ length: 3 }).map(() => {
             return {
                 height: defaultRowHeight,
@@ -1826,9 +1910,8 @@ class TableComponent extends core$1.Component {
                     const slot = new core$1.Slot([core$1.ContentType.BlockComponent]);
                     slot.insert(p);
                     return {
-                        rowspan: 1,
-                        colspan: 1,
-                        slot
+                        slot,
+                        id: uuid.v4()
                     };
                 })
             };
@@ -1836,11 +1919,236 @@ class TableComponent extends core$1.Component {
     }) {
         super(textbus, state);
         this.selection = this.textbus.get(core$1.Selection);
+        this.commander = this.textbus.get(core$1.Commander);
         this.focus = new core$1.Subject();
         this.tableSelection = core.createSignal(null);
+        this.ignoreSelectionChanges = false;
+        this.normalizedData = [];
     }
     getSlots() {
-        return this.state.rows.map(i => i.cells.map(j => j.slot)).flat();
+        return this.normalizedData.map(item => {
+            return item.cells.filter(i => i.visible).map(i => i.raw.slot);
+        }).flat();
+    }
+    mergeCellBySelection() {
+        var _a, _b, _c, _d;
+        const slots = this.getSelectedNormalizedSlots();
+        if (slots) {
+            const start = (_b = (_a = slots.at(0)) === null || _a === void 0 ? void 0 : _a.cells.at(0)) === null || _b === void 0 ? void 0 : _b.raw;
+            const end = (_d = (_c = slots.at(-1)) === null || _c === void 0 ? void 0 : _c.cells.at(-1)) === null || _d === void 0 ? void 0 : _d.raw;
+            if (start && end) {
+                slots.forEach(item => {
+                    item.cells.forEach(cell => {
+                        if (cell.raw.id === start.id) {
+                            return;
+                        }
+                        cell.raw.slot.cleanFormats();
+                        cell.raw.slot.cleanAttributes();
+                        cell.raw.slot.retain(0);
+                        cell.raw.slot.delete(cell.raw.slot.length);
+                        Reflect.deleteProperty(this.state.mergeConfig, cell.raw.id);
+                    });
+                });
+                this.state.mergeConfig[start.id] = end.id;
+            }
+        }
+        this.selection.collapse(true);
+    }
+    splitCellsBySelection() {
+        var _a, _b, _c, _d;
+        const slots = this.getSelectedNormalizedSlots();
+        if (slots) {
+            slots.forEach(item => {
+                item.cells.forEach(cell => {
+                    Reflect.deleteProperty(this.state.mergeConfig, cell.raw.id);
+                });
+            });
+            const start = (_b = (_a = slots.at(0)) === null || _a === void 0 ? void 0 : _a.cells.at(0)) === null || _b === void 0 ? void 0 : _b.raw;
+            const end = (_d = (_c = slots.at(-1)) === null || _c === void 0 ? void 0 : _c.cells.at(-1)) === null || _d === void 0 ? void 0 : _d.raw;
+            if (start && end) {
+                this.selection.setBaseAndExtent(start.slot, 0, end.slot, end.slot.length);
+            }
+        }
+    }
+    getMaxRectangle(startSlot, endSlot) {
+        let index1 = -1;
+        let index2 = -1;
+        let x1 = -1;
+        let x2 = -1;
+        let y1 = -1;
+        let y2 = -1;
+        let index = 0;
+        for (let i = 0; i < this.state.rows.length; i++) {
+            const row = this.state.rows[i];
+            for (let j = 0; j < row.cells.length; j++) {
+                const item = row.cells[j];
+                if (item.slot === startSlot) {
+                    index1 = index;
+                    x1 = j;
+                    y1 = i;
+                }
+                if (item.slot === endSlot) {
+                    index2 = index;
+                    x2 = j;
+                    y2 = i;
+                }
+                index++;
+            }
+        }
+        if (index1 === -1 || index2 === -1) {
+            return null;
+        }
+        if (x1 > x2) {
+            [x1, x2] = [x2, x1];
+        }
+        if (y1 > y2) {
+            [y1, y2] = [y2, y1];
+        }
+        return getMaxRectangle(new Rectangle(x1, y1, x2 + 1, y2 + 1), this.getMergedRectangles());
+    }
+    getSelectedNormalizedSlots() {
+        const rect = this.getSelectedRect();
+        if (rect) {
+            return this.getSelectedNormalizedSlotsByRectangle(rect);
+        }
+        return null;
+    }
+    getSelectedRect() {
+        const getSelfSlot = (slot) => {
+            let cell = slot;
+            while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== this) {
+                cell = cell.parentSlot;
+            }
+            return cell;
+        };
+        const start = getSelfSlot(this.selection.startSlot);
+        const end = getSelfSlot(this.selection.endSlot);
+        if (start && end) {
+            return this.getMaxRectangle(start, end);
+        }
+        return null;
+    }
+    getSelectedNormalizedSlotsByRectangle(rectangle) {
+        return this.normalizedData.slice(rectangle.y1, rectangle.y2).map(item => {
+            return {
+                row: item.row,
+                cells: item.cells.slice(rectangle.x1, rectangle.x2)
+            };
+        });
+    }
+    getCellBySlot(slot) {
+        for (const row of this.state.rows) {
+            for (const cell of row.cells) {
+                if (cell.slot === slot) {
+                    return cell;
+                }
+            }
+        }
+        return null;
+    }
+    getNormalizedData() {
+        if (!this.changeMarker.dirty) {
+            return this.normalizedData;
+        }
+        const nonIntersectingRectangles = this.getMergedRectangles();
+        this.normalizedData = applyRectangles(this.state.rows, nonIntersectingRectangles);
+        return this.normalizedData;
+    }
+    selectRow(startIndex, endIndex = startIndex + 1) {
+        if (startIndex > endIndex) {
+            [startIndex, endIndex] = [endIndex, startIndex];
+        }
+        if (startIndex === endIndex) {
+            endIndex++;
+        }
+        const selectedSlots = [];
+        const rows = this.getNormalizedData();
+        rows.slice(startIndex, endIndex).forEach(row => {
+            selectedSlots.push(...row.cells.filter(i => i.visible).map(i => i.raw.slot));
+        });
+        this.ignoreSelectionChanges = true;
+        const slotRanges = selectedSlots.map(i => {
+            return {
+                slot: i,
+                startIndex: 0,
+                endIndex: i.length
+            };
+        });
+        this.selection.setSelectedRanges(slotRanges);
+        this.tableSelection.set({
+            startColumn: 0,
+            endColumn: this.state.columnsConfig.length,
+            startRow: startIndex,
+            endRow: endIndex,
+        });
+        this.focus.next(true);
+        if (slotRanges.length) {
+            setTimeout(() => {
+                this.selection.restore();
+                this.textbus.focus();
+            });
+        }
+    }
+    selectColumn(startIndex, endIndex = startIndex + 1) {
+        if (startIndex > endIndex) {
+            [startIndex, endIndex] = [endIndex, startIndex];
+        }
+        if (startIndex === endIndex) {
+            endIndex++;
+        }
+        const selectedSlots = [];
+        const rows = this.getNormalizedData();
+        rows.forEach(row => {
+            selectedSlots.push(...row.cells.slice(startIndex, endIndex).filter(i => i.visible).map(i => i.raw.slot));
+        });
+        this.ignoreSelectionChanges = true;
+        const slotRanges = selectedSlots.map(i => {
+            return {
+                slot: i,
+                startIndex: 0,
+                endIndex: i.length
+            };
+        });
+        this.selection.setSelectedRanges(slotRanges);
+        this.tableSelection.set({
+            startColumn: startIndex,
+            endColumn: endIndex,
+            startRow: 0,
+            endRow: this.state.rows.length,
+        });
+        this.focus.next(true);
+        this.selection.restore();
+        this.textbus.focus();
+        // if (slotRanges.length) {
+        //   setTimeout(() => {
+        //     this.selection.restore()
+        //     this.textbus.focus()
+        //   })
+        // }
+    }
+    getMergedRectangles() {
+        const rectangles = [];
+        Object.entries(this.state.mergeConfig).forEach(([key, value]) => {
+            const p1 = this.getCoordinateById(key);
+            if (p1) {
+                const p2 = this.getCoordinateById(value);
+                if (p2) {
+                    rectangles.push(new Rectangle(p1[0], p1[1], p2[0] + 1, p2[1] + 1));
+                }
+            }
+        });
+        return findNonIntersectingRectangles(rectangles);
+    }
+    getCoordinateById(id) {
+        const rows = this.state.rows;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            const colIndex = row.cells.findIndex(i => i.id === id);
+            if (colIndex > -1) {
+                return [colIndex, i];
+            }
+        }
+        return null;
     }
     setup() {
         const selection = core$1.useContext(core$1.Selection);
@@ -1854,6 +2162,9 @@ class TableComponent extends core$1.Component {
             return slot.parent === this;
         });
         const sub = selection.onChange.subscribe(() => {
+            if (this.ignoreSelectionChanges) {
+                return;
+            }
             if (selection.commonAncestorComponent !== this || selection.isCollapsed) {
                 this.tableSelection.set(null);
             }
@@ -1861,115 +2172,109 @@ class TableComponent extends core$1.Component {
         core$1.onDestroy(() => {
             sub.unsubscribe();
         });
-        const findPosition = (slot) => {
-            let cell = slot;
-            while ((cell === null || cell === void 0 ? void 0 : cell.parent) && cell.parent !== this) {
-                cell = cell.parentSlot;
+        core$1.onGetRanges(ev => {
+            if (this.selection.isCollapsed || this.ignoreSelectionChanges) {
+                return;
             }
-            if (cell) {
-                const rows = this.state.rows;
-                for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-                    const row = rows[rowIndex].cells;
-                    for (let colIndex = 0; colIndex < row.length; colIndex++) {
-                        const item = row[colIndex].slot;
-                        if (item === cell) {
-                            return {
-                                rowIndex,
-                                colIndex
-                            };
-                        }
-                    }
+            const rect = this.getSelectedRect();
+            if (rect) {
+                this.tableSelection.set({
+                    startColumn: rect.x1,
+                    endColumn: rect.x2,
+                    startRow: rect.y1,
+                    endRow: rect.y2
+                });
+                const selectedSlots = this.getSelectedNormalizedSlotsByRectangle(rect);
+                const slotRanges = selectedSlots.map(item => {
+                    return item.cells.filter(i => {
+                        return i.visible;
+                    }).map(i => {
+                        return {
+                            startIndex: 0,
+                            endIndex: i.raw.slot.length,
+                            slot: i.raw.slot
+                        };
+                    });
+                }).flat();
+                if (slotRanges.length > 1) {
+                    ev.useRanges(slotRanges);
                 }
             }
-            return null;
-        };
-        const select = (ev, selectPosition) => {
-            this.tableSelection.set(selectPosition);
-            if (selectPosition) {
-                const cells = [];
-                this.state.rows.slice(selectPosition.startRow, selectPosition.endRow).forEach(row => {
-                    cells.push(...row.cells.slice(selectPosition.startColumn, selectPosition.endColumn).map(i => i.slot));
-                });
-                ev.useRanges(cells.map(i => {
-                    return {
-                        slot: i,
-                        startIndex: 0,
-                        endIndex: i.length
-                    };
-                }));
-                ev.preventDefault();
+        });
+    }
+    deleteColumns() {
+        const selection = this.tableSelection();
+        if (selection) {
+            const { startColumn, endColumn } = selection;
+            if (startColumn === 0 && endColumn === this.state.columnsConfig.length) {
+                this.commander.removeComponent(this);
+                return;
             }
-        };
-        core$1.onGetRanges(ev => {
-            var _a;
-            const startPosition = findPosition(selection.startSlot);
-            const endPosition = findPosition(selection.endSlot);
-            if (startPosition && endPosition) {
-                if (startPosition.rowIndex === endPosition.rowIndex && startPosition.colIndex === endPosition.colIndex) {
-                    if (selection.startSlot === selection.endSlot && selection.startOffset === 0 && selection.endOffset === ((_a = selection.startSlot) === null || _a === void 0 ? void 0 : _a.length)) {
-                        select(ev, {
-                            startColumn: startPosition.colIndex,
-                            startRow: startPosition.rowIndex,
-                            endColumn: endPosition.colIndex + 1,
-                            endRow: endPosition.rowIndex + 1
+            this.state.columnsConfig.splice(startColumn, endColumn - startColumn);
+            const mergeConfig = this.state.mergeConfig;
+            const keys = Object.keys(mergeConfig);
+            this.state.rows.forEach(row => {
+                const before = row.cells.at(startColumn - 1);
+                const after = row.cells.at(endColumn);
+                const cells = row.cells.splice(startColumn, endColumn - startColumn);
+                cells.forEach(cell => {
+                    if (keys.includes(cell.id)) {
+                        if (after) {
+                            mergeConfig[after.id] = mergeConfig[cell.id];
+                        }
+                        Reflect.deleteProperty(mergeConfig, cell.id);
+                    }
+                    if (before) {
+                        keys.forEach(key => {
+                            if (mergeConfig[key] === cell.id) {
+                                mergeConfig[key] = before.id;
+                            }
                         });
-                        return;
                     }
-                    select(ev, null);
-                    return;
-                }
-                const [startColumn, endColumn] = [startPosition.colIndex, endPosition.colIndex].sort((a, b) => a - b);
-                const [startRow, endRow] = [startPosition.rowIndex, endPosition.rowIndex].sort((a, b) => a - b);
-                select(ev, {
-                    startColumn,
-                    startRow,
-                    endColumn: endColumn + 1,
-                    endRow: endRow + 1
                 });
-            }
-            else {
-                select(ev, null);
-            }
-        });
-    }
-    // afterContentCheck() {
-    //   const selection = this.selection
-    //   const rows = this.state.rows
-    //   rows.forEach(row => {
-    //     row.cells.forEach(cell => {
-    //       const slot = cell.slot
-    //       if (slot.isEmpty) {
-    //         const childSlot = new Slot([
-    //           ContentType.Text,
-    //           ContentType.InlineComponent
-    //         ])
-    //         const p = new ParagraphComponent(this.textbus, {
-    //           slot: childSlot
-    //         })
-    //         slot.insert(p)
-    //         if (slot === selection.anchorSlot) {
-    //           selection.setAnchor(childSlot, 0)
-    //         }
-    //         if (slot === selection.focusSlot) {
-    //           selection.setFocus(childSlot, 0)
-    //         }
-    //       }
-    //     })
-    //   })
-    // }
-    deleteColumn(index) {
-        this.state.layoutWidth.splice(index, 1);
-        this.state.rows.forEach(row => {
-            row.cells.splice(index, 1);
-        });
+            });
+        }
+        this.tableSelection.set(null);
         this.selection.unSelect();
     }
-    deleteRow(index) {
-        this.state.rows.splice(index, 1);
+    deleteRows() {
+        const selection = this.tableSelection();
+        if (selection) {
+            const { startRow, endRow } = selection;
+            if (startRow === 0 && endRow === this.state.rows.length) {
+                this.commander.removeComponent(this);
+                return;
+            }
+            const mergeConfig = this.state.mergeConfig;
+            const keys = Object.keys(mergeConfig);
+            const rows = this.state.rows;
+            const deletedRows = rows.splice(startRow, endRow - startRow);
+            deletedRows.forEach(row => {
+                row.cells.forEach((cell, colIndex) => {
+                    var _a, _b;
+                    const before = (_a = rows.at(startRow - 1)) === null || _a === void 0 ? void 0 : _a.cells.at(colIndex);
+                    const after = (_b = rows.at(startRow)) === null || _b === void 0 ? void 0 : _b.cells.at(colIndex);
+                    if (keys.includes(cell.id)) {
+                        if (after) {
+                            mergeConfig[after.id] = mergeConfig[cell.id];
+                        }
+                        Reflect.deleteProperty(mergeConfig, cell.id);
+                    }
+                    if (before) {
+                        keys.forEach(key => {
+                            if (mergeConfig[key] === cell.id) {
+                                mergeConfig[key] = before.id;
+                            }
+                        });
+                    }
+                });
+            });
+        }
+        this.tableSelection.set(null);
         this.selection.unSelect();
     }
     insertColumn(index) {
-        this.state.layoutWidth.splice(index, 0, defaultColumnWidth);
+        this.state.columnsConfig.splice(index, 0, defaultColumnWidth);
         this.state.rows.forEach(row => {
             const slot = new core$1.Slot([
                 core$1.ContentType.BlockComponent,
@@ -1981,14 +2286,12 @@ class TableComponent extends core$1.Component {
                 ])
             }));
             row.cells.splice(index, 0, {
-                rowspan: 1,
-                colspan: 1,
+                id: uuid.v4(),
                 slot
             });
         });
         this.textbus.nextTick(() => {
-            var _a;
-            const slot = (_a = this.state.rows[0].cells[index]) === null || _a === void 0 ? void 0 : _a.slot;
+            const slot = this.state.rows[0].cells[index].slot;
             if (slot) {
                 this.selection.selectFirstPosition(slot.getContentAtIndex(0));
             }
@@ -1997,7 +2300,7 @@ class TableComponent extends core$1.Component {
     insertRow(index) {
         this.state.rows.splice(index, 0, {
             height: defaultRowHeight,
-            cells: this.state.layoutWidth.map(() => {
+            cells: this.state.columnsConfig.map(() => {
                 const slot = new core$1.Slot([
                     core$1.ContentType.BlockComponent,
                 ]);
@@ -2008,15 +2311,13 @@ class TableComponent extends core$1.Component {
                     ])
                 }));
                 return {
-                    rowspan: 1,
-                    colspan: 1,
+                    id: uuid.v4(),
                     slot
                 };
             })
         });
         this.textbus.nextTick(() => {
-            var _a;
-            const slot = (_a = this.state.rows[index].cells[0]) === null || _a === void 0 ? void 0 : _a.slot;
+            const slot = this.state.rows[index].cells[0].slot;
             if (slot) {
                 this.selection.selectFirstPosition(slot.getContentAtIndex(0));
             }
@@ -2051,7 +2352,7 @@ function registerStrikeThroughShortcut(textbus) {
     const keyboard = textbus.get(core$1.Keyboard);
     keyboard.addShortcut({
         keymap: {
-            ctrlKey: true,
+            modKey: true,
             key: 'd'
         },
         action: () => {
@@ -2235,7 +2536,7 @@ function registerListShortcut(textbus) {
     keyboard.addShortcut({
         keymap: {
             key: ['o', 'u'],
-            ctrlKey: true,
+            modKey: true,
             shiftKey: true
         },
         action(key) {
@@ -2767,43 +3068,43 @@ function BlockTool() {
         return (jsxRuntime.jsx(Dropdown, { width: 'auto', onCheck: transform, trigger: 'hover', menu: [
                 {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-pilcrow" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
-                                ctrlKey: true,
+                                modKey: true,
                                 key: '0'
                             } }), checked: states.paragraph, children: "\u6B63\u6587" }),
                     value: 'paragraph'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h1" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
-                                ctrlKey: true,
+                                modKey: true,
                                 key: '1'
                             } }), checked: states.h1, children: "\u4E00\u7EA7\u6807\u9898" }),
                     value: 'h1'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h2" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
-                                ctrlKey: true,
+                                modKey: true,
                                 key: '2'
                             } }), checked: states.h2, children: "\u4E8C\u7EA7\u6807\u9898" }),
                     value: 'h2'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h3" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
-                                ctrlKey: true,
+                                modKey: true,
                                 key: '3'
                             } }), checked: states.h3, children: "\u4E09\u7EA7\u6807\u9898" }),
                     value: 'h3'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h4" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
-                                ctrlKey: true,
+                                modKey: true,
                                 key: '4'
                             } }), checked: states.h4, children: "\u56DB\u7EA7\u6807\u9898" }),
                     value: 'h4'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h5" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
-                                ctrlKey: true,
+                                modKey: true,
                                 key: '5'
                             } }), checked: states.h5, children: "\u4E94\u7EA7\u6807\u9898" }),
                     value: 'h5'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-heading-h6" }), desc: jsxRuntime.jsx(Keymap, { keymap: {
-                                ctrlKey: true,
+                                modKey: true,
                                 key: '6'
                             } }), checked: states.h6, children: "\u516D\u7EA7\u6807\u9898" }),
                     value: 'h6'
@@ -2814,13 +3115,13 @@ function BlockTool() {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-checkbox-checked" }), checked: states.todolist, children: "\u5F85\u529E\u4E8B\u9879" }),
                     value: 'todolist'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'O', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'O', shiftKey: true, modKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list-numbered" }), checked: states.orderedList, children: "\u6709\u5E8F\u5217\u8868" }),
                     value: 'ol'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'U', shiftKey: true, ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: 'U', shiftKey: true, modKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-list" }), checked: states.unorderedList, children: "\u65E0\u5E8F\u5217\u8868" }),
                     value: 'ul'
                 }, {
-                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: '\'', ctrlKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
+                    label: jsxRuntime.jsx(MenuItem, { desc: jsxRuntime.jsx(Keymap, { keymap: { key: '\'', modKey: true } }), icon: jsxRuntime.jsx("span", { class: "xnote-icon-quotes-right" }), checked: states.blockquote, children: "\u5F15\u7528" }),
                     value: 'blockquote'
                 }, {
                     label: jsxRuntime.jsx(MenuItem, { icon: jsxRuntime.jsx("span", { class: "xnote-icon-source-code" }), checked: states.sourceCode, children: "\u4EE3\u7801\u5757" }),
@@ -2880,7 +3181,7 @@ function registerBoldShortcut(textbus) {
     const keyboard = textbus.get(core$1.Keyboard);
     keyboard.addShortcut({
         keymap: {
-            ctrlKey: true,
+            modKey: true,
             key: 'b'
         },
         action: () => {
@@ -2927,7 +3228,7 @@ function registerCodeShortcut(textbus) {
     const keyboard = textbus.get(core$1.Keyboard);
     keyboard.addShortcut({
         keymap: {
-            ctrlKey: true,
+            modKey: true,
             key: ','
         },
         action: () => {
@@ -3037,7 +3338,7 @@ function registerItalicShortcut(textbus) {
     const keyboard = textbus.get(core$1.Keyboard);
     keyboard.addShortcut({
         keymap: {
-            ctrlKey: true,
+            modKey: true,
             key: 'i'
         },
         action: () => {
@@ -3120,7 +3421,7 @@ function registerUnderlineShortcut(textbus) {
     const keyboard = textbus.get(core$1.Keyboard);
     keyboard.addShortcut({
         keymap: {
-            ctrlKey: true,
+            modKey: true,
             key: 'u'
         },
         action: () => {
@@ -3596,6 +3897,171 @@ function UnderlineTool() {
     };
 }
 
+const cellAlignAttr = new core$1.Attribute('cellAlign', {
+    render(node, formatValue) {
+        node.styles.set('verticalAlign', formatValue);
+    }
+});
+const cellAlignAttrLoader = {
+    match(element) {
+        return element instanceof HTMLTableCellElement && !!element.style.verticalAlign;
+    },
+    read(element) {
+        return {
+            attribute: cellAlignAttr,
+            value: element.style.verticalAlign
+        };
+    }
+};
+
+function CellAlignTool() {
+    const currentValue = core.createSignal('');
+    const selection = core.inject(core$1.Selection);
+    function check(v) {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            const slots = commonAncestorComponent.getSelectedNormalizedSlots();
+            slots.forEach(item => {
+                item.cells.forEach(cell => {
+                    if (cell.visible) {
+                        cell.raw.slot.setAttribute(cellAlignAttr, v);
+                    }
+                });
+            });
+        }
+    }
+    const refreshService = core.inject(exports.RefreshService);
+    const query = core.inject(core$1.Query);
+    const highlight = core.createSignal(false);
+    const subscription = refreshService.onRefresh.subscribe(() => {
+        const result = query.queryAttribute(cellAlignAttr);
+        const isHighlight = result.state === core$1.QueryStateType.Enabled;
+        highlight.set(isHighlight);
+        currentValue.set(isHighlight ? result.value : 'middle');
+    });
+    core.onUnmounted(() => {
+        subscription.unsubscribe();
+    });
+    return () => {
+        return (jsxRuntime.jsx(Dropdown, { onCheck: check, menu: [
+                {
+                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'top', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-top" }), children: "\u9876\u90E8\u5BF9\u9F50" }),
+                    value: 'top'
+                },
+                {
+                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'middle', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-middle" }), children: "\u5782\u76F4\u5C45\u4E2D" }),
+                    value: 'middle'
+                },
+                {
+                    label: jsxRuntime.jsx(MenuItem, { checked: currentValue() === 'bottom', icon: jsxRuntime.jsx("span", { class: "xnote-icon-align-bottom" }), children: "\u5E95\u90E8\u5BF9\u9F50" }),
+                    value: 'bottom'
+                }
+            ], children: jsxRuntime.jsx(Button, { arrow: true, highlight: highlight(), children: jsxRuntime.jsx("span", { class: 'xnote-icon-align-' + (currentValue() || 'middle') }) }) }));
+    };
+}
+
+function CellBackgroundTool() {
+    const refreshService = core.inject(exports.RefreshService);
+    const selection = core.inject(core$1.Selection);
+    const [viewModel, update] = hooks.useProduce({
+        highlight: false,
+        disabled: false,
+    });
+    function split() {
+        // const commonAncestorComponent = selection.commonAncestorComponent
+        // if (commonAncestorComponent instanceof TableComponent) {
+        //   const scopes = selection.getSelectedScopes()
+        //   if (scopes.length) {
+        //     const start = commonAncestorComponent.getCellBySlot(scopes.at(0)!.slot)
+        //     const end = commonAncestorComponent.getCellBySlot(scopes.at(-1)!.slot)
+        //     // Re
+        //   }
+        // }
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        update(draft => {
+            draft.disabled = !(commonAncestorComponent instanceof TableComponent);
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-palette" }) });
+    };
+}
+
+function MergeCellsTool() {
+    const refreshService = core.inject(exports.RefreshService);
+    const selection = core.inject(core$1.Selection);
+    const [viewModel, update] = hooks.useProduce({
+        highlight: false,
+        disabled: false,
+    });
+    function merge() {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            commonAncestorComponent.mergeCellBySelection();
+        }
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        update(draft => {
+            draft.disabled = !(commonAncestorComponent instanceof TableComponent);
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: merge, children: jsxRuntime.jsx("span", { class: "xnote-icon-merge-cells" }) });
+    };
+}
+
+function SplitCellsTool() {
+    const refreshService = core.inject(exports.RefreshService);
+    const selection = core.inject(core$1.Selection);
+    const [viewModel, update] = hooks.useProduce({
+        highlight: false,
+        disabled: false,
+    });
+    function split() {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            commonAncestorComponent.splitCellsBySelection();
+        }
+    }
+    const sub = refreshService.onRefresh.subscribe(() => {
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        update(draft => {
+            if (commonAncestorComponent instanceof TableComponent) {
+                const slots = commonAncestorComponent.getSelectedNormalizedSlots();
+                if (slots) {
+                    for (const item of slots) {
+                        for (const cell of item.cells) {
+                            if (cell.visible && cell.colspan > 1 || cell.colspan > 1) {
+                                draft.disabled = false;
+                                return;
+                            }
+                        }
+                    }
+                }
+            }
+            draft.disabled = true;
+        });
+    });
+    core.onUnmounted(() => {
+        sub.unsubscribe();
+    });
+    return () => {
+        const vm = viewModel();
+        return jsxRuntime.jsx(Button, { highlight: vm.highlight, disabled: vm.disabled, onClick: split, children: jsxRuntime.jsx("span", { class: "xnote-icon-split-cells" }) });
+    };
+}
+
 var scopedId$9 = "vf-cf8e1c";
 
 class FileUploader {
@@ -4378,6 +4844,10 @@ function LinkJump() {
 
 var scopedId$6 = "vf-fee98b";
 
+function sum(numbers) {
+    return numbers.reduce((a, b) => a + b, 0);
+}
+
 const Toolbar = core.withAnnotation({
     providers: [exports.RefreshService]
 }, function Toolbar() {
@@ -4408,10 +4878,35 @@ const Toolbar = core.withAnnotation({
         const docRect = viewDocument.getBoundingClientRect();
         const toolbarHeight = 36;
         // const documentHeight = document.documentElement.clientHeight
-        const selectionFocusRect = bridge.getRect({
-            slot: selection.focusSlot,
-            offset: selection.focusOffset
-        });
+        let selectionFocusRect = null;
+        const commonAncestorComponent = selection.commonAncestorComponent;
+        if (commonAncestorComponent instanceof TableComponent) {
+            const slots = commonAncestorComponent.getSelectedNormalizedSlots().map(item => {
+                return item.cells.filter(i => {
+                    return i.visible;
+                }).map(cell => {
+                    return cell.raw.slot;
+                });
+            }).flat();
+            const startSlot = slots.at(0);
+            const endSlot = slots.at(-1);
+            const rect = commonAncestorComponent.getSelectedRect();
+            const startRect = adapter.getNativeNodeBySlot(startSlot).getBoundingClientRect();
+            const endEle = adapter.getNativeNodeBySlot(endSlot).getBoundingClientRect();
+            const width = sum(commonAncestorComponent.state.columnsConfig.slice(rect.x1, rect.x2));
+            selectionFocusRect = {
+                left: startRect.left + width / 2,
+                top: startRect.top,
+                height: endEle.bottom - startRect.top,
+                width
+            };
+        }
+        else {
+            selectionFocusRect = bridge.getRect({
+                slot: selection.focusSlot,
+                offset: selection.focusOffset
+            });
+        }
         if (!selectionFocusRect) {
             return null;
         }
@@ -4442,7 +4937,13 @@ const Toolbar = core.withAnnotation({
     });
     function bindMouseup() {
         const docElement = adapter.getNativeNodeByComponent(rootComponentRef.component);
-        mouseupSubscription = core$1.fromEvent(docElement, 'mouseup').pipe(core$1.filter(ev => {
+        mouseupSubscription = core$1.fromEvent(docElement, 'mouseup').pipe(core$1.delay(), core$1.filter(ev => {
+            const c = selection.commonAncestorComponent;
+            if (c instanceof TableComponent) {
+                const b = !c.ignoreSelectionChanges;
+                c.ignoreSelectionChanges = false;
+                return b;
+            }
             return !ev.composedPath().includes(toolbarRef.current);
         }), core$1.delay(100), core$1.filter(() => {
             return !selection.isCollapsed && !(selection.commonAncestorComponent instanceof SourceCodeComponent);
@@ -4486,7 +4987,7 @@ const Toolbar = core.withAnnotation({
                 opacity: p.opacity,
                 display: editorService.hideInlineToolbar ? 'none' : '',
                 transitionDuration: p.transitionDuration + 's'
-            }, children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
+            }, children: [selection.commonAncestorComponent instanceof TableComponent && jsxRuntime.jsxs(core.Fragment, { children: [jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(MergeCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(SplitCellsTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CellAlignTool, {}) })] }, "table"), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BlockTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(AttrTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(BoldTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ItalicTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(StrikeThroughTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(UnderlineTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontSizeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(FontFamilyTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(LinkTool, { hideToolbar: hideToolbar }) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(CodeTool, {}) }), jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(ColorTool, {}) })] }));
     });
 });
 
@@ -4917,8 +5418,8 @@ let TableService = class TableService {
     constructor() {
         this.onInsertRowBefore = new core$1.Subject();
         this.onInsertColumnBefore = new core$1.Subject();
-        this.onSelectColumns = new core$1.Subject();
-        this.onSelectRows = new core$1.Subject();
+        // onSelectColumns = new Subject<{ start: number, end: number } | null>()
+        // onSelectRows = new Subject<{ start: number, end: number } | null>()
         this.onScroll = new core$1.Subject();
     }
 };
@@ -4938,7 +5439,11 @@ function ResizeColumn(props) {
             ignoreMove = true;
         }).add(core$1.fromEvent(document, 'mouseup').subscribe(() => {
             ignoreMove = false;
-        })).add(core$1.fromEvent(tableRef.current.parentNode, 'mousemove').subscribe(ev => {
+        })).add(core$1.fromEvent(tableRef.current.parentNode, 'mouseleave').subscribe(() => {
+            if (!isDrag) {
+                dragLineRef.current.style.display = 'none';
+            }
+        }), core$1.fromEvent(tableRef.current.parentNode, 'mousemove').subscribe(ev => {
             if (isDrag || ignoreMove) {
                 return;
             }
@@ -4946,7 +5451,7 @@ function ResizeColumn(props) {
             const leftDistance = ev.clientX - tableRect.x;
             const state = props.component.state;
             let x = 0;
-            for (let i = 0; i < state.layoutWidth.length + 1; i++) {
+            for (let i = 0; i < state.columnsConfig.length + 1; i++) {
                 const n = leftDistance - x;
                 if (i > 0 && Math.abs(n) < 5) {
                     Object.assign(dragLineRef.current.style, {
@@ -4958,14 +5463,14 @@ function ResizeColumn(props) {
                 }
                 activeCol = null;
                 dragLineRef.current.style.display = 'none';
-                x += state.layoutWidth[i];
+                x += state.columnsConfig[i] || 0;
             }
         })).add(core$1.fromEvent(dragLineRef.current, 'mousedown').subscribe(downEvent => {
             isDrag = true;
             editorService.changeLeftToolbarVisible(false);
             props.onActiveStateChange(true);
             const x = downEvent.clientX;
-            const layoutWidth = props.component.state.layoutWidth;
+            const layoutWidth = props.component.state.columnsConfig;
             const initWidth = layoutWidth[activeCol - 1];
             const initLeft = layoutWidth.slice(0, activeCol).reduce((a, b) => a + b, 0);
             const minWidth = 30;
@@ -4982,8 +5487,8 @@ function ResizeColumn(props) {
                 props.onActiveStateChange(false);
                 moveEvent.unsubscribe();
                 const distanceX = upEvent.clientX - x;
-                props.component.state.layoutWidth[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
-                props.layoutWidth.set(props.component.state.layoutWidth);
+                props.component.state.columnsConfig[activeCol - 1] = Math.max(initWidth + distanceX, minWidth);
+                props.layoutWidth.set(props.component.state.columnsConfig.slice());
             }));
         }));
         return () => {
@@ -4998,7 +5503,7 @@ function ResizeColumn(props) {
                 return;
             }
             const state = props.component.state;
-            const left = state.layoutWidth.slice(0, n).reduce((a, b) => a + b, 0) - 0.5;
+            const left = state.columnsConfig.slice(0, n).reduce((a, b) => a + b, 0) - 0.5;
             dragLineRef.current.style.display = 'block';
             dragLineRef.current.style.left = left + 'px';
         });
@@ -5013,9 +5518,7 @@ var scopedId$4 = "vf-39cb2c";
 
 function TopBar(props) {
     const editorService = core.inject(exports.EditorService);
-    const selection = core.inject(core$1.Selection);
     const tableService = core.inject(TableService);
-    const textbus = core.inject(core$1.Textbus);
     const selectedColumnRange = core.createSignal(null);
     function selectColumn(index, isMultiple) {
         editorService.hideInlineToolbar = true;
@@ -5031,24 +5534,11 @@ function TopBar(props) {
                 startIndex: index, endIndex: index
             });
         }
-        const range = selectedColumnRange();
-        const [startIndex, endIndex] = [range.startIndex, range.endIndex].sort((a, b) => a - b);
-        const selectedSlots = [];
-        const rows = props.component.state.rows;
-        rows.forEach(row => {
-            selectedSlots.push(...row.cells.slice(startIndex, endIndex + 1).map(i => i.slot));
-        });
-        textbus.nextTick(() => {
-            selection.setSelectedRanges(selectedSlots.map(i => {
-                return {
-                    slot: i,
-                    startIndex: 0,
-                    endIndex: i.length
-                };
-            }));
-            selection.restore();
-            textbus.focus();
-        });
+        let { startIndex, endIndex } = selectedColumnRange();
+        if (startIndex > endIndex) {
+            [startIndex, endIndex] = [endIndex, startIndex];
+        }
+        props.component.selectColumn(startIndex, endIndex + 1);
     }
     let mouseDownFromToolbar = false;
     core.onMounted(() => {
@@ -5057,7 +5547,6 @@ function TopBar(props) {
                 mouseDownFromToolbar = false;
                 return;
             }
-            deleteIndex.set(null);
             selectedColumnRange.set(null);
         });
         return () => sub.unsubscribe();
@@ -5076,49 +5565,53 @@ function TopBar(props) {
     core.onUnmounted(() => {
         s.unsubscribe();
     });
-    const deleteIndex = core.createSignal(null);
+    function refreshLayoutWidth() {
+        props.layoutWidth.set(props.component.state.columnsConfig.slice());
+    }
     return scopedCss.withScopedCSS(scopedId$4, () => {
         const { state, tableSelection } = props.component;
         const position = tableSelection();
+        const range = selectedColumnRange();
+        let left = 0;
+        if (range) {
+            left = sum(props.component.state.columnsConfig.slice(0, Math.min(range.startIndex, range.endIndex)));
+            left += sum(props.component.state.columnsConfig.slice(Math.min(range.startIndex, range.endIndex), Math.max(range.startIndex, range.endIndex) + 1)) / 2;
+        }
         return (jsxRuntime.jsx("div", { class: ['top-bar', {
                     active: props.isFocus()
-                }], children: jsxRuntime.jsxs("div", { class: "toolbar-wrapper", children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { style: {
+                }], children: jsxRuntime.jsxs("div", { class: "toolbar-wrapper", children: [jsxRuntime.jsxs("div", { class: "insert-bar", children: [jsxRuntime.jsx(ComponentToolbar, { style: {
+                                    left: left - leftDistance() + 'px',
+                                    display: selectedColumnRange() ? 'inline-block' : 'none',
+                                }, innerStyle: {
+                                    transform: 'translateX(-50%)'
+                                }, visible: !!selectedColumnRange(), children: jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Button, { onClick: () => {
+                                            props.component.deleteColumns();
+                                            refreshLayoutWidth();
+                                        }, children: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }) }) }) }), jsxRuntime.jsx("table", { style: {
+                                    transform: `translateX(${-leftDistance()}px)`
+                                }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
+                                            return (jsxRuntime.jsx("td", { style: { width: i + 'px', minWidth: i + 'px' }, children: jsxRuntime.jsxs("div", { class: "tool-container", children: [index === 0 && (jsxRuntime.jsx("span", { onMouseenter: () => {
+                                                                tableService.onInsertColumnBefore.next(0);
+                                                            }, onMouseleave: () => {
+                                                                tableService.onInsertColumnBefore.next(null);
+                                                            }, class: "insert-btn-wrap", style: {
+                                                                left: '-10px'
+                                                            }, onClick: () => {
+                                                                props.component.insertColumn(0);
+                                                                refreshLayoutWidth();
+                                                            }, children: jsxRuntime.jsx("button", { class: "insert-btn", type: "button", children: "+" }) })), jsxRuntime.jsx("span", { class: "insert-btn-wrap", onMouseenter: () => {
+                                                                tableService.onInsertColumnBefore.next(index + 1);
+                                                            }, onMouseleave: () => {
+                                                                tableService.onInsertColumnBefore.next(null);
+                                                            }, onClick: () => {
+                                                                props.component.insertColumn(index + 1);
+                                                                refreshLayoutWidth();
+                                                            }, children: jsxRuntime.jsx("button", { class: "insert-btn", type: "button", children: "+" }) })] }) }));
+                                        }) }) }) })] }), jsxRuntime.jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsxRuntime.jsx("table", { style: {
                                 transform: `translateX(${-leftDistance()}px)`
                             }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
-                                        return (jsxRuntime.jsx("td", { style: { width: i + 'px', minWidth: i + 'px' }, children: jsxRuntime.jsxs("div", { class: "tool-container", children: [index === 0 && (jsxRuntime.jsx("span", { onMouseenter: () => {
-                                                            tableService.onInsertColumnBefore.next(0);
-                                                        }, onMouseleave: () => {
-                                                            tableService.onInsertColumnBefore.next(null);
-                                                        }, class: "insert-btn-wrap", style: {
-                                                            left: '-10px'
-                                                        }, onClick: () => {
-                                                            props.component.insertColumn(0);
-                                                        }, children: jsxRuntime.jsx("button", { class: "insert-btn", type: "button", children: "+" }) })), jsxRuntime.jsx("span", { class: "insert-btn-wrap", onMouseenter: () => {
-                                                            tableService.onInsertColumnBefore.next(index + 1);
-                                                        }, onMouseleave: () => {
-                                                            tableService.onInsertColumnBefore.next(null);
-                                                        }, onClick: () => {
-                                                            props.component.insertColumn(index + 1);
-                                                        }, children: jsxRuntime.jsx("button", { class: "insert-btn", type: "button", children: "+" }) }), jsxRuntime.jsx(ComponentToolbar, { style: {
-                                                            display: deleteIndex() === index ? 'inline-block' : 'none',
-                                                            left: '50%',
-                                                        }, innerStyle: {
-                                                            transform: 'translateX(-50%)'
-                                                        }, visible: deleteIndex() === index, children: jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Button, { onClick: () => {
-                                                                    props.component.deleteColumn(index);
-                                                                    deleteIndex.set(null);
-                                                                }, children: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }) }) }) })] }) }));
-                                    }) }) }) }) }), jsxRuntime.jsx("div", { class: ['action-bar', { active: props.isFocus() }], children: jsxRuntime.jsx("table", { style: {
-                                transform: `translateX(${-leftDistance()}px)`
-                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: props.layoutWidth().map((i, index) => {
-                                        return jsxRuntime.jsx("td", { onClick: ev => {
+                                        return jsxRuntime.jsx("td", { onMousedown: ev => ev.preventDefault(), onClick: ev => {
                                                 mouseDownFromToolbar = true;
-                                                if (!ev.shiftKey) {
-                                                    deleteIndex.set(index);
-                                                }
-                                                else {
-                                                    deleteIndex.set(null);
-                                                }
                                                 selectColumn(index, ev.shiftKey);
                                             }, class: {
                                                 active: !position ? false :
@@ -5180,10 +5673,8 @@ var scopedId$2 = "vf-aaece0";
 
 function LeftBar(props) {
     const editorService = core.inject(exports.EditorService);
-    const selection = core.inject(core$1.Selection);
     const actionBarRef = core.createRef();
     const insertBarRef = core.createRef();
-    const textbus = core.inject(core$1.Textbus);
     const tableService = core.inject(TableService);
     // 同步行高度
     core.onUpdated(() => {
@@ -5191,8 +5682,10 @@ function LeftBar(props) {
         const actionBarRows = actionBarRef.current.rows;
         setTimeout(() => {
             Array.from(props.tableRef.current.rows).forEach((tr, i) => {
-                insertBarRows.item(i).style.height = tr.getBoundingClientRect().height + 'px';
-                actionBarRows.item(i).style.height = tr.getBoundingClientRect().height + 'px';
+                const height = tr.offsetHeight ||
+                    Math.min(...Array.from(tr.children).map(i => i.offsetHeight)) || 0;
+                insertBarRows.item(i).style.height = height + 'px';
+                actionBarRows.item(i).style.height = height + 'px';
             });
         });
     });
@@ -5231,30 +5724,27 @@ function LeftBar(props) {
                 startIndex: index, endIndex: index
             });
         }
-        const range = selectedRowRange();
-        const [startIndex, endIndex] = [range.startIndex, range.endIndex].sort((a, b) => a - b);
-        const selectedSlots = [];
-        const rows = props.component.state.rows;
-        rows.slice(startIndex, endIndex + 1).forEach(row => {
-            selectedSlots.push(...row.cells.map(i => i.slot));
-        });
-        textbus.nextTick(() => {
-            selection.setSelectedRanges(selectedSlots.map(i => {
-                return {
-                    slot: i,
-                    startIndex: 0,
-                    endIndex: i.length
-                };
-            }));
-            selection.restore();
-            textbus.focus();
-        });
+        let { startIndex, endIndex } = selectedRowRange();
+        if (startIndex > endIndex) {
+            [startIndex, endIndex] = [endIndex, startIndex];
+        }
+        deleteIndex.set(startIndex);
+        props.component.selectRow(startIndex, endIndex + 1);
     }
     return scopedCss.withScopedCSS(scopedId$2, () => {
-        const { state, tableSelection } = props.component;
-        const position = tableSelection();
-        return (jsxRuntime.jsxs("div", { class: ['left-bar', { active: props.isFocus() }], children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { ref: insertBarRef, children: jsxRuntime.jsx("tbody", { children: state.rows.map((_, index) => {
-                                return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: jsxRuntime.jsxs("div", { class: "toolbar-item", children: [index === 0 && (jsxRuntime.jsx("span", { onMouseenter: () => {
+        const position = props.component.tableSelection();
+        const normalizedData = props.component.getNormalizedData();
+        return (jsxRuntime.jsxs("div", { class: ['left-bar', { active: props.isFocus() }], children: [jsxRuntime.jsx("div", { class: "insert-bar", children: jsxRuntime.jsx("table", { ref: insertBarRef, children: jsxRuntime.jsx("tbody", { children: normalizedData.map((row, index) => {
+                                let b = false;
+                                for (const item of row.cells) {
+                                    if (item.visible) {
+                                        b = true;
+                                        break;
+                                    }
+                                }
+                                return (jsxRuntime.jsx("tr", { style: {
+                                        display: b ? '' : 'none'
+                                    }, children: jsxRuntime.jsx("td", { children: jsxRuntime.jsxs("div", { class: "toolbar-item", children: [index === 0 && (jsxRuntime.jsx("span", { onMouseenter: () => {
                                                         tableService.onInsertRowBefore.next(-1);
                                                     }, onMouseleave: () => {
                                                         tableService.onInsertRowBefore.next(null);
@@ -5267,6 +5757,11 @@ function LeftBar(props) {
                                                     }, onMouseleave: () => {
                                                         tableService.onInsertRowBefore.next(null);
                                                     }, class: "insert-btn-wrap", onClick: () => {
+                                                        const cells = row.cells.filter(i => i.visible);
+                                                        if (cells.length < 2) {
+                                                            props.component.insertRow(index + row.cells.at(0).rowspan);
+                                                            return;
+                                                        }
                                                         props.component.insertRow(index + 1);
                                                     }, children: jsxRuntime.jsx("button", { class: "insert-btn", type: "button", children: "+" }) }), jsxRuntime.jsx(ComponentToolbar, { style: {
                                                         display: deleteIndex() === index ? 'inline-block' : 'none',
@@ -5275,23 +5770,26 @@ function LeftBar(props) {
                                                         top: 0,
                                                         transform: 'translateY(-50%)'
                                                     }, visible: deleteIndex() === index, children: jsxRuntime.jsx(ToolbarItem, { children: jsxRuntime.jsx(Button, { onClick: () => {
-                                                                props.component.deleteRow(index);
+                                                                props.component.deleteRows();
                                                                 deleteIndex.set(null);
                                                             }, children: jsxRuntime.jsx("span", { class: "xnote-icon-bin" }) }) }) })] }) }) }));
-                            }) }) }) }), jsxRuntime.jsx("div", { class: "action-bar", children: jsxRuntime.jsx("table", { ref: actionBarRef, children: jsxRuntime.jsx("tbody", { children: props.component.state.rows.map((_, index) => {
-                                return jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { onMousedown: (ev) => {
+                            }) }) }) }), jsxRuntime.jsx("div", { class: "action-bar", children: jsxRuntime.jsx("table", { ref: actionBarRef, children: jsxRuntime.jsx("tbody", { children: normalizedData.map((row, index) => {
+                                let b = false;
+                                for (const item of row.cells) {
+                                    if (item.visible) {
+                                        b = true;
+                                        break;
+                                    }
+                                }
+                                return jsxRuntime.jsx("tr", { style: {
+                                        display: b ? '' : 'none'
+                                    }, children: jsxRuntime.jsx("td", { onMousedown: ev => ev.preventDefault(), onClick: (ev) => {
                                             mouseDownFromToolbar = true;
-                                            if (!ev.shiftKey) {
-                                                deleteIndex.set(index);
-                                            }
-                                            else {
-                                                deleteIndex.set(null);
-                                            }
                                             selectRow(index, ev.shiftKey);
                                         }, class: {
                                             active: !position ? false :
                                                 (position.startColumn === 0 &&
-                                                    position.endColumn === state.layoutWidth.length &&
+                                                    position.endColumn === props.component.state.columnsConfig.length &&
                                                     index >= position.startRow && index < position.endRow)
                                         } }) });
                             }) }) }) })] }));
@@ -5300,10 +5798,6 @@ function LeftBar(props) {
 
 var scopedId$1 = "vf-d4c4a9";
 
-function sum(numbers) {
-    return numbers.reduce((a, b) => a + b, 0);
-}
-
 function ResizeRow(props) {
     const dragLineRef = core.createRef();
     const tableService = core.inject(TableService);
@@ -5335,7 +5829,7 @@ function ResizeRow(props) {
         return jsxRuntime.jsx("div", { ref: dragLineRef, style: {
                 display: styles().visible ? 'block' : 'none',
                 top: styles().top + 'px',
-                width: sum(props.component.state.layoutWidth) + 'px'
+                width: sum(props.component.state.columnsConfig) + 'px'
             }, class: 'drag-line' });
     });
 }
@@ -5369,16 +5863,19 @@ function SelectionMask(props) {
             if (selection.startRow > 0) {
                 heightCompensation = -1;
             }
-            if (selection.endRow === state.rows.length) {
+            if (selection.endRow + 1 === state.rows.length) {
                 heightCompensation += 0.5;
             }
             const trs = Array.from(props.tableRef.current.rows);
             updateStyles(draft => {
+                var _a;
+                const height = trs[selection.endRow - 1].offsetHeight ||
+                    ((_a = trs[selection.endRow - 1].children[0]) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
                 draft.visible = true;
-                draft.left = sum(state.layoutWidth.slice(0, selection.startColumn));
+                draft.left = sum(state.columnsConfig.slice(0, selection.startColumn));
                 draft.top = trs[selection.startRow].offsetTop + topCompensation;
-                draft.width = sum(state.layoutWidth.slice(selection.startColumn, selection.endColumn)) - 1 + 'px';
-                draft.height = trs[selection.endRow - 1].offsetTop + trs[selection.endRow - 1].offsetHeight + heightCompensation - draft.top + 'px';
+                draft.width = sum(state.columnsConfig.slice(selection.startColumn, selection.endColumn)) - 1 + 'px';
+                draft.height = trs[selection.endRow - 1].offsetTop + height + heightCompensation - draft.top + 'px';
             });
         }
         else {
@@ -5407,14 +5904,106 @@ function SelectionMask(props) {
     });
 }
 
-// import { SlotRender } from '../SlotRender'
+/**
+ * 修复不规范表格，并补全空位
+ * @param table
+ */
+function autoComplete(table) {
+    const newTable = [];
+    table.forEach((tr, rowIndex) => {
+        let row = newTable[rowIndex];
+        if (!row) {
+            row = [];
+            newTable[rowIndex] = row;
+        }
+        let startColumnIndex = 0;
+        tr.forEach(td => {
+            while (row[startColumnIndex]) {
+                startColumnIndex++;
+            }
+            let maxColspan = 1;
+            while (maxColspan < td.colspan) {
+                if (!row[startColumnIndex + maxColspan]) {
+                    maxColspan++;
+                }
+                else {
+                    break;
+                }
+            }
+            td.colspan = maxColspan;
+            for (let i = rowIndex, len = td.rowspan + rowIndex; i < len; i++) {
+                let row = newTable[i];
+                if (!row) {
+                    row = [];
+                    newTable[i] = row;
+                }
+                for (let j = startColumnIndex, max = startColumnIndex + maxColspan; j < max; j++) {
+                    row[j] = td;
+                }
+            }
+            startColumnIndex += maxColspan;
+        });
+    });
+    const maxColumns = Math.max(...newTable.map(i => i.length));
+    newTable.forEach(tr => {
+        for (let i = 0; i < maxColumns; i++) {
+            if (!tr[i]) {
+                tr[i] = {
+                    id: uuid.v4(),
+                    rowspan: 1,
+                    colspan: 1,
+                    slot: new core$1.Slot([
+                        core$1.ContentType.BlockComponent
+                    ])
+                };
+            }
+        }
+    });
+    const ids = [];
+    const mergedConfig = {};
+    const normalizedTable = newTable.map(tr => {
+        return tr.map(td => {
+            const is = ids.includes(td.id);
+            if (is) {
+                return {
+                    id: uuid.v4(),
+                    slot: new core$1.Slot([
+                        core$1.ContentType.BlockComponent,
+                    ])
+                };
+            }
+            ids.push(td.id);
+            return {
+                id: td.id,
+                slot: td.slot
+            };
+        });
+    });
+    ids.length = 0;
+    newTable.forEach((tr, rowIndex) => {
+        tr.forEach((td, colIndex) => {
+            if (td.rowspan > 1 || td.colspan > 1) {
+                if (ids.includes(td.id)) {
+                    return;
+                }
+                ids.push(td.id);
+                mergedConfig[td.id] = normalizedTable[rowIndex + td.rowspan - 1][colIndex + td.colspan - 1].id;
+            }
+        });
+    });
+    return {
+        mergedConfig,
+        table: normalizedTable
+    };
+}
+
 const TableComponentView = core.withAnnotation({
     providers: [TableService]
 }, function TableComponentView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
     const editorService = core.inject(exports.EditorService);
     const isFocus = core.createSignal(false);
-    const layoutWidth = core.createSignal(props.component.state.layoutWidth);
+    const layoutWidth = core.createSignal(props.component.state.columnsConfig);
     const subscription = props.component.focus.subscribe(b => {
         isFocus.set(b);
         if (!b) {
@@ -5424,53 +6013,63 @@ const TableComponentView = core.withAnnotation({
     core.onUnmounted(() => {
         subscription.unsubscribe();
     });
+    function resetIgnore() {
+        props.component.ignoreSelectionChanges = false;
+    }
     const tableRef = core.createRef();
     const isResizeColumn = core.createSignal(false);
     const rowMapping = new WeakMap();
     const readonly = useReadonly();
     const output = useOutput();
     return () => {
+        const normalizedData = props.component.getNormalizedData();
         const state = props.component.state;
-        const rows = state.rows;
-        rows.forEach(row => {
-            if (rowMapping.has(row)) {
+        // const rows = state.rows
+        normalizedData.forEach(row => {
+            if (rowMapping.has(row.row)) {
                 return;
             }
-            rowMapping.set(row, Math.random());
+            rowMapping.set(row.row, Math.random());
         });
         if (readonly() || output()) {
-            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": state.layoutWidth, children: jsxRuntime.jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
+            return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxRuntime.jsx("div", { class: "xnote-table-inner", ref: props.rootRef, children: jsxRuntime.jsx("div", { class: "xnote-table-container", children: jsxRuntime.jsxs("table", { class: [
                                 'xnote-table-content',
                                 {
                                     'hide-selection': props.component.tableSelection()
                                 }
-                            ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
+                            ], children: [jsxRuntime.jsx("colgroup", { children: state.columnsConfig.map(w => {
                                         return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                    }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
+                                    }) }), jsxRuntime.jsx("tbody", { children: normalizedData.map((row) => {
                                         return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
-                                                return adapter.slotRender(cell.slot, children => {
+                                                return adapter.slotRender(cell.raw.slot, children => {
                                                     return core$1.createVNode('td', {
-                                                        key: cell.slot.id
+                                                        key: cell.raw.id,
+                                                        rowspan: cell.rowspan,
+                                                        colspan: cell.colspan
                                                     }, children);
                                                 }, readonly() || output());
-                                            }) }, rowMapping.get(row)));
+                                            }) }, rowMapping.get(row.row)));
                                     }) })] }) }) }) }));
         }
-        return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.layoutWidth.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
+        return (jsxRuntime.jsx("div", { class: "xnote-table", "data-component": props.component.name, "data-layout-width": `[${state.columnsConfig.join(',')}]`, children: jsxRuntime.jsxs("div", { class: "xnote-table-inner", ref: props.rootRef, children: [jsxRuntime.jsx(TopBar, { isFocus: isFocus, layoutWidth: layoutWidth, component: props.component }), jsxRuntime.jsx(LeftBar, { tableRef: tableRef, isFocus: isFocus, component: props.component }), jsxRuntime.jsx(Scroll, { isFocus: isFocus, children: jsxRuntime.jsxs("div", { class: "xnote-table-container", children: [jsxRuntime.jsxs("table", { ref: tableRef, class: [
                                         'xnote-table-content',
                                         {
                                             'hide-selection': props.component.tableSelection()
                                         }
                                     ], children: [jsxRuntime.jsx("colgroup", { children: layoutWidth().map(w => {
                                                 return jsxRuntime.jsx("col", { style: { width: w + 'px', minWidth: w + 'px' } });
-                                            }) }), jsxRuntime.jsx("tbody", { children: rows.map((row) => {
-                                                return (jsxRuntime.jsx("tr", { children: row.cells.map(cell => {
-                                                        return adapter.slotRender(cell.slot, children => {
+                                            }) }), jsxRuntime.jsx("tbody", { onMousedown: resetIgnore, children: normalizedData.map((row) => {
+                                                return (jsxRuntime.jsx("tr", { children: row.cells.filter(i => {
+                                                        return i.visible;
+                                                    }).map(cell => {
+                                                        return adapter.slotRender(cell.raw.slot, children => {
                                                             return core$1.createVNode('td', {
-                                                                key: cell.slot.id
+                                                                key: cell.raw.id,
+                                                                rowspan: cell.rowspan,
+                                                                colspan: cell.colspan
                                                             }, children);
                                                         }, readonly() || output());
-                                                    }) }, rowMapping.get(row)));
+                                                    }) }, rowMapping.get(row.row)));
                                             }) })] }), jsxRuntime.jsx(ResizeColumn, { tableRef: tableRef, component: props.component, layoutWidth: layoutWidth, onActiveStateChange: isActive => {
                                         isResizeColumn.set(isActive);
                                     } }), jsxRuntime.jsx(SelectionMask, { tableRef: tableRef, component: props.component })] }) }), jsxRuntime.jsx(ResizeRow, { component: props.component, tableRef: tableRef })] }) }));
@@ -5497,6 +6096,7 @@ const tableComponentLoader = {
                         core$1.ContentType.BlockComponent,
                     ]);
                     arr.push({
+                        id: uuid.v4(),
                         slot,
                         rowspan: cell.rowSpan,
                         colspan: cell.colSpan
@@ -5524,6 +6124,7 @@ const tableComponentLoader = {
                         core$1.ContentType.BlockComponent,
                     ]);
                     arr.push({
+                        id: uuid.v4(),
                         slot,
                         rowspan: cell.rowSpan,
                         colspan: cell.colSpan
@@ -5542,7 +6143,7 @@ const tableComponentLoader = {
         }
         bodies.unshift(...headers);
         const cells = autoComplete(bodies);
-        let layoutWidth = null;
+        let layoutWidth = [];
         try {
             const columnWidth = JSON.parse(element.dataset.layoutWidth || '');
             if (Array.isArray(columnWidth)) {
@@ -5552,80 +6153,23 @@ const tableComponentLoader = {
         catch (e) {
             //
         }
-        if (!layoutWidth) {
-            layoutWidth = Array.from({ length: cells[0].length }).fill(100);
+        const length = cells.table[0].length;
+        for (let i = 0; i < length; i++) {
+            layoutWidth[i] = layoutWidth[i] || 100;
         }
+        layoutWidth.length = length;
         return new TableComponent(textbus, {
-            rows: cells.map(i => {
+            columnsConfig: layoutWidth,
+            mergeConfig: cells.mergedConfig,
+            rows: cells.table.map(i => {
                 return {
                     height: 30,
                     cells: i
                 };
-            }),
-            layoutWidth
+            })
         });
     }
 };
-function autoComplete(table) {
-    const newTable = [];
-    table.forEach((tr, rowIndex) => {
-        if (!newTable[rowIndex]) {
-            newTable[rowIndex] = [];
-        }
-        const row = newTable[rowIndex];
-        let startColumnIndex = 0;
-        tr.forEach(td => {
-            while (row[startColumnIndex]) {
-                startColumnIndex++;
-            }
-            let maxColspan = 1;
-            while (maxColspan < td.colspan) {
-                if (!row[startColumnIndex + maxColspan]) {
-                    maxColspan++;
-                }
-                else {
-                    break;
-                }
-            }
-            td.colspan = maxColspan;
-            for (let i = rowIndex, len = td.rowspan + rowIndex; i < len; i++) {
-                if (!newTable[i]) {
-                    newTable[i] = [];
-                }
-                const row = newTable[i];
-                for (let j = startColumnIndex, max = startColumnIndex + maxColspan; j < max; j++) {
-                    row[j] = td;
-                }
-            }
-            startColumnIndex += maxColspan;
-        });
-    });
-    const maxColumns = Math.max(...newTable.map(i => i.length));
-    newTable.forEach(tr => {
-        for (let i = 0; i < maxColumns; i++) {
-            if (!tr[i]) {
-                tr[i] = {
-                    rowspan: 1,
-                    colspan: 1,
-                    slot: new core$1.Slot([
-                        core$1.ContentType.BlockComponent
-                    ])
-                };
-            }
-        }
-    });
-    const recordCells = [];
-    return newTable.map(tr => {
-        return tr.filter(td => {
-            const is = recordCells.includes(td);
-            if (is) {
-                return false;
-            }
-            recordCells.push(td);
-            return true;
-        });
-    });
-}
 
 function findFocusCell(table, slot) {
     var _a;
@@ -5662,18 +6206,25 @@ let TableSelectionAwarenessDelegate = class TableSelectionAwarenessDelegate exte
         if (!(commonAncestorComponent instanceof TableComponent)) {
             return false;
         }
-        const range = getSelectedRanges(commonAncestorComponent, findFocusCell(commonAncestorComponent, startSlot), findFocusCell(commonAncestorComponent, endSlot));
-        const rows = commonAncestorComponent.state.rows;
-        const startFocusSlot = rows[range.startRow].cells[range.startColumn].slot;
-        const endFocusSlot = rows[range.endRow].cells[range.endColumn].slot;
+        const rect = commonAncestorComponent.getMaxRectangle(findFocusCell(commonAncestorComponent, startSlot), findFocusCell(commonAncestorComponent, endSlot));
         const renderer = this.domAdapter;
-        const startRect = renderer.getNativeNodeBySlot(startFocusSlot).getBoundingClientRect();
-        const endRect = renderer.getNativeNodeBySlot(endFocusSlot).getBoundingClientRect();
+        if (!rect) {
+            return false;
+        }
+        const normalizedSlots = commonAncestorComponent.getSelectedNormalizedSlotsByRectangle(rect);
+        const rects = normalizedSlots.map(row => {
+            return row.cells.filter(i => i.visible).map(i => {
+                const td = renderer.getNativeNodeBySlot(i.raw.slot);
+                return td.getBoundingClientRect();
+            });
+        }).flat();
+        const left = Math.min(...rects.map(i => i.left));
+        const top = Math.min(...rects.map(i => i.top));
         return [{
-                left: startRect.left,
-                top: startRect.top,
-                width: endRect.left + endRect.width - startRect.left,
-                height: endRect.top + endRect.height - startRect.top
+                left,
+                top,
+                width: Math.max(...rects.map(i => i.right)) - left,
+                height: Math.max(...rects.map(i => i.bottom)) - top
             }];
     }
 };
@@ -5682,32 +6233,6 @@ TableSelectionAwarenessDelegate = __decorate([
     __metadata("design:paramtypes", [platformBrowser.DomAdapter,
         core$1.Selection])
 ], TableSelectionAwarenessDelegate);
-function getSelectedRanges(component, startSlot, endSlot) {
-    const p1 = finedPosition(component, startSlot);
-    const p2 = finedPosition(component, endSlot);
-    return {
-        startRow: Math.min(p1.rowIndex, p2.rowIndex),
-        endRow: Math.max(p1.rowIndex, p2.rowIndex),
-        startColumn: Math.min(p1.columnIndex, p2.columnIndex),
-        endColumn: Math.max(p1.columnIndex, p2.columnIndex)
-    };
-}
-function finedPosition(component, slot) {
-    const rows = component.state.rows;
-    for (let i = 0; i < rows.length; i++) {
-        const row = rows[i];
-        for (let j = 0; j < row.cells.length; j++) {
-            const cell = row.cells[j].slot;
-            if (cell === slot) {
-                return {
-                    rowIndex: i,
-                    columnIndex: j
-                };
-            }
-        }
-    }
-    return null;
-}
 
 function TimelineComponentView(props) {
     const adapter = core.inject(platformBrowser.DomAdapter);
@@ -5872,6 +6397,7 @@ class Editor extends core$1.Textbus {
                 strikeThroughFormatLoader,
                 underlineFormatLoader
             ], attributeLoaders: [
+                cellAlignAttrLoader,
                 headingAttrLoader,
                 textAlignAttrLoader,
                 textIndentAttrLoader
@@ -5944,6 +6470,7 @@ class Editor extends core$1.Textbus {
                 strikeThroughFormatter,
                 underlineFormatter
             ], attributes: [
+                cellAlignAttr,
                 headingAttr,
                 textAlignAttr,
                 textIndentAttr
@@ -6023,6 +6550,8 @@ exports.BlockquoteComponent = BlockquoteComponent;
 exports.BlockquoteView = BlockquoteView;
 exports.BoldTool = BoldTool;
 exports.Button = Button;
+exports.CellAlignTool = CellAlignTool;
+exports.CellBackgroundTool = CellBackgroundTool;
 exports.CodeTool = CodeTool;
 exports.ColorTool = ColorTool;
 exports.ComponentToolbar = ComponentToolbar;
@@ -6052,6 +6581,7 @@ exports.ListComponentView = ListComponentView;
 exports.Matcher = Matcher;
 exports.MenuHeading = MenuHeading;
 exports.MenuItem = MenuItem;
+exports.MergeCellsTool = MergeCellsTool;
 exports.Organization = Organization;
 exports.OutputInjectionToken = OutputInjectionToken;
 exports.ParagraphComponent = ParagraphComponent;
@@ -6061,6 +6591,7 @@ exports.RootComponent = RootComponent;
 exports.RootView = RootView;
 exports.SourceCodeComponent = SourceCodeComponent;
 exports.SourceCodeView = SourceCodeView;
+exports.SplitCellsTool = SplitCellsTool;
 exports.StrikeThroughTool = StrikeThroughTool;
 exports.TableComponent = TableComponent;
 exports.TableComponentView = TableComponentView;
@@ -6073,12 +6604,13 @@ exports.UnderlineTool = UnderlineTool;
 exports.VideoComponent = VideoComponent;
 exports.VideoView = VideoView;
 exports.atComponentLoader = atComponentLoader;
-exports.autoComplete = autoComplete;
 exports.backgroundColorFormatLoader = backgroundColorFormatLoader;
 exports.backgroundColorFormatter = backgroundColorFormatter;
 exports.blockquoteComponentLoader = blockquoteComponentLoader;
 exports.boldFormatLoader = boldFormatLoader;
 exports.boldFormatter = boldFormatter;
+exports.cellAlignAttr = cellAlignAttr;
+exports.cellAlignAttrLoader = cellAlignAttrLoader;
 exports.codeFormatLoader = codeFormatLoader;
 exports.codeFormatter = codeFormatter;
 exports.colorFormatLoader = colorFormatLoader;