[Bug] Table cannot be displayed when edit again

[jasperliu911]

After the table is saved, it cannot be displayed when it is edited and displayed again

When edit showing

[attoae]

const delta = quill.clipboard.convert({
  html,
  text: '\n'
})
const [range] = quill.selection.getRange();
quill.updateContents(delta, Quill.sources.USER);
quill.setSelection(
  delta.length() - range.length,
  Quill.sources.SILENT,
);
quill.scrollIntoView();

Initialize using the above method.

[jasperliu911]

Can you tell me specifically where this code should be placed? Because I am using the npm package form. After passing the html value of the table to the Richtext, I initialize this code and find that although this problem is solved, I cannot insert a table again, and the table cannot be fully displayed in the output html.

[attoae]

Do you dependencies on react-quill or vue-quill or other?

[attoae]

If it weren't for the abov. You can refer to the following code (Not HTML assignment, use this method after creating an editor instance):

const quill = new Quill('#root', options);
const delta = quill.clipboard.convert({
  html,
  text: '\n'
})
const [range] = quill.selection.getRange();
quill.updateContents(delta, Quill.sources.USER);
quill.setSelection(
  delta.length() - range.length,
  Quill.sources.SILENT,
);
quill.scrollIntoView();

[jasperliu911]

Our actual use may be more complicated than the demo. We did this code after getting the html when initializing the rich text component and when listening to html changes. The problem was temporarily solved. But another problem arose, that is, the table could not be displayed normally when inserted for the second time. We temporarily solved the problem by replace the span tag in the table in the html, but it seems that it did not solve it fundamentally.

[dustinormond]

I did a workaround to get it working. Here is my code:

const html = $(quillID).html();
$(quillID).html("");
const quillEditor = new Quill(quillID, options);
const delta = quillEditor.clipboard.convert({ html })
quillEditor.updateContents(delta, Quill.sources.USER);