fix: style

bo/src/composable/useConteditable.ts

@@ -1,37 +1,41 @@
 import { ref, type Ref } from 'vue'
 import DOMPurify from 'dompurify'
-import { useProductStore } from '@/stores/product'
 
-export function useEditable() {
-    const isEditing = ref(false)
-    const productStore = useProductStore()
+export function useEditable(elementRef: Ref<HTMLElement | null>) {
 
-    const removeAttribute = (editableRef: HTMLElement | null) => {
-        if (!editableRef) return
-        isEditing.value = true
-        Array.from(editableRef.children).forEach(item => {
-            item.setAttribute('contenteditable', 'true')
-            console.log('lllllll')
-        })
-    }
+  const isEditing = ref(false)
 
-    const setAttribute = async (editableRef: HTMLElement | null): Promise<string | undefined> => {
-        if (!editableRef) return
-        Array.from(editableRef.children).forEach(item => {
-            item.setAttribute('contenteditable', 'false')
-        })
-        isEditing.value = false
+  const enableEdit = () => {
+    if (!elementRef.value) return
 
-        const html = editableRef.innerHTML
-        const cleanHtml = DOMPurify.sanitize(html)
-        await productStore.saveProductDescription(cleanHtml)
+    isEditing.value = true
 
-        return cleanHtml
-    }
+    Array.from(elementRef.value.children).forEach(item => {
+      item.setAttribute('contenteditable', 'true')
+    })
+  }
 
-    return {
-        isEditing,
-        removeAttribute,
-        setAttribute
-    }
+  const disableEdit = () => {
+    if (!elementRef.value) return
+
+    isEditing.value = false
+
+    Array.from(elementRef.value.children).forEach(item => {
+      item.setAttribute('contenteditable', 'false')
+    })
+  }
+
+  const getCleanHtml = () => {
+    if (!elementRef.value) return ''
+
+    const html = elementRef.value.innerHTML
+    return DOMPurify.sanitize(html)
+  }
+
+  return {
+    isEditing,
+    enableEdit,
+    disableEdit,
+    getCleanHtml
+  }
 }