Skip to content

feat: add hover controls to add/remove table rows and columns - #31

Merged
du82 merged 1 commit into
du82:mainfrom
netqo:feat/table-controls
Sep 3, 2026
Merged

feat: add hover controls to add/remove table rows and columns#31
du82 merged 1 commit into
du82:mainfrom
netqo:feat/table-controls

Conversation

@netqo

@netqo netqo commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Closes #30

Problem

Editing a table in the live editor was awkward. Rows could only be added by
pressing Enter/Tab inside a cell, and there was no way at all to add or remove a
column from the UI: the column mutation primitive (_tableColumnResult) already
existed in writemark.js but had no caller.

What this does

Adds hover-revealed controls on live-editor tables:

  • a + tab at the top-right adds a column, and a + tab below the table adds a
    row;
  • a - tab centered above each column deletes that column, and a - tab at each
    body row's right edge deletes that row.

All four are identically sized, slightly-rounded tabs (2px corners, matching the
Publish button) and appear only while hovering the table (each delete tab shows
when hovering its column/row).

How

  • The controls are rendered as part of the table markup, so they are recreated
    on every re-render and never touch the markdown source: they are
    contenteditable="false", carry no data-editable/data-from, and are
    ignored by the DOM-to-source mapping.
  • Positioning uses no JavaScript measurement: each tab is centered on a real
    table edge via CSS (top, bottom, or right). The block adds no padding, so the
    table keeps its normal spacing and stays flush with the editor, and every tab
    stays within the table box - nothing spills outside to get clipped or to
    trigger a scrollbar.
  • Clicks are routed through the existing delegated live-click handler to the
    existing row/column primitives (_tableColumnResult,
    _tableRowInsertionResult, _tableDeleteRowResult), so undo/redo and
    screen-reader announcements work unchanged.
  • Controls are hidden when the editor is read-only or disabled; the delete-column
    tab is hidden while only two columns remain and the delete-row tab while only
    one row remains, keeping two columns and one row as the minimums.

No changes to the Rust renderer or the published output - this is editor-only.

Scope

One file, templates/writemark.js (+72 / -5): the _renderTable markup, a small
CSS block, two lines in the live-click handler, a one-line mousedown guard, and
an ~18-line dispatch method.

Testing

  • Functional: a jsdom harness inserts a table, dispatches real clicks on each
    control, and asserts the markdown source mutates correctly (add-col, add-row,
    del-col, del-row), that a single-column table hides the delete-column tab, and
    that a read-only editor renders no controls. 9/9 passing.
  • Verified in the running app that the editor JS is served intact (the inline
    build strips module exports and line comments; both the raw module and the
    stripped inline form parse), and that tables behave as described.

@du82 du82 added the bounty label Sep 3, 2026

@du82 du82 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

There's unnecessary and unexpected horizontal margins on the tables now. The space in pink shouldn't exist and the tables should be flush with the edges:

Image

There's no option to remove a column:

Image

@du82

du82 commented Sep 3, 2026

Copy link
Copy Markdown
Owner

Ignore my second critique, turns out I was doing it wrong! Fix padding and should be good to go

@du82 du82 assigned du82 and netqo and unassigned du82 Sep 3, 2026
@netqo

netqo commented Sep 3, 2026

Copy link
Copy Markdown
Contributor Author

okie one sec

@netqo
netqo force-pushed the feat/table-controls branch from 70b88ea to 634c1f0 Compare September 3, 2026 01:33
@netqo
netqo requested a review from du82 September 3, 2026 01:35

@du82 du82 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Much better solution! One issue I see is it doesn't make sense to have a one-column table, and it causes a breakage anyways. I propose not showing the option to remove a column if there's only two:

Image

Editing tables in the live editor was hard: rows could only be added via
Enter/Tab inside a cell, and the column insert/delete primitive
(_tableColumnResult) existed but had no caller, so columns could not be
changed at all from the UI.

Add hover-revealed controls anchored to the live table:

- a "+" bar on the right edge appends a column, and one on the bottom
  edge appends a row;
- a small "x" above each column and to the left of each body row deletes
  that specific column/row.

Controls are rendered as part of the table markup, so they are recreated
on every re-render and never touch the markdown source: they are
contenteditable="false", carry no data-editable/data-from, and are
ignored by the DOM-to-source mapping. Handles are positioned by anchoring
to real th/td boxes, so they track column/row geometry with no JS
measurement. Clicks are dispatched through the existing delegated live
click handler to the existing row/column mutation primitives, so undo,
redo, and screen-reader announcements work unchanged. Controls are hidden
when the editor is read-only or disabled, the delete-column handle is
hidden at one column, and delete-row handles are absent when the body is
empty.
@netqo

netqo commented Sep 3, 2026

Copy link
Copy Markdown
Contributor Author

makes sense also did the same for when theres only 1 row in the table.

@netqo
netqo force-pushed the feat/table-controls branch from 634c1f0 to 3cd90f5 Compare September 3, 2026 01:54
@netqo
netqo requested a review from du82 September 3, 2026 01:54
@du82

du82 commented Sep 3, 2026

Copy link
Copy Markdown
Owner

LGTM!

@du82
du82 merged commit 92d8f49 into du82:main Sep 3, 2026
1 check passed
@du82

du82 commented Sep 3, 2026

Copy link
Copy Markdown
Owner

Send a Monero sub-address if you'd like to claim a bounty

@netqo

netqo commented Sep 3, 2026

Copy link
Copy Markdown
Contributor Author

yay okie
86kQY5HoqFDghmSefmWicf8vx7x5xSWVF6svismyy9wBd58zRrHxrmfQRxdzTE1d3eLbpRC5pVb5j9g8PL8vN3mp5skyVEy

@du82

du82 commented Sep 7, 2026

Copy link
Copy Markdown
Owner

Please contact me on Signal regarding the bounty. It's important.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tables have no way to adjust columns

2 participants