Overview

Created my first component with Canvas AI 🎉
It worked, but there was some friction: escaped code. E.g. data.length > 0  in the editor looked like data.length > 0 and had to fix quite some occurrences myself.

Proposed resolution

It should properly escape the code from the output of the LLM when creating the code.

User interface changes

After my prompt finished, I get a nice component preview without having to tweak its code (yet).

Issue fork canvas-3586584

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

penyaskito created an issue. See original summary.

shubham.prakash made their first commit to this issue’s fork.

shubham.prakash opened merge request !1022

shubham.prakash’s picture

shubham.prakash commented
Status: Active » Needs review
shubham.prakash’s picture

shubham.prakash commented

AI Assisted Code:

Summary:
Root cause: LLMs sometimes HTML-encode characters in generated code (e.g., > → >, < → <, & → &). The CreateComponent and EditComponentJs function call plugins were using the raw LLM output for js_structure/css_structure/javascript without decoding these entities, so the escaped code was stored directly in the component.

Fix: Added html_entity_decode(..., ENT_QUOTES | ENT_HTML5) when reading the code context values in both plugins — matching the pattern already used in GetPropsType.php for derived_proptypes. ENT_QUOTES | ENT_HTML5 ensures all HTML5 named entities and both single/double quotes are decoded.

narendrar’s picture

narendrar
He/Him
Primary language English
Location Jaipur, India
commented
Status: Needs review » Needs work
Issue tags: +Needs tests

Looks good. Could we add some test coverage in EditComponentJsTest and CreateComponentTest as well?