Add custom widgets wrappers.

frontend/packages/volto-form-block/src/index.js

@@ -92,6 +92,7 @@ const applyConfig = (config) => {
       view: schemaFormBlockView,
       edit: schemaFormBlockEdit,
       formSchema: FormSchema,
+      widgets: null,
       blockSchema: schemaFormBlockSchema,
       fieldSchema: FieldSchema,
       disableEnter: true,

frontend/packages/volto-form-block/src/schemaFormBlock/EditSchemaForm.jsx

@@ -68,6 +68,7 @@ class Edit extends Component {
                 filterFactory,
                 additionalFactory,
                 allowEditId: true,
+                widgets: config.blocks.blocksConfig.schemaForm.widgets,
               },
             },
             required: [],

frontend/packages/volto-form-block/src/schemaFormBlock/ViewSchemaForm.jsx

@@ -168,6 +168,7 @@ const FormBlockView = ({ data, id, properties, metadata, path }) => {
             })),
           }}
           formData={initialData}
+          widgets={config.blocks.blocksConfig.schemaForm.widgets}
           onSubmit={onSubmit}
           resetOnCancel={true}
           onCancel={data.show_cancel ? onCancel : null}

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/FormFieldWrapper.jsx

@@ -0,0 +1,109 @@
+/**
+ * FormFieldWrapper component.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Icon as IconOld } from 'semantic-ui-react';
+import cx from 'classnames';
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit',
+    defaultMessage: 'Edit',
+  },
+  delete: {
+    id: 'Delete',
+    defaultMessage: 'Delete',
+  },
+});
+
+/**
+ * FormFieldWrapper component class.
+ * @class FormFieldWrapper
+ * @extends Component
+ */
+class FormFieldWrapper extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    isDisabled: PropTypes.bool,
+    onEdit: PropTypes.func,
+    className: PropTypes.string,
+    onDelete: PropTypes.func,
+    intl: PropTypes.object,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    onDelete: null,
+    intl: null,
+    isDisabled: null,
+    draggable: null,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const {
+      id,
+      onEdit,
+      className,
+      isDisabled,
+      onDelete,
+      intl,
+      multilingual_options,
+    } = this.props;
+
+    return (
+      <Form.Field
+        className={cx(
+          className,
+          `field-wrapper-${id}`,
+          multilingual_options?.language_independent
+            ? 'language-independent-field'
+            : null,
+        )}
+      >
+        {onEdit && !isDisabled && (
+          <div className="toolbar" style={{ zIndex: '2' }}>
+            <button
+              aria-label={intl.formatMessage(messages.edit)}
+              className="item ui noborder button"
+              onClick={(evt) => {
+                evt.preventDefault();
+                onEdit(id);
+              }}
+            >
+              <IconOld name="write square" size="large" color="blue" />
+            </button>
+            <button
+              aria-label={intl.formatMessage(messages.delete)}
+              className="item ui noborder button"
+              onClick={(evt) => {
+                evt.preventDefault();
+                onDelete(id);
+              }}
+            >
+              <IconOld name="close" size="large" color="red" />
+            </button>
+          </div>
+        )}
+        {this.props.children}
+      </Form.Field>
+    );
+  }
+}
+
+export default injectIntl(FormFieldWrapper);

frontend/packages/volto-form-block/src/schemaFormBlock/Wrappers/TextWrapper.jsx

@@ -0,0 +1,58 @@
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import config from '@plone/volto/registry';
+
+import FormFieldWrapper from './FormFieldWrapper';
+
+const TextWrapper = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onClick,
+    minLength,
+    maxLength,
+    placeholder,
+    isDisabled,
+    title,
+  } = props;
+
+  const ref = useRef();
+  const Widget = config.blocks.blocksConfig.schemaForm.innerWidgets.text;
+
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Widget
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        label={title}
+        disabled={isDisabled}
+        placeholder={placeholder}
+        onChange={(value) => onChange(id, value === '' ? undefined : value)}
+        ref={ref}
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+export default TextWrapper;
+
+TextWrapper.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  minLength: null,
+  maxLength: null,
+};