Several issues with getSemanticHTML not preserving html represented in editor #4289
Comments
|
I'm having problems too, when using text-align in the list format, in the semantic version the align is removed Editor: <ol>
<li data-list="bullet" style="text-align: center;"><span class="ql-ui" contenteditable="false"></span>one</li>
<li data-list="bullet" style="text-align: center;"><span class="ql-ui" contenteditable="false"></span>two</li>
<li data-list="bullet" style="text-align: center;"><span class="ql-ui" contenteditable="false"></span>three</li>
</ol>getSemanticHTML: <ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>This causes the list alignment to not be maintained if the HTML is exported to be used somewhere else There is also a partial fix open at the moment |
|
Hi, you can, temporary, fix LI display using this less code. padding-left: 21px;
li {
>ol, >ul {
padding-left: 42px;
}
padding-left: 21px;
list-style-type: none;
&:before {
display: inline-block;
margin-left: -21px;
margin-right: 4px;
text-align: right;
white-space: nowrap;
width: 17px;
content:'\2022';
}
}
}
ul {
li {
&:before {
content:'\2022';
}
}
}
.ms-pub-body>ol {
counter-reset: ol1;
>li {
counter-increment: ol1;
&:before {
content:counter(ol1, decimal) '. '
}
>ol {
counter-reset: ol2;
>li {
counter-increment: ol2;
&:before {
content:counter(ol2, lower-alpha) '. ';
margin-right: 2px;
width: 19px;
}
>ol {
counter-reset: ol3;
>li {
counter-increment: ol3;
&:before {
content:counter(ol3, lower-roman) '. ';
margin-right: 2px;
width: 19px;
}
>ol {
counter-reset: ol4;
>li {
counter-increment: ol4;
&:before {
content:counter(ol4, decimal) '. '
}
>ol {
counter-reset: ol5;
>li {
counter-increment: ol5;
&:before {
content:counter(ol5, lower-alpha) '. '
}
>ol {
counter-reset: ol6;
>li {
counter-increment: ol6;
&:before {
content:counter(ol6, lower-roman) '. ';
margin-right: 2px;
width: 19px;
}
>ol {
counter-reset: ol7;
>li {
counter-increment: ol7;
&:before {
content:counter(ol7, decimal) '. '
}
>ol {
counter-reset: ol8;
>li {
counter-increment: ol8;
&:before {
content:counter(ol8, lower-alpha) '. '
}
>ol {
counter-reset: ol9;
>li {
counter-increment: ol9;
&:before {
content:counter(ol9, lower-roman) '. ';
margin-right: 2px;
width: 19px;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}` |
|
I had the same issue with the Video block, which I managed to find out why and solved it locally without waiting for Quill to make adjustments to how they generate the html from the Below is what the current Video block class looks like in the Quill package at file the location class Video extends BlockEmbed {
static blotName = 'video';
static className = 'ql-video';
static tagName = 'IFRAME';
static create(value) {
...
}
static formats(domNode) {
...
}
static sanitize(url) {
...
}
static value(domNode) {
return domNode.getAttribute('src');
}
format(name, value) {
...
}
html() {
const {
video
} = this.value();
return `<a href="${video}">${video}</a>`;
}
}You will notice that the class above has an instance method of To change this, I created my own class and named it class VideoBlock extends Video {
html () {
return this.domNode.outerHTML;
}
}The above I hope this helps someone out there. I believe that the same thing may be applied to some of the other Quill blocks mentioned in this issue by @enzedonline. |
|
The fixes I'm using for Code (also available via const QuillCodeBlockContainer = Quill.import('formats/code-block-container') as any;
class CodeBlockContainer extends QuillCodeBlockContainer {
html(index: number, length: number): string {
// Quill returns <pre data-language="...">...</pre> - highlight js doesn't recognise this format
// return html formatted for hljs : <pre><code class="language-...">...</code></pre>
// wrap the innerHTML of the returned <pre> in a <code> tag
// add the hljs language class to the code tag using the data-language value of the <pre> tag
const markup: string = super.html(index, length);
const tempDiv: HTMLElement = document.createElement('div');
tempDiv.innerHTML = markup;
const preTag: HTMLElement | null = tempDiv.querySelector('pre');
if (preTag) {
const language: string = preTag.getAttribute('data-language') || '';
const codeTag: HTMLElement = document.createElement('code');
if (!!language) {
codeTag.className = `language-${language}`;
}
codeTag.innerHTML = preTag.innerHTML;
preTag.innerHTML = '';
preTag.removeAttribute('data-language');
preTag.appendChild(codeTag);
return preTag.outerHTML;
}
return markup; // fallback
}
}
Quill.register('formats/code-block-container', CodeBlockContainer, true);Video (also adds aspect-ratio and full width instead of the default postage-stamp): const VideoEmbed = Quill.import("formats/video") as any;
class VideoResponsive extends VideoEmbed {
static aspectRatio: string = "16 / 9 auto"
static create(value: string) {
const node = super.create(value);
node.setAttribute('width', '100%');
node.style.aspectRatio = this.aspectRatio;
return node;
}
html () {
return this.domNode.outerHTML;
}
}
Quill.register(VideoResponsive, true); |
|
I am also experiencing the problem caused by inconsistent list formatting between the editor and what's returned by getSemanticHTML(): Here's an example in which one list containing both numbered items and bullets in the editor is treated as three lists in getSemanticHTML: In the editor:
Returned by getSemanticHTML():
Ideally the editor and getSemanticHTML would be consistent so the final list item is labelled "3". |
Quill documentation describes getSemanticHTML as:
It's should be a useable HTML representation of the editor contents. Critical requirement for using Quill as a form widget.
What happens is that the HTML is not preserved for syntax, video, formula blocks or check lists. Of those, only the syntax block is recoverable (by reapplying highlightjs on render), information necessary for video and formula are lost while check list requires some wrangling in javascript on render.
Syntax block:
The syntax highlighting markup is stripped out. The code block is instead just wrapped by a
<pre>tag.Editor:
getSemanticHTML:
At the very least, this should be
<pre><code class="language-${data-language-value}">...</code></pre>otherwise this is just rendered as plain text with whitespace preserved ... but why strip out the formatting? This means highlight.js needed to be reapplied on each render.Video block
iframes inserted from Quill video block are stripped and replaced by a hyperlink.
Editor:
getSemanticHTML:
Playground example.
The iframe needs to be preserved along with all attributes.
Formula block:
The katex markup is stripped out and replaced with a plain text span:
Editor:
getSematicHTML:
katex markup should be preserved. At the very least, some identifier that this is a Quill formula block so that katex can be applied on render (this is not a favourable solution though).
Check lists
A single check list is converted to one unordered list per list item.
Editor:
getSemanticHTML:
This needs to be preserved as a single unordered list.
The text was updated successfully, but these errors were encountered: