From f86e1fe97e3ee7a0758e22dfc8de313c5c36ad9c Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Fri, 12 Aug 2022 10:47:11 -0400
Subject: [PATCH] feat: update editor text to match studio styling

---
 src/editors/containers/TextEditor/hooks.js  |   2 +
 src/editors/data/constants/tinyMCEStyles.js | 136 ++++++++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 src/editors/data/constants/tinyMCEStyles.js

diff --git a/src/editors/containers/TextEditor/hooks.js b/src/editors/containers/TextEditor/hooks.js
index f5a7e69cb..20ba66003 100644
--- a/src/editors/containers/TextEditor/hooks.js
+++ b/src/editors/containers/TextEditor/hooks.js
@@ -4,6 +4,7 @@ import {
 
 import { StrictDict } from '../../utils';
 import tinyMCE from '../../data/constants/tinyMCE';
+import tinyMCEStyles from '../../data/constants/tinyMCEStyles';
 import pluginConfig from './pluginConfig';
 import * as appHooks from '../../hooks';
 import * as module from './hooks';
@@ -75,6 +76,7 @@ export const editorConfig = ({
   initialValue: blockValue ? blockValue.data.data : '',
   init: {
     ...pluginConfig.config,
+    content_style: tinyMCEStyles,
     contextmenu: 'link table',
     imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)],
     imagetools_toolbar: pluginConfig.imageToolbar,
diff --git a/src/editors/data/constants/tinyMCEStyles.js b/src/editors/data/constants/tinyMCEStyles.js
new file mode 100644
index 000000000..d7b132ac0
--- /dev/null
+++ b/src/editors/data/constants/tinyMCEStyles.js
@@ -0,0 +1,136 @@
+export default `@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
+.mce-content-body {
+    padding: 10px;
+    background-color: #fff;
+    font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #3c3c3c;
+    scrollbar-3dlight-color: #F0F0EE;
+    scrollbar-arrow-color: #676662;
+    scrollbar-base-color: #F0F0EE;
+    scrollbar-darkshadow-color: #DDDDDD;
+    scrollbar-face-color: #E0E0DD;
+    scrollbar-highlight-color: #F0F0EE;
+    scrollbar-shadow-color: #F0F0EE;
+    scrollbar-track-color: #F5F5F5;
+}
+
+.mce-content-body h1,
+.mce-content-body .hd-1 {
+    color: #3c3c3c;
+    font-weight: normal;
+    font-size: 2em;
+    line-height: 1.4em;
+    margin: 0 0 1.41575em 0;
+}
+
+.mce-content-body h2,
+.mce-content-body .hd-2 {
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+    color: #646464;
+    font-weight: 300;
+    font-size: 1.2em;
+    line-height: 1.2em;
+    text-transform: uppercase;
+}
+
+.mce-content-body h3,
+.mce-content-body .hd-3 {
+  margin: 0 0 10px 0;
+  font-size: 1.1125em;
+  font-weight: 400;
+  text-transform: initial;
+}
+.mce-content-body .hd-3,
+.mce-content-body h4,
+.mce-content-body .hd-4,
+.mce-content-body h5,
+.mce-content-body .hd-5,
+.mce-content-body h6,
+.mce-content-body .hd-6 {
+    margin: 0 0 10px 0;
+    font-weight: 600;
+}
+
+.mce-content-body h4,
+.mce-content-body .hd-4 {
+  font-size: 1em;
+}
+
+.mce-content-body h5,
+.mce-content-body .hd-5 {
+    font-size: 0.83em;
+}
+
+.mce-content-body h6,
+.mce-content-body .hd-6 {
+    font-size: 0.75em;
+}
+
+.mce-content-body p {
+    margin-bottom: 1.416em;
+    font-size: 1em;
+    line-height: 1.6em !important;
+    color: #3c3c3c;
+}
+
+.mce-content-body em, .mce-content-body i {
+    font-style: italic;
+}
+
+.mce-content-body strong, .mce-content-body b {
+    font-weight: bold;
+}
+
+.mce-content-body p + p, .mce-content-body ul + p, .mce-content-body ol + p {
+    margin-top: 20px;
+}
+
+.mce-content-body ol, .mce-content-body ul {
+    margin: 1em 0;
+    padding: 0 0 0 1em;
+    color: #3c3c3c;
+
+}
+
+.mce-content-body ol li, .mce-content-body ul li {
+    margin-bottom: 0.708em;
+}
+
+.mce-content-body ol {
+    list-style: decimal outside none;
+    margin: 0;
+}
+
+.mce-content-body ul {
+    list-style: disc outside none;
+    margin: 0;
+}
+
+.mce-content-body a, .mce-content-body a:link, .mce-content-body a:visited, .mce-content-body a:hover, .mce-content-body a:active {
+    color: #0075b4;
+    text-decoration: none;
+}
+
+.mce-content-body img {
+    max-width: 100%;
+    height: auto;
+}
+
+.mce-content-body pre {
+  margin: 1em 0;
+  color: #3c3c3c;
+  font-family: monospace, serif;
+  font-size: 1em;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.mce-content-body code {
+    font-family: monospace, serif;
+    background: none;
+    color: #3c3c3c;
+    padding: 0;
+}`;