Skip to content

Commit

Permalink
Desktop: Resolves #3560: Make codemirror the default code editor (#3703)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CalebJohn
CalebJohn authored Sep 6, 2020
1 parent 652748f commit fbe9669
Show file tree
Hide file tree
Showing 25 changed files with 10 additions and 1,285 deletions.
6 changes: 0 additions & 6 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,6 @@ ElectronClient/gui/NoteEditor/commands/focusElementNoteBody.js
ElectronClient/gui/NoteEditor/commands/focusElementNoteTitle.js
ElectronClient/gui/NoteEditor/commands/showLocalSearch.js
ElectronClient/gui/NoteEditor/commands/showRevisions.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js
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
Expand Down
6 changes: 0 additions & 6 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,6 @@ ElectronClient/gui/NoteEditor/commands/focusElementNoteBody.js
ElectronClient/gui/NoteEditor/commands/focusElementNoteTitle.js
ElectronClient/gui/NoteEditor/commands/showLocalSearch.js
ElectronClient/gui/NoteEditor/commands/showRevisions.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.js
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js
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
Expand Down
2 changes: 0 additions & 2 deletions ElectronClient/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1042,11 +1042,9 @@ class Application extends BaseApplication {
// https://github.com/laurent22/joplin/issues/155

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
5 changes: 2 additions & 3 deletions ElectronClient/gui/MainScreen/MainScreen.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,7 @@ class MainScreenComponent extends React.Component {
// A bit of a hack, but for now don't allow changing code view
// while a note is being saved as it will cause a problem with
// TinyMCE because it won't have time to send its content before
// being switch to Ace Editor.
// being switch to the Code Editor.
if (this.props.hasNotesBeingSaved) return;
Setting.toggle('editor.codeView');
},
Expand Down Expand Up @@ -468,8 +468,7 @@ class MainScreenComponent extends React.Component {
const noteContentPropertiesDialogOptions = this.state.noteContentPropertiesDialogOptions;
const shareNoteDialogOptions = this.state.shareNoteDialogOptions;

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

return (
<div style={style}>
Expand Down
Loading

7 comments on commit fbe9669

@tessus
Copy link
Collaborator

@tessus tessus commented on fbe9669 Sep 6, 2020

Choose a reason for hiding this comment

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

@CalebJohn can you please add a guide or links to how to customize codemirror? e.g. I most likely don't want different sizes for the headers (#, ##, ...)

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

Sure @tessus. Codemirror is styled with css so anything can be edited with userchrome.css. You can remove the different size headers by adding the following to userchrome

.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
	font-size: 1em !important;
}

Using the debug tool you can find the classes of everything in codemirror.

@tessus
Copy link
Collaborator

@tessus tessus commented on fbe9669 Sep 7, 2020

Choose a reason for hiding this comment

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

Awesome, thank you. I guess I will have to dive into the new CSS structure for CodeMirror. 👍

@hemenkapadia
Copy link

Choose a reason for hiding this comment

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

Hi @CalebJohn,

Tried all these approaches on Joplin 1.7.11 on Ubuntu 18.04

pre.CodeMirror-line > span > span.cm-header.cm-header-1 {
  font-size: 1em !important;
}
span.cm-header.cm-header-1 {
  font-size: 1em !important;
}
span.cm-header-1 {
  font-size: 1em !important;
}
.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
  font-size: 1em !important;
}

no matter what the headings font size does not change in the markdown editor

image

Has the css selector changed recently ?

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

Hi @hemenkapadia,

I just copied last option that you pasted and tried it on my computer, it works as expected

.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
  font-size: 1em !important;
}

If it doesn't work I would guess it's for one of two reasons

  1. The application was not restarted
    This can either be a forgotten step, or perhaps you have Joplin set to minimize the tray icon
  2. Please double check that you are adding that code to userchrome.css, this file should be located in ~/.config/joplin-desktop

@hemenkapadia
Copy link

Choose a reason for hiding this comment

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

Hi @CalebJohn,

Thanks for your response. I did validate everything you suggested. Still the same experience.

In the SS you can see the content of userstyle.css, ps output shows there is no running instance of Joplin. Then when i start Joplin I still see headers with variable font sizes in the markdown editor.

image

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

@hemenkapadia

It looks like you have you custom CSS in the wrong file. Joplin has 2 css customization files
userstyle.css is for styling the rendered markdown in the viewer
userchrome.css is for styling the application itself including the editor.

If you move the cm-header-x tags to userchrome.css everything should work properly.

Please sign in to comment.