toolbar insert table and display bug

[ALosee]

What happened?

When i init a superdoc and not set document, through toolbar insert table, it's normal, but when i through input upload a docx file, then insert table, page don't show table border like this 👍

the blue border is mouse hover, don't actual border like this:

Steps to reproduce

这是一些测试内容.docx

any docx file

SuperDoc version

1. 43.0

Browser

Chrome

Additional context

No response

[linear-code]

IT-1209

[vivienne-sd]

Hi @ALosee ! Thank you for reporting and providing the sample document.

Interestingly, this doesn't happen with every uploaded .docx file, but it does happen with documents that define their default table style in a particular way. In this file, the document has a default table style named Normal Table, but that style has no borders. When SuperDoc inserts a new table after loading this file, it is currently picking up that borderless table style, so the table is inserted correctly but appears without visible borders.

We actually have a ticket in progress covering this broader class of DOCX table-style handling. The fix should make newly inserted tables avoid using a borderless Normal Table/reset style as their visible table style, even when the DOCX uses nonstandard style IDs. I will have an update for you within the next week on target date for a fix.

As a temporary workaround, we can provide a wrapper that places borders on inserted tables if that'd be helpful to you. Just let me know!

[ALosee]

Thanks for response! What is the wrapper you say? How can i use? Looking forward to your next update！I love superdoc！

[vivienne-sd]

This would be a temporary solution while we build out the proper table-style handling. But essentially, this snippet applies a visual border to tables on insert, with imported tables retaining their formatting:

function startInsertedTableBorderWorkaround() {
    setTimeout(() => {
      initialTableCount = getRenderedTables().length;

      const observer = new MutationObserver(applyInsertedTableClasses);

      observer.observe(root, {
        childList: true,
        subtree: true,
      });
    }, 1000);
  }

You’d call it from SuperDoc’s ready hook:

const superdoc = new SuperDoc({ selector: '#superdoc-container' });

superdoc.on('ready', () => {
  startInsertedTableBorderWorkaround();
});

And pair it with the CSS that applies the border only to tables marked by the workaround. So essentially, nothing changes in how existing tables in the document render, but new tables that you insert will insert with their borders so they're easier to see and manipulate.

Let us know how it works for you!