Refactor child note editor

I plan on using the same editor component when editing a note itself, in
which case the plus symbol and padding is unnecessary. The editor is
meant to be used in-place of note text.

gdn-app/src/components/CNote.vue

@@ -3,13 +3,14 @@ import { useNotesStore } from "@/stores/notes";
 import { useUiStore } from "@/stores/ui";
 import { pathAppend } from "@/util";
 import {
+  RiAddLine,
   RiArrowDownSLine,
   RiArrowRightSLine,
   RiStickyNoteAddLine,
 } from "@remixicon/vue";
 import { computed, ref, watchEffect } from "vue";
 import CNoteButton from "./CNoteButton.vue";
-import CNoteCreator from "./CNoteCreator.vue";
+import CNoteEditor from "./CNoteEditor.vue";
 
 const notes = useNotesStore();
 const ui = useUiStore();
@@ -76,14 +77,14 @@ function onClick() {
   toggleOpen();
 }
 
-function onCreatorClose() {
+function onChildEditorClose() {
   creating.value = false;
 }
 
-function onCreatorFinish(text: string) {
+function onChildEditorFinish(text: string) {
   notes.appendNewChildNote(props.noteId, text);
   ui.focusPath = pathAppend(props.path, children.value.length - 1);
-  onCreatorClose();
+  onChildEditorClose();
 }
 </script>
 
@@ -128,11 +129,19 @@ function onCreatorFinish(text: string) {
       />
     </div>
 
-    <div v-if="creating" class="pl-2">
+    <!-- Child editor (for creating new children) -->
-      <CNoteCreator
+    <div v-if="creating" class="flex items-start pl-3">
-        :parent-id="props.noteId"
+      <!-- Fold/unfold symbol -->
-        @close="onCreatorClose"
+      <div class="flex h-6 items-center">
-        @finish="onCreatorFinish"
+        <div class="rounded">
+          <RiAddLine size="16px" />
+        </div>
+      </div>
+
+      <CNoteEditor
+        class="flex-1"
+        @close="onChildEditorClose"
+        @finish="onChildEditorFinish"
       />
     </div>
 

gdn-app/src/components/CNoteEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RiAddLine, RiCheckLine, RiCloseLine } from "@remixicon/vue";
+import { RiCheckLine, RiCloseLine } from "@remixicon/vue";
 import { onMounted, ref, useTemplateRef } from "vue";
 import CNoteButton from "./CNoteButton.vue";
 
@@ -8,18 +8,18 @@ const emit = defineEmits<{
   (e: "finish", text: string): void;
 }>();
 
-const input = useTemplateRef<HTMLTextAreaElement>("input");
+const textarea = useTemplateRef<HTMLTextAreaElement>("textarea");
 const text = ref("");
 
 onMounted(() => {
-  input.value?.focus();
+  textarea.value?.focus();
   updateTextareaHeight();
 });
 
 function updateTextareaHeight() {
-  if (!input.value) return;
+  if (!textarea.value) return;
-  input.value.style.height = "0px";
+  textarea.value.style.height = "0px";
-  input.value.style.height = `${input.value.scrollHeight}px`;
+  textarea.value.style.height = `${textarea.value.scrollHeight}px`;
 }
 
 function onInput() {
@@ -42,17 +42,10 @@ function onKeyPress(ev: KeyboardEvent) {
 </script>
 
 <template>
-  <div class="flex flex-row items-start pl-1">
+  <div class="flex items-start gap-0.5">
-    <!-- Fold/unfold symbol -->
-    <div class="flex h-6 items-center">
-      <div class="rounded">
-        <RiAddLine size="16px" />
-      </div>
-    </div>
-
     <!-- Text -->
     <textarea
-      ref="input"
+      ref="textarea"
       v-model="text"
       class="z-1 flex-1 resize-none bg-neutral-100 px-1 outline-none"
       autofocus
@@ -60,13 +53,13 @@ function onKeyPress(ev: KeyboardEvent) {
       @keypress="onKeyPress"
     ></textarea>
 
-    <div class="ml-0.5 flex h-6 items-center">
+    <div class="flex h-6 items-center">
       <CNoteButton @click="emit('finish', text)">
         <RiCheckLine size="16px" />
       </CNoteButton>
     </div>
 
-    <div class="ml-0.5 flex h-6 items-center">
+    <div class="flex h-6 items-center">
       <CNoteButton @click="emit('close')">
         <RiCloseLine size="16px" />
       </CNoteButton>