Support for Rich Text Input (#630)

* Support for Rich Text Input * rich text support for prefilled * apply Purify for rich_text --------- Co-authored-by: Julien Nahum <julien@nahum.net>
JhumanJ · Nov 28, 2024 · 13c40f6 · 13c40f6
1 parent e2c6af6
commit 13c40f6
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 4 deletions.
diff --git a/api/app/Http/Requests/AnswerFormRequest.php b/api/app/Http/Requests/AnswerFormRequest.php
@@ -14,6 +14,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Str;
 use Illuminate\Validation\Rule;
+use Stevebauman\Purify\Facades\Purify;
 
 class AnswerFormRequest extends FormRequest
 {
@@ -175,6 +176,7 @@ private function getPropertyRules($property): array
     {
         switch ($property['type']) {
             case 'text':
+            case 'rich_text':
             case 'signature':
                 return ['string'];
             case 'number':
@@ -282,6 +284,10 @@ protected function prepareForValidation()
             if ($property['type'] === 'phone_number' && (!isset($property['use_simple_text_input']) || !$property['use_simple_text_input']) && $receivedValue && in_array($receivedValue, $countryCodeMapper)) {
                 $mergeData[$property['id']] = null;
             }
+
+            if ($property['type'] === 'rich_text' && $receivedValue) {
+                $mergeData[$property['id']] = Purify::clean($receivedValue);
+            }
         });
 
         $this->merge($mergeData);

diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
@@ -210,6 +210,7 @@ export default {
       }
       return {
         text: 'TextInput',
+        rich_text: 'RichTextAreaInput',
         number: 'TextInput',
         rating: 'RatingInput',
         scale: 'ScaleInput',

diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -448,8 +448,15 @@
         :multiple="field.multiple === true"
         :move-to-form-assets="true"
       />
+      <rich-text-area-input
+        v-else-if="field.type === 'rich_text'"
+        name="prefill"
+        class="mt-3"
+        :form="field"
+        label="Pre-filled value"
+      />
       <text-input
-        v-else-if="!['files', 'signature'].includes(field.type)"
+        v-else-if="!['files', 'signature', 'rich_text'].includes(field.type)"
         name="prefill"
         class="mt-3"
         :form="field"

diff --git a/client/components/open/tables/OpenTable.vue b/client/components/open/tables/OpenTable.vue
@@ -193,6 +193,7 @@ export default {
       rafId: null,
       fieldComponents: {
         text: shallowRef(OpenText),
+        rich_text: shallowRef(OpenText),
         number: shallowRef(OpenText),
         rating: shallowRef(OpenText),
         scale: shallowRef(OpenText),

diff --git a/client/components/open/tables/components/OpenText.vue b/client/components/open/tables/components/OpenText.vue
@@ -1,7 +1,5 @@
 <template>
-  <span>
-    {{ value }}
-  </span>
+  <div v-html="value" />
 </template>
 
 <script>

diff --git a/client/data/blocks_types.json b/client/data/blocks_types.json
@@ -8,6 +8,15 @@
     "text_class": "text-blue-900",
     "is_input": true
   },
+  "rich_text": {
+    "name": "rich_text",
+    "title": "Rich Text Input",
+    "icon": "i-heroicons-bars-3-20-solid",
+    "default_block_name": "Description",
+    "bg_class": "bg-blue-100",
+    "text_class": "text-blue-900",
+    "is_input": true
+  },
   "date": {
     "name": "date",
     "title": "Date Input",