Add latest changes from gitlab-org/gitlab@master

2 files changed, 23 insertions, 2 deletions

diff --git a/app/assets/javascripts/content_editor/components/suggestions_dropdown.vue b/app/assets/javascripts/content_editor/components/suggestions_dropdown.vue
index fec32df406d..c4617983488 100644
--- a/app/assets/javascripts/content_editor/components/suggestions_dropdown.vue
+++ b/app/assets/javascripts/content_editor/components/suggestions_dropdown.vue
@@ -45,6 +45,10 @@ export default {
       return this.nodeType === 'reference';
     },
 
+    isCommand() {
+      return this.isReference && this.nodeProps.referenceType === 'command';
+    },
+
     isUser() {
       return this.isReference && this.nodeProps.referenceType === 'user';
     },
@@ -84,6 +88,8 @@ export default {
           return `${this.char}${item.iid}`;
         case 'milestone':
           return `${this.char}${item.title}`;
+        case 'command':
+          return `${this.char}${item.name} `;
         default:
           return '';
       }
@@ -140,7 +146,6 @@ export default {
       if (item) {
         this.command({
           text: this.getText(item),
-          href: '#',
           ...this.getProps(item),
         });
       }
@@ -156,7 +161,7 @@ export default {
 <template>
   <ul
     :class="{ show: items.length > 0 }"
-    class="gl-new-dropdown dropdown-menu"
+    class="gl-new-dropdown dropdown-menu gl-relative"
     data-testid="content-editor-suggestions-dropdown"
   >
     <div class="gl-new-dropdown-inner gl-overflow-y-auto">
@@ -182,6 +187,12 @@ export default {
         <span v-if="isMilestone">
           {{ item.title }}
         </span>
+        <span v-if="isCommand">
+          /{{ item.name }} <small> {{ item.params[0] }} </small><br />
+          <em>
+            <small> {{ item.description }} </small>
+          </em>
+        </span>
         <div v-if="isEmoji" class="gl-display-flex gl-flex gl-align-items-center">
           <div class="gl-pr-4 gl-font-lg">{{ item.e }}</div>
           <div class="gl-flex-grow-1">
diff --git a/app/assets/javascripts/content_editor/extensions/suggestions.js b/app/assets/javascripts/content_editor/extensions/suggestions.js
index 9985b6bd7f8..ef7f64e573e 100644
--- a/app/assets/javascripts/content_editor/extensions/suggestions.js
+++ b/app/assets/javascripts/content_editor/extensions/suggestions.js
@@ -161,6 +161,16 @@ export default Node.create({
       }),
       createSuggestionPlugin({
         editor: this.editor,
+        char: '/',
+        dataSource: gl.GfmAutoComplete?.dataSources.commands,
+        nodeType: 'reference',
+        nodeProps: {
+          referenceType: 'command',
+        },
+        search: (query) => ({ name }) => find(name, query),
+      }),
+      createSuggestionPlugin({
+        editor: this.editor,
         char: ':',
         dataSource: () => Object.values(getAllEmoji()),
         nodeType: 'emoji',