From 3e738b14715e9e2d3aa5dccd723a051d9d288ed9 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Tue, 18 Apr 2023 14:21:22 +0100
Subject: [PATCH] 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)
---
 resources/js/code/index.mjs            |  2 +-
 resources/js/code/themes.js            |  1 +
 resources/js/components/page-editor.js |  2 +-
 resources/js/markdown/shortcuts.js     | 11 +++++++++--
 resources/sass/_codemirror.scss        |  6 +++++-
 5 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index 60b4df997..1064feda4 100644
--- a/resources/js/code/index.mjs
+++ b/resources/js/code/index.mjs
@@ -186,12 +186,12 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
         parent: elem.parentElement,
         doc: content,
         extensions: [
+            keymap.of(keyBindings),
             ...editorExtensions(elem.parentElement),
             EditorView.updateListener.of((v) => {
                 onChange(v);
             }),
             EditorView.domEventHandlers(domEventHandlers),
-            keymap.of(keyBindings),
         ],
     };
 
diff --git a/resources/js/code/themes.js b/resources/js/code/themes.js
index 492ca4a99..d20383078 100644
--- a/resources/js/code/themes.js
+++ b/resources/js/code/themes.js
@@ -49,6 +49,7 @@ const defaultLightHighlightStyle = HighlightStyle.define([
 
 const defaultThemeSpec = {
     "&": {
+        backgroundColor: "#FFF",
         color: "#000",
     },
     "&.cm-focused": {
diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index c58f45b66..e2b92ff68 100644
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -22,7 +22,7 @@ export class PageEditor extends Component {
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;
-        this.changeEditorButtons = this.$manyRefs.changeEditor;
+        this.changeEditorButtons = this.$manyRefs.changeEditor || [];
         this.switchDialogContainer = this.$refs.switchDialog;
 
         // Translations
diff --git a/resources/js/markdown/shortcuts.js b/resources/js/markdown/shortcuts.js
index 336b276d1..c4a86e544 100644
--- a/resources/js/markdown/shortcuts.js
+++ b/resources/js/markdown/shortcuts.js
@@ -7,7 +7,7 @@ function provide(editor) {
     const shortcuts = {};
 
     // Insert Image shortcut
-    shortcuts['Mod-Alt-i'] = cm => editor.actions.insertImage();
+    shortcuts['Shift-Mod-i'] = cm => editor.actions.insertImage();
 
     // 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 keyBindings = [];
 
+    const wrapAction = (action) => {
+        return () => {
+            action();
+            return true;
+        };
+    };
+
     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;
diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index de82d4989..ed56ac8d4 100644
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -5,8 +5,12 @@
 .cm-editor {
   font-size: 12px;
   border: 1px solid #ddd;
-  margin-bottom: $-l;
   line-height: 1.4;
+}
+
+.page-content .cm-editor,
+.CodeMirrorContainer .cm-editor {
+  margin-bottom: $-l;
   border-radius: 4px;
 }