feat: add static rich text field

collective · Aug 12, 2021 · b5e127d · b5e127d
1 parent 8625706
commit b5e127d
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@ For each field, you can select the field type from:
 - Date picker
 - File upload with DnD
 - E-mail
+- Static rich text (not a fillable field, just text to display between other fields)
 
 For every field you can set a label and a help text.
 For select, radio and checkbox fields, you can select a list of values.

diff --git a/src/components/EditBlock.jsx b/src/components/EditBlock.jsx
@@ -54,7 +54,16 @@ class EditBlock extends SubblockEdit {
             id={id}
             field_id={id}
             index={this.props.data.index}
-            onChange={() => {}}
+            value={
+              this.props.data.field_type === 'static_text'
+                ? this.props.data.value
+                : null
+            }
+            onChange={
+              this.props.data.field_type === 'static_text'
+                ? (_id, value) => this.onChange({ value })
+                : () => {}
+            }
           />
         </div>
       </Subblock>

diff --git a/src/components/Field.jsx b/src/components/Field.jsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
+import redraft from 'redraft';
+
 import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
 import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
 import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
 import FileWidget from '@plone/volto/components/manage/Widgets/FileWidget';
+import WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
 import { DatetimeWidget } from '@plone/volto/components';
 
 import CheckboxWidget from './Widget/CheckboxWidget';
@@ -18,7 +21,7 @@ import config from '@plone/volto/registry';
 const messages = defineMessages({
   select_a_value: {
     id: 'form_select_a_value',
-    defaultMessage: 'Seleziona un valore',
+    defaultMessage: 'Select a value',
   },
 });
 
@@ -175,6 +178,30 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
+      {field_type === 'static_text' &&
+        (isOnEdit ? (
+          <WysiwygWidget
+            wrapped={false}
+            id={name}
+            name={name}
+            title={label}
+            description={description}
+            onChange={onChange}
+            value={value}
+          />
+        ) : (
+          <div className="static-text">
+            {value ? (
+              redraft(
+                value,
+                config.settings.ToHTMLRenderers,
+                config.settings.ToHTMLOptions,
+              )
+            ) : (
+              <br />
+            )}
+          </div>
+        ))}
       {config.blocks.blocksConfig.form.additionalFields?.reduce((acc, val) => {
         if (val.id === field_type)
           return [

diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
@@ -134,7 +134,11 @@ const FormView = ({
                               subblock.label,
                             )
                           }
-                          value={formData[name]?.value}
+                          value={
+                            subblock.field_type === 'static_text'
+                              ? subblock.value
+                              : formData[name]?.value
+                          }
                           valid={isValidField(name)}
                           formHasErrors={formErrors?.length > 0}
                         />

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -106,6 +106,10 @@ const messages = defineMessages({
     id: 'form_field_type_from',
     defaultMessage: 'E-mail',
   },
+  field_type_static_text: {
+    id: 'form_field_type_static_text',
+    defaultMessage: 'Static text',
+  },
   field_input_values: {
     id: 'form_field_input_values',
     defaultMessage: 'Possible values',
@@ -468,6 +472,10 @@ const Sidebar = ({
                           intl.formatMessage(messages.field_type_attachment),
                         ],
                         ['from', intl.formatMessage(messages.field_type_from)],
+                        [
+                          'static_text',
+                          intl.formatMessage(messages.field_type_static_text),
+                        ],
                         ...(config.blocks.blocksConfig.form.additionalFields?.map(
                           (fieldType) => [fieldType.id, fieldType.label],
                         ) ?? []),