Add latest changes from gitlab-org/gitlab@master

4 files changed, 14 insertions, 101 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 74f620b57b6..204ac07d401 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -1,33 +1,11 @@
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
-import { textblockTypeInputRule } from '@tiptap/core';
-import { isFunction } from 'lodash';
+import { lowlight } from 'lowlight/lib/all';
 
 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: {
@@ -40,22 +18,6 @@ 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',
@@ -66,4 +28,6 @@ export default CodeBlockLowlight.extend({
       ['code', {}, 0],
     ];
   },
+}).configure({
+  lowlight,
 });
diff --git a/app/assets/javascripts/content_editor/services/code_block_language_loader.js b/app/assets/javascripts/content_editor/services/code_block_language_loader.js
deleted file mode 100644
index 3c12cf614a5..00000000000
--- a/app/assets/javascripts/content_editor/services/code_block_language_loader.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export default class CodeBlockLanguageLoader {
-  constructor(lowlight) {
-    this.lowlight = lowlight;
-  }
-
-  isLanguageLoaded(language) {
-    return this.lowlight.registered(language);
-  }
-
-  loadLanguagesFromDOM(domTree) {
-    const languages = [];
-
-    domTree.querySelectorAll('pre').forEach((preElement) => {
-      languages.push(preElement.getAttribute('lang'));
-    });
-
-    return this.loadLanguages(languages);
-  }
-
-  loadLanguages(languageList = []) {
-    const loaders = languageList
-      .filter((languageName) => !this.isLanguageLoaded(languageName))
-      .map((languageName) => {
-        return import(
-          /* webpackChunkName: 'highlight.language.js' */ `highlight.js/lib/languages/${languageName}`
-        )
-          .then(({ default: language }) => {
-            this.lowlight.registerLanguage(languageName, language);
-          })
-          .catch(() => false);
-      });
-
-    return Promise.all(loaders);
-  }
-}
diff --git a/app/assets/javascripts/content_editor/services/content_editor.js b/app/assets/javascripts/content_editor/services/content_editor.js
index 05c831109a5..c5638da2daf 100644
--- a/app/assets/javascripts/content_editor/services/content_editor.js
+++ b/app/assets/javascripts/content_editor/services/content_editor.js
@@ -3,12 +3,11 @@ import { LOADING_CONTENT_EVENT, LOADING_SUCCESS_EVENT, LOADING_ERROR_EVENT } fro
 
 /* eslint-disable no-underscore-dangle */
 export class ContentEditor {
-  constructor({ tiptapEditor, serializer, deserializer, eventHub, languageLoader }) {
+  constructor({ tiptapEditor, serializer, deserializer, eventHub }) {
     this._tiptapEditor = tiptapEditor;
     this._serializer = serializer;
     this._deserializer = deserializer;
     this._eventHub = eventHub;
-    this._languageLoader = languageLoader;
   }
 
   get tiptapEditor() {
@@ -35,35 +34,23 @@ export class ContentEditor {
   }
 
   async setSerializedContent(serializedContent) {
-    const {
-      _tiptapEditor: editor,
-      _deserializer: deserializer,
-      _eventHub: eventHub,
-      _languageLoader: languageLoader,
-    } = this;
+    const { _tiptapEditor: editor, _deserializer: deserializer, _eventHub: eventHub } = this;
     const { doc, tr } = editor.state;
     const selection = TextSelection.create(doc, 0, doc.content.size);
 
     try {
       eventHub.$emit(LOADING_CONTENT_EVENT);
-      const result = await deserializer.deserialize({
+      const { document } = await deserializer.deserialize({
         schema: editor.schema,
         content: serializedContent,
       });
 
-      if (Object.keys(result).length === 0) {
-        return;
+      if (document) {
+        tr.setSelection(selection)
+          .replaceSelectionWith(document, false)
+          .setMeta('preventUpdate', true);
+        editor.view.dispatch(tr);
       }
-
-      const { document, dom } = result;
-
-      await languageLoader.loadLanguagesFromDOM(dom);
-
-      tr.setSelection(selection)
-        .replaceSelectionWith(document, false)
-        .setMeta('preventUpdate', true);
-      editor.view.dispatch(tr);
-
       eventHub.$emit(LOADING_SUCCESS_EVENT);
     } catch (e) {
       eventHub.$emit(LOADING_ERROR_EVENT, e);
diff --git a/app/assets/javascripts/content_editor/services/create_content_editor.js b/app/assets/javascripts/content_editor/services/create_content_editor.js
index 5b637eee176..d9d39a387d0 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -1,6 +1,5 @@
 import { Editor } from '@tiptap/vue-2';
 import { isFunction } from 'lodash';
-import { lowlight } from 'lowlight/lib/core';
 import eventHubFactory from '~/helpers/event_hub_factory';
 import { PROVIDE_SERIALIZER_OR_RENDERER_ERROR } from '../constants';
 import Attachment from '../extensions/attachment';
@@ -59,7 +58,6 @@ import { ContentEditor } from './content_editor';
 import createMarkdownSerializer from './markdown_serializer';
 import createMarkdownDeserializer from './markdown_deserializer';
 import trackInputRulesAndShortcuts from './track_input_rules_and_shortcuts';
-import CodeBlockLanguageLoader from './code_block_language_loader';
 
 const createTiptapEditor = ({ extensions = [], ...options } = {}) =>
   new Editor({
@@ -85,7 +83,6 @@ export const createContentEditor = ({
 
   const eventHub = eventHubFactory();
 
-  const languageLoader = new CodeBlockLanguageLoader(lowlight);
   const builtInContentEditorExtensions = [
     Attachment.configure({ uploadsPath, renderMarkdown, eventHub }),
     Audio,
@@ -94,7 +91,7 @@ export const createContentEditor = ({
     BulletList,
     Code,
     ColorChip,
-    CodeBlockHighlight.configure({ lowlight, languageLoader }),
+    CodeBlockHighlight,
     DescriptionItem,
     DescriptionList,
     Details,
@@ -108,7 +105,7 @@ export const createContentEditor = ({
     FootnoteDefinition,
     FootnoteReference,
     FootnotesSection,
-    Frontmatter.configure({ lowlight }),
+    Frontmatter,
     Gapcursor,
     HardBreak,
     Heading,
@@ -147,5 +144,5 @@ export const createContentEditor = ({
   const serializer = createMarkdownSerializer({ serializerConfig });
   const deserializer = createMarkdownDeserializer({ render: renderMarkdown });
 
-  return new ContentEditor({ tiptapEditor, serializer, eventHub, deserializer, languageLoader });
+  return new ContentEditor({ tiptapEditor, serializer, eventHub, deserializer });
 };