Add room above and below newly created table

I have written a custom implementation using TurndownIt as a proxy to the DOMSerializer in order to get markdown with tables to work together. At this point I was able to get through everything aside from these 2 issues.

  1. GapCursor doesn’t work as expected (no blinking cursor in blank editor state)

  2. A side effect of the GapCursor not working is that it doesn’t allow editor selection outside of tables when no elements are before or after it.

So if I go into a blank editor state and create a table, the cursor becomes “locked” inside of it.

I was able to get it to work partially using the following in the create table menu items tables run method, replacing:

const tableInsert = state.tr.replaceSelectionWith(
          table
);
        
dispatch(tableInsert);

with

const tableInsert = state.tr.replaceSelectionWith(
         params.schema.nodes[NodeTypesEnum.Paragraph].create(null, table)
);

dispatch(tableInsert);

Unfortunately, once I attempt to enter text below the table this error is thrown while typing:

vendor.js:67994 ERROR Error: Called contentMatchAt on a node with invalid content

I suspect this is the schema definition for paragraph not allowing a table as content? If so can I just replace the node definition with one that allows for content: table_row+?

My intention is to give the user space to type above and below the tables created. Here is a screenshot of the DOM when this issue occurs:

Thank you for your help!

Exactly.

The gap cursor plugin does work in most people’s setup, so instead of trying to work around not having it, maybe it would be a good idea to try to isolate why it’s not working for you. Start with a vanilla setup, and move it closer to your setup step by step until the gap cursor stops working.

Thanks @marijn, I truly appreciate such a quick response! I am taking your advice and seeing where the issue is with my setup loading the gap cursor plugin.