Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add new option defaultCellMinWidth for columnResizing() #253

Merged
merged 4 commits into from
Oct 25, 2024
Merged

feat: add new option defaultCellMinWidth for columnResizing() #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
44af218
separate cellMinWidth and resizeMinWidth
YousefED Oct 25, 2024
d0e1247
set minwidth on col elements
YousefED Oct 25, 2024
09dea05
address feedback
YousefED Oct 25, 2024
f55ac76
run prettier
ocavue Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 22 additions & 15 deletions src/columnresizing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,14 @@ export const columnResizingPluginKey = new PluginKey<ResizeState>(
*/
export type ColumnResizingOptions = {
handleWidth?: number;
/**
* Minimum width of a cell /column. The column cannot be resized smaller than this.
*/
cellMinWidth?: number;
/**
* The default minWidth of a cell / column when it doesn't have an explicit width (i.e.: it has not been resized manually)
*/
defaultCellMinWidth?: number;
lastColumnResizable?: boolean;
/**
* A custom node view for the rendering table nodes. By default, the plugin
Expand All @@ -50,6 +57,7 @@ export type Dragging = { startX: number; startWidth: number };
export function columnResizing({
handleWidth = 5,
cellMinWidth = 25,
defaultCellMinWidth = 100,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While I agree with the intention behind the PR, I just spent a bunch of time trying to figure out where this 100px min-width was coming from since it was breaking my tests at https://github.com/ueberdosis/tiptap

I think this might actually be considered a breaking change, because now the defaults have changed from being a minimum of 25px to a minimum of 100px. So rendering the same table with the version prior & the new version can render differently

The only path that I see forward here is to change the default of 100 to be 25 or to cellMinWidth to keep the previous behavior but maintain the new capability (and later on we can introduce change in a major later)

@ocavue @YousefED

View = TableView,
lastColumnResizable = true,
}: ColumnResizingOptions = {}): Plugin {
Expand All @@ -61,7 +69,7 @@ export function columnResizing({
const tableName = tableNodeTypes(state.schema).table.name;
if (View && nodeViews) {
nodeViews[tableName] = (node, view) => {
return new View(node, cellMinWidth, view);
return new View(node, defaultCellMinWidth, view);
};
}
return new ResizeState(-1, false);
Expand All @@ -80,19 +88,13 @@ export function columnResizing({

handleDOMEvents: {
mousemove: (view, event) => {
handleMouseMove(
view,
event,
handleWidth,
cellMinWidth,
lastColumnResizable,
);
handleMouseMove(view, event, handleWidth, lastColumnResizable);
},
mouseleave: (view) => {
handleMouseLeave(view);
},
mousedown: (view, event) => {
handleMouseDown(view, event, cellMinWidth);
handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth);
},
},

Expand Down Expand Up @@ -138,7 +140,6 @@ function handleMouseMove(
view: EditorView,
event: MouseEvent,
handleWidth: number,
cellMinWidth: number,
lastColumnResizable: boolean,
): void {
const pluginState = columnResizingPluginKey.getState(view.state);
Expand Down Expand Up @@ -186,6 +187,7 @@ function handleMouseDown(
view: EditorView,
event: MouseEvent,
cellMinWidth: number,
defaultCellMinWidth: number,
): boolean {
const win = view.dom.ownerDocument.defaultView ?? window;

Expand Down Expand Up @@ -223,7 +225,12 @@ function handleMouseDown(
if (!pluginState) return;
if (pluginState.dragging) {
const dragged = draggedWidth(pluginState.dragging, event, cellMinWidth);
displayColumnWidth(view, pluginState.activeHandle, dragged, cellMinWidth);
displayColumnWidth(
view,
pluginState.activeHandle,
dragged,
defaultCellMinWidth,
);
}
}

Expand Down Expand Up @@ -290,10 +297,10 @@ function edgeCell(
function draggedWidth(
dragging: Dragging,
event: MouseEvent,
cellMinWidth: number,
resizeMinWidth: number,
): number {
const offset = event.clientX - dragging.startX;
return Math.max(cellMinWidth, dragging.startWidth + offset);
return Math.max(resizeMinWidth, dragging.startWidth + offset);
}

function updateHandle(view: EditorView, value: number): void {
Expand Down Expand Up @@ -335,7 +342,7 @@ function displayColumnWidth(
view: EditorView,
cell: number,
width: number,
cellMinWidth: number,
defaultCellMinWidth: number,
): void {
const $cell = view.state.doc.resolve(cell);
const table = $cell.node(-1),
Expand All @@ -353,7 +360,7 @@ function displayColumnWidth(
table,
dom.firstChild as HTMLTableColElement,
dom as HTMLTableElement,
cellMinWidth,
defaultCellMinWidth,
col,
width,
);
Expand Down
28 changes: 20 additions & 8 deletions src/tableview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,24 @@ export class TableView implements NodeView {
public colgroup: HTMLTableColElement;
public contentDOM: HTMLTableSectionElement;

constructor(public node: Node, public cellMinWidth: number) {
constructor(public node: Node, public defaultCellMinWidth: number) {
this.dom = document.createElement('div');
this.dom.className = 'tableWrapper';
this.table = this.dom.appendChild(document.createElement('table'));
this.colgroup = this.table.appendChild(document.createElement('colgroup'));
updateColumnsOnResize(node, this.colgroup, this.table, cellMinWidth);
updateColumnsOnResize(node, this.colgroup, this.table, defaultCellMinWidth);
this.contentDOM = this.table.appendChild(document.createElement('tbody'));
}

update(node: Node): boolean {
if (node.type != this.node.type) return false;
this.node = node;
updateColumnsOnResize(node, this.colgroup, this.table, this.cellMinWidth);
updateColumnsOnResize(
node,
this.colgroup,
this.table,
this.defaultCellMinWidth,
);
return true;
}

Expand All @@ -42,7 +47,7 @@ export function updateColumnsOnResize(
node: Node,
colgroup: HTMLTableColElement,
table: HTMLTableElement,
cellMinWidth: number,
defaultCellMinWidth: number,
overrideCol?: number,
overrideValue?: number,
): void {
Expand All @@ -58,13 +63,20 @@ export function updateColumnsOnResize(
const hasWidth =
overrideCol == col ? overrideValue : colwidth && colwidth[j];
const cssWidth = hasWidth ? hasWidth + 'px' : '';
totalWidth += hasWidth || cellMinWidth;
totalWidth += hasWidth || defaultCellMinWidth;
if (!hasWidth) fixedWidth = false;
if (!nextDOM) {
colgroup.appendChild(document.createElement('col')).style.width =
cssWidth;
const col = document.createElement('col');
col.style.width = cssWidth;
col.style.minWidth = cssWidth.length ? '' : defaultCellMinWidth + 'px';
colgroup.appendChild(col);
} else {
if (nextDOM.style.width != cssWidth) nextDOM.style.width = cssWidth;
if (nextDOM.style.width != cssWidth) {
nextDOM.style.width = cssWidth;
nextDOM.style.minWidth = cssWidth.length
? ''
: defaultCellMinWidth + 'px';
}
nextDOM = nextDOM.nextSibling as HTMLElement;
}
}
Expand Down
Loading