From 456fc9f4bc576479fdc12cfcdfd795e6494d8ddc Mon Sep 17 00:00:00 2001
From: koehr <n@koehr.in>
Date: Tue, 17 Mar 2020 00:46:28 +0100
Subject: [PATCH] introduces v-editable and makes most text elements editable

---
 src/assets/app.css                       |  3 +++
 src/components/deck-card-description.vue |  5 +++--
 src/components/deck-card-note.vue        |  3 ++-
 src/components/deck-card-property.vue    |  5 +++--
 src/components/deck-card-section.vue     |  3 ++-
 src/components/deck-card-subtitle.vue    |  5 +----
 src/components/deck-card-text.vue        |  3 ++-
 src/components/deck-card.vue             | 17 -----------------
 src/main.ts                              | 18 ++++++++++++++++++
 9 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/assets/app.css b/src/assets/app.css
index ac2927b..0380d11 100644
--- a/src/assets/app.css
+++ b/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; }
diff --git a/src/components/deck-card-description.vue b/src/components/deck-card-description.vue
index 0a48a5f..f7b79a2 100644
--- a/src/components/deck-card-description.vue
+++ b/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>
 
diff --git a/src/components/deck-card-note.vue b/src/components/deck-card-note.vue
index 2c6a123..4768d0e 100644
--- a/src/components/deck-card-note.vue
+++ b/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>
 
diff --git a/src/components/deck-card-property.vue b/src/components/deck-card-property.vue
index c6359b9..55da8af 100644
--- a/src/components/deck-card-property.vue
+++ b/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>
 
diff --git a/src/components/deck-card-section.vue b/src/components/deck-card-section.vue
index 979beb1..a32b34c 100644
--- a/src/components/deck-card-section.vue
+++ b/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>
 
diff --git a/src/components/deck-card-subtitle.vue b/src/components/deck-card-subtitle.vue
index a72ed1f..844e4ac 100644
--- a/src/components/deck-card-subtitle.vue
+++ b/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">
diff --git a/src/components/deck-card-text.vue b/src/components/deck-card-text.vue
index 73ad740..3068ec8 100644
--- a/src/components/deck-card-text.vue
+++ b/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>
 
diff --git a/src/components/deck-card.vue b/src/components/deck-card.vue
index 44687f6..1a44fe8 100644
--- a/src/components/deck-card.vue
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index 08d9d0a..01edb69 100644
--- a/src/main.ts
+++ b/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)