Agent Skills
› NeverSight/learn-skills.dev
› canvas-component-utils
canvas-component-utils
GitHub提供drupal-canvas包中的FormattedText和Image工具组件，用于正确渲染HTML富文本内容和响应式图片。
Trigger Scenarios
需要渲染来自props的HTML格式文本内容
需要显示或优化图片资源
Install
npx skills add NeverSight/learn-skills.dev --skill canvas-component-utils -g -y
SKILL.md
Frontmatter
{
"name": "canvas-component-utils",
"description": "Use utility components to render formatted text and media correctly. Use when (1) Rendering HTML text content from props, (2) Displaying images, (3) Working with formatted text or media. Covers FormattedText and Image utilities."
}
Import utilities from the drupal-canvas package:
import { FormattedText, Image } from "drupal-canvas";
FormattedText
Use FormattedText to render HTML content from props. This is required for any
prop with contentMediaType: text/html in component.yml.
# component.yml
props:
properties:
text:
title: Text
type: string
contentMediaType: text/html
x-formatting-context: block
examples:
- <p>This is <strong>formatted</strong> text.</p>
import { FormattedText } from "drupal-canvas";
const Text = ({ text, className }) => (
<FormattedText className={className}>{text}</FormattedText>
);
When to use FormattedText:
- Props that accept rich text/HTML content
- Any prop with
contentMediaType: text/html - Content that may contain
<p>,<strong>,<em>,<a>, or other HTML tags
Do NOT use FormattedText for:
- Plain text props (type: string without contentMediaType)
- Headings or titles (use regular elements)
Image
Use Image for responsive image rendering. It handles responsive behavior and
optimization automatically.
# component.yml
props:
properties:
image:
title: Image
type: object
$ref: json-schema-definitions://canvas.module/image
examples:
- src: https://example.com/photo.jpg
alt: Description of image
width: 800
height: 600
import { Image } from "drupal-canvas";
const Card = ({ image }) => {
const { src, alt, width, height } = image;
return (
<Image
src={src}
alt={alt}
width={width}
height={height}
className="w-full rounded-lg object-cover"
/>
);
};
Image props:
src- Image URL (required)alt- Alt text for accessibility (required)width- Original image widthheight- Original image heightclassName- Tailwind classes for styling
Version History
- e0220ca Current 2026-07-05 23:00
