From a21873acc0c6a422ac2338a168a6e5ce11b2d28c Mon Sep 17 00:00:00 2001
From: Xavier Leune <xleune@ccmbenchmark.com>
Date: Mon, 31 May 2021 14:43:20 +0200
Subject: [PATCH] Show markdown preview when editing a note

---
 README.md                   |  2 +-
 lib/note-content-editor.tsx | 22 +++++++++++++++++-----
 lib/utils/note-utils.ts     |  2 +-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 837e8621c..1f16d947c 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ A Simplenote [React](https://reactjs.org/) client packaged in [Electron](https:/
 6. For all logging from Electron to be printed to the terminal (e.g. `console.log` statements within `app.js`), you might need to set `env ELECTRON_ENABLE_LOGGING=1`.
 7. Sign up for a new account within the app. Use the account for **testing purposes only** as all note data will be periodically cleared out on the server.
 
-_Note: Simplenote API features such as sharing and publishing will not work with development builds. Due to a limitation of `make` installation paths used for build cannot have spaces._
+_Note: Simplenote API features such as sharing and publishing will not work with development builds. Due to a limitation of `make` installation paths used for build cannot have spaces. You also need nodejs 12 max to get this app built._
 
 ## Building
 
diff --git a/lib/note-content-editor.tsx b/lib/note-content-editor.tsx
index f141990ac..a8f21dcb4 100644
--- a/lib/note-content-editor.tsx
+++ b/lib/note-content-editor.tsx
@@ -18,7 +18,7 @@ import { searchNotes, tagsFromSearch } from './search';
 import actions from './state/actions';
 import * as selectors from './state/selectors';
 import { getTerms } from './utils/filter-notes';
-import { noteTitleAndPreview } from './utils/note-utils';
+import { noteTitleAndPreview, isMarkdown } from './utils/note-utils';
 import { isMac, isSafari } from './utils/platform';
 import {
   withCheckboxCharacters,
@@ -561,7 +561,19 @@ class NoteContentEditor extends Component<Props> {
     Editor.defineTheme('simplenote', {
       base: 'vs',
       inherit: true,
-      rules: [{ background: 'FFFFFF', foreground: '#2c3338' }],
+      rules: [
+        { background: 'FFFFFF', foreground: '#2c3338' },
+        { token: 'keyword.md', foreground: '#2c3338', fontStyle: 'bold' },
+        { token: 'variable.source' },
+        { token: 'string.md', background: '#fdf6e3', foreground: '#657b83' },
+        { token: 'comment.md', foreground: '#a7aaad' },
+        { token: 'keyword.table', foreground: '#a7aaad' },
+        {
+          token: 'keyword.table.header',
+          foreground: '#2c3338',
+          fontStyle: 'bold',
+        },
+      ],
       colors: {
         'editor.foreground': '#2c3338', // $studio-gray-80 AKA theme-color-fg
         'editor.background': '#ffffff',
@@ -1162,7 +1174,7 @@ class NoteContentEditor extends Component<Props> {
   };
 
   render() {
-    const { lineLength, noteId, searchQuery, theme } = this.props;
+    const { lineLength, noteId, searchQuery, theme, note } = this.props;
     const { content, editor, overTodo } = this.state;
     const searchMatches = searchQuery ? this.searchMatches() : [];
 
@@ -1191,7 +1203,7 @@ class NoteContentEditor extends Component<Props> {
             key={noteId}
             editorDidMount={this.editorReady}
             editorWillMount={this.editorInit}
-            language="plaintext"
+            language={isMarkdown(note) ? 'markdown' : 'plaintext'}
             theme={theme === 'dark' ? 'simplenote-dark' : 'simplenote'}
             onChange={this.updateNote}
             options={{
@@ -1210,7 +1222,7 @@ class NoteContentEditor extends Component<Props> {
               lineHeight: 24,
               lineNumbers: 'off',
               links: true,
-              matchBrackets: 'never',
+              matchBrackets: isMarkdown(note) ? 'always' : 'never',
               minimap: { enabled: false },
               occurrencesHighlight: false,
               overviewRulerBorder: false,
diff --git a/lib/utils/note-utils.ts b/lib/utils/note-utils.ts
index 005764413..82db7a977 100644
--- a/lib/utils/note-utils.ts
+++ b/lib/utils/note-utils.ts
@@ -146,7 +146,7 @@ export const noteTitleAndPreview = (
   return result;
 };
 
-function isMarkdown(note: T.Note): boolean {
+export function isMarkdown(note: T.Note): boolean {
   return note.systemTags.includes('markdown');
 }