feat: Insert markdown tables #816

silverkszlo · 2025-11-26T16:28:22Z

Summary

Needs this PR in Text: nextcloud/text#8002

Adds support for inserting and editing markdown tables in whiteboards using the Nextcloud Text editor.

Features

Insert tables: New "Insert table" menu item in the toolbar
Edit tables: Double-click any table to edit its content
Lock mechanism: Implements client-side locking to prevent concurrent table edits
Image rendering: Tables are converted to SVG/PNG images for optimal performance

Technical Details

Tables are stored as image elements with html preserved in customData
Double-click detection (500ms threshold) for editing workflow
Uses SVG foreignObject
Client-side collaborative locking prevents concurrent edits

Requirements

Nextcloud Text app must be installed and enabled for table editing functionality

Screenshots

To Do

Edit mode of table only opens on double-click. Is that enough?
If multiple users edit a table at the same time, the last update gets saved. This might lead to data loss. Needs further discussion.
Move "Insert table" into Toolbar
Testing

max-nextcloud · 2025-11-27T10:28:41Z

Reusing text here is an interesting approach. There's probably a number of ways to turn the table into something else. But that's not something you want to protect against, or do you?

To make sure I understand what you're aiming for here... It's basically a rich text entry that starts out as a table but could turn into anything?

src/components/TableEditorDialog.vue

src/utils/tableToImage.ts

juliusknorr · 2025-11-27T10:48:03Z

Very interesting approach with the html2canvas to render it. I think this is a good way to get this implemented for now.

Not all the options in the Text editor toolbar work: underlined text, blockquote, code block, attachments.

Would they not work due to the transformation to render on the canvas? In that case maybe limiting it to tables may be a good idea.

Edit mode of table only opens on double-click. Is that enough?

I'd say for the current scope yes. From a user perspective inline editing would be the nicest, but that comes with a much higher complexity.

If multiple users edit a table at the same time, the last update gets saved. This might lead to data loss. Needs further discussion.

Unsure about this one, to start with we could store a user locking the editing in the custom data for now maybe? Also has potential to fail but may be a good first step. Collaborative editing of tables is out of scope for now, but we should see if we can avoid at least obvious editing conflict scenarios.

marcoambrosini

Really nice work @silverkszlo :)

A few comments from my side:

I think that the best place for the insert action is the toolbar itself, together with all the other insert actions
Cells should be empty of text upon creation
We should remove all borders in the dialog, including from the text toolbar. The table’s own border are enough to create separation between the elements
We should also remove the padding left and right of the table

Here’s a screenshot of these changes I did by fiddling with the inspector

marcoambrosini · 2025-12-01T11:30:43Z

Aside from the design comments, there seems to be an issue in how the table is then represented on the canvas when there are empty cells. To reproduce:

create a table with empty cells, such as:

The result on the table on the canvas is different from the table in the text editor:

silverkszlo · 2025-12-03T14:58:46Z

Okay so the html2canvas is removed, because we do not really need it and the package is apparently not ready for production.

Very interesting approach with the html2canvas to render it. I think this is a good way to get this implemented for now.

As we are now only using the table node from text there is no toolbar with markdown editing options anyway.

Not all the options in the Text editor toolbar work: underlined text, blockquote, code block, attachments.

Would they not work due to the transformation to render on the canvas? In that case maybe limiting it to tables may be a good idea.

Edit-mode on double-lick simply works :)

Edit mode of table only opens on double-click. Is that enough?

I'd say for the current scope yes. From a user perspective inline editing would be the nicest, but that comes with a much higher complexity.

If multiple users edit a table at the same time, the last update gets saved. This might lead to data loss. Needs further discussion.

Thank you for this suggestion! I have implemented and tested it with different users editing the table at the same time and it seems to work in the UI.

Unsure about this one, to start with we could store a user locking the editing in the custom data for now maybe? Also has potential to fail but may be a good first step. Collaborative editing of tables is out of scope for now, but we should see if we can avoid at least obvious editing conflict scenarios.

silverkszlo · 2025-12-03T14:59:50Z

Aside from the design comments, there seems to be an issue in how the table is then represented on the canvas when there are empty cells.

Nice catch! Fixed :)

silverkszlo · 2025-12-03T15:01:23Z

Really nice work @silverkszlo :)

A few comments from my side:

* I think that the best place for the insert action is the toolbar itself, together with all the other insert actions

* Cells should be empty of text upon creation

* We should remove all borders in the dialog, including from the text toolbar. The table’s own border are enough to create separation between the elements

* We should also remove the padding left and right of the table

Thank you for the feedback, @marcoambrosini ! The editor has changed again now as it is not shipping all the markdown editing options anymore. Could you take another look at it and let me know what you think? Thank you!

silverkszlo · 2025-12-03T15:02:48Z

Reusing text here is an interesting approach. There's probably a number of ways to turn the table into something else. But that's not something you want to protect against, or do you?

To make sure I understand what you're aiming for here... It's basically a rich text entry that starts out as a table but could turn into anything?

You were definitely right to question this! The implementation with the editor and all its different markdown possibilities was a bit too much and confusing for the use case of a simple table.

marcoambrosini

🎉

src/utils/tableToImage.ts

src/hooks/useTableInsertion.tsx

benjaminfrueh · 2025-12-04T18:32:48Z

src/components/TableEditorDialog.vue

+				}
+
+				// Use the dedicated createTable function for table-only editing
+				this.editor = await window.OCA.Text.createTable({


The table cells (first head column in this example) have hard to read contrast when selected with double-click. This only happens in the whiteboard table-edit modal, not when using the text app directly. Maybe it is missing styles from a wrapping element? It seems like the selection background is set to transparent.

I don't seem to have that problem neither with Firefox 145.0.2 (64-bit) nor with Chromium 142.0.7444.175 (Official Build) snap (64-bit), both in light and dark mode.

src/utils/tableToImage.ts

benjaminfrueh · 2025-12-04T20:33:08Z

The collaboration and edit locking is tested and works good to prevent conflicts 🎉

Signed-off-by: silver <[email protected]>

Implement core functionality for inserting and editing markdown tables as images in whiteboards: - Add useTableInsertion hook with double-click editing support - Add tableToImage utility for markdown-to-SVG/PNG conversion - Support inline markdown formatting (bold, italic, code, links) - Use Nextcloud Text editor integration via Vue dialogs - Preserve table markdown in customData for re-editing Signed-off-by: silver <[email protected]>

Integrate table functionality into the whiteboard interface: - Add "Insert table" menu item to Excalidraw menu with mdiTable icon - Create TableEditorDialog using Nextcloud Text editor component Requires Text app to be installed and enabled for table editing. Signed-off-by: silver <[email protected]>

Signed-off-by: silver <[email protected]>

Implement client-side locking to prevent concurrent table edits: - Lock stored in element.customData.tableLock with 5-minute timeout - Lock acquisition checks and shows error if table locked by another user - Lock automatically cleared when user saves/cancels edit - Lock state syncs via normal onChange flow and survives reconciliation - No heartbeat needed - timeout sufficient for cleanup Signed-off-by: silver <[email protected]>

Signed-off-by: silver <[email protected]>

juliusknorr · 2025-12-09T21:58:45Z

I rebased to resolve an import conflict in App.tsx

- Remove markdown generation from submit flow (only generated on-demand for Text editor input) - Remove tableMarkdown from customData storage across codebase - Update tests to use tableHtml instead of tableMarkdown Signed-off-by: silver <[email protected]>

juliusknorr

Tested on master and stable29

github-actions · 2025-12-11T02:13:53Z

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

silverkszlo requested review from grnd-alt, hweihwang and juliusknorr as code owners November 26, 2025 16:28

silverkszlo self-assigned this Nov 26, 2025

silverkszlo added the 3. to review label Nov 26, 2025

hweihwang force-pushed the feat-insert-markdown-tables branch from 49e56a9 to 325dde4 Compare November 27, 2025 08:31

juliusknorr reviewed Nov 27, 2025

View reviewed changes

src/components/TableEditorDialog.vue Show resolved Hide resolved

juliusknorr reviewed Nov 27, 2025

View reviewed changes

src/components/TableEditorDialog.vue Outdated Show resolved Hide resolved

juliusknorr reviewed Nov 27, 2025

View reviewed changes

src/utils/tableToImage.ts Outdated Show resolved Hide resolved

juliusknorr requested a review from benjaminfrueh November 27, 2025 10:48

marcoambrosini reviewed Dec 1, 2025

View reviewed changes

silverkszlo force-pushed the feat-insert-markdown-tables branch from 325dde4 to 2b4566f Compare December 1, 2025 13:26

silverkszlo marked this pull request as draft December 1, 2025 15:46

silverkszlo mentioned this pull request Dec 1, 2025

feat: Add table-only editor API nextcloud/text#8002

Merged

4 tasks

silverkszlo force-pushed the feat-insert-markdown-tables branch 3 times, most recently from f888d50 to e629666 Compare December 3, 2025 14:51

silverkszlo marked this pull request as ready for review December 3, 2025 14:52

silverkszlo force-pushed the feat-insert-markdown-tables branch 2 times, most recently from 8c19e8d to 0d580ea Compare December 4, 2025 07:38

marcoambrosini approved these changes Dec 4, 2025

View reviewed changes

juliusknorr added the enhancement New feature or request label Dec 4, 2025

benjaminfrueh reviewed Dec 4, 2025

View reviewed changes

marcoambrosini added this to 🖍 Design team Dec 8, 2025

marcoambrosini moved this to 🏗️ At engineering in 🖍 Design team Dec 8, 2025

silverkszlo force-pushed the feat-insert-markdown-tables branch from 738d8b2 to b3ac8f3 Compare December 8, 2025 17:41

juliusknorr added this to the 1.5.0 milestone Dec 9, 2025

silverkszlo added 12 commits December 9, 2025 22:56

integrate text editor

ab2f5d9

Signed-off-by: silver <[email protected]>

remove html2canvas

2a7e284

Signed-off-by: silver <[email protected]>

add hint about all content being rendered as table elements

d536afc

Signed-off-by: silver <[email protected]>

allow empty cells

fb2e0cc

Signed-off-by: silver <[email protected]>

use createTable to only use table markdown from Text

2afd869

Signed-off-by: silver <[email protected]>

add 'insert table' icon to toolbar

009cb87

Signed-off-by: silver <[email protected]>

test the locking mechanism

bb3c5c0

Signed-off-by: silver <[email protected]>

remove border and some padding in tableeditor

dd40f13

Signed-off-by: silver <[email protected]>

adjust table styling and remove obsolete code

02ff6c2

Signed-off-by: silver <[email protected]>

juliusknorr force-pushed the feat-insert-markdown-tables branch from b3ac8f3 to 66893ee Compare December 9, 2025 21:58

juliusknorr force-pushed the feat-insert-markdown-tables branch from 66893ee to 9638756 Compare December 9, 2025 22:02

juliusknorr approved these changes Dec 10, 2025

View reviewed changes

juliusknorr merged commit 7a925fa into main Dec 10, 2025
32 checks passed

juliusknorr deleted the feat-insert-markdown-tables branch December 10, 2025 08:35

github-project-automation bot moved this from 🏗️ At engineering to 🎉 Done in 🖍 Design team Dec 10, 2025

github-actions bot added the feedback-requested label Dec 11, 2025

feat: Insert markdown tables #816

feat: Insert markdown tables #816

Uh oh!

Conversation

silverkszlo commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Features

Technical Details

Requirements

Screenshots

To Do

Uh oh!

max-nextcloud commented Nov 27, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

juliusknorr commented Nov 27, 2025

Uh oh!

marcoambrosini left a comment

Choose a reason for hiding this comment

Uh oh!

marcoambrosini commented Dec 1, 2025

Uh oh!

silverkszlo commented Dec 3, 2025

Uh oh!

silverkszlo commented Dec 3, 2025

Uh oh!

silverkszlo commented Dec 3, 2025

Uh oh!

silverkszlo commented Dec 3, 2025

Uh oh!

marcoambrosini left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

benjaminfrueh Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

silverkszlo Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

silverkszlo Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

benjaminfrueh commented Dec 4, 2025

Uh oh!

juliusknorr commented Dec 9, 2025

Uh oh!

juliusknorr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Dec 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

silverkszlo commented Nov 26, 2025 •

edited

Loading