make default fields non editable

app/javascript/template_builder/area.vue

@@ -42,7 +42,7 @@
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
-        :editable="editable"
+        :editable="editable && !defaultField"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
@@ -51,7 +51,7 @@
       <FieldType
         v-model="field.type"
         :button-width="27"
-        :editable="editable"
+        :editable="editable && !defaultField"
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
@@ -60,7 +60,7 @@
       <span
         v-if="field.type !== 'checkbox' || field.name"
         ref="name"
-        :contenteditable="editable"
+        :contenteditable="editable && !defaultField"
         class="pr-1 cursor-text outline-none block"
         style="min-width: 2px"
         @keydown.enter.prevent="onNameEnter"
@@ -160,6 +160,11 @@ export default {
       required: false,
       default: false
     },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,

app/javascript/template_builder/builder.vue

@@ -129,6 +129,7 @@
                 :selected-submitter="selectedSubmitter"
                 :document="document"
                 :is-drag="!!dragField"
+                :default-fields="defaultFields"
                 :draw-field="drawField"
                 :editable="editable"
                 :base-url="baseUrl"

app/javascript/template_builder/document.vue

@@ -8,6 +8,7 @@
       :editable="editable"
       :areas="areasIndex[index]"
       :is-drag="isDrag"
+      :default-fields="defaultFields"
       :draw-field="drawField"
       :selected-submitter="selectedSubmitter"
       :image="image"
@@ -35,6 +36,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     selectedSubmitter: {
       type: Object,
       required: true

app/javascript/template_builder/field.vue

@@ -14,7 +14,7 @@
         <div class="flex items-center p-1 space-x-1">
           <FieldType
             v-model="field.type"
-            :editable="editable"
+            :editable="editable && !defaultField"
             :button-width="20"
             @update:model-value="[maybeUpdateOptions(), save()]"
             @click="scrollToFirstArea"
@@ -22,7 +22,7 @@
           <Contenteditable
             ref="name"
             :model-value="field.name || defaultName"
-            :editable="editable"
+            :editable="editable && !defaultField"
             :icon-inline="true"
             :icon-width="18"
             :icon-stroke-width="1.6"
@@ -66,6 +66,7 @@
             />
           </button>
           <span
+            v-if="!defaultField"
             class="dropdown dropdown-end"
           >
             <label
@@ -280,6 +281,11 @@ export default {
       type: Object,
       required: true
     },
+    defaultField: {
+      type: Object,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,

app/javascript/template_builder/fields.vue

@@ -24,6 +24,7 @@
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       :editable="editable && !dragField"
+      :default-field="defaultFields.find((f) => f.name === field.name)"
       :draggable="editable"
       @dragstart="dragField = field"
       @dragend="dragField = null"

app/javascript/template_builder/page.vue

@@ -23,6 +23,7 @@
         :area="item.area"
         :field="item.field"
         :editable="editable"
+        :default-field="defaultFields.find((f) => f.name === item.field.name)"
         @start-resize="resizeDirection = $event"
         @stop-resize="resizeDirection = null"
         @start-drag="isMove = true"
@@ -69,6 +70,11 @@ export default {
       required: false,
       default: () => []
     },
+    defaultFields: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     selectedSubmitter: {
       type: Object,
       required: true