From 19485bcb9ca05a643e70ea4d8e75642fb9a9013d Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 1 Nov 2021 15:08:11 +0100
Subject: [PATCH] Move styles for text elements to the component

And avoid global styling.
---
 .../common/element-components/text.component.ts |  6 +++++-
 .../text-editor/rich-text-editor.component.css  | 17 +++++++++++++++++
 .../element-properties.component.css            | 17 +++++++++++++++++
 projects/editor/src/styles.css                  | 17 -----------------
 projects/player/src/styles.css                  | 17 -----------------
 5 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index ff86ed0ec..2fedccef8 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -44,7 +44,11 @@ import { TextElement } from '../models/text-element';
     '.marking-bar {position: sticky; top: 0; margin-bottom: 15px}',
     '.marking-button {color: #333}',
     '::ng-deep .text-container p strong {letter-spacing: 0.04em; font-weight: 600}', // bold less bold
-    '::ng-deep .text-container p:empty::after {content: "\\00A0"}' // render empty p
+    '::ng-deep .text-container p:empty::after {content: "\\00A0"}', // render empty p
+    '::ng-deep .text-container h1 {font-weight: bold; font-size: 20px;}',
+    '::ng-deep .text-container h2 {font-weight: bold; font-size: 18px;}',
+    '::ng-deep .text-container h3 {font-weight: bold; font-size: 16px;}',
+    '::ng-deep .text-container h4 {font-weight: normal; font-size: 16px;}'
   ]
 })
 export class TextComponent extends ElementComponent {
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 ee5ad876c..b3961161c 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
@@ -32,3 +32,20 @@ app-rich-text-editor .editor-control-line {
   letter-spacing: 0.04em !important;
   font-weight: 600 !important;
 }
+
+.ProseMirror h1 {
+  font-weight: bold;
+  font-size: 20px;
+}
+.ProseMirror h2 {
+  font-weight: bold;
+  font-size: 18px;
+}
+.ProseMirror h3 {
+  font-weight: bold;
+  font-size: 16px;
+}
+.ProseMirror h4 {
+  font-weight: normal;
+  font-size: 16px;
+}
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css
index aa60c13d2..90f053926 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.css
@@ -46,3 +46,20 @@ mat-divider {
 ::ng-deep .text-text p:empty::after {
   content: "\00A0";
 }
+
+::ng-deep .text-text h1 {
+  font-weight: bold;
+  font-size: 20px;
+}
+:ng-deep .text-text h2 {
+  font-weight: bold;
+  font-size: 18px;
+}
+::ng-deep .text-text h3 {
+  font-weight: bold;
+  font-size: 16px;
+}
+::ng-deep .text-text h4 {
+  font-weight: normal;
+  font-size: 16px;
+}
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index 8651f6131..1bf248483 100644
--- a/projects/editor/src/styles.css
+++ b/projects/editor/src/styles.css
@@ -14,20 +14,3 @@ body {
 
 .drop-list {cursor: grab}
 .drop-list.cdk-drop-list-dragging {cursor: grabbing}
-
-h1 {
-  font-weight: bold;
-  font-size: 20px;
-}
-h2 {
-  font-weight: bold;
-  font-size: 18px;
-}
-h3 {
-  font-weight: bold;
-  font-size: 16px;
-}
-h4 {
-  font-weight: normal;
-  font-size: 16px;
-}
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index 0a315f3fe..2bc7576b2 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -3,20 +3,3 @@ body {
   margin: 0;
   font-family: 'Roboto', sans-serif
 }
-
-h1 {
-  font-weight: bold;
-  font-size: 20px;
-}
-h2 {
-  font-weight: bold;
-  font-size: 18px;
-}
-h3 {
-  font-weight: bold;
-  font-size: 16px;
-}
-h4 {
-  font-weight: normal;
-  font-size: 16px;
-}
-- 
GitLab