image alt field

src/components/editable/ImageEditable.vue

@@ -7,6 +7,8 @@ import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@stores/user'
 
+import ContentEditable from '@components/editable/ContentEditable.vue';
+
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiTrashCanOutline } from '@mdi/js';
 import { mdiImagePlus } from '@mdi/js';
@@ -112,6 +114,7 @@ export default {
   },
   components: {
     SvgIcon,
+    ContentEditable
   }
 }
 </script>
@@ -122,7 +125,23 @@ export default {
     <template v-if="image.length">
       <figure>
         <img :src="image[0].url" :alt="image[0].alt"/>
-        <figcaption v-if="image[0].alt">{{ image[0].alt }}</figcaption>
+        <figcaption 
+          :contenteditable="can_update"
+          v-if="image[0].alt || can_update"
+        >
+          {{ image[0].alt }}
+        </figcaption>
+        <ContentEditable 
+          tag="figcaption"
+          :value="image[0].alt"
+          :contenteditable="can_update"
+          :data="{
+            entitytype: data.entitytype,
+            bundle: data.bundle,
+            nid: data.nid,
+            field: {field_name: data.field, value:'alt', additional_values:{target_id:image[0].id}}
+          }" />
+
       </figure>
       <div v-if="can_update" @click="onDeleteImg" class="delete-btn">
         <svg-icon type="mdi" :path="mdiTrashCanOutline_path" />