Hi @marijn How to resolve this weird behavior of the column dragging?
I have modified the schema and other part of pm-tables such that now my table has an attr called columnsWidth: number , due to performance issues.
function handleMouseDown(
view: EditorView,
event: MouseEvent,
cellMinWidth: number,
defaultCellMinWidth: number,
): boolean {
const win = view.dom.ownerDocument.defaultView ?? window;
const pluginState = columnResizingPluginKey.getState(view.state);
if (!pluginState || pluginState.activeHandle == -1 || pluginState.dragging) return false;
const $cell = view.state.doc.resolve(pluginState.activeHandle);
const table = $cell.node(-1);
const width = currentColWidth(view, pluginState.activeHandle, table.attrs.columnsWidth);
view.dispatch(
view.state.tr.setMeta(columnResizingPluginKey, {
setDragging: {startX: event.clientX, startWidth: width},
}),
);
// Finalizes the resizing process when the mouse is released
function finish(event: MouseEvent) {
win.removeEventListener("mouseup", finish);
win.removeEventListener("mousemove", move);
const pluginState = columnResizingPluginKey.getState(view.state);
if (pluginState?.dragging) {
updateColumnWidth(
view,
pluginState.activeHandle,
draggedWidth(pluginState.dragging, event, cellMinWidth),
);
view.dispatch(view.state.tr.setMeta(columnResizingPluginKey, {setDragging: null}));
}
}
// Updates the column width as the mouse is moved while dragging
function move(event: MouseEvent): void {
if (!event.which) return finish(event);
const pluginState = columnResizingPluginKey.getState(view.state);
if (!pluginState) return;
console.log("move", pluginState);
if (pluginState.dragging) {
const dragged = draggedWidth(pluginState.dragging, event, cellMinWidth);
displayColumnWidth(view, pluginState.activeHandle, dragged, defaultCellMinWidth);
}
}
displayColumnWidth(view, pluginState.activeHandle, width, defaultCellMinWidth);
win.addEventListener("mouseup", finish);
win.addEventListener("mousemove", move);
event.preventDefault();
return true;
}
