Add latest changes from gitlab-org/gitlab@master

3 files changed, 99 insertions, 15 deletions

diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue
index 518ddd7a09c..4ed89140e5b 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/code_block.vue
@@ -1,5 +1,8 @@
 <script>
 import {
+  GlDropdownForm,
+  GlFormInput,
+  GlDropdownDivider,
   GlButton,
   GlButtonGroup,
   GlDropdown,
@@ -20,10 +23,13 @@ const CODE_BLOCK_NODE_TYPES = [CodeBlockHighlight.name, Diagram.name, Frontmatte
 export default {
   components: {
     BubbleMenu,
+    GlDropdownForm,
+    GlFormInput,
     GlButton,
     GlButtonGroup,
     GlDropdown,
     GlDropdownItem,
+    GlDropdownDivider,
     GlSearchBoxByType,
     EditorStateObserver,
   },
@@ -37,6 +43,9 @@ export default {
       selectedLanguage: {},
       filterTerm: '',
       filteredLanguages: [],
+
+      showCustomLanguageInput: false,
+      customLanguageType: '',
     };
   },
   watch: {
@@ -57,7 +66,7 @@ export default {
 
       if (this.codeBlockType) {
         const { language } = this.tiptapEditor.getAttributes(this.codeBlockType);
-        this.selectedLanguage = codeBlockLanguageLoader.findLanguageBySyntax(language);
+        this.selectedLanguage = codeBlockLanguageLoader.findOrCreateLanguageBySyntax(language);
       }
     },
 
@@ -69,7 +78,7 @@ export default {
       navigator.clipboard.writeText(node?.textContent || '');
     },
 
-    async applySelectedLanguage(language) {
+    async applyLanguage(language) {
       this.selectedLanguage = language;
 
       await codeBlockLanguageLoader.loadLanguage(language.syntax);
@@ -77,6 +86,21 @@ export default {
       this.tiptapEditor.commands.setCodeBlock({ language: this.selectedLanguage.syntax });
     },
 
+    clearCustomLanguageForm() {
+      this.showCustomLanguageInput = false;
+      this.customLanguageType = '';
+    },
+
+    applyCustomLanguage() {
+      this.showCustomLanguageInput = false;
+
+      const language = codeBlockLanguageLoader.findOrCreateLanguageBySyntax(
+        this.customLanguageType,
+      );
+
+      this.applyLanguage(language);
+    },
+
     getReferenceClientRect() {
       const { view } = this.tiptapEditor;
       const { from } = this.tiptapEditor.state.selection;
@@ -108,8 +132,29 @@ export default {
           contenteditable="false"
           boundary="viewport"
           :text="selectedLanguage.label"
+          @hide="clearCustomLanguageForm"
         >
-          <template #header>
+          <template v-if="showCustomLanguageInput" #header>
+            <div class="gl-relative">
+              <gl-button
+                v-gl-tooltip
+                class="gl-absolute gl-mt-n3 gl-ml-2"
+                variant="default"
+                category="tertiary"
+                size="medium"
+                :aria-label="__('Go back')"
+                :title="__('Go back')"
+                icon="arrow-left"
+                @click.prevent.stop="showCustomLanguageInput = false"
+              />
+              <p
+                class="gl-text-center gl-new-dropdown-header-top gl-mb-0! gl-border-none! gl-pb-1!"
+              >
+                {{ __('Create custom type') }}
+              </p>
+            </div>
+          </template>
+          <template v-else #header>
             <gl-search-box-by-type
               v-model="filterTerm"
               :clear-button-title="__('Clear')"
@@ -117,20 +162,59 @@ export default {
             />
           </template>
 
-          <template #highlighted-items>
+          <template v-if="!showCustomLanguageInput" #highlighted-items>
             <gl-dropdown-item :key="selectedLanguage.syntax" is-check-item :is-checked="true">
               {{ selectedLanguage.label }}
             </gl-dropdown-item>
           </template>
 
-          <gl-dropdown-item
-            v-for="language in filteredLanguages"
-            v-show="selectedLanguage.syntax !== language.syntax"
-            :key="language.syntax"
-            @click="applySelectedLanguage(language)"
-          >
-            {{ language.label }}
-          </gl-dropdown-item>
+          <template v-if="!showCustomLanguageInput" #default>
+            <gl-dropdown-item
+              v-for="language in filteredLanguages"
+              v-show="selectedLanguage.syntax !== language.syntax"
+              :key="language.syntax"
+              @click="applyLanguage(language)"
+            >
+              {{ language.label }}
+            </gl-dropdown-item>
+          </template>
+          <template v-else #default>
+            <gl-dropdown-form @submit.prevent="applyCustomLanguage">
+              <div class="gl-mx-4 gl-mt-2 gl-mb-3">
+                <gl-form-input v-model="customLanguageType" :placeholder="__('Language type')" />
+              </div>
+              <gl-dropdown-divider />
+              <div class="gl-mx-4 gl-mt-3 gl-display-flex gl-justify-content-end">
+                <gl-button
+                  variant="default"
+                  size="medium"
+                  category="primary"
+                  class="gl-mr-2 gl-w-auto!"
+                  @click.prevent.stop="showCustomLanguageInput = false"
+                >
+                  {{ __('Cancel') }}
+                </gl-button>
+                <gl-button
+                  variant="confirm"
+                  size="medium"
+                  category="primary"
+                  type="submit"
+                  class="gl-w-auto!"
+                >
+                  {{ __('Apply') }}
+                </gl-button>
+              </div>
+            </gl-dropdown-form>
+          </template>
+
+          <template v-if="!showCustomLanguageInput" #footer>
+            <gl-dropdown-item
+              data-testid="create-custom-type"
+              @click.capture.native.stop="showCustomLanguageInput = true"
+            >
+              {{ __('Create custom type') }}
+            </gl-dropdown-item>
+          </template>
         </gl-dropdown>
         <gl-button
           v-gl-tooltip
diff --git a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue
index 1390b9b2daf..343616db3d6 100644
--- a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue
+++ b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue
@@ -20,7 +20,7 @@ export default {
     },
   },
   async mounted() {
-    const lang = codeBlockLanguageLoader.findLanguageBySyntax(this.node.attrs.language);
+    const lang = codeBlockLanguageLoader.findOrCreateLanguageBySyntax(this.node.attrs.language);
     await codeBlockLanguageLoader.loadLanguage(lang.syntax);
 
     this.updateAttributes({ language: this.node.attrs.language });
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
index 1afaf4bfef6..fa0549d4183 100644
--- a/app/assets/javascripts/content_editor/services/code_block_language_loader.js
+++ b/app/assets/javascripts/content_editor/services/code_block_language_loader.js
@@ -8,7 +8,7 @@ const codeBlockLanguageLoader = {
 
   allLanguages: CODE_BLOCK_LANGUAGES,
 
-  findLanguageBySyntax(value) {
+  findOrCreateLanguageBySyntax(value) {
     const lowercaseValue = value?.toLowerCase() || 'plaintext';
     return (
       this.allLanguages.find(
@@ -38,7 +38,7 @@ const codeBlockLanguageLoader = {
   },
 
   loadLanguageFromInputRule(match) {
-    const { syntax } = this.findLanguageBySyntax(match[1]);
+    const { syntax } = this.findOrCreateLanguageBySyntax(match[1]);
 
     this.loadLanguage(syntax);