BookStack icon indicating copy to clipboard operation
BookStack copied to clipboard

Numbered and Bullet point indented lists display oddly when using multiple levels of indentation

Open jediblair opened this issue 3 years ago • 3 comments

Describe the Bug

When using multiple levels of indent in numbered or bullet lists, where we jump an extra indent level from the previous line, we seem to see excess bullet/numbers leading up to the indent.

This behavior seems to occur on the sandbox environment.

Steps to Reproduce

add a multiple level bullet point list, skipping one of the levels of indent, and it will show excess bullets.

Expected Behaviour

text should just be indented to the correct level without the leading bullet points.

Screenshots or Additional Context

image

Browser Details

Chrome 104

Exact BookStack Version

v22.07.3

PHP Version

8.1

Hosting Environment

Ubuntu 22.04

jediblair avatar Aug 29 '22 22:08 jediblair

Thanks for reporting @jediblair.

I can confirm there's currently a difference between display of this in-WYSIWYG editor and on page-view which I'd see as the primary issue here.

Not totally sure what the correct display of multi-level nesting should be, think there's an argument to still show other list markings, but force nested levels to their own line. Will need to play with other platforms and play with nested markdown list behaviour to decide on an approach.

ssddanbrown avatar Aug 30 '22 12:08 ssddanbrown

Relevant TinyMCE issue: https://github.com/tinymce/tinymce/issues/6826 What I believe is relevant TinyMCE code: https://github.com/tinymce/tinymce/blob/124bb72f8d5ac9daa21a5b2bb9e866a47c06e6b9/modules/tinymce/src/plugins/lists/main/ts/core/NormalizeLists.ts#L21

Going to be a pain to work against TinyMCE here. Commonmark does not seem to understand nested (empty) lists either.

ssddanbrown avatar Sep 05 '22 18:09 ssddanbrown

I've been hitting this issue as well. The issue only seems to occur when using the increase indentation button. Using the indent button on an ordered list gets the weird behavior described above. However, manually adding something like style="padding-left: <someNumber>px;" to the <ol> element works just fine. Given the not so pretty nature of the HTML code, this workaround can be a bit of a chore.

patbcc avatar Sep 12 '22 14:09 patbcc

This has now been addressed in d933fe5dcec5189a235058ff7852d3af83bf893f by accepting the editor's default formatting option for list elements. Will be part of the next feature release. Note: this is on formatting detail, or list structure option, that would be lost if you ever switch the editor to markdown (Clean content).

If additional margin is desired for all nested lists, it would be better to approach this via style overrides instead.

ssddanbrown avatar Sep 27 '22 18:09 ssddanbrown