extract edit note component

src/components/StackedNote.vue

@@ -15,6 +15,10 @@ const LinkedNotes = defineAsyncComponent(
   () => import('@/components/LinkedNotes.vue')
 )
 
+const EditNote = defineAsyncComponent(
+  () => import('@/modules/note/components/EditNote.vue')
+)
+
 const props = defineProps<{
   user: string
   repo: string
@@ -46,7 +50,7 @@ const toggleMode = () => {
   mode.value = mode.value === 'read' ? 'edit' : 'read'
 }
 
-watch(content, () => {
+watch([content, mode], () => {
   if (!content.value) {
     return
   }
@@ -92,7 +96,7 @@ watch(content, () => {
         <img src="@/assets/icons/share.svg" alt="share" />
       </router-link>
       <div v-if="mode === 'edit'" class="edit">
-        <textarea id="" v-model="rawContent" name="raw-content"></textarea>
+        <edit-note :sha="sha" :initial-content="rawContent" />
       </div>
       <div v-if="mode === 'read'" class="note-content" v-html="content"></div>
     </section>
@@ -154,14 +158,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   }
 }
 
-textarea {
-  width: 100%;
-  height: 100%;
-  border: none;
-  flex: 1;
-  resize: none;
-}
-
 @media screen and (max-width: 768px) {
   .stacked-note {
     padding: 0 0.5rem 1rem;

src/modules/note/components/EditNote.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{ sha: string; initialContent: string }>()
+const content = ref('')
+
+onMounted(() => {
+  content.value = props.initialContent
+})
+
+const handleInput = (input: string) => {
+  content.value = input
+}
+</script>
+
+<template>
+  <div>
+    <pre
+      contenteditable
+      @input="(e) => handleInput((e.target as any)?.innerText ?? '')"
+      >{{ initialContent }}</pre
+    >
+  </div>
+</template>
+
+<style scoped lang="scss">
+pre {
+  width: 100%;
+  height: 100%;
+  border: none;
+  flex: 1;
+  resize: none;
+  white-space: pre-wrap;
+}
+</style>