CM6: Fixed a range of issues during browser testing

- Fixed some keybindings not running as expected, due to some editor
  defaults overriding or further actions taking place since the action
  would not indicate it's been dealt with (by returning boolean).
- Fixed spacing/border-radius being used on codeblocks on non-intended
  areas like the MD editor.
- Fixed lack of BG on default light theme, visible on full screen md
  editor.
- Fixed error thrown when the user does not have access to change the
  current editor (Likely non-cm related existing issue)
This commit is contained in:
Dan Brown 2023-04-18 14:21:22 +01:00
parent 94f464cd14
commit 3e738b1471
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 17 additions and 5 deletions

View File

@ -186,12 +186,12 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
parent: elem.parentElement, parent: elem.parentElement,
doc: content, doc: content,
extensions: [ extensions: [
keymap.of(keyBindings),
...editorExtensions(elem.parentElement), ...editorExtensions(elem.parentElement),
EditorView.updateListener.of((v) => { EditorView.updateListener.of((v) => {
onChange(v); onChange(v);
}), }),
EditorView.domEventHandlers(domEventHandlers), EditorView.domEventHandlers(domEventHandlers),
keymap.of(keyBindings),
], ],
}; };

View File

@ -49,6 +49,7 @@ const defaultLightHighlightStyle = HighlightStyle.define([
const defaultThemeSpec = { const defaultThemeSpec = {
"&": { "&": {
backgroundColor: "#FFF",
color: "#000", color: "#000",
}, },
"&.cm-focused": { "&.cm-focused": {

View File

@ -22,7 +22,7 @@ export class PageEditor extends Component {
this.draftDisplayIcon = this.$refs.draftDisplayIcon; this.draftDisplayIcon = this.$refs.draftDisplayIcon;
this.changelogInput = this.$refs.changelogInput; this.changelogInput = this.$refs.changelogInput;
this.changelogDisplay = this.$refs.changelogDisplay; this.changelogDisplay = this.$refs.changelogDisplay;
this.changeEditorButtons = this.$manyRefs.changeEditor; this.changeEditorButtons = this.$manyRefs.changeEditor || [];
this.switchDialogContainer = this.$refs.switchDialog; this.switchDialogContainer = this.$refs.switchDialog;
// Translations // Translations

View File

@ -7,7 +7,7 @@ function provide(editor) {
const shortcuts = {}; const shortcuts = {};
// Insert Image shortcut // Insert Image shortcut
shortcuts['Mod-Alt-i'] = cm => editor.actions.insertImage(); shortcuts['Shift-Mod-i'] = cm => editor.actions.insertImage();
// Save draft // Save draft
shortcuts['Mod-s'] = cm => window.$events.emit('editor-save-draft'); shortcuts['Mod-s'] = cm => window.$events.emit('editor-save-draft');
@ -49,8 +49,15 @@ export function provideKeyBindings(editor) {
const shortcuts= provide(editor); const shortcuts= provide(editor);
const keyBindings = []; const keyBindings = [];
const wrapAction = (action) => {
return () => {
action();
return true;
};
};
for (const [shortcut, action] of Object.entries(shortcuts)) { for (const [shortcut, action] of Object.entries(shortcuts)) {
keyBindings.push({key: shortcut, run: action, preventDefault: true}); keyBindings.push({key: shortcut, run: wrapAction(action), preventDefault: true});
} }
return keyBindings; return keyBindings;

View File

@ -5,8 +5,12 @@
.cm-editor { .cm-editor {
font-size: 12px; font-size: 12px;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-bottom: $-l;
line-height: 1.4; line-height: 1.4;
}
.page-content .cm-editor,
.CodeMirrorContainer .cm-editor {
margin-bottom: $-l;
border-radius: 4px; border-radius: 4px;
} }