feat: use stylekit fonts for the editor

standardnotes · Feb 10, 2021 · 5cb3bbf · 5cb3bbf
1 parent 841077c
commit 5cb3bbf
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }