QuillJS uses references to its own CSS for formatting HTML #102

New Issue

davmo · 2025-12-24T14:30:48Z

davmo commented

2025-12-24 14:30:48 +00:00

I was helping Archer72 with his notes for show 4527 recently and noticed that QuillJS apparently generates HTML which relies on its own CSS definitions. Elements like lists are not implemented with simple nested <ul><li> sequences but use class attributes that start with ql-.

For example (slightly reformatted for space):

<ul>
<li>VNC server for remote GUI</li>
<li class="ql-indent-1">virt-manager server</li>
</ul>

The second <li> would normally be a "child" of the first in more "standard" HTML.

Perhaps there are two solutions to the problems this causes:

Add the QuillJS CSS to the HPR CSS. This will not help when shows are uploaded to the IA of course.
Reformat HTML which has been generated by QuillJS to make it hierarchical and remove the ql- CSS references. This would generate more universally acceptable HTML, but it's not trivial to code.

I looked on the QuillJS Github repo to see if it was possible to find the CSS the tool uses, but didn't find anything in the time I had. I did see this in the HTML for show 4527:

<pre class="ql-syntax" spellcheck="false">

sudo apt install tigervnc-common
</pre>

I was helping `Archer72` with his notes for show 4527 recently and noticed that QuillJS apparently generates HTML which relies on its own CSS definitions. Elements like lists are not implemented with simple nested `<ul><li>` sequences but use `class` attributes that start with `ql-`. For example (slightly reformatted for space): ``` <ul> <li>VNC server for remote GUI</li> <li class="ql-indent-1">virt-manager server</li> </ul> ``` The second `<li>` would normally be a "child" of the first in more "standard" HTML. Perhaps there are two solutions to the problems this causes: 1. Add the QuillJS CSS to the HPR CSS. This will not help when shows are uploaded to the IA of course. 2. Reformat HTML which has been generated by QuillJS to make it hierarchical and remove the `ql-` CSS references. This would generate more universally acceptable HTML, but it's not trivial to code. I looked on the QuillJS Github repo to see if it was possible to find the CSS the tool uses, but didn't find anything in the time I had. I did see this in the HTML for show 4527: ``` <pre class="ql-syntax" spellcheck="false"> sudo apt install tigervnc-common </pre> ```

ken_fallon commented

2025-12-24 15:53:29 +00:00

SELECT * FROM epsWHEREnotesLIKE '%class="ql-%';
20 total

`SELECT * FROM `eps` WHERE `notes` LIKE '%class="ql-%'; ` 20 total

ken_fallon commented

2025-12-24 17:16:51 +00:00

@davmo the best would be to have QuillJS not produce this in the first place.

<h1>H1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>normall</p>
<ol>
<li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>number 1</li>
<li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>number 2</li>
<li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>number 3</li>
</ol>
<p>normal</p>
<ol>
<li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>bullet</li>
<li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>bullet</li>
<li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>bullet</li>
</ol>
<p>normal</p>
<p><strong>bold</strong></p>
<p><em>italic</em></p>
<p><u>underline</u></p>
<p><s>strikethrough</s></p>
<blockquote>quote</blockquote>
<div class="ql-code-block-container" spellcheck="false">
<div class="ql-code-block">code</div></div>
<p><a href="https://example.com" rel="noopener noreferrer" target="_blank">link</a></p>
<p>image</p><p><img src="hpr4597_image_1.png"></p>

@davmo the best would be to have QuillJS not produce this in the first place. ``` <h1>H1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <p>normall</p> <ol> <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>number 1</li> <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>number 2</li> <li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>number 3</li> </ol> <p>normal</p> <ol> <li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>bullet</li> <li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>bullet</li> <li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>bullet</li> </ol> <p>normal</p> <p><strong>bold</strong></p> <p><em>italic</em></p> <p><u>underline</u></p> <p><s>strikethrough</s></p> <blockquote>quote</blockquote> <div class="ql-code-block-container" spellcheck="false"> <div class="ql-code-block">code</div></div> <p><a href="https://example.com" rel="noopener noreferrer" target="_blank">link</a></p> <p>image</p><p><img src="hpr4597_image_1.png"></p> ```

davmo commented

2025-12-24 17:53:16 +00:00

You are right of course. My (limited) researches didn't show how that could be done, but maybe you know better?

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: HPR/hpr_hub#102