test with vue inputs

app/javascript/apps/components/inputs/InputString.vue

+<script>
+import { Pencil } from 'lucide-vue-next';
+
+export default {
+    props: [
+      'modelValue',
+      'i18n',
+      'id'
+    ],
+    emits: [
+      'update:modelValue'
+    ],
+    components: {
+      Pencil
+    },
+    computed: {
+      value: {
+        get() {
+          return this.modelValue;
+        },
+        set(value) {
+          this.$emit('update:modelValue', value);
+        }
+      }
+    },
+    data () {
+      return {
+        editing: false
+      }
+    },
+    methods: {
+      toggleEdition() {
+        this.editing = !this.editing;
+        if (this.editing) {
+          this.$nextTick(() => {
+            this.$refs.input.focus();
+          });
+        }
+      }
+    },
+};
+</script>
+
+<template>
+  <div class="mb-3">
+    <label class="form-label" aria-label="{{ i18n.label }}" :for="id">
+      {{ i18n.label }}
+    </label>
+    <div v-show="!editing" v-on:click="toggleEdition()">
+      <p class="d-inline-block">{{ value }}</p>
+      <a class="btn btn-xs"> 
+        <Pencil stroke-width="2.5" 
+                width="18"
+                class="text-muted" />
+      </a>
+    </div>
+    <div v-show="editing">
+      <input  :id="id"
+              class="form-control"
+              data-translatable="true" 
+              v-model="value"
+              ref="input"
+              type="text">
+      <div class="form-text">{{ i18n.hint }}</div>
+    </div>
+  </div>
+</template>

app/javascript/apps/media-picker/MediaPickerApp.vue

@@ -4,6 +4,7 @@ import Cloud from './components/Cloud.vue';
 import Medias from './components/Medias.vue';
 import ImageUploader from './components/ImageUploader.vue';
 import Summernote from '../components/Summernote.vue';
+import InputString from '../components/inputs/InputString.vue';
 
 export default {
     components: {
@@ -12,6 +13,7 @@ export default {
       Medias,
       ImageUploader,
       Summernote,
+      InputString
     },
     data () {
       return {
@@ -89,17 +91,10 @@ export default {
             {{ i18n.mediaPicker.remove }}
           </a>
         </div>
-        <div class="mb-3">
-          <label class="form-label" aria-label="{{ i18n.mediaPicker.alt.label }}" for="alt">
-            {{ i18n.mediaPicker.alt.label }}
-          </label>
-          <input  id="alt"
-                  class="form-control"
-                  data-translatable="true" 
-                  v-model="current.image.alt"
-                  type="text">
-          <div class="form-text">{{ i18n.mediaPicker.alt.hint }}</div>
-        </div>
+        <InputString  v-model="current.image.alt"
+                      :i18n="i18n.mediaPicker.alt"
+                      :id="'mediaPicker.alt'"
+                      />
         <div class="mb-3 summernote">
           <label class="form-label" :aria-label="i18n.mediaPicker.credit.label" for="credit">
             {{ i18n.mediaPicker.credit.label }}