Overview

Currently, the Experience Builder code editor does not provide a way to define and configure textarea props.

Proposed resolution

Add support for textarea fields.

  1. ✅ Back end: allowing a prop to be created using this definition: {"type": "string", "$ref": "json-schema-definitions://experience_builder.module/textarea"}. Requires:
    1. The validation constraint that #3507929: Allow adding "image" props in the code component editor is adding.
    2. Updating config schema: #2
    3. Explicit test coverage: probably just a new case in \Drupal\Tests\experience_builder\Kernel\Config\JavaScriptComponentValidationTest::providerTestEntityShapes().
  2. Front end: Introduce a new "textarea" property type that can be used in the code editor.

User interface changes

CommentFileSizeAuthor
#16 Screenshot 2025-02-26 at 7.40.47 PM.png256.46 KBhooroomoo

Issue fork experience_builder-3507928

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

lauriii created an issue. See original summary.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

See #3507929-2: Allow adding "image" props in the code component editor for how the BE piece can be unblocked there, with one difference: here we need to set

type: string, $ref: json-schema-definitions://experience_builder.module/textarea
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Active » Postponed

This issue needs to get a BE MR that is 99% identical to that in #3507929: Allow adding "image" props in the code component editor: same new validation constraint, just a different set of enabled choices. Let's first land that one, which then leaves only a tiny additional *.schema.yml + test coverage only change to be done over here.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Allow adding textarea in the code editor » [PP-1] [Back-end] Allow adding "textarea" props in the code component editor
Issue summary: View changes
Related issues: +#3507929: Allow adding "image" props in the code component editor
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: Unassigned » f.mazeikis
Issue tags: -sprint-candidate +sprint
f.mazeikis’s picture

f.mazeikis commented
Status: Postponed » Active

f.mazeikis opened merge request !705

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: [PP-1] [Back-end] Allow adding "textarea" props in the code component editor » [Back-end] Allow adding "textarea" props in the code component editor
Status: Active » Needs review

Blocker's in.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: [Back-end] Allow adding "textarea" props in the code component editor » [Front-end] Allow adding "textarea" props in the code component editor
Assigned: f.mazeikis » Unassigned
Issue summary: View changes
Status: Needs review » Active

hooroomoo made their first commit to this issue’s fork.

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: Unassigned » hooroomoo

hooroomoo opened merge request !708

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

FYI: XB's OpenAPI validation may disallow and we forgot about an integration test for this — see #3507929-19: Allow adding "image" props in the code component editor.

f.mazeikis opened merge request !716

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Issue summary: View changes
StatusFileSize
new Screenshot 2025-02-26 at 7.40.47 PM.png256.46 KB

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: hooroomoo » Unassigned
Status: Active » Needs review
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

🤩

I think reusing the existing ui/src/components/form/components/TextArea.tsx would prepare us better for CKEditor 5 support in the future? See https://git.drupalcode.org/project/experience_builder/-/merge_requests/7....

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Status: Needs review » Fixed

Fantastic work! 👏🏻

Just noting here that as things are, code component authors will need to add white-space: pre; (or whitespace-pre with Tailwind) until we introduce using the nl2br() function in the backend before passing the prop values. (@effulgentsia looked up the backend parts.)

nagwani’s picture

nagwani commented
Issue tags: -sprint

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

wim leers closed merge request !716