pukaad-ui-lib 1.350.0 → 1.352.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.350.0",
+  "version": "1.352.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/card/card-place-detail.vue

@@ -26,8 +26,8 @@
           name="lucide:clock"
           :size="20"
           :class="[
-  'text-primary shrink-0 mt-[2px]',
-  props.item.open_status === 'temporarily_closed' && 'text-destructive'
+  'shrink-0 mt-[2px]',
+  props.item.open_status === 'temporarily_closed' ? 'text-destructive' : 'text-primary '
 ]"
         />
         <div v-if="businessHours.length" class="flex flex-col gap-[4px] flex-1">

package/dist/runtime/components/card/card-review.d.vue.ts

@@ -1,10 +1,14 @@
-import type { CardReviewProps } from "#pukaad-ui/types/components/card/card-review";
+import type { CardReviewProps, Replies } from "#pukaad-ui/types/components/card/card-review";
 type __VLS_Props = {
     item: CardReviewProps;
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
-    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    /** เปิดให้ตอบกลับรีวิวได้ (สำหรับ business เจ้าของสถานที่เท่านั้น) — เมนู "ตอบกลับ" จะโผล่ในปุ่ม ⋮ */
+    allowReply?: boolean;
+    /** avatar ของ business ที่ใช้แสดงในฟอร์มตอบกลับ (Figma 2456:53296) */
+    replyAvatar?: string;
+    /** ถ้ามี place context → like/unlike, edit และ reply จัดการใน component เลย */
     place?: {
         id: string | number;
         name?: string;
@@ -18,17 +22,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
     "review-updated": (data: unknown) => any;
+    "reply-updated": (item: CardReviewProps, reply?: Replies | undefined) => any;
+    "reply-submit": (item: CardReviewProps, description: string) => any;
+    "reply-delete": (item: CardReviewProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
     "onReview-updated"?: ((data: unknown) => any) | undefined;
+    "onReply-updated"?: ((item: CardReviewProps, reply?: Replies | undefined) => any) | undefined;
+    "onReply-submit"?: ((item: CardReviewProps, description: string) => any) | undefined;
+    "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;

package/dist/runtime/components/card/card-review.vue

@@ -44,6 +44,7 @@
                   disabled-padding
                   @review-edit="onEdit"
                   @review-delete="emit('delete', props.item)"
+                  @review-reply="openReplyForm"
                 />
               </div>
             </div>
@@ -78,16 +79,46 @@
         </div>
       </div>
 
-      <div v-if="props.item.replies">
-        <div class="p-[16px] rounded-sm bg-bright">
+      <div
+        v-if="localReplies && !isReplyOpen"
+        class="relative p-[16px] rounded-md bg-bright flex flex-col gap-[4px]"
+      >
+        <!-- หางบอลลูนชี้ขึ้นบน (Figma 2456:53435 Polygon 8) -->
+        <div
+          class="absolute -top-[9px] left-[8px] w-0 h-0 border-l-[9px] border-l-transparent border-r-[9px] border-r-transparent border-b-[12px] border-b-bright"
+        />
+        <div class="flex justify-between items-center">
           <div class="text-gray font-body-large">
-            การตอบกลับจาก {{ props.item.replies?.author }}
-          </div>
-          <div class="font-body-large">
-            {{ props.item.replies?.description }}
+            การตอบกลับจาก {{ localReplies.author }}
           </div>
+          <!-- เมนูจัดการคำตอบกลับของตัวเอง — เฉพาะ business (Figma 2456:88751) -->
+          <PickerOptionMenuUser
+            v-if="props.allowReply"
+            state="my-reply"
+            disabled-padding
+            @reply-edit="openReplyForm"
+            @reply-delete="emit('reply-delete', props.item)"
+          />
+        </div>
+        <!-- whitespace-pre-wrap ให้ \n จาก Shift+Enter แสดงจริง (เทียบ comment.vue) -->
+        <div class="font-body-large whitespace-pre-wrap break-words">
+          {{ normalizeContent(localReplies.description) }}
         </div>
       </div>
+
+      <!-- ฟอร์มตอบกลับ (business เท่านั้น) — Figma 2456:53296/53525
+           ไม่ส่ง reply-to → ชื่อคนอยู่ใน placeholder เฉยๆ ไม่ปนลงไปในข้อความที่ส่ง -->
+      <InputComment
+        v-if="isReplyOpen"
+        v-model="replyText"
+        :avatar="props.replyAvatar"
+        :placeholder="`\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A ${props.item.user?.name ?? ''}`"
+        :loading="isSubmittingReply"
+        submit-text="ตอบกลับ"
+        autofocus
+        @submit="submitReply"
+        @cancel="isReplyOpen = false"
+      />
     </div>
   </div>
 
@@ -148,9 +179,11 @@ const props = defineProps({
   isProfile: { type: Boolean, required: true, default: false },
   disabledLike: { type: Boolean, required: false, default: false },
   disabledMenu: { type: Boolean, required: false, default: false },
+  allowReply: { type: Boolean, required: false, default: false },
+  replyAvatar: { type: String, required: false, default: "" },
   place: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["toggle-like", "select-image", "edit", "delete", "review-updated"]);
+const emit = defineEmits(["toggle-like", "select-image", "edit", "delete", "review-updated", "reply-updated", "reply-submit", "reply-delete"]);
 const isOpen = ref(false);
 const startIndex = ref(0);
 const liked = ref(props.item.review?.liked ?? false);
@@ -178,9 +211,11 @@ const drawerItem = computed(() => ({
   description: props.item.review?.description ?? "",
   photos: (props.item.review?.images ?? []).map((url) => ({ url }))
 }));
-const menuType = computed(
-  () => props.item.user?.is_my_review ? "my-review" : "report-review"
-);
+const menuType = computed(() => {
+  if (props.item.user?.is_my_review) return "my-review";
+  if (props.allowReply && !localReplies.value) return "business-review";
+  return "report-review";
+});
 const navigateToProfile = (pathName) => {
   if (!pathName) return;
   router.push(`/@${pathName}`);
@@ -221,6 +256,56 @@ const onEdit = () => {
 const onReviewSuccess = (data) => {
   emit("review-updated", data);
 };
+const localReplies = ref(props.item.replies);
+const isReplyOpen = ref(false);
+const replyText = ref("");
+const isSubmittingReply = ref(false);
+const normalizeContent = (text) => text.replace(/\n{3,}/g, "\n\n");
+watch(
+  () => props.item.replies,
+  (val) => {
+    localReplies.value = val;
+  }
+);
+const openReplyForm = () => {
+  replyText.value = localReplies.value?.description ?? "";
+  isReplyOpen.value = true;
+};
+const submitReply = async () => {
+  const description = replyText.value.trim();
+  if (!description || isSubmittingReply.value) return;
+  if (!props.place?.id) {
+    emit("reply-submit", props.item, description);
+    isReplyOpen.value = false;
+    return;
+  }
+  isSubmittingReply.value = true;
+  try {
+    const isEdit = !!localReplies.value;
+    const res = await api(
+      `/suggest-places/${props.place.id}/reviews/${props.item.review_id}/reply`,
+      {
+        method: isEdit ? "patch" : "post",
+        body: { description }
+      }
+    );
+    localReplies.value = res?.data ?? {
+      replies_id: localReplies.value?.replies_id ?? 0,
+      author: localReplies.value?.author ?? "",
+      description,
+      created_at: localReplies.value?.created_at ?? (/* @__PURE__ */ new Date()).toISOString()
+    };
+    emit("reply-updated", props.item, localReplies.value);
+    isReplyOpen.value = false;
+    $toast.success(
+      isEdit ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E01\u0E32\u0E23\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !" : "\u0E15\u0E2D\u0E1A\u0E01\u0E25\u0E31\u0E1A\u0E23\u0E35\u0E27\u0E34\u0E27\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !"
+    );
+  } catch {
+    $toast.error("\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+  } finally {
+    isSubmittingReply.value = false;
+  }
+};
 const selectImage = (index) => {
   startIndex.value = index;
   isOpen.value = true;

package/dist/runtime/components/card/card-review.vue.d.ts

@@ -1,10 +1,14 @@
-import type { CardReviewProps } from "#pukaad-ui/types/components/card/card-review";
+import type { CardReviewProps, Replies } from "#pukaad-ui/types/components/card/card-review";
 type __VLS_Props = {
     item: CardReviewProps;
     isProfile: boolean;
     disabledLike?: boolean;
     disabledMenu?: boolean;
-    /** ถ้ามี place context → like/unlike และ edit จัดการใน component เลย */
+    /** เปิดให้ตอบกลับรีวิวได้ (สำหรับ business เจ้าของสถานที่เท่านั้น) — เมนู "ตอบกลับ" จะโผล่ในปุ่ม ⋮ */
+    allowReply?: boolean;
+    /** avatar ของ business ที่ใช้แสดงในฟอร์มตอบกลับ (Figma 2456:53296) */
+    replyAvatar?: string;
+    /** ถ้ามี place context → like/unlike, edit และ reply จัดการใน component เลย */
     place?: {
         id: string | number;
         name?: string;
@@ -18,17 +22,25 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "toggle-like": (item: CardReviewProps, liked: boolean) => any;
     "select-image": (item: CardReviewProps, index: number) => any;
     "review-updated": (data: unknown) => any;
+    "reply-updated": (item: CardReviewProps, reply?: Replies | undefined) => any;
+    "reply-submit": (item: CardReviewProps, description: string) => any;
+    "reply-delete": (item: CardReviewProps) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((item: CardReviewProps) => any) | undefined;
     onEdit?: ((item: CardReviewProps) => any) | undefined;
     "onToggle-like"?: ((item: CardReviewProps, liked: boolean) => any) | undefined;
     "onSelect-image"?: ((item: CardReviewProps, index: number) => any) | undefined;
     "onReview-updated"?: ((data: unknown) => any) | undefined;
+    "onReply-updated"?: ((item: CardReviewProps, reply?: Replies | undefined) => any) | undefined;
+    "onReply-submit"?: ((item: CardReviewProps, description: string) => any) | undefined;
+    "onReply-delete"?: ((item: CardReviewProps) => any) | undefined;
 }>, {
     item: CardReviewProps;
     disabledMenu: boolean;
     isProfile: boolean;
     disabledLike: boolean;
+    allowReply: boolean;
+    replyAvatar: string;
     place: {
         id: string | number;
         name?: string;

package/dist/runtime/components/comment.vue

@@ -7,43 +7,17 @@
       </div>
     </div>
 
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[8px] w-full">
-        <Avatar :size="30" :src="currentUser.avatar" />
-        <div ref="mainInputRef" contenteditable="true"
-          class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-          data-placeholder="เพิ่มความคิดเห็น" @focus="isShowMainActions = true" @input="onMainCommentInput"
-          @keydown.enter.exact.prevent="onSendComment" @keydown.shift.enter.prevent="onInsertLineBreak" />
-      </div>
-      <div v-if="isShowMainActions" class="flex justify-end gap-[8px]">
-        <Button variant="outline" class="w-[56px]" @click="onCancelComment">
-          ยกเลิก
-        </Button>
-        <Button color="primary" class="w-[56px]" :disabled="!mainCommentInput" @click="onSendComment">
-          ส่ง
-        </Button>
-      </div>
-    </div>
+    <!-- กล่องคอมเมนต์หลัก — ปุ่มโผล่ตอนคลิกเข้าช่องพิมพ์ (actions-on-focus) -->
+    <InputComment ref="mainInputRef" v-model="mainCommentInput" :avatar="currentUser.avatar"
+      placeholder="เพิ่มความคิดเห็น" actions-on-focus @submit="onSendComment" />
     <div v-for="cmt in resolvedComments" :key="cmt.id" class="flex flex-col gap-[16px] w-full">
       <div class="flex flex-col gap-[4px] w-full">
         <div class="flex gap-[8px]" @mouseenter="hoveredId = cmt.id" @mouseleave="hoveredId = null">
           <Avatar :size="30" :src="cmt.user.avatar" class="cursor-pointer" @click="onViewProfileComment(cmt.user.id)" />
           <template v-if="editingId === cmt.id">
-            <div class="flex-1 flex flex-col gap-[4px]">
-              <div :ref="(el) => setEditInputRef(el, cmt.id)" contenteditable="true"
-                class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
-                @input="onEditInput($event, cmt.id)" @keydown.enter.exact.prevent="onSendEdit(cmt, 'comment')"
-                @keydown.shift.enter.prevent="onInsertLineBreak" />
-              <div class="flex justify-end gap-[8px]">
-                <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
-                  ยกเลิก
-                </Button>
-                <Button color="primary" class="w-[56px]" :disabled="!editTextMap[cmt.id]"
-                  @click="onSendEdit(cmt, 'comment')">
-                  ส่ง
-                </Button>
-              </div>
-            </div>
+            <!-- กล่องแก้ไข — อวาตาร์ใช้ของแถวข้างนอก เลย disabled-avatar -->
+            <InputComment v-model="editText" disabled-avatar autofocus class="flex-1 min-w-0"
+              @submit="onSendEdit(cmt, 'comment')" @cancel="onCancelEdit" />
           </template>
           <template v-else>
             <div class="flex flex-col gap-[4px] bg-bright p-[8px] rounded-lg">
@@ -105,25 +79,10 @@
           </Button>
         </div>
       </div>
-      <div v-if="replyingToId === cmt.id" class="flex flex-col gap-[16px]">
-        <div class="flex gap-[8px] w-full">
-          <Avatar :size="30" :src="currentUser.avatar" />
-          <div class="flex-1">
-            <div :ref="(el) => setReplyInputRef(el, cmt.id)" contenteditable="true"
-              class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-              data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, cmt.id)"
-              @keydown.enter.exact.prevent="onSendReplyComment(cmt)" @keydown.shift.enter.prevent="onInsertLineBreak" />
-          </div>
-        </div>
-        <div class="flex justify-end gap-[8px]">
-          <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
-            ยกเลิก
-          </Button>
-          <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[cmt.id]" @click="onSendReplyComment(cmt)">
-            ตอบกลับ
-          </Button>
-        </div>
-      </div>
+      <!-- กล่องตอบกลับคอมเมนต์ — ชิป mention ผ่าน v-model:reply-to -->
+      <InputComment v-if="replyingToId === cmt.id" v-model="replyText" v-model:reply-to="replyToUser"
+        :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
+        @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
       <div v-if="cmt.reply.length > 0" v-show="
   openedComments.includes(cmt.id) || cmt.reply.some((r) => pinnedReplyIds.has(r.id))
 " class="pl-[38px] flex flex-col gap-[16px]">
@@ -134,21 +93,9 @@
               <Avatar :size="30" :src="reply.user.avatar" class="cursor-pointer"
                 @click="onViewProfileComment(reply.user.id)" />
               <template v-if="editingId === reply.id">
-                <div class="flex-1 flex flex-col gap-[4px]">
-                  <div :ref="(el) => setEditInputRef(el, reply.id)" contenteditable="true"
-                    class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white"
-                    @input="onEditInput($event, reply.id)" @keydown.enter.exact.prevent="onSendEdit(reply, 'reply')"
-                    @keydown.shift.enter.prevent="onInsertLineBreak" />
-                  <div class="flex justify-end gap-[8px]">
-                    <Button variant="outline" class="w-[56px]" @click="onCancelEdit">
-                      ยกเลิก
-                    </Button>
-                    <Button color="primary" class="w-[56px]" :disabled="!editTextMap[reply.id]"
-                      @click="onSendEdit(reply, 'reply')">
-                      ส่ง
-                    </Button>
-                  </div>
-                </div>
+                <!-- แก้ไข reply — ชิป reply_to โชว์ผ่าน v-model:reply-to (ข้อความที่ส่งไม่รวมชื่อ) -->
+                <InputComment v-model="editText" v-model:reply-to="editReplyTo" disabled-avatar autofocus
+                  class="flex-1 min-w-0" @submit="onSendEdit(reply, 'reply')" @cancel="onCancelEdit" />
               </template>
               <template v-else>
                 <div class="flex flex-col bg-bright p-[8px] rounded-lg gap-[4px]">
@@ -199,27 +146,10 @@
               </div>
             </div>
           </div>
-          <div v-if="replyingToId === reply.id" class="flex flex-col gap-[16px]">
-            <div class="flex gap-[8px] w-full">
-              <Avatar :size="30" :src="currentUser.avatar" />
-              <div class="flex-1">
-                <div :ref="(el) => setReplyInputRef(el, reply.id)" contenteditable="true"
-                  class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
-                  data-placeholder="เขียนการตอบกลับ..." @input="onReplyInput($event, reply.id)"
-                  @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
-                  @keydown.shift.enter.prevent="onInsertLineBreak" />
-              </div>
-            </div>
-            <div class="flex justify-end gap-[8px]">
-              <Button variant="outline" class="w-[56px]" @click="onCancelReplyComment">
-                ยกเลิก
-              </Button>
-              <Button color="primary" class="w-[68px]" :disabled="!replyTextMap[reply.id]"
-                @click="onSendReplyComment(cmt)">
-                ตอบกลับ
-              </Button>
-            </div>
-          </div>
+          <!-- ตอบกลับ reply — submit ยังผูกกับ comment แม่ (cmt) เหมือนเดิม -->
+          <InputComment v-if="replyingToId === reply.id" v-model="replyText" v-model:reply-to="replyToUser"
+            :avatar="currentUser.avatar" placeholder="เขียนการตอบกลับ..." submit-text="ตอบกลับ" autofocus
+            @submit="onSendReplyComment(cmt)" @cancel="onCancelReplyComment" />
         </div>
       </div>
     </div>
@@ -270,11 +200,9 @@ const expandedContentIds = ref([]);
 const truncatedTexts = ref({});
 const mainInputRef = ref(null);
 const mainCommentInput = ref("");
-const isShowMainActions = ref(false);
 const replyingToId = ref(null);
-const replyToUser = ref(null);
-const replyInputRefs = ref({});
-const replyTextMap = ref({});
+const replyToUser = ref(void 0);
+const replyText = ref("");
 const pinnedReplyIds = ref(/* @__PURE__ */ new Set());
 const knownRepliesPerComment = /* @__PURE__ */ new WeakMap();
 watch(
@@ -309,17 +237,9 @@ const hoveredId = ref(null);
 const openMenuId = ref(null);
 const isMenuVisible = (id) => hoveredId.value === id || openMenuId.value === id;
 const editingId = ref(null);
-const editInputRefs = ref({});
-const editTextMap = ref({});
+const editText = ref("");
+const editReplyTo = ref(void 0);
 const isSelfUser = (user) => !!props.currentUser.id && user.id === props.currentUser.id;
-const buildMentionChip = (name) => {
-  const chip = document.createElement("span");
-  chip.dataset.type = "mention";
-  chip.contentEditable = "false";
-  chip.className = "inline-flex items-center text-primary font-body-large-prominent select-none mr-1";
-  chip.textContent = name;
-  return chip;
-};
 const onToggleReplyComment = (id) => {
   if (openedComments.value.includes(id)) {
     openedComments.value = openedComments.value.filter((i) => i !== id);
@@ -395,113 +315,26 @@ const toggleContentExpand = (id) => {
     expandedContentIds.value.push(id);
   }
 };
-const clearMainInput = () => {
-  mainCommentInput.value = "";
-  if (mainInputRef.value) mainInputRef.value.innerText = "";
-};
-const onCancelComment = () => {
-  clearMainInput();
-  isShowMainActions.value = false;
-};
 const onSendComment = () => {
   if (!mainCommentInput.value.trim()) return;
   emit("submit", mainCommentInput.value.trim());
-  clearMainInput();
-  isShowMainActions.value = false;
-};
-const setReplyInputRef = (el, id) => {
-  if (el) replyInputRefs.value[id] = el;
-  else delete replyInputRefs.value[id];
+  mainInputRef.value?.reset();
 };
 const onReplyComment = (id, user) => {
-  const isSelf = isSelfUser(user);
   replyingToId.value = id;
-  replyToUser.value = isSelf ? null : user;
-  replyTextMap.value[id] = "";
-  nextTick(() => {
-    const el = replyInputRefs.value[id];
-    if (!el) return;
-    el.innerHTML = "";
-    if (!isSelf) {
-      const space = document.createTextNode("\xA0");
-      el.appendChild(buildMentionChip(user.name));
-      el.appendChild(space);
-      const range = document.createRange();
-      const sel = window.getSelection();
-      range.setStartAfter(space);
-      range.collapse(true);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
-    }
-    el.focus();
-  });
-};
-const readTextWithBreaks = (el, skipMention = false) => {
-  const nodes = Array.from(el.childNodes);
-  while (nodes.length && nodes.at(-1)?.nodeName === "BR") nodes.pop();
-  let text = "";
-  nodes.forEach((node) => {
-    if (skipMention && node.dataset?.type === "mention")
-      return;
-    if (node.nodeName === "BR") {
-      text += "\n";
-      return;
-    }
-    if (node.nodeName === "DIV") {
-      text += "\n" + node.innerText;
-      return;
-    }
-    text += node.textContent ?? "";
-  });
-  return text.replace(/\n{3,}/g, "\n\n").replace(/^\u00A0/, "").trim();
-};
-const onInsertLineBreak = (event) => {
-  const el = event.target;
-  const sel = window.getSelection();
-  if (!sel || sel.rangeCount === 0) return;
-  const range = sel.getRangeAt(0);
-  range.deleteContents();
-  const br = document.createElement("br");
-  range.insertNode(br);
-  if (!br.nextSibling || br.nextSibling.nodeName !== "BR" && br.nextSibling.textContent === "") {
-    const phantom = document.createElement("br");
-    br.after(phantom);
-  }
-  range.setStartAfter(br);
-  range.collapse(true);
-  sel.removeAllRanges();
-  sel.addRange(range);
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-};
-const onMainCommentInput = (event) => {
-  const el = event.target;
-  mainCommentInput.value = readTextWithBreaks(el);
-};
-const onReplyInput = (event, id) => {
-  const el = event.target;
-  const chipExists = !!el.querySelector('[data-type="mention"]');
-  if (!chipExists) replyToUser.value = null;
-  replyTextMap.value[id] = readTextWithBreaks(el, true);
+  replyToUser.value = isSelfUser(user) ? void 0 : user;
+  replyText.value = "";
 };
 const onCancelReplyComment = () => {
-  const id = replyingToId.value;
-  if (id && replyInputRefs.value[id]) {
-    replyInputRefs.value[id].innerHTML = "";
-    delete replyTextMap.value[id];
-  }
   replyingToId.value = null;
-  replyToUser.value = null;
+  replyToUser.value = void 0;
+  replyText.value = "";
 };
 const onSendReplyComment = (comment) => {
-  const id = replyingToId.value;
-  if (!id) return;
-  const content = replyTextMap.value[id]?.trim() ?? "";
+  const content = replyText.value.trim();
   if (!content) return;
   emit("reply", comment.id, replyToUser.value?.id, content);
-  if (replyInputRefs.value[id]) replyInputRefs.value[id].innerHTML = "";
-  delete replyTextMap.value[id];
-  replyingToId.value = null;
-  replyToUser.value = null;
+  onCancelReplyComment();
 };
 const onToggleLikeComment = (comment) => {
   emit("like-comment", comment);
@@ -512,47 +345,22 @@ const onToggleLikeReplyComment = (reply) => {
 const onViewProfileComment = (id) => {
   if (id) router.push(`/@${id}`);
 };
-const setEditInputRef = (el, id) => {
-  if (el) editInputRefs.value[id] = el;
-  else delete editInputRefs.value[id];
-};
 const onEditClick = (id, content, replyTo) => {
   editingId.value = id;
-  editTextMap.value[id] = content;
-  nextTick(() => {
-    const el = editInputRefs.value[id];
-    if (!el) return;
-    el.innerHTML = "";
-    if (replyTo) {
-      el.appendChild(buildMentionChip(replyTo.name));
-      el.appendChild(document.createTextNode("\xA0"));
-    }
-    el.appendChild(document.createTextNode(content));
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    range.collapse(false);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
-    el.focus();
-  });
-};
-const onEditInput = (event, id) => {
-  const el = event.target;
-  editTextMap.value[id] = readTextWithBreaks(el, true);
+  editText.value = content;
+  editReplyTo.value = replyTo;
 };
 const onCancelEdit = () => {
-  const id = editingId.value;
-  if (id) delete editTextMap.value[id];
   editingId.value = null;
+  editText.value = "";
+  editReplyTo.value = void 0;
 };
 const onSendEdit = (item, type) => {
-  const content = editTextMap.value[item.id]?.trim() ?? "";
+  const content = editText.value.trim();
   if (!content) return;
   if (type === "comment") emit("edit-comment", item, content);
   else emit("edit-reply", item, content);
-  delete editTextMap.value[item.id];
-  editingId.value = null;
+  onCancelEdit();
 };
 const getCommentMenuItems = (comment) => isSelfUser(comment.user) ? [
   {