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 index ccdc13f20b..0fdfa2eca1 100644 --- 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 index 10f8025ca9..3afc63d7f3 100644 --- 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 index 5d0b52b8c5..c0b378f985 100644 --- 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 index 7e6fb5768f..8ef510721d 100644 --- 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; }