#21894 Unordered and ordered list not showing bullets (#1937)

* basic styles - prevent js errors * css clean up * font increase * Update css vertical rhythm * Update code font size * Style lists Co-authored-by: Freddy Montes <[email protected]>
dotCMS · Mar 31, 2022 · 0b63e2c · 0b63e2c
1 parent d6dfb7d
commit 0b63e2c
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 34 deletions.
diff --git a/apps/dotcms-block-editor/src/app/dot-block-editor/dot-block-editor.component.scss b/apps/dotcms-block-editor/src/app/dot-block-editor/dot-block-editor.component.scss
@@ -3,8 +3,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap");
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
-
-dotcms-block-editor {
+:host {
     border-radius: 4px;
     display: block;
     height: 500px;
@@ -18,46 +17,106 @@ dotcms-block-editor {
         outline-color: $brand-primary;
     }
 
-    tiptap-editor {
+    tiptap-editor ::ng-deep {
         display: block;
         height: 100%;
         overflow-y: auto;
         width: 100%;
-    }
 
-    .ProseMirror {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        display: block;
-        min-height: 100%;
-        outline: none;
-        padding: $spacing-5 $spacing-8;
-
-        pre {
-            background: #0d0d0d;
-            border-radius: 0.5rem;
-            color: #fff;
-            padding: 0.75rem 1rem;
-
-            code {
-                font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-                background: none;
-                color: inherit;
-                font-size: 0.8rem;
+        .ProseMirror {
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            display: block;
+            min-height: 100%;
+            outline: none;
+            padding: $spacing-5 $spacing-8;
+            font: 14px/1.3;
+
+            ul,
+            ol {
+                margin: 0px;
+                padding-inline-start: $spacing-3;
+                margin-left: $spacing-3;
+            }
+
+            ol li {
+                list-style-type: decimal;
+            }
+
+            ul li {
+                list-style-type: disc;
+            }
+
+            li {
+                padding-top: 0.286em;
+            }
+
+            li p {
                 padding: 0;
+                margin: 0;
+            }
+
+            h1 {
+                font-size: 2.43em;
+                line-height: 1.06em;
+                padding-top: 0.176em;
+                margin-bottom: 0.353em;
+            }
+
+            h2 {
+                font-size: 1.93em;
+                line-height: 1.33em;
+                padding-top: 0.333em;
+                margin-bottom: 0.333em;
+            }
+
+            h3 {
+                font-size: 1.57em;
+                line-height: 1.64em;
+                padding-top: 0.5em;
+                margin-bottom: 0.318em;
+            }
+
+            h4 {
+                font-size: 1.29em;
+                line-height: 2em;
+                padding-top: 0.667em;
+                margin-bottom: 0.333em;
             }
-        }
 
-        blockquote {
-            border-left: 3px solid rgba(#0d0d0d, 0.1);
-            padding-left: 1rem;
+            p {
+                font-size: 1em;
+                line-height: 1.29em;
+                padding-top: 0.286em;
+                margin-bottom: 1em;
+            }
+
+            blockquote {
+                margin: $spacing-3;
+                border-left: 3px solid rgba(#0d0d0d, 0.1);
+                padding-left: 1rem;
+            }
+
+            pre {
+                background: #0d0d0d;
+                border-radius: 0.5rem;
+                color: #fff;
+                padding: 0.75rem 1rem;
+
+                code {
+                    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+                        "Courier New", monospace;
+                    background: none;
+                    color: inherit;
+                    padding: 0;
+                }
+            }
         }
     }
-
 }
 
 .highlighted {
-    background: #ACCEF7;
+    background: #accef7;
     border-radius: $border-radius;
 }
diff --git a/apps/dotcms-block-editor/src/app/dot-block-editor/dot-block-editor.component.ts b/apps/dotcms-block-editor/src/app/dot-block-editor/dot-block-editor.component.ts
@@ -23,8 +23,7 @@ import { ViewContainerRef } from '@angular/core';
 @Component({
     selector: 'dotcms-block-editor',
     templateUrl: './dot-block-editor.component.html',
-    styleUrls: ['./dot-block-editor.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    styleUrls: ['./dot-block-editor.component.scss']
 })
 export class DotBlockEditorComponent implements OnInit {
     editor: Editor;

diff --git a/libs/block-editor/src/lib/plugins/dot-bubble-menu.plugin.ts b/libs/block-editor/src/lib/plugins/dot-bubble-menu.plugin.ts
@@ -168,7 +168,7 @@ export class DotBubbleMenuPluginView extends BubbleMenuView {
 
     setMenuItems(doc, from) {
         const node = doc.nodeAt(from);
-        const isDotImage = node.type.name == 'dotImage';
+        const isDotImage = node?.type.name == 'dotImage';
 
         this.component.instance.items = isDotImage ? bubbleMenuImageItems : bubbleMenuItems;
     }

diff --git a/libs/block-editor/src/lib/utils/bubble-menu.utils.ts b/libs/block-editor/src/lib/utils/bubble-menu.utils.ts
@@ -20,7 +20,7 @@ export const shouldShowBubbleMenu = ({ editor, state, from, to }: ShouldShowProp
     const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
 
     // If it's empty or the current node is type dotContent, it will not open.
-    if (empty || isEmptyTextBlock || node.type.name == 'dotContent') {
+    if (empty || isEmptyTextBlock || node?.type.name == 'dotContent') {
         return false;
     }