From 9d7dccfac0c2af9e8cd1ce5d0ff06ffcde3e3108 Mon Sep 17 00:00:00 2001
From: Adrian Dimitrov <dimitrov.adrian@gmail.com>
Date: Tue, 16 Feb 2021 18:30:02 +0200
Subject: [PATCH] Fix readonly colors; Fix font selecting (#4086)

---
 .../interfaces/wysiwyg/get-editor-styles.ts    | 18 +++++++++++-------
 app/src/interfaces/wysiwyg/wysiwyg.vue         |  4 ++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/src/interfaces/wysiwyg/get-editor-styles.ts b/app/src/interfaces/wysiwyg/get-editor-styles.ts
index 77812e37f8..853eaba6a5 100644
--- a/app/src/interfaces/wysiwyg/get-editor-styles.ts
+++ b/app/src/interfaces/wysiwyg/get-editor-styles.ts
@@ -2,19 +2,23 @@ function cssVar(name: string) {
 	return getComputedStyle(document.body).getPropertyValue(name);
 }
 
-export default function getEditorStyles(font: 'sans-serif' | 'serif' | 'monospace', disabled: boolean) {
+export default function getEditorStyles(font: 'sans-serif' | 'serif' | 'monospace') {
 	return `
 body {
-	color: ${disabled ? cssVar('--foreground-subdued') : cssVar('--foreground-normal')};
-	background-color: ${disabled ? cssVar('--background-subdued') : cssVar('--background-page')};
+	color: ${cssVar('--foreground-normal')};
+	background-color: ${cssVar('--background-page')};
 	margin: 20px;
 	font-family: 'Roboto', sans-serif;
 	-webkit-font-smoothing: antialiased;
 	text-rendering: optimizeLegibility;
 	-moz-osx-font-smoothing: grayscale;
 }
+body.mce-content-readonly {
+	color: ${cssVar('--foreground-subdued')};
+	background-color: ${cssVar('--background-subdued')};
+}
 h1 {
-	font-family: ${cssVar(`--font-${font}`)}, serif;
+	font-family: ${cssVar(`--family-${font}`)}, serif;
 	font-size: 44px;
 	line-height: 52px;
 	font-weight: 300;
@@ -56,7 +60,7 @@ h6 {
 	margin-bottom: 0;
 }
 p {
-	font-family: ${cssVar(`--font-${font}`)}, serif;
+	font-family: ${cssVar(`--family-${font}`)}, serif;
 	font-size: 16px;
 	line-height: 32px;
 	margin-top: 20px;
@@ -66,7 +70,7 @@ a {
 	color: #546e7a;
 }
 ul, ol {
-	font-family: ${cssVar(`--font-${font}`)}, serif;
+	font-family: ${cssVar(`--family-${font}`)}, serif;
 	font-size: 18px;
 	line-height: 34px;
 	margin: 24px 0;
@@ -99,7 +103,7 @@ pre {
 	overflow: auto;
 }
 blockquote {
-	font-family: ${cssVar(`--font-${font}`)}, serif;
+	font-family: ${cssVar(`--family-${font}`)}, serif;
 	font-size: 18px;
 	line-height: 34px;
 	border-left: 2px solid #546e7a;
diff --git a/app/src/interfaces/wysiwyg/wysiwyg.vue b/app/src/interfaces/wysiwyg/wysiwyg.vue
index db29b5776e..20b86a115d 100644
--- a/app/src/interfaces/wysiwyg/wysiwyg.vue
+++ b/app/src/interfaces/wysiwyg/wysiwyg.vue
@@ -89,7 +89,7 @@ export default defineComponent({
 		},
 		font: {
 			type: String as PropType<'sans-serif' | 'serif' | 'monospace'>,
-			default: 'serif',
+			default: 'sans-serif',
 		},
 		customFormats: {
 			type: Array as PropType<CustomFormat[]>,
@@ -140,7 +140,7 @@ export default defineComponent({
 				skin: false,
 				skin_url: false,
 				content_css: false,
-				content_style: getEditorStyles(props.font as 'sans-serif' | 'serif' | 'monospace', props.disabled),
+				content_style: getEditorStyles(props.font as 'sans-serif' | 'serif' | 'monospace'),
 				plugins:
 					'media table hr lists image link pagebreak code insertdatetime autoresize paste preview fullscreen directionality',
 				branding: false,