From 5cb3bbf4359fd8a36a0db6f1df0c06651abbd6d3 Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Wed, 10 Feb 2021 10:42:45 +0100
Subject: [PATCH] feat: use stylekit fonts for the editor

---
 .../javascripts/views/editor/editor-view.pug  |  2 +-
 .../javascripts/views/editor/editor_view.ts   | 27 +++++++------------
 app/assets/stylesheets/_editor.scss           |  1 -
 app/assets/stylesheets/_ui.scss               |  3 +++
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/views/editor/editor-view.pug b/app/assets/javascripts/views/editor/editor-view.pug
index 63083973b..4784a9151 100644
--- a/app/assets/javascripts/views/editor/editor-view.pug
+++ b/app/assets/javascripts/views/editor/editor-view.pug
@@ -209,7 +209,7 @@
       on-load='self.onEditorLoad',
       application='self.application'
       )
-    textarea#note-text-editor.editable(
+    textarea#note-text-editor.editable.font-editor(
       dir='auto',
       ng-attr-spellcheck='{{self.state.spellcheck}}',
       ng-change='self.contentChanged()',
diff --git a/app/assets/javascripts/views/editor/editor_view.ts b/app/assets/javascripts/views/editor/editor_view.ts
index c35674854..c0f67f836 100644
--- a/app/assets/javascripts/views/editor/editor_view.ts
+++ b/app/assets/javascripts/views/editor/editor_view.ts
@@ -47,11 +47,6 @@ const ElementIds = {
   EditorContent: 'editor-content',
   NoteTagsComponentContainer: 'note-tags-component-container'
 };
-const Fonts = {
-  DesktopMonospaceFamily: `Menlo,Consolas,'DejaVu Sans Mono',monospace`,
-  WebMonospaceFamily: `monospace`,
-  SansSerifFamily: `inherit`
-};
 
 type NoteStatus = {
   message?: string
@@ -945,20 +940,18 @@ class EditorViewCtrl extends PureViewCtrl<unknown, EditorState> {
   }
 
   reloadFont() {
-    const editor = document.getElementById(
-      ElementIds.NoteTextEditor
-    );
-    if (!editor) {
-      return;
-    }
+    const root = document.querySelector(':root') as HTMLElement;
+    const propertyName = '--sn-stylekit-editor-font-family';
     if (this.state.monospaceFont) {
-      if (this.state.isDesktop) {
-        editor.style.fontFamily = Fonts.DesktopMonospaceFamily;
-      } else {
-        editor.style.fontFamily = Fonts.WebMonospaceFamily;
-      }
+      root.style.setProperty(
+        propertyName,
+        'var(--sn-stylekit-monospace-font)'
+      );
     } else {
-      editor.style.fontFamily = Fonts.SansSerifFamily;
+      root.style.setProperty(
+        propertyName,
+        'var(--sn-stylekit-sans-serif-font)'
+      );
     }
   }
 
diff --git a/app/assets/stylesheets/_editor.scss b/app/assets/stylesheets/_editor.scss
index 18ac1d6a3..610c5324b 100644
--- a/app/assets/stylesheets/_editor.scss
+++ b/app/assets/stylesheets/_editor.scss
@@ -144,7 +144,6 @@ $heading-height: 75px;
   }
 
   .editable {
-    font-family: monospace;
     overflow-y: scroll;
     width: 100%;
     background-color: var(--sn-stylekit-editor-background-color);
diff --git a/app/assets/stylesheets/_ui.scss b/app/assets/stylesheets/_ui.scss
index 76c23e573..e1c8ff258 100644
--- a/app/assets/stylesheets/_ui.scss
+++ b/app/assets/stylesheets/_ui.scss
@@ -172,6 +172,9 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   fill: currentColor;
 }
 
+.font-editor {
+  font-family: var(--sn-stylekit-editor-font-family);
+}
 .font-semibold {
   font-weight: 600 !important;
 }