Merge branch '334191-insert-or-toggle-code-block' into 'master'

Do not use Cmd + Return for inserting hard breaks in the Content Editor

See merge request gitlab-org/gitlab!65370

app/assets/javascripts/content_editor/extensions/hard_break.js

 import { HardBreak } from '@tiptap/extension-hard-break';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-export const tiptapExtension = HardBreak;
+const ExtendedHardBreak = HardBreak.extend({
+  addKeyboardShortcuts() {
+    return {
+      'Shift-Enter': () => this.editor.commands.setHardBreak(),
+    };
+  },
+});
+
+export const tiptapExtension = ExtendedHardBreak;
 export const serializer = defaultMarkdownSerializer.nodes.hard_break;

app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue

@@ -212,13 +212,20 @@ export default {
         .then(({ data }) => data.body);
     },
 
-    handleFormSubmit() {
+    async handleFormSubmit(e) {
+      e.preventDefault();
+
       if (this.useContentEditor) {
         this.content = this.contentEditor.getSerializedContent();
 
         this.trackFormSubmit();
       }
 
+      // Wait until form field values are refreshed
+      await this.$nextTick();
+
+      e.target.submit();
+
       this.isDirty = false;
     },
 

package.json

@@ -247,6 +247,8 @@
     "nodemon": "^2.0.4",
     "postcss": "^7.0.14",
     "prettier": "2.2.1",
+    "prosemirror-schema-basic": "^1.1.2",
+    "prosemirror-test-builder": "^1.0.4",
     "purgecss": "^4.0.3",
     "purgecss-from-html": "^4.0.3",
     "readdir-enhanced": "^2.2.4",

spec/frontend/content_editor/extensions/hard_break_spec.js

+import { tiptapExtension as HardBreak } from '~/content_editor/extensions/hard_break';
+import { createTestEditor, createDocBuilder } from '../test_utils';
+
+describe('content_editor/extensions/hard_break', () => {
+  let tiptapEditor;
+  let eq;
+  let doc;
+  let p;
+  let hardBreak;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor({ extensions: [HardBreak] });
+
+    ({
+      builders: { doc, p, hardBreak },
+      eq,
+    } = createDocBuilder({
+      tiptapEditor,
+      names: { hardBreak: { nodeType: HardBreak.name } },
+    }));
+  });
+
+  describe('Shift-Enter shortcut', () => {
+    it('inserts a hard break when shortcut is executed', () => {
+      const initialDoc = doc(p(''));
+      const expectedDoc = doc(p(hardBreak()));
+
+      tiptapEditor.commands.setContent(initialDoc.toJSON());
+      tiptapEditor.commands.keyboardShortcut('Shift-Enter');
+
+      expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
+    });
+  });
+
+  describe('Mod-Enter shortcut', () => {
+    it('does not insert a hard break when shortcut is executed', () => {
+      const initialDoc = doc(p(''));
+      const expectedDoc = initialDoc;
+
+      tiptapEditor.commands.setContent(initialDoc.toJSON());
+      tiptapEditor.commands.keyboardShortcut('Mod-Enter');
+
+      expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
+    });
+  });
+});

spec/frontend/content_editor/test_utils.js

@@ -3,6 +3,16 @@ import { Document } from '@tiptap/extension-document';
 import { Paragraph } from '@tiptap/extension-paragraph';
 import { Text } from '@tiptap/extension-text';
 import { Editor } from '@tiptap/vue-2';
+import { builders, eq } from 'prosemirror-test-builder';
+
+export const createDocBuilder = ({ tiptapEditor, names = {} }) => {
+  const docBuilders = builders(tiptapEditor.schema, {
+    p: { nodeType: 'paragraph' },
+    ...names,
+  });
+
+  return { eq, builders: docBuilders };
+};
 
 /**
  * Creates an instance of the Tiptap Editor class

yarn.lock

@@ -9731,13 +9731,20 @@ prosemirror-markdown@^1.5.1:
     markdown-it "^10.0.0"
     prosemirror-model "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.13.1, prosemirror-model@^1.13.3, prosemirror-model@^1.14.1, prosemirror-model@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.14.1.tgz#d784c67f95a5d66b853e82ff9a87a50353ef9cd5"
-  integrity sha512-vZcbI+24VloFefKZkDnMaEpipL/vSKKPdFiik4KOnTzq3e6AO7+CAOixZ2G/SsfRaYC965XvnOIEbhIQdgki7w==
+prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.13.1, prosemirror-model@^1.13.3, prosemirror-model@^1.14.1, prosemirror-model@^1.2.0, prosemirror-model@^1.8.1:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.14.2.tgz#4e8c39cfff4e097631af4495e125d9a8a9773116"
+  integrity sha512-TwkACyEiSi8FJiRhg2ffbzmQRy5DR+aTwAr7trNQNZL24HJR8ouxy4qCkG99PnWK0xZ0AjSMtPXSU6hnxAiP7Q==
   dependencies:
     orderedmap "^1.1.0"
 
+prosemirror-schema-basic@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.1.2.tgz#4bde5c339c845e0d08ec8fe473064e372ca51ae3"
+  integrity sha512-G4q8WflNsR1Q33QAV4MQO0xWrHLOJ+BQcKswGXMy626wlQj6c/1n1v4eC9ns+h2y1r/fJHZEgSZnsNhm9lbrDw==
+  dependencies:
+    prosemirror-model "^1.2.0"
+
 prosemirror-schema-list@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz#471f9caf2d2bed93641d2e490434c0d2d4330df1"
@@ -9765,6 +9772,11 @@ prosemirror-tables@^1.1.1:
     prosemirror-transform "^1.2.1"
     prosemirror-view "^1.13.3"
 
+prosemirror-test-builder@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-test-builder/-/prosemirror-test-builder-1.0.4.tgz#68d1d1cedcd90cc2fdd976d736ce87b7a5f1e873"
+  integrity sha512-d5ZwYcf+vd1YI0tgoB7UZ2B2iwb4jmxLGzkHz6ZbkAmPwAY48WpS1frv9BofC2m/MRIMp5SERhISNIANYPsVTg==
+
 prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.2.8, prosemirror-transform@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz#5620ebe7379e6fae4f34ecc881886cb22ce96579"