introduces v-editable and makes most text elements editable

src/assets/app.css

@@ -128,3 +128,6 @@ button.edit-pencil {
   border: none;
   cursor: pointer;
 }
+
+[contenteditable="true"] { text-decoration: underline dotted; }
+[contenteditable="true"]:focus { text-decoration: none; }

src/components/deck-card-description.vue

@@ -1,7 +1,7 @@
 <template>
   <p>
-    <span class="title">{{ params[0] }}</span>
-    <span>{{ params[1] }}</span>
+    <span v-editable:0="editable" class="title">{{ params[0] }}</span>
+    <span v-editable:1="editable">{{ params[1] }}</span>
   </p>
 </template>
 
@@ -11,6 +11,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 @Component
 export default class DeckCardDescription extends Vue {
   @Prop() public readonly params!: string[]
+  @Prop() public readonly editable!: boolean
 }
 </script>
 

src/components/deck-card-note.vue

@@ -1,5 +1,5 @@
 <template>
-  <p>{{ params[0] }}</p>
+  <p v-editable:0="editable">{{ params[0] }}</p>
 </template>
 
 <script lang="ts">
@@ -8,6 +8,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 @Component
 export default class DeckCardNote extends Vue {
   @Prop() public readonly params!: string[]
+  @Prop() public readonly editable!: boolean
 }
 </script>
 

src/components/deck-card-property.vue

@@ -1,7 +1,7 @@
 <template>
   <p>
-    <span class="title">{{ params[0] }}</span>
-    <span class="description">{{ params[1] }}</span>
+    <span class="title" v-editable:0="editable">{{ params[0] }}</span>
+    <span class="description" v-editable:1="editable">{{ params[1] }}</span>
   </p>
 </template>
 
@@ -11,6 +11,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 @Component
 export default class DeckCardProperty extends Vue {
   @Prop() public readonly params!: string[]
+  @Prop() public readonly editable!: boolean
 }
 </script>
 

src/components/deck-card-section.vue

@@ -1,5 +1,5 @@
 <template>
-  <h4>{{ params[0] }}</h4>
+  <h4 v-editable:0="editable">{{ params[0] }}</h4>
 </template>
 
 <script lang="ts">
@@ -8,6 +8,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 @Component
 export default class DeckCardSection extends Vue {
   @Prop() public readonly params!: string[]
+  @Prop() public readonly editable!: boolean
 }
 </script>
 

src/components/deck-card-subtitle.vue

@@ -1,8 +1,5 @@
 <template>
-  <h3 :contenteditable="editable"
-  @keypress.enter.prevent="$emit('edit', { param: 0, value: $event.target.innerText })">
-    {{ params[0] }}
-  </h3>
+  <h3 v-editable:0="editable">{{ params[0] }}</h3>
 </template>
 
 <script lang="ts">

src/components/deck-card-text.vue

@@ -1,5 +1,5 @@
 <template>
-  <p>{{ params[0] }}</p>
+  <p v-editable:0="editable">{{ params[0] }}</p>
 </template>
 
 <script lang="ts">
@@ -8,6 +8,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 @Component
 export default class DeckCardText extends Vue {
   @Prop() public readonly params!: string[]
+  @Prop() public readonly editable!: boolean
 }
 </script>
 

src/components/deck-card.vue

@@ -251,21 +251,4 @@ export default class DeckCard extends Vue {
   height: 3rem;
   margin-top: -3rem;
 }
-
-[contenteditable="true"] {
-  position: relative;
-}
-[contenteditable="true"]::after {
-  content: ' ';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  border-bottom: 1px dotted white;
-  mix-blend-mode: difference;
-}
-[contenteditable="true"]:focus::after {
-  border-bottom: none;
-}
 </style>

src/main.ts

@@ -15,6 +15,24 @@ declare module 'vue/types/vue' {
 Vue.config.productionTip = false
 Vue.prototype.$storage = new StorageHandler()
 
+Vue.directive('editable', (el, { value, arg }, vnode) => {
+  el.contentEditable = value ? 'true' : 'false'
+  el.addEventListener('keypress', event => {
+    // allow line break via Shift + Enter
+    if (event.keyCode === 13 && !event.shiftKey) {
+      event.preventDefault()
+      console.log('edit event on enter', el.innerText)
+      if (!vnode.context) return
+      vnode.context.$emit('edit', { param: arg, value: el.innerText })
+    }
+  })
+  el.addEventListener('blur', () => {
+    console.log('edit event on blur', el.innerText)
+    if (!vnode.context) return
+    vnode.context.$emit('edit', { param: arg, value: el.innerText })
+  })
+})
+
 new Vue({
   router,
   render: h => h(App)