Add latest changes from gitlab-org/gitlab@master

1 files changed, 39 insertions, 3 deletions

diff --git a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
index 204ac07d401..74f620b57b6 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -1,11 +1,33 @@
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
-import { lowlight } from 'lowlight/lib/all';
+import { textblockTypeInputRule } from '@tiptap/core';
+import { isFunction } from 'lodash';
 
 const extractLanguage = (element) => element.getAttribute('lang');
+const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
+
+const loadLanguageFromInputRule = (languageLoader) => (match) => {
+  const language = match[1];
+
+  if (isFunction(languageLoader?.loadLanguages)) {
+    languageLoader.loadLanguages([language]);
+  }
+
+  return {
+    language,
+  };
+};
 
 export default CodeBlockLowlight.extend({
   isolating: true,
 
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      languageLoader: {},
+    };
+  },
+
   addAttributes() {
     return {
       language: {
@@ -18,6 +40,22 @@ export default CodeBlockLowlight.extend({
       },
     };
   },
+  addInputRules() {
+    const { languageLoader } = this.options;
+
+    return [
+      textblockTypeInputRule({
+        find: backtickInputRegex,
+        type: this.type,
+        getAttributes: loadLanguageFromInputRule(languageLoader),
+      }),
+      textblockTypeInputRule({
+        find: tildeInputRegex,
+        type: this.type,
+        getAttributes: loadLanguageFromInputRule(languageLoader),
+      }),
+    ];
+  },
   renderHTML({ HTMLAttributes }) {
     return [
       'pre',
@@ -28,6 +66,4 @@ export default CodeBlockLowlight.extend({
       ['code', {}, 0],
     ];
   },
-}).configure({
-  lowlight,
 });