Code block (#21)

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

resources/js/components/open/forms/OpenForm.vue

@@ -12,6 +12,9 @@
               <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id" class="nf-text w-full px-2 mb-3"
                    v-html="field.content"
               />
+              <div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id" class="nf-code w-full px-2 mb-3"
+                   v-html="field.content"
+              />
               <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" class="border-b my-4 w-full mx-2" />
               <div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id" :key="field.id" class="my-4 w-full px-2">
                 <div v-if="!field.image_block" class="p-4 border border-dashed">

resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue

@@ -196,6 +196,18 @@
         </div>
         <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mb-4">Image Block</p>
       </div>
+      <!--   Code Block   -->
+      <div
+        class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 p-2 flex flex-col"
+        role="button" @click.prevent="addBlock('nf-code')"
+      >
+        <div class="mx-auto py-4">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+          </svg>
+        </div>
+        <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mb-4">Code Block</p>
+      </div>
 
     </div>
   </modal>
@@ -242,6 +254,7 @@ export default {
         'nf-page-break': 'Page Break',
         'nf-divider': 'Divider',
         'nf-image': 'Image',
+        'nf-code': 'Code Block',
       }
     }
   },
@@ -292,6 +305,8 @@ export default {
       } else if (data.type === 'nf-page-break') {
         data.next_btn_text = 'Next'
         data.previous_btn_text = 'Previous'
+      } else if (data.type === 'nf-code') {
+        data.content = '<div class="text-blue-500 italic">This is a code block.</div>'
       }
       return data
     },

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -107,7 +107,7 @@ export default {
       })
     },
     actionOptions() {
-      if (['nf-text', 'nf-page-break', 'nf-divider', 'nf-image'].includes(this.field.type)) {
+      if (['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image'].includes(this.field.type)) {
         return [{name: 'Hide Block', value: 'hide-block'}]
       }
 

resources/js/components/open/forms/fields/FormBlockOptionsModal.vue

@@ -115,6 +115,10 @@
                      :form="field" label="Upload Image" :required="false"
         />
       </div>
+      <div v-else-if="field.type == 'nf-code'" class="-mx-4 sm:-mx-6 p-5 border-b border-t">
+        <code-input name="content" class="mt-4 h-36" :form="field" label="Content"
+              help="You can add any html code, including iframes" />
+      </div>
       <div v-else class="-mx-4 sm:-mx-6 p-5 border-b border-t">
         <p>No settings found.</p>
       </div>
@@ -137,10 +141,11 @@
 <script>
 import ProTag from '../../../common/ProTag'
 import FormBlockLogicEditor from '../components/form-logic-components/FormBlockLogicEditor'
+import CodeInput from '../../../forms/CodeInput'
 
 export default {
   name: 'FormBlockOptionsModal',
-  components: {ProTag, FormBlockLogicEditor},
+  components: {ProTag, FormBlockLogicEditor, CodeInput},
   props: {
     field: {
       type: Object,