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)

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index 60b4df997fa704b5d067b73c1e6c0541b81c5bb7..1064feda437c3ab981ada45db8e3d5ad63b518d8 100644 (file)
--- 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 492ca4a99d956bb43839e0b191497524ca5df38a..d20383078089adc7ef4d9c4feda6603b80a3fac1 100644 (file)
--- 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 c58f45b66198544c4ffd0f8d21052d95a09ea1ae..e2b92ff6880f979efdeccdc72203445357691452 100644 (file)
--- 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 336b276d1cc23794ba42377de56537b193c8baaa..c4a86e544ffeeb69fda5089e7b6122479a0a25d2 100644 (file)
--- 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 de82d4989715d75695e31c48b07a2134336f9356..ed56ac8d4838dab9b58de296b8d7439200324bea 100644 (file)
--- 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;
 }