Add latest changes from gitlab-org/gitlab@master

2 files changed, 75 insertions, 49 deletions

diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index b6c16e9f306..4f26ed7fac5 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 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';
@@ -32,6 +34,27 @@ export default {
       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'),
+      },
+    };
+  },
   methods: {
     trackToolbarControlExecution({ contentType, value }) {
       trackUIControl({ property: contentType, value });
@@ -58,7 +81,7 @@ export default {
           content-type="bold"
           icon-name="bold"
           editor-command="toggleBold"
-          :label="__('Bold text')"
+          :label="i18n.bold"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -66,7 +89,7 @@ export default {
           content-type="italic"
           icon-name="italic"
           editor-command="toggleItalic"
-          :label="__('Italic text')"
+          :label="i18n.italic"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -74,7 +97,7 @@ export default {
           content-type="strike"
           icon-name="strikethrough"
           editor-command="toggleStrike"
-          :label="__('Strikethrough')"
+          :label="i18n.strike"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -82,7 +105,7 @@ export default {
           content-type="blockquote"
           icon-name="quote"
           editor-command="toggleBlockquote"
-          :label="__('Insert a quote')"
+          :label="i18n.quote"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -90,7 +113,7 @@ export default {
           content-type="code"
           icon-name="code"
           editor-command="toggleCode"
-          :label="__('Code')"
+          :label="i18n.code"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -98,7 +121,7 @@ export default {
           content-type="link"
           icon-name="link"
           editor-command="editLink"
-          :label="__('Insert link')"
+          :label="i18n.link"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -107,7 +130,7 @@ export default {
           icon-name="list-bulleted"
           class="gl-display-none gl-sm-display-inline"
           editor-command="toggleBulletList"
-          :label="__('Add a bullet list')"
+          :label="i18n.bulletList"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -116,7 +139,7 @@ export default {
           icon-name="list-numbered"
           class="gl-display-none gl-sm-display-inline"
           editor-command="toggleOrderedList"
-          :label="__('Add a numbered list')"
+          :label="i18n.numberedList"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-button
@@ -125,7 +148,7 @@ export default {
           icon-name="list-task"
           class="gl-display-none gl-sm-display-inline"
           editor-command="toggleTaskList"
-          :label="__('Add a checklist')"
+          :label="i18n.taskList"
           @execute="trackToolbarControlExecution"
         />
         <toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
diff --git a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
index 771455dfe66..ab1546b9016 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
@@ -1,5 +1,6 @@
 <script>
-import { GlDisclosureDropdown, GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlButton, GlTooltip } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
 import { __, sprintf } from '~/locale';
 import { clamp } from '../services/utils';
 
@@ -14,13 +15,12 @@ export default {
   components: {
     GlButton,
     GlDisclosureDropdown,
-  },
-  directives: {
     GlTooltip,
   },
   inject: ['tiptapEditor'],
   data() {
     return {
+      toggleId: uniqueId('dropdown-toggle-btn-'),
       maxRows: MIN_ROWS,
       maxCols: MIN_COLS,
       rows: 1,
@@ -82,44 +82,47 @@ export default {
 };
 </script>
 <template>
-  <gl-disclosure-dropdown
-    ref="dropdown"
-    v-gl-tooltip
-    size="small"
-    category="tertiary"
-    icon="table"
-    no-caret
-    :aria-label="__('Insert table')"
-    :toggle-text="__('Insert table')"
-    positioning-strategy="fixed"
-    class="content-editor-table-dropdown gl-mr-3"
-    text-sr-only
-    :fluid-width="true"
-    @shown="setFocus(1, 1)"
-  >
-    <div
-      class="gl-p-3 gl-pt-2"
-      role="grid"
-      :aria-colcount="$options.MAX_COLS"
-      :aria-rowcount="$options.MAX_ROWS"
+  <div class="gl-display-inline-flex gl-vertical-align-middle">
+    <gl-disclosure-dropdown
+      ref="dropdown"
+      :toggle-id="toggleId"
+      size="small"
+      category="tertiary"
+      icon="table"
+      no-caret
+      :aria-label="__('Insert table')"
+      :toggle-text="__('Insert table')"
+      positioning-strategy="fixed"
+      class="content-editor-table-dropdown gl-mr-3"
+      text-sr-only
+      :fluid-width="true"
+      @shown="setFocus(1, 1)"
     >
-      <div v-for="r of list(maxRows)" :key="r" class="gl-display-flex" role="row">
-        <div v-for="c of list(maxCols)" :key="c" role="gridcell">
-          <gl-button
-            :ref="`table-${r}-${c}`"
-            :class="{ 'active gl-bg-blue-50!': r <= rows && c <= cols }"
-            :aria-label="getButtonLabel(r, c)"
-            class="table-creator-grid-item gl-display-inline gl-rounded-0! gl-w-6! gl-h-6! gl-p-0!"
-            @mouseover="setRowsAndCols(r, c)"
-            @focus="setRowsAndCols(r, c)"
-            @click="insertTable()"
-            @keydown="onKeydown($event.key)"
-          />
+      <div
+        class="gl-p-3 gl-pt-2"
+        role="grid"
+        :aria-colcount="$options.MAX_COLS"
+        :aria-rowcount="$options.MAX_ROWS"
+      >
+        <div v-for="r of list(maxRows)" :key="r" class="gl-display-flex" role="row">
+          <div v-for="c of list(maxCols)" :key="c" role="gridcell">
+            <gl-button
+              :ref="`table-${r}-${c}`"
+              :class="{ 'active gl-bg-blue-50!': r <= rows && c <= cols }"
+              :aria-label="getButtonLabel(r, c)"
+              class="table-creator-grid-item gl-display-inline gl-rounded-0! gl-w-6! gl-h-6! gl-p-0!"
+              @mouseover="setRowsAndCols(r, c)"
+              @focus="setRowsAndCols(r, c)"
+              @click="insertTable()"
+              @keydown="onKeydown($event.key)"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <div class="gl-border-t gl-px-4 gl-pt-3 gl-pb-2">
-      {{ getButtonLabel(rows, cols) }}
-    </div>
-  </gl-disclosure-dropdown>
+      <div class="gl-border-t gl-px-4 gl-pt-3 gl-pb-2">
+        {{ getButtonLabel(rows, cols) }}
+      </div>
+    </gl-disclosure-dropdown>
+    <gl-tooltip :target="toggleId" placement="top">{{ __('Insert table') }}</gl-tooltip>
+  </div>
 </template>