portable-text-conversion

作成者: sanity-io

HTMLおよびMarkdownコンテンツをSanity用のPortable Textブロックに変換します。レガシーCMSからのコンテンツ移行時や、HTMLやMarkdownを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.

sanity-ioのその他のスキル

performance-optimization
sanity-io
アプリケーションのパフォーマンスを最適化します。パフォーマンス要件がある場合、パフォーマンスの低下が疑われる場合、またはCore Web Vitalsや読み込み時間が…
official
rxjs-like-a-pro
sanity-io
このスキルは、慣用的で構成可能、かつ一般的な落とし穴のないRxJSコードを書くのに役立ちます。核となる哲学は、ロジックをobservableチェーン内に保持することです。.subscribe()を使おうとするたびに、その処理を.pipe()内の変換として表現できないか自問してください。
official
find-skills
sanity-io
ユーザーが「Xをするにはどうすればいいか」「Xのスキルを探して」「〜できるスキルはあるか」といった質問をしたり、何かを表現したりしたときに、エージェントスキルを発見・インストールするのを支援します。
official
next-cache-components
sanity-io
Next.js 16 キャッシュコンポーネント - PPR、use cacheディレクティブ、cacheLife、cacheTag、updateTag
official
vercel-react-best-practices
sanity-io
Vercel EngineeringによるReactおよびNext.jsのパフォーマンス最適化ガイドライン。このスキルは、React/Next.jsのコードを記述、レビュー、またはリファクタリングする際に使用すべきものです。
official
frontend-design
sanity-io
差別化された、プロダクションレベルのフロントエンドインターフェースを高いデザイン品質で作成します。ユーザーがウェブコンポーネント、ページなどを構築するよう依頼した場合に、このスキルを使用してください。
official
plugin-transfer
sanity-io
既存のプラグインをコピープラグイン生成ワークフローでこのモノレポに移行するようエージェントをガイドします。
official
test-studio-script-runner
sanity-io
dev/test-studioのScript Runnerツールについて説明します。dev/test-studio/src/script-runner内のスクリプトを追加、編集、実行、または文書化する際、または…
official