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