Updated visual consistency of lists and markdown task list rendering

- Numbered and bullet list margins have been made consistent
   - Numbered lists margins were increase at some point to handle 3-digit
  numbers, Normal bullet margins updated to match this.
- Consistent margin for sub-lists.
- System back-end markdown renderer (For pages) updated with a custom
  list item renderer to apply class for to align with front-end renderer.
   - This means that task list items will be consistent with the preview
     and not render a number/bullet.
- Indentation styles for task list items fixed to be visually indented.

For #2854 and #2837

diff --git a/app/Entities/Tools/Markdown/CustomListItemRenderer.php b/app/Entities/Tools/Markdown/CustomListItemRenderer.php
new file mode 100644 (file)
index 0000000..9d6ec7c
--- /dev/null
+++ b/app/Entities/Tools/Markdown/CustomListItemRenderer.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace BookStack\Entities\Tools\Markdown;
+
+use League\CommonMark\Block\Element\AbstractBlock;
+use League\CommonMark\Block\Element\ListItem;
+use League\CommonMark\Block\Element\Paragraph;
+use League\CommonMark\Block\Renderer\BlockRendererInterface;
+use League\CommonMark\Block\Renderer\ListItemRenderer;
+use League\CommonMark\ElementRendererInterface;
+use League\CommonMark\Extension\TaskList\TaskListItemMarker;
+use League\CommonMark\HtmlElement;
+
+class CustomListItemRenderer implements BlockRendererInterface
+{
+    protected $baseRenderer;
+
+    public function __construct()
+    {
+        $this->baseRenderer = new ListItemRenderer();
+    }
+
+    /**
+     * @return HtmlElement|string|null
+     */
+    public function render(AbstractBlock $block, ElementRendererInterface $htmlRenderer, bool $inTightList = false)
+    {
+        $listItem = $this->baseRenderer->render($block, $htmlRenderer, $inTightList);
+
+        if ($this->startsTaskListItem($block)) {
+            $listItem->setAttribute('class', 'task-list-item');
+        }
+
+        return $listItem;
+    }
+
+    private function startsTaskListItem(ListItem $block): bool
+    {
+        $firstChild = $block->firstChild();
+
+        return $firstChild instanceof Paragraph && $firstChild->firstChild() instanceof TaskListItemMarker;
+    }
+}
\ No newline at end of file

diff --git a/app/Entities/Tools/PageContent.php b/app/Entities/Tools/PageContent.php
index 7a7dd407be7edbaa1a4a962a70b8f510272ca64c..dfc8e332b6fe14a6de0efa63b0e2d843dd14cac5 100644 (file)
--- a/app/Entities/Tools/PageContent.php
+++ b/app/Entities/Tools/PageContent.php
@@ -3,7 +3,9 @@
 namespace BookStack\Entities\Tools;
 
 use BookStack\Entities\Models\Page;
+use BookStack\Entities\Tools\Markdown\CustomListItemRenderer;
 use BookStack\Entities\Tools\Markdown\CustomStrikeThroughExtension;
+use BookStack\Entities\Tools\Markdown\CustomTaskListMarkerRenderer;
 use BookStack\Exceptions\ImageUploadException;
 use BookStack\Facades\Theme;
 use BookStack\Theming\ThemeEvents;
@@ -13,10 +15,14 @@ use DOMDocument;
 use DOMNodeList;
 use DOMXPath;
 use Illuminate\Support\Str;
+use League\CommonMark\Block\Element\ListItem;
 use League\CommonMark\CommonMarkConverter;
 use League\CommonMark\Environment;
 use League\CommonMark\Extension\Table\TableExtension;
 use League\CommonMark\Extension\TaskList\TaskListExtension;
+use League\CommonMark\Extension\TaskList\TaskListItemMarker;
+use League\CommonMark\Extension\TaskList\TaskListItemMarkerParser;
+use League\CommonMark\Extension\TaskList\TaskListItemMarkerRenderer;
 
 class PageContent
 {
@@ -64,6 +70,8 @@ class PageContent
         $environment = Theme::dispatch(ThemeEvents::COMMONMARK_ENVIRONMENT_CONFIGURE, $environment) ?? $environment;
         $converter = new CommonMarkConverter([], $environment);
 
+        $environment->addBlockRenderer(ListItem::class, new CustomListItemRenderer(), 10);
+
         return $converter->convertToHtml($markdown);
     }
 

diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index 7a0987c66c1a1f1c87d71d210e32eb698345270a..cbe3cd4be02b25158f261a293c9015274f25c8a6 100644 (file)
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -280,13 +280,9 @@ ul, ol {
   }
 }
 ul {
-  padding-left: $-m * 1.3;
-  padding-right: $-m * 1.3;
   list-style: disc;
   ul {
     list-style: circle;
-    margin-top: 0;
-    margin-bottom: 0;
   }
   label {
     margin: 0;
@@ -295,23 +291,33 @@ ul {
 
 ol {
   list-style: decimal;
-  padding-left: $-m * 2;
-  padding-right: $-m * 2;
+}
+
+ol, ul {
+  padding-left: $-m * 2.0;
+  padding-right: $-m * 2.0;
+}
+
+li > ol, li > ul {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-left: $-m * 1.2;
+  padding-right: $-m * 1.2;
 }
 
 li.checkbox-item, li.task-list-item {
   list-style: none;
-  margin-left: - ($-m * 1.3);
+  margin-left: -($-m * 1.2);
   input[type="checkbox"] {
     margin-right: $-xs;
   }
-}
-
-li > ol, li > ul {
-  margin-block-end: 0px;
-  margin-block-start: 0px;
-  padding-block-end: 0px;
-  padding-block-start: 0px;
+  li.checkbox-item, li.task-list-item {
+    margin-left: $-xs;
+  }
 }
 
 /*