skills.rest
acquia
acquiaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

canvas-component-utils

Render formatted HTML and responsive images from Drupal Canvas component props.

16|6|Updated Feb 19, 2025
Search Tags:#accessibility#components#image-optimization#responsive-images#rich-text#formatted-text#drupal-canvas
One-click install
npx skills add https://github.com/acquia/nebula --skill canvas-component-utils-acquia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-component-utils
Source: https://github.com/acquia/nebula/tree/main/.agents/skills/canvas-component-utils
Command: npx skills add https://github.com/acquia/nebula --skill canvas-component-utils-acquia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Components that receive HTML-rich text and image objects as props often render incorrectly, lose formatting, or lack accessibility semantics when handled as plain strings or naive image tags. This skill documents how to use the FormattedText and Image utilities from drupal-canvas to ensure HTML content is rendered safely and images are responsive, optimized, and accessible.

Core Features & Use Cases

  • Safe rich text rendering: Use FormattedText for any prop with contentMediaType: text/html to preserve markup like paragraphs, links, and inline formatting while avoiding incorrect element choices.
  • Responsive image handling: Use Image to automatically apply responsive behavior, optimization, and layout stability by leveraging src, alt, width, and height values.
  • Practical example: Render a card component that displays a formatted description coming from props and an associated responsive image with proper alt text for accessibility.

Quick Start

Import FormattedText and Image from drupal-canvas and use FormattedText for props with contentMediaType: text/html while using Image with src, alt, width, and height to render responsive images.

Frequently Asked Questions about canvas-component-utils

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render HTML rich text from component props without losing formatting?▼

To render HTML rich text from component props without losing formatting, use the FormattedText utility for any prop defined with contentMediaType: text/html. This preserves markup like paragraphs, links, and inline formatting while avoiding incorrect element choices.

Why do images in my Drupal Canvas components lack alt text and responsive behavior?▼

Images in Drupal Canvas components lack alt text and responsive behavior when handled as naive image tags. Use the Image utility with src, alt, width, and height values from component.yml to automatically apply responsive behavior, optimization, and layout stability.

What is the best way to ensure layout stability for responsive images in component props?▼

The best way to ensure layout stability for responsive images in component props is to supply image objects with src, alt, width, and height attributes in component.yml and render them using the Image utility for automatic responsive handling.

Can I use FormattedText and Image utilities together in a single card component?▼

Yes, you can use FormattedText and Image utilities together in a single card component. Import both from drupal-canvas, use FormattedText for the formatted description prop and Image for the associated responsive image with proper alt text.

When do I need to use the FormattedText utility for contentMediaType text/html props?▼

You need to use the FormattedText utility for contentMediaType: text/html props whenever a component receives HTML-rich text that must preserve markup like paragraphs, links, and inline formatting while avoiding incorrect element choices during rendering.

Does canvas-component-utils enforce accessibility requirements for image rendering?▼

Yes, canvas-component-utils enforces accessibility requirements for image rendering by leveraging the Image utility, which requires alt text enforcement and width/height attributes to ensure both accessibility semantics and layout stability.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
8

n-image

Display images with preview, lazy loading, and error fallbacks.

Community
Intermediate
webdriveriowebdriverio
11

Frontend Components

Enforce frontend component coding standards across web UI projects.

Official
Basic
balintbrewsbalintbrews
14

canvas-component-utils

Render HTML content and images with React Canvas component utilities.

Community
Intermediate
AJV009AJV009
1

canvas-component-utils

Render HTML content and responsive images in React components with FormattedText and Image.

Community
Intermediate