portable-text-conversion

Convertir du contenu HTML et Markdown en blocs Portable Text pour Sanity. À utiliser lors de la migration de contenu depuis des CMS hérités, de l'importation de HTML ou Markdown dans 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.

Plus de skills de sanity-io

performance-optimization
sanity-io
Optimise les performances de l'application. À utiliser lorsque des exigences de performance existent, lorsque vous suspectez des régressions de performance, ou lorsque les Core Web Vitals ou les temps de chargement…
official
rxjs-like-a-pro
sanity-io
Cette compétence vous aide à écrire du code RxJS idiomatique, composable et exempt d'écueils courants. La philosophie centrale : gardez la logique dans la chaîne d'observables. Chaque fois que vous utilisez .subscribe(), demandez-vous si le travail pourrait plutôt être exprimé comme une transformation à l'intérieur de .pipe().
official
find-skills
sanity-io
Aide les utilisateurs à découvrir et installer des compétences d'agent lorsqu'ils posent des questions comme "comment faire X", "trouver une compétence pour X", "existe-t-il une compétence qui peut...", ou expriment...
official
next-cache-components
sanity-io
Composants de cache Next.js 16 - PPR, directive use cache, cacheLife, cacheTag, updateTag
official
vercel-react-best-practices
sanity-io
Directives d'optimisation des performances React et Next.js de Vercel Engineering. Cette compétence doit être utilisée lors de l'écriture, de la révision ou du refactoring de code React/Next.js…
official
frontend-design
sanity-io
Créez des interfaces frontend distinctives et de qualité professionnelle, avec un design de haut niveau. Utilisez cette compétence lorsque l'utilisateur demande de construire des composants web, des pages, ou…
official
plugin-transfer
sanity-io
Guide les agents dans la migration d'un plugin existant vers ce monorepo à l'aide du workflow du générateur copy-plugin.
official
test-studio-script-runner
sanity-io
Explique l'outil Script Runner de dev/test-studio. À utiliser lors de l'ajout, de la modification, de l'exécution ou de la documentation de scripts dans dev/test-studio/src/script-runner, ou lorsque le…
official