Desktop: Fixes #3440: Improve Markdown rendering in CodeMirror, in pa…

…rticular for math expressions (#3448)

.eslintignore

@@ -107,6 +107,7 @@ ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/index.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/types.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useCursorUtils.js
+ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useLineSorting.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useListIdent.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js

.gitignore

@@ -97,6 +97,7 @@ ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/index.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/types.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useCursorUtils.js
+ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useLineSorting.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useListIdent.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js

ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx

@@ -380,7 +380,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				<Editor
 					value={props.content}
 					ref={editorRef}
-					mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'xml' : 'gfm'}
+					mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'xml' : 'joplin-markdown'}
 					theme={styles.editor.codeMirrorTheme}
 					style={editorStyle}
 					readOnly={props.visiblePanes.indexOf('editor') < 0}

ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx

@@ -13,17 +13,17 @@ import useListIdent from './utils/useListIdent';
 import useScrollUtils from './utils/useScrollUtils';
 import useCursorUtils from './utils/useCursorUtils';
 import useLineSorting from './utils/useLineSorting';
+import useJoplinMode from './utils/useJoplinMode';
 
 import 'codemirror/keymap/emacs';
 import 'codemirror/keymap/vim';
 import 'codemirror/keymap/sublime'; // Used for swapLineUp and swapLineDown
 
-import 'codemirror/mode/gfm/gfm';
+import 'codemirror/mode/markdown/markdown';
 import 'codemirror/mode/xml/xml';
 // Modes for syntax highlighting inside of code blocks
 import 'codemirror/mode/python/python';
 import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/markdown/markdown';
 import 'codemirror/mode/clike/clike';
 import 'codemirror/mode/diff/diff';
 import 'codemirror/mode/sql/sql';
@@ -52,6 +52,7 @@ function Editor(props: EditorProps, ref: any) {
 	useScrollUtils(CodeMirror);
 	useCursorUtils(CodeMirror);
 	useLineSorting(CodeMirror);
+	useJoplinMode(CodeMirror);
 
 	CodeMirror.keyMap.basic = {
 		'Left': 'goCharLeft',
@@ -162,7 +163,6 @@ function Editor(props: EditorProps, ref: any) {
 		}
 	}, []);
 
-	// const divRef = useCallback(node => {
 	useEffect(() => {
 		if (!editorParent.current) return () => {};
 

ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.ts

@@ -0,0 +1,25 @@
+import 'codemirror/addon/mode/multiplex';
+import 'codemirror/mode/stex/stex';
+
+// Joplin markdown is a the same as markdown mode, but it has configured defaults
+// and support for katex math blocks
+export default function useJoplinMode(CodeMirror: any) {
+	CodeMirror.defineMode('joplin-markdown', (config: any) => {
+		const stex = CodeMirror.getMode(config, { name: 'stex', inMathMode: true });
+		const blocks = [{ open: '$$', close: '$$', mode: stex, delimStyle: 'katex-marker' },
+			{ open: '$', close: '$', mode: stex, delimStyle: 'katex-marker' }];
+
+		const markdownOptions = {
+			name: 'markdown',
+			taskLists: true,
+			strikethrough: true,
+			emoji: true,
+			tokenTypeOverrides: {
+				linkText: 'link-text',
+			},
+		};
+
+		return CodeMirror.multiplexingMode(CodeMirror.getMode(config, markdownOptions), ...blocks);
+
+	});
+}