mcpField
C
canvas-component-utils

canvas-component-utils

github.com/drupal-canvas开发3212 次安装6 周前更新
代码仓库

关于 canvas-component-utils

指导开发者为 Drupal Canvas 渲染的 React 项目构建组件，说明项目类型判断及 `drupal-canvas` 的 FormattedText 和 Image 用法。技能也区分 Canvas Headless 项目，并建议 Vue、Astro 和 Angular 使用原生替代方案。

主要功能

  1. 01识别 Canvas 项目类型
  2. 02用 FormattedText 渲染 HTML 内容
  3. 03用 Image 渲染响应式图片
  4. 04按模块 Schema 定义图片属性
  5. 05选择框架原生替代方案

适用场景

  1. 01为 Drupal Canvas 构建 React 组件
  2. 02渲染组件属性中的富文本 HTML
  3. 03在组件中添加响应式图片
  4. 04按项目类型检查工具选择

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/drupal-canvas/skills --skill canvas-component-utils

安装后在 Claude Code 中输入/canvas-component-utils确认已加载。

详细介绍

项目类型

应用此技能前，请检查 package.json 中是否存在名为 @drupal-canvas/headless 或以 @drupal-canvas/headless- 开头的依赖项。如果存在， 则这是一个 Canvas Headless 代码库——请先阅读 canvas-headless。可移植的 React 组件可以在现有公共导入路径中使用 FormattedText 和 Image；FormattedText 需要可信或经过净化的 HTML。 原生 Vue、Astro 和 Angular 组件应使用框架原生替代方案，而不是 React 工具。 如果不存在此类依赖项，则这是一个由 Canvas 渲染的 React 代码库： 组件使用 React（index.jsx/.tsx），且本技能中的所有内容均按原样适用。这是仅有的两种项目类型。

从 drupal-canvas 包导入工具：

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

FormattedText

使用 FormattedText 渲染来自 props 的 HTML 内容。对于 component.yml 中任何具有 contentMediaType: text/html 的 prop，都必须使用它。

# 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（类型为 string，且没有 contentMediaType）
  • 标题或题目（使用常规元素）

Image

使用 Image 进行响应式图像渲染。它会自动处理响应式行为和优化。 组件约定应接受一个图像对象 prop，该对象符合 $ref: json-schema-definitions://canvas.module/image； 不要将这些数据拆分成单独的 imageUrl/imageAlt props。

# 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 }) => {
  if (!image?.src) return null;

  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 - 图像 URL（必需）
  • alt - 用于无障碍访问的替代文本（必需）
  • width - 原始图像宽度
  • height - 原始图像高度
  • className - 用于样式设置的 Tailwind 类

评论

支持 Markdown