feat: make QuoteCard editable (WIP)

client/src/components/QuoteCard.vue

@@ -4,13 +4,14 @@
       <QuoteCardActionButton @click="editQuote" icon="edit" />
       <QuoteCardActionButton @click="deleteQuote" icon="trash" />
     </div>
-    <div class="quote__quote">
+    <div :id="quoteElId" class="quote__quote" :contenteditable="isEditMode">
       {{ quote.quote }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import useEngine from '@/composables/useEngine'
 import type { Quote } from '@/composables/engine.d'
 
@@ -19,9 +20,20 @@ const props = defineProps<{
   editable?: boolean,
 }>()
 
+const quoteElId = `quote-${props.quote.id}`
+const isEditMode = ref(false)
 
 const editQuote = () => {
-  console.warn('editQuote() not yet implemented')
+  isEditMode.value = true
+  window.setTimeout(() => {
+    const $el = document.getElementById(quoteElId)
+    $el.focus()
+    const range = document.createRange()
+    range.selectNodeContents($el)
+    const sel = window.getSelection()
+    sel.removeAllRanges()
+    sel.addRange(range)
+  }, 0)
 }
 
 const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
@@ -62,7 +74,7 @@ const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
 
   }
 
-  &__container:hover &__action-buttons {
+  &__container__editable:hover &__action-buttons {
     visibility: visible;
   }