Feature/114/tables

[max-nextcloud]

• Resolves: Add Markdown table support #114
• Target version: master
  

[max-nextcloud]

This is still very basic... obviously a bunch of things are still missing:

• basic styling for the tables - they are currently only showing bottom borders which might be too little when they are empty
• table head that looks different from cells
• saving table with two empty lines at the end merges these lines in markdown
• tab key is not navigating between table headings
• fix table modification functions
  • Fix addRowAfter function. Pressing tab on the last cell should create a new row. Currently it tries to but fails because our table schema is different
  • fix the other table modification functions as well.

I'm not sure how to design the ui. Currently i am thinking a single table button that creates a table and if the table is active clicking this button will open a submenu rather than toggling off the table. The submenu would then contain the buttons to add / remove columns / rows etc.

[juliusknorr]

Quick early design feedback form the spontaneous design co-working:

• for the header, only the bottom border should be darker, possibly no background color
• there should be a border radius on the table
• some margin at the bottom would help to separate from the next block
• keyboard actions
  • enter in the last row should create a new row
  • tab navigation should work within cells, not creating new rows or columns
• https://materialdesignicons.com/icon/table might be a nicer icon
• when the table is focussed, buttons could be shown for adding/removing rows/columns outside of the table (ref Notion.so)
• 3-dot actions could be shown on the right in the column header cells with a menu having: "Add column to right", "Add column to left", "Delete column".

[max-nextcloud]

Enter already creates a new row almost everywhere in the table.
It does not work in the last cell of a row though and not if the cell contains text.

• make it navigate to the next row everywhere but in the last row
• make it create a new row in the last row - even if the cell has content
• make it create a new row in the last row even in the last cell.

[max-nextcloud]

What's missing to get this ready to merge:

• fix markdown unit tests
• fix cypress tests by telling cypress how to handle vue files (possibly turn this into a component test)
• add button to delete the table
• rebase & compile

Further tweaks that would be nice to have but could be fixed separately

• use color-primary-light for highlighting current row

Moved to a separate issue #2267 :

• check if rows and columns can be added / removed and disable buttons accordingly
• refactor test layout, put all tables fixtures in one folder
• accessibility for adding columns and rows (currently tab moves past the buttons in the cells)
• drop colspan=1, rowspan=1, etc from rendered html - first attempt at this failed.

[max-nextcloud]

I think this is good (enough) to go. I'd be curious what you think.
I'll see if i can get to fix some of the open tasks left while addressing other things that come up during a review. Otherwise i'd move them to a new issue and fix them later after this has landed.

update: that was before i noticed all cypress tests are failing 😭

[max-nextcloud]

Looks like the test failures are not related to this branch... they also happen on master.

[mejo-]

Wow, looks super nice 🤩

I only gave it a quick try and it looks really great! Some glitches I experienced so far:

• Adding a table at the very top of the document, I'm no longer able to put something on top if it afterwards. Would be nice if I could put the cursor above the table somehow
• Navigating with the arrow up (or left) key from below the table, the cursor ends up on the right side of the table. I'm able to add content there. That's unexpected and I'd consider it unwanted ;)
• Further navigating up with the arrow up keys, the lower right field first is reached first and then it goes up the very right column until the last body field. I'm not able to jump into the header field by navigating with the cursors.
• If the table is the first node in my document and I try to navigate further up from a header field or the last body field, the cursor jumps below the table.

@max-nextcloud created #2266 to track this.