Skip to content

Commit

Permalink
Desktop: Add option to choose Code Mirror as code editor (#3284)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CalebJohn
CalebJohn authored Jun 6, 2020
1 parent a3153f1 commit a8c8539
Show file tree
Hide file tree
Showing 28 changed files with 1,330 additions and 15 deletions.
10 changes: 10 additions & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,16 @@ ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useListIdent.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.js
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/useLineSorting.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useListIdent.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js
ElectronClient/gui/NoteEditor/NoteEditor.js
Expand Down
10 changes: 10 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,16 @@ ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useListIdent.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.js
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/useLineSorting.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useListIdent.js
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.js
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js
ElectronClient/gui/NoteEditor/NoteEditor.js
Expand Down
4 changes: 3 additions & 1 deletion ElectronClient/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1314,10 +1314,12 @@ class Application extends BaseApplication {
// The '*' and '!important' parts are necessary to make sure Russian text is displayed properly
// https://github.com/laurent22/joplin/issues/155

const css = `.ace_editor * { font-family: ${fontFamilies.join(', ')} !important; }`;
const css = `.CodeMirror * { font-family: ${fontFamilies.join(', ')} !important; }`;
const ace_css = `.ace_editor * { font-family: ${fontFamilies.join(', ')} !important; }`;
const styleTag = document.createElement('style');
styleTag.type = 'text/css';
styleTag.appendChild(document.createTextNode(css));
styleTag.appendChild(document.createTextNode(ace_css));
document.head.appendChild(styleTag);
}

Expand Down
3 changes: 2 additions & 1 deletion ElectronClient/gui/MainScreen.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -866,7 +866,8 @@ class MainScreenComponent extends React.Component {
const noteContentPropertiesDialogOptions = this.state.noteContentPropertiesDialogOptions;
const shareNoteDialogOptions = this.state.shareNoteDialogOptions;

const bodyEditor = this.props.settingEditorCodeView ? 'AceEditor' : 'TinyMCE';
const codeEditor = Setting.value('editor.betaCodeMirror') ? 'CodeMirror' : 'AceEditor';
const bodyEditor = this.props.settingEditorCodeView ? codeEditor : 'TinyMCE';

return (
<div style={style}>
Expand Down
2 changes: 1 addition & 1 deletion ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function styles(props: NoteBodyEditorProps) {
fontSize: `${theme.editorFontSize}px`,
color: theme.color,
backgroundColor: theme.backgroundColor,
editorTheme: theme.editorTheme, // Defined in theme.js
aceEditorTheme: theme.aceEditorTheme, // Defined in theme.js
},
};
});
Expand Down
Loading

2 comments on commit a8c8539

@tessus
Copy link
Collaborator

@tessus tessus commented on a8c8539 Jun 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@laurent22 This commit introduced a problem in Dark Theme. The cursor is pitch black.

There's also this error showing up in console:

/Users/tessus/data/work/joplin/ElectronClient/node_modules/brace/index.js:3802 GET file:///Users/tessus/data/work/joplin/ElectronClient/theme-theme.js net::ERR_FILE_NOT_FOUND
exports.loadScript @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/brace/index.js:3802
exports.loadModule @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/brace/index.js:4174
setTheme @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/brace/index.js:17757
setTheme @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/brace/index.js:13130
componentDidMount @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-ace/lib/ace.js:98
commitLifeCycles @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:20049
commitLayoutEffects @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:22813
callCallback @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:347
invokeGuardedCallbackDev @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:397
invokeGuardedCallback @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:454
commitRootImpl @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:22585
unstable_runWithPriority @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/scheduler/cjs/scheduler.development.js:643
runWithPriority$2 @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11305
commitRoot @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:22414
runRootCallback @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:21554
(anonymous) @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11353
unstable_runWithPriority @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/scheduler/cjs/scheduler.development.js:643
runWithPriority$2 @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11305
flushSyncCallbackQueueImpl @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11349
flushSyncCallbackQueue @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11338
scheduleUpdateOnFiber @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:21431
dispatchAction @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:15816
(anonymous) @ useFormNote.ts:83
fulfilled @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:5
Promise.then (async)
step @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:7
(anonymous) @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:8
__awaiter @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:4
initNoteState @ useFormNote.ts:53
(anonymous) @ useFormNote.ts:157
fulfilled @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:5
Promise.then (async)
step @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:7
fulfilled @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:5
Promise.then (async)
step @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:7
(anonymous) @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:8
__awaiter @ /Users/tessus/data/work/joplin/ElectronClient/gui/NoteEditor/utils/useFormNote.js:4
loadNote @ useFormNote.ts:149
(anonymous) @ useFormNote.ts:166
commitHookEffectList @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:19986
commitPassiveHookEffects @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:20016
callCallback @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:347
invokeGuardedCallbackDev @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:397
invokeGuardedCallback @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:454
flushPassiveEffectsImpl @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:22868
unstable_runWithPriority @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/scheduler/cjs/scheduler.development.js:643
runWithPriority$2 @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11305
flushPassiveEffects @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:22841
renderRoot @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:21801
runRootCallback @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:21554
(anonymous) @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11353
unstable_runWithPriority @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/scheduler/cjs/scheduler.development.js:643
runWithPriority$2 @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11305
flushSyncCallbackQueueImpl @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11349
flushSyncCallbackQueue @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:11338
scheduleUpdateOnFiber @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:21431
enqueueSetState @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-dom/cjs/react-dom.development.js:13100
Component.setState @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react/cjs/react.development.js:325
onStateChange @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/components/connectAdvanced.js:222
notify @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/utils/Subscription.js:30
notifyNestedSubs @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/utils/Subscription.js:69
onStateChange @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/components/connectAdvanced.js:219
notify @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/utils/Subscription.js:30
notifyNestedSubs @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/utils/Subscription.js:69
onStateChange @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/components/connectAdvanced.js:219
notify @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/utils/Subscription.js:30
notifyNestedSubs @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/utils/Subscription.js:69
onStateChange @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/react-redux/lib/components/connectAdvanced.js:219
dispatch @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/redux/lib/createStore.js:186
generalMiddleware @ /Users/tessus/data/work/joplin/ElectronClient/lib/BaseApplication.js:426
generalMiddleware @ /Users/tessus/data/work/joplin/ElectronClient/app.js:285
(anonymous) @ /Users/tessus/data/work/joplin/ElectronClient/lib/BaseApplication.js:363
dispatch @ /Users/tessus/data/work/joplin/ElectronClient/node_modules/redux/lib/applyMiddleware.js:45
reduxSharedMiddleware @ /Users/tessus/data/work/joplin/ElectronClient/lib/components/shared/reduxSharedMiddleware.js:85
async function (async)
reduxSharedMiddleware @ /Users/tessus/data/work/joplin/ElectronClient/lib/components/shared/reduxSharedMiddleware.js:87
generalMiddleware @ /Users/tessus/data/work/joplin/ElectronClient/lib/BaseApplication.js:434
generalMiddleware @ /Users/tessus/data/work/joplin/ElectronClient/app.js:285
(anonymous) @ /Users/tessus/data/work/joplin/ElectronClient/lib/BaseApplication.js:363
refreshNotes @ /Users/tessus/data/work/joplin/ElectronClient/lib/BaseApplication.js:290
Show 40 more frames

@CalebJohn
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for reporting this @tessus , I've fixed the problem in #3338 turns out it was a silly typo.

Please sign in to comment.