Code-block(syntax) is not displayed correctly when saved and redisplayed.

[ryor1986]

trafficstars

Code-block(syntax) is not displayed correctly when saved and redisplayed.

Issues

1. Unnecessary characters (language text) appear above the code block.
2. Indentation and spaces in the code is deleted.
3. Correct formatting color of code is not applied.

Steps for Reproduction

1. Prepare editor page like this.

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>

<div id="editor"></div>
<button>Save to DB</button>

<script>
const quill = new Quill('#editor', {
  modules: {
    syntax: true,              // Include syntax module
    toolbar: [['code-block']]  // Include button in toolbar
  },
  theme: 'snow'
});
</script>

3. Enter the code in the Code-block and select language.

4. Save the HTML entered in editor to DB.

5. Re-display the HTML saved from the DB.

<div id="editor">
    <!-- Get tag from DB and show ↓ -->
    <div class="ql-code-block-container" spellcheck="false"><select class="ql-ui" contenteditable="false"><option value="plain">Plain</option><option value="bash">Bash</option><option value="cpp">C++</option><option value="cs">C#</option><option value="css">CSS</option><option value="diff">Diff</option><option value="xml">HTML/XML</option><option value="java">Java</option><option value="javascript">JavaScript</option><option value="markdown">Markdown</option><option value="php">PHP</option><option value="python">Python</option><option value="ruby">Ruby</option><option value="sql">SQL</option></select><div class="ql-code-block" data-language="java"><span class="ql-token hljs-keyword">public</span> <span class="ql-token hljs-keyword">class</span> <span class="ql-token hljs-title">SampleJava</span> {</div><div class="ql-code-block" data-language="java"><br></div><div class="ql-code-block" data-language="java">  <span class="ql-token hljs-keyword">public</span> <span class="ql-token hljs-keyword">static</span> <span class="ql-token hljs-keyword">void</span> <span class="ql-token hljs-title">main(String[] args)</span> {</div><div class="ql-code-block" data-language="java">    System.out.println(<span class="ql-token hljs-string">"Hello World!"</span>);</div><div class="ql-code-block" data-language="java">  }</div><div class="ql-code-block" data-language="java"><br></div><div class="ql-code-block" data-language="java">}</div></div>
</div>
<button>Save to DB</button>

Expected behavior:

Actual behavior:

1. Unnecessary characters (language text) appear above the code block.
2. Indentation and spaces in the code is deleted.
3. Correct formatting color of code is not applied.

Platforms:

1. PHP
2. Laravel
3. MySQL

Version:

• v2.0.2
• This does not occur in version 1.3.7.

[AZCodingAccount]

same question

[aktas]

I think this problem is still not solved? Any solution?

[yang001asdg]

我觉得这个问题还是没有解决吗？有什么解决方案吗？

你可以使用quill.root.innerHtml来避免掉这个问题

[aktas]

Not safe. Use UpdateContents. Like that:

const delta = quillInstanceRef.current.clipboard.convert({ html: addContentText }); quillInstanceRef.current.updateContents(delta, Quill.sources.USER);

[ScottKemp]

Has this been solved? Same issues with it wiping out spaces.