Learn-skills.dev canvas-component-utils

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 width

• height

  - Original image height

• className

  - Tailwind classes for styling