portable-text-conversion

โดย sanity-io

แปลงเนื้อหา HTML และ Markdown เป็นบล็อก Portable Text สำหรับ Sanity ใช้เมื่อย้ายเนื้อหาจาก 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.

Skills เพิ่มเติมจาก 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
แนวทางปฏิบัติที่ดีที่สุดในการเพิ่มประสิทธิภาพ React และ Next.js จากทีมวิศวกรรมของ Vercel ควรใช้ทักษะนี้เมื่อเขียน ตรวจสอบ หรือปรับโครงสร้าง React/Next.js…
official
frontend-design
sanity-io
สร้างอินเทอร์เฟซฟร้อนท์เอนด์ที่โดดเด่น มีคุณภาพระดับโปรดักชั่น พร้อมการออกแบบที่มีคุณภาพสูง ใช้ทักษะนี้เมื่อผู้ใช้ขอให้สร้างเว็บคอมโพเนนต์ เพจ หรือ...
official
plugin-transfer
sanity-io
แนะนำเอเจนต์ในการย้ายปลั๊กอินที่มีอยู่ไปยังโมโนรีโพนี้ด้วยเวิร์กโฟลว์ตัวสร้างคัดลอกปลั๊กอิน
official
test-studio-script-runner
sanity-io
อธิบายเครื่องมือ Script Runner ของ dev/test-studio ใช้เมื่อเพิ่ม แก้ไข รัน หรือจัดทำเอกสารสคริปต์ใน dev/test-studio/src/script-runner หรือเมื่อ...
official