[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

[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 });
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);

[junjiebyr]

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

@attoae hello，I am using react-quill, so where should this code be placed?

[attoae]

@attoae hello，I am using react-quill, so where should this code be placed?

This library(react-quill) does not yet support Quill 2.0 version.

import { useEffect } from 'react';
import Quill from 'quill';
import QuillTableBetter from 'quill-table-better';
import 'quill/dist/quill.snow.css';
import 'quill-table-better/dist/quill-table-better.css';

Quill.register({
  'modules/table-better': QuillTableBetter
}, true);

const options = {
  theme: 'snow',
  modules: {
    toolbar: ['bold', 'italic', 'underline', 'strike', 'table-better'],
    table: false,
    'table-better': {
      language: 'en_US',
      menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete'],
      toolbarTable: true
    },
    keyboard: {
      bindings: QuillTableBetter.keyboardBindings
    }
  }
};

// The html here is sample data, the real data is what you get from the database.
const html = `
  <table class="ql-table-better">
  <tbody>
    <tr>
      <td data-row="row-jd3a" width="72" class="ql-cell-focused">
        <p class="ql-table-block" data-cell="cell-wmy6"><br></p>
      </td>
      <td data-row="row-jd3a" width="72">
        <p class="ql-table-block" data-cell="cell-tni4"><br></p>
      </td>
    </tr>
    <tr>
      <td data-row="row-cu2a" width="72">
        <p class="ql-table-block" data-cell="cell-zmnp"><br></p>
      </td>
      <td data-row="row-cu2a" width="72">
        <p class="ql-table-block" data-cell="cell-7o44"><br></p>
      </td>
    </tr>
  </tbody>
  </table>
`;

function Editor() {
  useEffect(() => {
    const quill = new Quill('#editor', options);
    const delta = quill.clipboard.convert({ html });
    const [range] = quill.selection.getRange();
    quill.updateContents(delta, Quill.sources.USER);
    quill.setSelection(
      delta.length() - (range?.length || 0),
      Quill.sources.SILENT,
    );
    quill.scrollIntoView();
  }, []);

  return (
    <div id="editor"></div>
  );
}

export default Editor;

[junjiebyr]

This library(react-quill) does not yet support Quill 2.0 version.

@attoae thanks, but i am using react-quill-new, it used quill 2.0. In addition, i save the delta mode in database, not html. so i'm worried about data format incompatibility

[attoae]

@junjiebyr

function Editor() {
  const quillRef = useRef(null);
  useEffect(() => {
    if (quillRef.current) {
      const quill = quillRef.current.getEditor();
      const [range] = quill.selection.getRange();
      quill.updateContents(delta, Quill.sources.USER);
      quill.setSelection(
        delta.length() - (range?.length || 0),
        Quill.sources.SILENT,
      );
      quill.scrollIntoView();
    }
  }, [quillRef]);
  
  return (
    <ReactQuill ref={quillRef} theme="snow" modules={modules} />
  );
}

[junjiebyr]

@attoae Thank you for your patience. I'll try first

[junjiebyr]

@attoae Excuse me for bothering you. In my scenario, I want to switch between edit mode and read mode, and the styles are somewhat different. So, I have two ReactQuill components, and I hope to change the display when clicking a button. Also, I want to display tables in read-only mode, but it is not working at the moment. Can you help me take a look? here is my
demo:
https://codesandbox.io/p/sandbox/react-quill-vqk6hp

[attoae]

@attoae Excuse me for bothering you. In my scenario, I want to switch between edit mode and read mode, and the styles are somewhat different. So, I have two ReactQuill components, and I hope to change the display when clicking a button. Also, I want to display tables in read-only mode, but it is not working at the moment. Can you help me take a look? here is my demo: https://codesandbox.io/p/sandbox/react-quill-vqk6hp

import Delta from 'quill-delta';

const [value, setValue] = useState(new Delta());
const quillRef = useRef(null);

useEffect(() => {
    if (quillRef.current || preview) {
      const quill = quillRef.current.getEditor();
      const [range] = quill.selection.getRange();
      quill.setContents();
      quill.updateContents(value.delete(1));
      !preview && quill.setSelection(
        value.length() - (range?.length || 0),
        Quill.sources.SILENT,
      );
      !preview && quill.scrollIntoView();
    }
  }, [quillRef, preview]);

  return (
    <>
      <ReactQuill
        ref={quillRef}
        key={preview ? 'preview' : 'edit'}
        id={preview ? 'preview' : 'edit'}
        theme={preview ? 'bubble' : 'snow'}
        readOnly={preview}
        modules={modules}
        onChange={handleQuillValueChange}
      />
      <button onClick={() => setPreview((value) => !value)} type="button">
        { preview ? 'Change Editor' : 'Change Preview' }
      </button>
    </>
  );

[junjiebyr]

@attoae I used this code. But when i click the button, the table disappeared

[attoae]

@attoae I used this code. But when i click the button, the table disappeared

Using React 17.x, useEffect of React 18.x will be refreshed multiple times.
https://codesandbox.io/p/sandbox/react-quill-forked-qxhymx