portable-text-conversion

bởi sanity-io

Chuyển đổi nội dung HTML và Markdown thành các khối Portable Text cho Sanity. Sử dụng khi di chuyển nội dung từ các CMS cũ, nhập HTML hoặc Markdown vào Sanity,…

npx skills add https://github.com/sanity-io/agent-toolkit --skill portable-text-conversion

Portable Text Conversion

Convert external content (HTML, Markdown) into Portable Text for Sanity. Three main approaches:

  1. markdownToPortableText — Convert Markdown directly using @portabletext/markdown (recommended for Markdown)
  2. htmlToBlocks — Parse HTML into PT blocks using @portabletext/block-tools (for HTML migration)
  3. Manual construction — Build PT blocks directly from any source (APIs, databases, etc.)

Portable Text Specification

Understand the target format before converting. PT is an array of blocks:

[
  {
    "_type": "block",
    "_key": "abc123",
    "style": "normal",
    "children": [
      {"_type": "span", "_key": "def456", "text": "Hello ", "marks": []},
      {"_type": "span", "_key": "ghi789", "text": "world", "marks": ["strong"]}
    ],
    "markDefs": []
  },
  {
    "_type": "block",
    "_key": "jkl012",
    "style": "h2",
    "children": [
      {"_type": "span", "_key": "mno345", "text": "A heading", "marks": []}
    ],
    "markDefs": []
  },
  {
    "_type": "image",
    "_key": "pqr678",
    "asset": {"_type": "reference", "_ref": "image-abc-200x200-png"}
  }
]

Key rules:

  • Every block and span needs _key (unique within the array)
  • _type: "block" is for text blocks; custom types use their own _type
  • markDefs holds annotation data; marks on spans reference markDefs[*]._key or are decorator strings
  • Lists use listItem ("bullet" | "number") and level (1, 2, 3...) on regular blocks

Conversion Rules

Read the rule file matching your source format:

  • Markdown → Portable Text: rules/markdown-to-pt.md@portabletext/markdown with markdownToPortableText (recommended)
  • HTML → Portable Text: rules/html-to-pt.md@portabletext/block-tools with htmlToBlocks
  • Manual PT Construction: rules/manual-construction.md — build blocks programmatically from any source

Note: @sanity/block-tools is the legacy package name. Always use @portabletext/block-tools for new projects. The API is the same.

Thêm skills từ sanity-io

performance-optimization
sanity-io
Tối ưu hóa hiệu suất ứng dụng. Sử dụng khi có yêu cầu về hiệu suất, khi nghi ngờ có suy giảm hiệu suất, hoặc khi Core Web Vitals hoặc thời gian tải…
official
rxjs-like-a-pro
sanity-io
Kỹ năng này giúp bạn viết mã RxJS mang tính thành ngữ, dễ kết hợp và tránh các lỗi thường gặp. Triết lý cốt lõi: giữ logic trong chuỗi observable. Mỗi khi bạn dùng .subscribe(), hãy tự hỏi liệu công việc đó có thể được thể hiện như một phép biến đổi bên trong .pipe() hay không.
official
find-skills
sanity-io
Giúp người dùng khám phá và cài đặt các kỹ năng của tác nhân khi họ đặt câu hỏi như "làm thế nào để làm X", "tìm kỹ năng cho X", "có kỹ năng nào có thể...", hoặc diễn đạt…
official
next-cache-components
sanity-io
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
official
vercel-react-best-practices
sanity-io
Hướng dẫn tối ưu hiệu suất React và Next.js từ Vercel Engineering. Kỹ năng này nên được sử dụng khi viết, xem xét hoặc tái cấu trúc React/Next.js…
official
frontend-design
sanity-io
Tạo giao diện frontend chất lượng sản xuất, độc đáo với chất lượng thiết kế cao. Sử dụng kỹ năng này khi người dùng yêu cầu xây dựng các thành phần web, trang, hoặc…
official
plugin-transfer
sanity-io
Hướng dẫn agent cách di chuyển một plugin hiện có vào monorepo này bằng quy trình tạo copy-plugin.
official
test-studio-script-runner
sanity-io
Giải thích công cụ Script Runner trong dev/test-studio. Sử dụng khi thêm, chỉnh sửa, chạy hoặc ghi chép các script trong dev/test-studio/src/script-runner, hoặc khi…
official