marcandClaude Opus 5
f1d3e38f8f
A long table lay straight across the gap between two sheets with a row cut in half, and a shorter one jumped to the next sheet whole leaving the rest of the first blank. Tables are broken between their rows now, which is where a table breaks on paper. The spacer there is a tr with one borderless cell: a div inside a tbody is not something the browser keeps. Its own spacer rows are subtracted again on the next measurement and counted into the shift every block below inherits — miss that and everything under a broken table is measured a page too high. A dialog closed in the middle of an edit if a selection was dragged past its edge: the click lands on the nearest common ancestor of press and release, which is the backdrop, and every dialog read that as "clicked beside me". They remember where the press began now. All ten. A note and a chapter can wear a mark of their own beside the name, chosen from a short list searched by what a thing is for rather than from the system emoji keyboard — a different thing on every machine, and three thousand pictures for a decision that is "which of these is the invoice notebook". A separator takes its own colour and one of five shapes, and a chapter can be divided like the notebook it sits in: both places a chapter is shown draw it with one component now, so it cannot be divisible in the column and not in the unfolded block. Also: a chapter's colour could not be cleared, because the update rode on COALESCE and null there means "leave it alone". A table's header row is legible on the dark theme. Three entries in the table's own menu were still German. Opening a notebook opens its first note, on a wide screen only — on a phone the list is the screen. Fourteen suites green: 364 browser checks, 241 unit tests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
/**
|
|
* The right-click menu on a table.
|
|
*
|
|
* The toolbar carries the same commands, but reaching them means leaving the
|
|
* cell you are working in, finding the button and reading a list — for shaping
|
|
* a table, where the target is the cell under the pointer, that is the long way
|
|
* round. This puts the commands where the cursor already is.
|
|
*
|
|
* Only the entries that apply are built: merge appears when several cells are
|
|
* selected, split when the cell was merged, and nothing at all outside a table
|
|
* so the browser's own menu stays available for ordinary text.
|
|
*/
|
|
|
|
/** True when the caret or selection sits inside a table cell. */
|
|
export const inTable = (editor) => !!editor?.isActive("table");
|
|
|
|
/**
|
|
* Menu items for `ContextMenu`, or null when there is no table under the click.
|
|
*
|
|
* Returning null rather than an empty list lets the caller tell "no menu" from
|
|
* "a menu with nothing in it" and fall through to the browser's own.
|
|
*/
|
|
export function tableMenuItems(editor) {
|
|
if (!inTable(editor)) return null;
|
|
|
|
const run = (fn) => () => fn(editor.chain().focus()).run();
|
|
const can = (name) => {
|
|
try {
|
|
return editor.can()[name]();
|
|
} catch {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const items = [
|
|
{ label: "Insert row above", action: run((c) => c.addRowBefore()) },
|
|
{ label: "Insert row below", action: run((c) => c.addRowAfter()) },
|
|
{ label: "Insert column left", action: run((c) => c.addColumnBefore()) },
|
|
{ label: "Insert column right", action: run((c) => c.addColumnAfter()) },
|
|
{ divider: true },
|
|
{ label: "Header row on/off", action: run((c) => c.toggleHeaderRow()) },
|
|
];
|
|
|
|
// mergeCells and splitCell are mutually exclusive in practice: one needs a
|
|
// multi-cell selection, the other a cell that was merged earlier.
|
|
if (can("mergeCells")) items.push({ label: "Merge cells", action: run((c) => c.mergeCells()) });
|
|
if (can("splitCell")) items.push({ label: "Split cell", action: run((c) => c.splitCell()) });
|
|
|
|
items.push(
|
|
{ divider: true },
|
|
{ label: "Delete row", danger: true, action: run((c) => c.deleteRow()) },
|
|
{ label: "Delete column", danger: true, action: run((c) => c.deleteColumn()) },
|
|
{ label: "Delete table", danger: true, action: run((c) => c.deleteTable()) }
|
|
);
|
|
|
|
return items;
|
|
}
|