fix: insert handle performance

This commit is contained in:
Aaryan Khandelwal
2026-01-22 14:22:53 +05:30
parent c9a23d5b21
commit 60d37dde2f
4 changed files with 27 additions and 27 deletions

View File

@@ -331,8 +331,6 @@ export function createColumnDragHandle(config: ColumnDragHandleConfig): {
const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
const dragMarker = tableElement instanceof HTMLElement ? getColDragMarker(tableElement) : null;
console.log("Column drag markers found:", { dropMarker: !!dropMarker, dragMarker: !!dragMarker });
const handleFinish = (): void => {
// Clean up markers if they exist
if (dropMarker && dragMarker) {

View File

@@ -331,8 +331,6 @@ export function createRowDragHandle(config: RowDragHandleConfig): {
const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
const dragMarker = tableElement instanceof HTMLElement ? getRowDragMarker(tableElement) : null;
console.log("Row drag markers found:", { dropMarker: !!dropMarker, dragMarker: !!dragMarker });
const handleFinish = (): void => {
// Clean up markers if they exist
if (dropMarker && dragMarker) {

View File

@@ -72,6 +72,18 @@ export const TableInsertPlugin = (editor: Editor): Plugin => {
});
};
let updateScheduled = false;
const scheduleUpdate = () => {
if (updateScheduled) return;
updateScheduled = true;
requestAnimationFrame(() => {
updateScheduled = false;
updateAllTables();
});
};
return new Plugin({
key: TABLE_INSERT_PLUGIN_KEY,
@@ -80,9 +92,9 @@ export const TableInsertPlugin = (editor: Editor): Plugin => {
return {
update(view, prevState) {
// Update when document changes
// Debounce updates using RAF to batch multiple changes
if (!prevState.doc.eq(view.state.doc)) {
updateAllTables();
scheduleUpdate();
}
},
destroy() {

View File

@@ -219,16 +219,11 @@ export const createRowInsertButton = (editor: Editor, tableInfo: TableInfo): HTM
export const findAllTables = (editor: Editor): TableInfo[] => {
const tables: TableInfo[] = [];
const tableElements = editor.view.dom.querySelectorAll("table");
tableElements.forEach((tableElement) => {
// Find the table's ProseMirror position
let tablePos = -1;
let tableNode: ProseMirrorNode | null = null;
// Walk through the document to find matching table nodes
editor.state.doc.descendants((node, pos) => {
if (node.type.spec.tableRole === "table") {
// More efficient: iterate through document once instead of DOM + doc for each table
editor.state.doc.descendants((node, pos) => {
if (node.type.spec.tableRole === "table") {
try {
const domAtPos = editor.view.domAtPos(pos + 1);
let domTable = domAtPos.node;
@@ -241,20 +236,17 @@ export const findAllTables = (editor: Editor): TableInfo[] => {
domTable = domTable.parentNode;
}
if (domTable === tableElement) {
tablePos = pos;
tableNode = node;
return false; // Stop iteration
if (domTable instanceof HTMLElement && domTable.tagName === "TABLE") {
tables.push({
tableElement: domTable,
tableNode: node,
tablePos: pos,
});
}
} catch (error) {
// Skip tables that fail to resolve
console.error("Error finding table:", error);
}
});
if (tablePos !== -1 && tableNode) {
tables.push({
tableElement,
tableNode,
tablePos,
});
}
});