canvas-component-utils

用途

canvas-component-utils 提供了一组工具组件，帮助开发者在组件中正确渲染格式化文本和媒体内容。这些工具从 drupal-canvas 包中导入使用。

主要能力

FormattedText

使用 FormattedText 渲染来自 props 的 HTML 内容。对于 component.yml 中任何带有 contentMediaType: text/html 的属性，这是必需的。

在 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>
);

适用 FormattedText 的场景：

• 接受富文本/HTML 内容的 props
• 任何带有 contentMediaType: text/html 的 prop
• 可能包含 <p>、<strong>、<em>、<a> 或其他 HTML 标签的内容

不应对以下情况使用 FormattedText：

• 纯文本 props（type: string 且无 contentMediaType）
• 标题或题名（使用常规元素）

Image

使用 Image 进行响应式图片渲染。它会自动处理响应式行为和优化。

在 component.yml 中的声明示例：

# 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 属性：

• src - 图片 URL（必填）
• alt - 用于无障碍的替代文本（必填）
• width - 原始图片宽度
• height - 原始图片高度
• className - 用于样式的 Tailwind 类

使用方式

从 drupal-canvas 包中导入工具：

import { FormattedText, Image } from "drupal-canvas";

适用场景

• 渲染来自 props 的 HTML 文本内容
• 显示图片

限制

资料中未提供关于收费、价格、平台支持范围或性能效果的具体说明。