fix(richtext)!: HTML and Markdown parsing for links and edge cases

[maoberlehner]

Parsing did not work correctly for certain combinations of <a> and nested tags inside or around it.

To ensure parsing is aligned with the Tiptap editor format, we now use the Tiptap editor's generateJSON command, which gives us HTML-to-richtext conversion out of the box.

BREAKING CHANGE: Instead of our own resolver format, we now allow users to override the Tiptap extensions used for parsing.

Fixes WDX-141

---

Note

Replaces custom HTML/Markdown parsing in packages/richtext with Tiptap-based parsing (via @tiptap/html + extensions), updates tests, and refreshes frameworks/deps across the repo.

• Richtext parsing (BREAKING):
  • Replace custom HTML/Markdown parsers with Tiptap JSON generation using @tiptap/html and a full set of Tiptap extensions.
  • Remove legacy parsing deps (node-html-parser, markdown-it-github), add Tiptap packages.
  • Update unit tests for new parsing behavior.
  • Parsing customization now via Tiptap extensions instead of previous resolver format.
• Tooling/Deps:
  • Bump React to 19.2.0, Vue to 3.5.22, Next-related deps, and Nuxt/Vite stacks in examples/playgrounds.
  • Add happy-dom to Vitest where used and perform miscellaneous lockfile upgrades.

^{Written by Cursor Bugbot for commit f128bb6. This will update automatically on new commits. Configure here.}

[Copilot]

Pull Request Overview

This PR refactors HTML and Markdown parsing to use Tiptap's built-in generateJSON command, fixing edge cases with links and nested tags that weren't handled correctly by the previous custom parser.

• Replaced custom HTML parsing logic with Tiptap's generateJSON for more robust HTML-to-richtext conversion
• Simplified Markdown parser to convert Markdown to HTML first, then use the HTML parser
• Changed the API from custom resolvers to Tiptap tipTapExtensions for customization

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/richtext/src/markdown-parser.ts	Simplified to render Markdown as HTML then delegate to HTML parser
packages/richtext/src/markdown-parser.test.ts	Updated tests to use Tiptap extensions and reflect new output format
packages/richtext/src/html-parser.ts	Complete rewrite using Tiptap's generateJSON with custom extensions
packages/richtext/src/html-parser.test.ts	Updated tests for new Tiptap-based implementation
packages/richtext/package.json	Added Tiptap dependencies, removed node-html-parser

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[pkg-pr-new]

Open in StackBlitz

@storyblok/astro

npm i https://pkg.pr.new/@storyblok/astro@369

storyblok

npm i https://pkg.pr.new/storyblok@369

@storyblok/eslint-config

npm i https://pkg.pr.new/@storyblok/eslint-config@369

@storyblok/js

npm i https://pkg.pr.new/@storyblok/js@369

storyblok-js-client

npm i https://pkg.pr.new/storyblok-js-client@369

@storyblok/management-api-client

npm i https://pkg.pr.new/@storyblok/management-api-client@369

@storyblok/nuxt

npm i https://pkg.pr.new/@storyblok/nuxt@369

@storyblok/react

npm i https://pkg.pr.new/@storyblok/react@369

@storyblok/region-helper

npm i https://pkg.pr.new/@storyblok/region-helper@369

@storyblok/richtext

npm i https://pkg.pr.new/@storyblok/richtext@369

@storyblok/svelte

npm i https://pkg.pr.new/@storyblok/svelte@369

@storyblok/vue

npm i https://pkg.pr.new/@storyblok/vue@369

commit: f128bb6

[cursor]

This PR is being reviewed by Cursor Bugbot

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[dipankarmaikap]

Hey @maoberlehner, with this new implementation, it won’t work as expected. As I suspected, we need to follow the specific naming pattern we use internally — for example, bullet_list, list_item, and ordered_list. These are case-sensitive.

The good news is that we can configure the Tiptap extensions to align with our internal structure. I did a quick test, and after making the following changes to the list items, it worked correctly:

const defaultExtensions = {
  bulletList: BulletList.configure({
    itemTypeName: 'list_item',
  }).extend({
    name: 'bullet_list',
  }),
  listItem: ListItem.configure({
    bulletListTypeName: 'bullet_list',
    orderedListTypeName: 'ordered_list',
  }).extend({
    name: 'list_item',
  }),
  orderedList: OrderedList.configure({
    itemTypeName: 'list_item',
  }).extend({
    name: 'ordered_list',
  }),
  // ...
}

This only covers these specific list-related types — we’ll need to check and match the rest of the node types as well. I haven’t tested all the possible ones yet.

[maoberlehner]

@dipankarmaikap thank you for spotting this issue and your recommendations on how to work around it!

I'd love to follow the Tiptap editor defaults because this would enable us to simplify our renderers, too. That's why I reached out to the product team, asking if they could add support for both cases in Storyblok (https://storyblok.slack.com/archives/G01AWKD1FGC/p1762846202774159). If this is possible, I'd add support for both cases in our renderer too and keep this code as is. If it's not possible, I'll go with your approach.