Adding a new editable widget, and migrating one usage of the old Editable

webapp/src/components/viewTitle.scss

@@ -0,0 +1,10 @@
+.ViewTitle {
+    .Button {
+        display: none;
+    }
+    &:hover {
+        .Button {
+            display: block;
+        }
+    }
+}

webapp/src/components/viewTitle.tsx

@@ -8,8 +8,8 @@ import {Board} from '../blocks/board'
 import mutator from '../mutator'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
+import Editable from '../widgets/editable'
 
-import {Editable} from './editable'
 import Button from './button'
 
 type Props = {
@@ -19,16 +19,18 @@ type Props = {
 
 type State = {
     isHoverOnCover: boolean
+    title: string
 }
 
 class ViewTitle extends React.Component<Props, State> {
+    private titleEditor = React.createRef<Editable>()
     shouldComponentUpdate(): boolean {
         return true
     }
 
     constructor(props: Props) {
         super(props)
-        this.state = {isHoverOnCover: false}
+        this.state = {isHoverOnCover: false, title: props.board.title}
     }
 
     render(): JSX.Element {
@@ -77,11 +79,23 @@ class ViewTitle extends React.Component<Props, State> {
                             </Menu>
                         </MenuWrapper>}
                     <Editable
+                        ref={this.titleEditor}
                         className='title'
-                        text={board.title}
+                        value={this.state.title}
                         placeholderText={intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled Board'})}
-                        onChanged={(text) => {
-                            mutator.changeTitle(board, text)
+                        onChange={(title) => this.setState({title})}
+                        onBlur={() => mutator.changeTitle(board, this.state.title)}
+                        onFocus={() => this.titleEditor.current.focus()}
+                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
+                            if (e.keyCode === 27 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // ESC
+                                e.stopPropagation()
+                                this.setState({title: this.props.board.title})
+                                setTimeout(() => this.titleEditor.current.blur(), 0)
+                            } else if (e.keyCode === 13 && !(e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) { // Return
+                                e.stopPropagation()
+                                mutator.changeTitle(board, this.state.title)
+                                this.titleEditor.current.blur()
+                            }
                         }}
                     />
                 </div>

webapp/src/widgets/editable.scss

@@ -0,0 +1,7 @@
+.Editable {
+	cursor: text;
+    border: 0;
+    &.active {
+	    min-width: 100px;
+    }
+}

webapp/src/widgets/editable.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import './editable.scss'
+
+type Props = {
+    onChange: (value: string) => void
+    value?: string
+    placeholderText?: string
+    className?: string
+
+    onFocus?: () => void
+    onBlur?: () => void
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+}
+
+export default class Editable extends React.Component<Props> {
+    private elementRef = React.createRef<HTMLInputElement>()
+
+    shouldComponentUpdate(): boolean {
+        return true
+    }
+
+    public focus(): void {
+        this.elementRef.current.focus()
+
+        // Put cursor at end
+        // document.execCommand('selectAll', false, null)
+        // document.getSelection().collapseToEnd()
+    }
+
+    public blur(): void {
+        this.elementRef.current.blur()
+    }
+
+    public render(): JSX.Element {
+        const {value, onChange, className, placeholderText, onFocus, onBlur, onKeyDown} = this.props
+
+        return (
+            <input
+                ref={this.elementRef}
+                className={'Editable ' + className}
+                placeholder={placeholderText}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    onChange(e.target.value)
+                }}
+                value={value}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+            />
+        )
+    }
+}