From 4ffbd0dd598d58b8db638d2b1bd26f7e5706a67f Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 21 Feb 2022 18:45:30 +0100
Subject: [PATCH] [editor] Fix TextEditor ViewEncapsulation
Set back to the default setting to prevent CSS settings to spill over
into other parts of the application.
---
.../rich-text-editor.component.css | 20 +++++++++----------
.../text-editor/rich-text-editor.component.ts | 3 +--
2 files changed, 11 insertions(+), 12 deletions(-)
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.css b/projects/editor/src/app/text-editor/rich-text-editor.component.css
index 6b33b1f33..3544b6c97 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.css
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.css
@@ -1,26 +1,26 @@
-div.ProseMirror {
+:host ::ng-deep div.ProseMirror {
min-height: 300px;
border: 1px solid;
}
-.ProseMirror p strong {
+:host ::ng-deep .ProseMirror p strong {
letter-spacing: 0.04em !important;
font-weight: 600 !important;
}
-.ProseMirror h1 {
+:host ::ng-deep .ProseMirror h1 {
font-weight: bold;
font-size: 20px;
}
-.ProseMirror h2 {
+:host ::ng-deep .ProseMirror h2 {
font-weight: bold;
font-size: 18px;
}
-.ProseMirror h3 {
+:host ::ng-deep .ProseMirror h3 {
font-weight: bold;
font-size: 16px;
}
-.ProseMirror h4 {
+:host ::ng-deep .ProseMirror h4 {
font-weight: normal;
font-size: 16px;
}
@@ -29,7 +29,7 @@ mark {
color: inherit;
}
-aspect-rich-text-editor button.active {
+button.active {
background-color: lightgrey;
}
@@ -62,15 +62,15 @@ aspect-rich-text-editor button.active {
top: -7px;
}
-.indent-size-input .mat-form-field-flex {
+:host ::ng-deep .indent-size-input .mat-form-field-flex {
padding: 5px;
}
-.indent-size-input .mat-form-field-infix {
+:host ::ng-deep .indent-size-input .mat-form-field-infix {
padding: .25em 0 .15em 0;
}
-fieldset {
+:host fieldset {
height: 55px;
box-sizing: content-box !important;
border-radius: 3px;
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.ts b/projects/editor/src/app/text-editor/rich-text-editor.component.ts
index 5e470888e..09bc56f45 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.ts
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.ts
@@ -30,8 +30,7 @@ import TextFieldComponentExtension from './angular-node-views/text-field-compone
@Component({
selector: 'aspect-rich-text-editor',
templateUrl: './rich-text-editor.component.html',
- styleUrls: ['./rich-text-editor.component.css'],
- encapsulation: ViewEncapsulation.None
+ styleUrls: ['./rich-text-editor.component.css']
})
export class RichTextEditorComponent implements AfterViewInit {
@Input() content!: string | Record<string, any>;
--
GitLab