fix: contedtable

bo/src/views/customer/ProductDetailView.vue

@@ -1,34 +1,36 @@
 <template>
-  <div class="container my-10">
-    <div id="textDescriptionRef" ref="textDescriptionRef" v-html="productStore.productDescription.description"></div>
-    <button @click="create">create</button>
-    <button @click="save">Save</button>
+  <div class="container my-10 ">
+    <div class="flex items-start gap-30">
+      <div class="flex flex-col gap-10"> 
+        <p class="p-60 bg-yellow-300">img</p>
+        <div class="flex gap-3 mb-3">
+          <button @click="removeAttribute(editableRef)"
+            class="p-2 border border-(--border-light) dark:border-(--border-dark)">create</button>
+          <button @click="setAttribute(editableRef)"
+            class="p-2 border border-(--border-light) dark:border-(--border-dark)">Save</button>
+        </div>
+      </div>
+      <div>
+        <p class="text-[25px] font-bold">{{ productStore.productDescription.name }}</p>
+        <p>{{  productStore.productDescription.available_now }}</p>
+        <p ref="editableRef2" v-html="productStore.productDescription.usage"></p>
+      </div>
+    </div>
+    <div ref="editableRef" v-html="productStore.productDescription.description"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useProductStore } from '@/stores/product'
+import { useEditable } from '@/composable/useConteditable'
+import { ref } from 'vue'
 
 
 const productStore = useProductStore()
-const textDescriptionRef = ref<HTMLElement | null>(null)
-
 await productStore.getProductDescription()
 
-const save = () => {
-  const myDiv = document.getElementById("textDescriptionRef");
-  Array.from(myDiv.children).forEach(item => {
-    item.setAttribute('contenteditable', 'false')
-  })
-}
-
-const create = () => {
-  const myDiv = document.getElementById("textDescriptionRef");
-  Array.from(myDiv.children).forEach(item => {
-    item.setAttribute('contenteditable', 'true')
-  })
-}
+const editableRef = ref<HTMLElement | null>(null)
+const { removeAttribute, setAttribute } = useEditable()
 
 </script>
 
@@ -39,4 +41,5 @@ const create = () => {
   gap: 70px;
   margin: 20px 0 20px 0;
 }
+
 </style>