TextEditor: nested lists not semantically returned

[maximlt]

Nested lists entered in the TextEditor aren't returned semantically nested on the value parameter. Instead, they're returned flattened and with some custom classes (ql-indent-<level>) that Quill, the Javascript library used to implement the editor, uses in the editor to visually indent the items.

import panel as pn

pn.extension('texteditor')

nested_bullets = """
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
"""

editor = pn.widgets.TextEditor(value=nested_bullets)
html = pn.pane.HTML(w.param.value)

pn.Row(editor, html).servable()

This is apparently a pretty old issue in the Quill (slab/quill#979) . In Panel, we get the content of the editor in the front-end using innerHTML (

panel/panel/models/quill.ts

Line 166 in 1f821d6

this.model.text = this._editor.innerHTML

) ), so we get the “incorrect” HTML that library uses. Potential solutions:

1. Update the TextEditor to use getSemanticHTML instead of innerHTML that was added in Quill 2.0 (https://quilljs.com/docs/api#getsemantichtml):
   • We are is still using Quill 1 (intention was to update Quill when it would officially support being rendered in the Virtual DOM which isn’t yet the case), so that needs to be updated first
   • Check whether getSemanticHTML is really a good fit (e.g. search related issues) and doesn't introduce other discrepancies.
2. Look for other alternatives like Fix for Quill.js issue with list indent (use of css class instead of pure HTML) or https://github.com/nozer/quill-delta-to-html
3. Implement the conversion of nested lists in Python

Preference for option 1.