1 files changed, 159 insertions, 100 deletions

diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index c53007b68cf..dc27278d255 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -1,5 +1,7 @@
 <script>
-import EditorModeSwitcher from '~/vue_shared/components/markdown/editor_mode_switcher.vue';
+import CommentTemplatesDropdown from '~/vue_shared/components/markdown/comment_templates_dropdown.vue';
+import { __, sprintf } from '~/locale';
+import { getModifierKey } from '~/constants';
 import trackUIControl from '../services/track_ui_control';
 import ToolbarButton from './toolbar_button.vue';
 import ToolbarAttachmentButton from './toolbar_attachment_button.vue';
@@ -14,122 +16,179 @@ export default {
     ToolbarTableButton,
     ToolbarAttachmentButton,
     ToolbarMoreDropdown,
-    EditorModeSwitcher,
+    CommentTemplatesDropdown,
+  },
+  inject: {
+    newCommentTemplatePath: { default: null },
+    tiptapEditor: { default: null },
+    contentEditor: { default: null },
   },
   props: {
+    supportsQuickActions: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     hideAttachmentButton: {
       type: Boolean,
       default: false,
       required: false,
     },
   },
+  data() {
+    const modifierKey = getModifierKey();
+    const shiftKey = modifierKey === '⌘' ? '⇧' : 'Shift+';
+
+    return {
+      i18n: {
+        bold: sprintf(__('Bold (%{modifierKey}B)'), { modifierKey }),
+        italic: sprintf(__('Italic (%{modifierKey}I)'), { modifierKey }),
+        strike: sprintf(__('Strikethrough (%{modifierKey}%{shiftKey}X)'), {
+          modifierKey,
+          shiftKey,
+        }),
+        quote: __('Insert a quote'),
+        code: __('Code'),
+        link: sprintf(__('Insert link (%{modifierKey}K)'), { modifierKey }),
+        bulletList: __('Add a bullet list'),
+        numberedList: __('Add a numbered list'),
+        taskList: __('Add a checklist'),
+      },
+    };
+  },
+  computed: {
+    codeSuggestionsEnabled() {
+      return this.contentEditor.codeSuggestionsConfig?.canSuggest;
+    },
+  },
   methods: {
     trackToolbarControlExecution({ contentType, value }) {
       trackUIControl({ property: contentType, value });
     },
-    handleEditorModeChanged() {
-      this.$emit('enableMarkdownEditor');
+    insertSavedReply(savedReply) {
+      this.tiptapEditor.chain().focus().pasteContent(savedReply).run();
     },
   },
 };
 </script>
 <template>
-  <div class="gl-mx-2 gl-mt-2">
-    <div
-      class="gl-w-full gl-display-flex gl-align-items-center gl-flex-wrap gl-bg-gray-50 gl-px-2 gl-rounded-base gl-justify-content-space-between"
-      data-testid="formatting-toolbar"
-    >
-      <div class="gl-py-2 gl-display-flex gl-flex-wrap">
-        <toolbar-text-style-dropdown
-          data-testid="text-styles"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="bold"
-          content-type="bold"
-          icon-name="bold"
-          editor-command="toggleBold"
-          :label="__('Bold text')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="italic"
-          content-type="italic"
-          icon-name="italic"
-          editor-command="toggleItalic"
-          :label="__('Italic text')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="strike"
-          content-type="strike"
-          icon-name="strikethrough"
-          editor-command="toggleStrike"
-          :label="__('Strikethrough')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="blockquote"
-          content-type="blockquote"
-          icon-name="quote"
-          editor-command="toggleBlockquote"
-          :label="__('Insert a quote')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="code"
-          content-type="code"
-          icon-name="code"
-          editor-command="toggleCode"
-          :label="__('Code')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="link"
-          content-type="link"
-          icon-name="link"
-          editor-command="editLink"
-          :label="__('Insert link')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="bullet-list"
-          content-type="bulletList"
-          icon-name="list-bulleted"
-          class="gl-display-none gl-sm-display-inline"
-          editor-command="toggleBulletList"
-          :label="__('Add a bullet list')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="ordered-list"
-          content-type="orderedList"
-          icon-name="list-numbered"
-          class="gl-display-none gl-sm-display-inline"
-          editor-command="toggleOrderedList"
-          :label="__('Add a numbered list')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-button
-          data-testid="task-list"
-          content-type="taskList"
-          icon-name="list-task"
-          class="gl-display-none gl-sm-display-inline"
-          editor-command="toggleTaskList"
-          :label="__('Add a checklist')"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
-        <toolbar-attachment-button
-          v-if="!hideAttachmentButton"
-          data-testid="attachment"
-          @execute="trackToolbarControlExecution"
-        />
-        <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
-      </div>
-      <div class="content-editor-switcher gl-display-flex gl-align-items-center gl-ml-auto">
-        <editor-mode-switcher size="small" value="richText" @input="handleEditorModeChanged" />
-      </div>
+  <div
+    class="gl-w-full gl-display-flex gl-align-items-center gl-flex-wrap gl-border-b gl-border-gray-100 gl-px-3 gl-rounded-top-base gl-justify-content-space-between"
+    data-testid="formatting-toolbar"
+  >
+    <div class="gl-py-3 gl-display-flex gl-flex-wrap">
+      <toolbar-text-style-dropdown
+        data-testid="text-styles"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        v-if="codeSuggestionsEnabled"
+        data-testid="code-suggestion"
+        content-type="codeSuggestion"
+        icon-name="doc-code"
+        editor-command="insertCodeSuggestion"
+        :label="__('Insert suggestion')"
+        :show-active-state="false"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="bold"
+        content-type="bold"
+        icon-name="bold"
+        editor-command="toggleBold"
+        :label="i18n.bold"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="italic"
+        content-type="italic"
+        icon-name="italic"
+        editor-command="toggleItalic"
+        :label="i18n.italic"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="strike"
+        content-type="strike"
+        icon-name="strikethrough"
+        editor-command="toggleStrike"
+        :label="i18n.strike"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="blockquote"
+        content-type="blockquote"
+        icon-name="quote"
+        editor-command="toggleBlockquote"
+        :label="i18n.quote"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="code"
+        content-type="code"
+        icon-name="code"
+        editor-command="toggleCode"
+        :label="i18n.code"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="link"
+        content-type="link"
+        icon-name="link"
+        editor-command="editLink"
+        :label="i18n.link"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="bullet-list"
+        content-type="bulletList"
+        icon-name="list-bulleted"
+        class="gl-display-none gl-sm-display-inline"
+        editor-command="toggleBulletList"
+        :label="i18n.bulletList"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="ordered-list"
+        content-type="orderedList"
+        icon-name="list-numbered"
+        class="gl-display-none gl-sm-display-inline"
+        editor-command="toggleOrderedList"
+        :label="i18n.numberedList"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-button
+        data-testid="task-list"
+        content-type="taskList"
+        icon-name="list-task"
+        class="gl-display-none gl-sm-display-inline"
+        editor-command="toggleTaskList"
+        :label="i18n.taskList"
+        @execute="trackToolbarControlExecution"
+      />
+      <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
+      <toolbar-attachment-button
+        v-if="!hideAttachmentButton"
+        data-testid="attachment"
+        @execute="trackToolbarControlExecution"
+      />
+      <!-- TODO Add icon and trigger functionality from here -->
+      <toolbar-button
+        v-if="supportsQuickActions"
+        data-testid="quick-actions"
+        content-type="quickAction"
+        icon-name="quick-actions"
+        class="gl-display-none gl-sm-display-inline"
+        editor-command="insertQuickAction"
+        :label="__('Add a quick action')"
+        @execute="trackToolbarControlExecution"
+      />
+      <comment-templates-dropdown
+        v-if="newCommentTemplatePath"
+        :new-comment-template-path="newCommentTemplatePath"
+        @select="insertSavedReply"
+      />
+      <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
     </div>
   </div>
 </template>