1<script>
2import { escape } from 'lodash';
3import { __ } from '~/locale';
4
5export default {
6  props: {
7    initialTitle: {
8      type: String,
9      required: false,
10      default: '',
11    },
12    placeholder: {
13      type: String,
14      required: false,
15      default: __('Add a title...'),
16    },
17    disabled: {
18      type: Boolean,
19      required: false,
20      default: false,
21    },
22  },
23  data() {
24    return {
25      title: this.initialTitle,
26    };
27  },
28  methods: {
29    getSanitizedTitle(inputEl) {
30      const { innerText } = inputEl;
31      return escape(innerText);
32    },
33    handleBlur({ target }) {
34      this.$emit('title-changed', this.getSanitizedTitle(target));
35    },
36    handleInput({ target }) {
37      this.$emit('title-input', this.getSanitizedTitle(target));
38    },
39    handleSubmit() {
40      this.$refs.titleEl.blur();
41    },
42  },
43};
44</script>
45
46<template>
47  <h2
48    class="gl-font-weight-normal gl-sm-font-weight-bold gl-my-5 gl-display-inline-block"
49    :class="{ 'gl-cursor-not-allowed': disabled }"
50    data-testid="title"
51    aria-labelledby="item-title"
52  >
53    <span
54      id="item-title"
55      ref="titleEl"
56      role="textbox"
57      :aria-label="__('Title')"
58      :data-placeholder="placeholder"
59      :contenteditable="!disabled"
60      class="gl-pseudo-placeholder"
61      @blur="handleBlur"
62      @keyup="handleInput"
63      @keydown.enter.exact="handleSubmit"
64      @keydown.ctrl.u.prevent
65      @keydown.meta.u.prevent
66      @keydown.ctrl.b.prevent
67      @keydown.meta.b.prevent
68      >{{ title }}</span
69    >
70  </h2>
71</template>
72