self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Desktop: Fixes #3440: Improve Markdown rendering in CodeMirror, in particular for math expressions (#3448)

Browse Source
This commit is contained in:
Caleb John 2020-07-12 12:42:19 -06:00 committed by GitHub
parent b69008225f
commit 452b41de0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -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

1
.gitignore vendored
View File

@ -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

2
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View File

@ -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}

6
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx
View File

@ -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 () => {};

25
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useJoplinMode.ts Normal file
View File

@ -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);
});
}