custom fields

app/javascript/template_builder/contenteditable.vue

@@ -6,18 +6,24 @@
     <span
       ref="contenteditable"
       dir="auto"
-      :contenteditable="editable"
-      style="min-width: 2px"
-      :class="[iconInline ? 'inline' : 'block', hideIcon ? 'focus:block' : '']"
-      class="peer outline-none"
+      :contenteditable="editable && (!editableOnButton || isEditable)"
+      :data-placeholder="placeholder"
+      :data-empty="isEmpty"
+      :style="{ minWidth }"
+      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '']"
+      class="peer relative inline-block outline-none before:pointer-events-none before:absolute before:left-0 before:top-0 before:select-none before:whitespace-pre before:text-neutral-400 before:content-[attr(data-placeholder)] before:opacity-0 data-[empty=true]:before:opacity-100"
       @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"
+      @input="updateInputValue"
+      @cut="updateInputValue"
       @focus="$emit('focus', $event)"
       @blur="onBlur"
+      @click="editable && (!editableOnButton || isEditable) ? '' : $emit('click-contenteditable')"
     >
       {{ value }}
     </span>
     <span
+      v-if="withButton"
       class="relative inline"
       :class="{ 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
     >
@@ -28,7 +34,7 @@
         :class="{ invisible: !editable, 'absolute top-1/2 -translate-y-1/2': !iconInline || floatIcon, 'inline align-bottom': iconInline, 'left-0': floatIcon }"
         :width="iconWidth + 4"
         :stroke-width="iconStrokeWidth"
-        @click="[focusContenteditable(), selectOnEditClick && selectContent()]"
+        @click="clickEdit"
       />
     </span>
   </div>
@@ -49,6 +55,16 @@ export default {
       required: false,
       default: ''
     },
+    placeholder: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     iconInline: {
       type: Boolean,
       required: false,
@@ -74,6 +90,16 @@ export default {
       required: false,
       default: false
     },
+    editableOnButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    minWidth: {
+      type: String,
+      required: false,
+      default: '2px'
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -85,21 +111,34 @@ export default {
       default: 2
     }
   },
-  emits: ['update:model-value', 'focus', 'blur'],
+  emits: ['update:model-value', 'focus', 'blur', 'click-contenteditable'],
   data () {
     return {
+      isEditable: false,
+      inputValue: '',
       value: ''
     }
   },
+  computed: {
+    isEmpty () {
+      return !this.inputValue.replace(/\u200B/g, '').replace(/\u00A0/g, ' ').trim()
+    }
+  },
   watch: {
     modelValue: {
       handler (value) {
-        this.value = value
+        this.value = value || ''
       },
       immediate: true
     }
   },
+  mounted () {
+    this.updateInputValue()
+  },
   methods: {
+    updateInputValue () {
+      this.inputValue = this.$refs.contenteditable?.textContent || ''
+    },
     onPaste (e) {
       const text = (e.clipboardData || window.clipboardData).getData('text/plain')
 
@@ -110,6 +149,20 @@ export default {
         selection.getRangeAt(0).insertNode(document.createTextNode(text))
         selection.collapseToEnd()
       }
+
+      this.updateInputValue()
+    },
+    clickEdit (e) {
+      this.focusContenteditable()
+
+      if (this.selectOnEditClick) {
+        this.selectContent()
+      }
+    },
+    setText (text) {
+      this.$refs.contenteditable.innerText = text
+
+      this.updateInputValue()
     },
     selectContent () {
       const el = this.$refs.contenteditable
@@ -129,10 +182,18 @@ export default {
         this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
         this.$emit('update:model-value', this.value)
         this.$emit('blur', e)
+
+        this.isEditable = false
       }, 1)
     },
     focusContenteditable () {
-      this.$refs.contenteditable.focus()
+      this.isEditable = true
+
+      this.$nextTick(() => {
+        this.$refs.contenteditable.focus()
+
+        this.updateInputValue()
+      })
     },
     blurContenteditable () {
       this.$refs.contenteditable.blur()