diff --git a/code_samples/forms/custom_form_attribute/public/js/formbuilder-richtext-checkbox.js b/code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js similarity index 100% rename from code_samples/forms/custom_form_attribute/public/js/formbuilder-richtext-checkbox.js rename to code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js diff --git a/code_samples/forms/custom_form_attribute/config/packages/form_attribute_config.yaml b/code_samples/forms/custom_form_attribute/config/packages/form_attribute_config.yaml index 54cedec4c5..d78fd61b26 100644 --- a/code_samples/forms/custom_form_attribute/config/packages/form_attribute_config.yaml +++ b/code_samples/forms/custom_form_attribute/config/packages/form_attribute_config.yaml @@ -1,7 +1,7 @@ ibexa_form_builder: fields: checkbox_with_richtext_description: - name: Checkbox with RichtextDescription + name: Checkbox with Rich Text description category: Default thumbnail: '/bundles/ibexaicons/img/all-icons.svg#input-line' attributes: diff --git a/code_samples/forms/custom_form_attribute/webpack.config.js b/code_samples/forms/custom_form_attribute/webpack.config.js index 8b6959be57..ae74f9e82a 100644 --- a/code_samples/forms/custom_form_attribute/webpack.config.js +++ b/code_samples/forms/custom_form_attribute/webpack.config.js @@ -46,9 +46,7 @@ if (isReactBlockPathCreated) { Encore.addEntry('app', './assets/app.js'); -Encore.addEntry('formbuilder-richtext-checkbox-js', [ - path.resolve('./public/js/formbuilder-richtext-checkbox.js') -]); +Encore.addEntry('formbuilder-richtext-checkbox-js', './assets/js/formbuilder-richtext-checkbox.js'); const projectConfig = Encore.getWebpackConfig(); diff --git a/docs/content_management/forms/create_form_attribute.md b/docs/content_management/forms/create_form_attribute.md index 5227182961..e3144cb7bd 100644 --- a/docs/content_management/forms/create_form_attribute.md +++ b/docs/content_management/forms/create_form_attribute.md @@ -14,7 +14,7 @@ description to the Form. ## Configure Form attribute To create a `richtext_description` attribute, -add the following configuration under the `ibexa_form_builder_fields` [configuration key](configuration.md#configuration-files): +add the following configuration under the `ibexa_form_builder.fields` [configuration key](configuration.md#configuration-files): ``` yaml [[= include_file('code_samples/forms/custom_form_attribute/config/packages/form_attribute_config.yaml') =]] @@ -63,15 +63,15 @@ twig: ## Add scripts -Now you need to enable the RichText editor. Provide the required script in a new `public/js/formbuilder-richtext-checkbox.js` file: +Now you need to enable the Rich Text editor. Provide the required script in a new `assets/js/formbuilder-richtext-checkbox.js` file: ``` js -[[= include_file('code_samples/forms/custom_form_attribute/public/js/formbuilder-richtext-checkbox.js') =]] +[[= include_file('code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js') =]] ``` Then, paste the highlighted part of the code into the `webpack.config.js` file: -``` js hl_lines="49-51" +``` js hl_lines="49" [[= include_file('code_samples/forms/custom_form_attribute/webpack.config.js') =]] ``` @@ -85,7 +85,7 @@ yarn encore dev ## Implement Field -Now you have to implement the Field, and make sure the value from the RichText attribute is passed on to the field form. +Now you have to implement the Field, and make sure the value from the Rich Text attribute is passed on to the field form. Create a `src/FormBuilder/Form/Type/CheckboxWithRichtextDescriptionType.php` file. @@ -118,4 +118,16 @@ In the main menu, click **Content** -> **Forms** -> **Create content**, and sele You should be able to see the new section in the list of available fields: -![New form](new_form.png) +![New form field](checkbox_with_richtext_description-item.png) + +When editing settings, the "Description" attribute has the Rich Text input. + +![Field settings](checkbox_with_richtext_description-edit.png) + +When you enter the "Description" attribute, the Rich Text toolbar appears. + +![Rich Text toolbar](checkbox_with_richtext_description-focus.png) + +The preview displays the formatted text along with the checkbox and its label. + +![Field preview](checkbox_with_richtext_description-preview.png) diff --git a/docs/content_management/forms/img/checkbox_with_richtext_description-edit.png b/docs/content_management/forms/img/checkbox_with_richtext_description-edit.png new file mode 100644 index 0000000000..d0be0bf267 Binary files /dev/null and b/docs/content_management/forms/img/checkbox_with_richtext_description-edit.png differ diff --git a/docs/content_management/forms/img/checkbox_with_richtext_description-focus.png b/docs/content_management/forms/img/checkbox_with_richtext_description-focus.png new file mode 100644 index 0000000000..bf94849d1e Binary files /dev/null and b/docs/content_management/forms/img/checkbox_with_richtext_description-focus.png differ diff --git a/docs/content_management/forms/img/checkbox_with_richtext_description-item.png b/docs/content_management/forms/img/checkbox_with_richtext_description-item.png new file mode 100644 index 0000000000..961fec50f8 Binary files /dev/null and b/docs/content_management/forms/img/checkbox_with_richtext_description-item.png differ diff --git a/docs/content_management/forms/img/checkbox_with_richtext_description-preview.png b/docs/content_management/forms/img/checkbox_with_richtext_description-preview.png new file mode 100644 index 0000000000..b9fb82ff1b Binary files /dev/null and b/docs/content_management/forms/img/checkbox_with_richtext_description-preview.png differ diff --git a/docs/content_management/img/new_form.png b/docs/content_management/img/new_form.png deleted file mode 100644 index 46fef23bab..0000000000 Binary files a/docs/content_management/img/new_form.png and /dev/null differ