select whole title on focus

src/components/deck-card.vue

@@ -10,6 +10,7 @@
     <section name="card-front" class="card-front">
       <header>
         <h1 :contenteditable="isSelection"
+        @focus="selectLine"
         @blur="editField('name', $event)"
         @keypress.enter.prevent="editField('name', $event)">
           {{ card.name }}
@@ -32,6 +33,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { cardWHtoStyle, iconPath } from '@/lib'
 import DeckCardEditor from '@/components/deck-card-editor.vue'
+import { selectLine } from '@/editor'
 
 @Component({
   components: { DeckCardEditor }
@@ -102,6 +104,10 @@ export default class DeckCard extends Vue {
 
     return style
   }
+
+  private selectLine () {
+    selectLine()
+  }
 }
 </script>
 

src/editor/caret.ts

@@ -1,19 +1,33 @@
-function collapseRange (node: Node, toStart = false) {
+import { getFocussedNode } from './node'
+
+function applyRange (callback: (range: Range) => void) {
   const range = document.createRange()
-  range.selectNode(node)
+  callback(range)
-  range.collapse(toStart)
+
   const sel = window.getSelection()
   if (sel) {
     sel.removeAllRanges()
     sel.addRange(range)
   }
 }
+function collapseRange (node: Node, toStart = false) {
+  applyRange(range => {
+    range.selectNode(node)
+    range.collapse(toStart)
+  })
+}
 
 export function moveCaretToBOL () {
-  const node = window.getSelection()?.focusNode
+  const node = getFocussedNode()
   if (node) collapseRange(node, true)
 }
 export function moveCaretToEOL () {
-  const node = window.getSelection()?.focusNode
+  const node = getFocussedNode()
   if (node) collapseRange(node, false)
 }
+export function selectLine () {
+  const node = getFocussedNode()
+  if (node) {
+    applyRange(range => range.selectNodeContents(node))
+  }
+}

src/editor/index.ts

@@ -5,12 +5,14 @@ export {
   isRootChild,
   isElementNode,
   isTextNode,
-  isEmptyTextNode
+  isEmptyTextNode,
+  getFocussedNode
 } from './node'
 
 export {
   moveCaretToBOL,
-  moveCaretToEOL
+  moveCaretToEOL,
+  selectLine
 } from './caret'
 
 export type State = KV<boolean>

src/editor/node.ts

@@ -1,5 +1,7 @@
 const { TEXT_NODE, ELEMENT_NODE } = Node
-
+export function getFocussedNode (): Node | null {
+  return window.getSelection()?.focusNode || null
+}
 export function isTextNode ({ nodeType }: Node): boolean {
   return nodeType === TEXT_NODE
 }