Code review feedback

- Add inline comment about padding in contenteditable
element
- Use icon button instead of icon inside a button
- Consolidate labels
- Validate that ContentEditor is provided a valid
TipTap Editor instance

app/assets/javascripts/content_editor/components/content_editor.vue

 <script>
-import { EditorContent } from 'tiptap';
+import { EditorContent, Editor } from 'tiptap';
 import TopToolbar from './top_toolbar.vue';
 
 export default {
@@ -11,6 +11,7 @@ export default {
     editor: {
       type: Object,
       required: true,
+      validator: (editor) => editor instanceof Editor,
     },
   },
 };

app/assets/javascripts/content_editor/components/toolbar_button.vue

 <script>
-import { GlButton, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 
 export default {
   components: {
     GlButton,
-    GlIcon,
   },
   directives: {
     GlTooltip,
@@ -55,11 +54,11 @@ export default {
     v-gl-tooltip
     category="tertiary"
     size="small"
+    class="gl-mx-2"
     :class="{ active: isActive }"
     :aria-label="label"
     :title="label"
+    :icon="iconName"
     @click="execute"
-  >
-    <gl-icon :name="iconName" :size="16" />
-  </gl-button>
+  />
 </template>

app/assets/javascripts/content_editor/components/top_toolbar.vue

@@ -23,14 +23,14 @@ export default {
       data-testid="bold"
       content-type="bold"
       icon-name="bold"
-      :label="__('Bold')"
+      :label="__('Bold text')"
       :editor="editor"
     />
     <toolbar-button
       data-testid="italic"
       content-type="italic"
       icon-name="italic"
-      :label="__('Italic')"
+      :label="__('Italic text')"
       :editor="editor"
     />
     <toolbar-button

app/assets/javascripts/content_editor/services/create_editor.js

@@ -39,6 +39,11 @@ const createEditor = async ({ content, renderMarkdown, serializer: customSeriali
     ],
     editorProps: {
       attributes: {
+        /*
+         * Adds some padding to the contenteditable element where the user types.
+         * Otherwise, the text cursor is not visible when its position is at the
+         * beginning of a line.
+         */
         class: 'gl-py-4 gl-px-5',
       },
     },

locale/gitlab.pot

@@ -5229,9 +5229,6 @@ msgstr ""
 msgid "Board|Load more issues"
 msgstr ""
 
-msgid "Bold"
-msgstr ""
-
 msgid "Bold text"
 msgstr ""
 
@@ -17902,9 +17899,6 @@ msgstr ""
 msgid "It's you"
 msgstr ""
 
-msgid "Italic"
-msgstr ""
-
 msgid "Italic text"
 msgstr ""
 

spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`content_editor/components/toolbar_button displays tertiary, small button with a provided label and icon 1`] = `
-"<b-button-stub event=\\"click\\" routertag=\\"a\\" size=\\"sm\\" variant=\\"default\\" type=\\"button\\" tag=\\"button\\" aria-label=\\"Bold\\" title=\\"Bold\\" class=\\"gl-button btn-default-tertiary\\">
+"<b-button-stub event=\\"click\\" routertag=\\"a\\" size=\\"sm\\" variant=\\"default\\" type=\\"button\\" tag=\\"button\\" aria-label=\\"Bold\\" title=\\"Bold\\" class=\\"gl-mx-2 gl-button btn-default-tertiary btn-icon\\">
   <!---->
-  <!----> <span class=\\"gl-button-text\\"><gl-icon-stub name=\\"bold\\" size=\\"16\\"></gl-icon-stub></span></b-button-stub>"
+  <gl-icon-stub name=\\"bold\\" size=\\"16\\" class=\\"gl-button-icon\\"></gl-icon-stub>
+  <!---->
+</b-button-stub>"
 `;