Bulleted lists and indentation don't play nicely with one another

[Deadpikle]

Describe the bug

[Bulleted] Lists and indentation look/work great on an Etherpad instance (on the web), but when exporting to HTML, they do not appear the same way they do online.

To Reproduce

1. Open up a new pad. You can replicate this on https://video.etherpad.com
2. Type in some generic string ("hello, world!")
3. Indent that string 1+ times. Note that everything looks fine.
4. Export to HTML and open up the exported file.
5. The indented item is suddenly in a bulleted list!
6. Indenting more causes it to get more bullets:

Internally, looks like the exported html sticks things in a ul > li, and the ul has class indent, which would need the following to fix it:

.indent {
   list-style-type: none;
}

However, even with that CSS fix, there are similar issues if you:

1. Indent a few times
2. Start a bulleted list (so the bullet starts indented)
3. Type in something just so things aren't invisible
4. Export to html -> now the ul has class bullet and that CSS fix above won't fix things.

Expected behavior

The exported HTML should look similar to the view seen on Etherpad. I am guessing fixing the HTML would help fix PDF/docx export.

The CSS fix would work (even if starting a bulleted list that was initially indented) if the ul classes were indent -> indent -> bullet rather than bullet -> bullet -> bullet, I suppose...but that might not fix all the use cases.

Desktop (please complete the following information):

• Browser: Firefox
• Version: Whatever version video.etherpad.com is running

Additional context

Short Discord conversation starts here: https://discordapp.com/channels/741309013593030667/741309013593030670/768520980062011402

I have worked on some desktop software in the past that uses margin-left to indent things. I don't know if that sort of thing would be helpful here without knowing more about how Etherpad works internally.

Related/similar issue

Not sure if this should be posted as a separate issue or not. Open a pad, indent a few times, then start a numbered list. Etherpad displays the following:

[JohnMcLear]

Confirmed. Also somewhere I documented why this behaviour exists but can't remember where ;/

[JohnMcLear]

Distilling this down the final issue that is left to resolve..

1. Indent a few times
2. Start a bulleted list (so the bullet starts indented)
3. Type in something just so things aren't invisible
4. Export to html

Expected output

<ul class="indent">
  <li>
    <ul class="bullet">
      <li>test
    </ul>
  </li>
</ul>

Actual output

<ul class="bullet">
  <li>
    <ul class="bullet">
      <li>test
    </ul>
  </li>
</ul>

[JohnMcLear]

I tried with a fix https://github.com/ether/etherpad-lite/pull/4950/commits/519d839e863bb585b1bb38bf10649507950ac863 but it appears to be breaking other functionality around exporting of lists. This could be one where we are chasing our tails forever to try and get a WYSIWYG input to exactly match HTML output.

I had a think about CSS only based approaches and I couldn't think of any. It might be that someone like @seballot has a better brain for these things tho.