Skip to content

fix(static-renderer): close audio and video tags instead of self-closing - #8138

Open
lazerg wants to merge 2 commits into
ueberdosis:mainfrom
lazerg:fix/issue-8130-audio-void
Open

fix(static-renderer): close audio and video tags instead of self-closing#8138
lazerg wants to merge 2 commits into
ueberdosis:mainfrom
lazerg:fix/issue-8130-audio-void

Conversation

@lazerg

@lazerg lazerg commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Fixes

Fixes #8130

Changes and Review

The static renderer closed a fixed set of element tags and treated everything else as self-closing. audio and video were not in that set, so they came out as <audio/> / <video/>. Browsers don't treat those as void elements, so any following content got nested inside the first one and only the first player rendered. Adding both to the set makes them render as <audio></audio>. Reviewers can render a doc with two audio nodes through renderToHTMLString and confirm each tag is closed.

Checklist

  • I have added a changeset if necessary.
  • I have added tests if possible.
  • I have made sure to test my changes myself.

Responsibility

  • I have reviewed and understand these changes, and I take responsibility for this PR, even if an AI agent created it.

@lazerg
lazerg requested a review from a team as a code owner July 29, 2026 04:00
@changeset-bot

changeset-bot Bot commented Jul 29, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 6428a8e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 74 packages
Name Type
@tiptap/static-renderer Patch
@tiptap/core Patch
@tiptap/extension-audio Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-caret Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-details Patch
@tiptap/extension-document Patch
@tiptap/extension-drag-handle-react Patch
@tiptap/extension-drag-handle-vue-2 Patch
@tiptap/extension-drag-handle-vue-3 Patch
@tiptap/extension-drag-handle Patch
@tiptap/extension-emoji Patch
@tiptap/extension-file-handler Patch
@tiptap/extension-find-and-replace Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-font-family Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-invisible-characters Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list Patch
@tiptap/extension-mathematics Patch
@tiptap/extension-mention Patch
@tiptap/extension-node-range Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-ruby-text Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-of-contents Patch
@tiptap/extension-table Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-twitch Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-unique-id Patch
@tiptap/extension-youtube Patch
@tiptap/extensions Patch
@tiptap/html Patch
@tiptap/markdown Patch
@tiptap/pm Patch
@tiptap/react Patch
@tiptap/starter-kit Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch
@tiptap/extension-character-count Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-focus Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-history Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify

netlify Bot commented Jul 29, 2026

Copy link
Copy Markdown

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 6428a8e
🔍 Latest deploy log https://app.netlify.com/projects/tiptap-embed/deploys/6a697b924143e90008c953d1
😎 Deploy Preview https://deploy-preview-8138--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: a50fc398-e311-4c2b-93f2-fea7b171baed

📥 Commits

Reviewing files that changed from the base of the PR and between 05eb16f and 6428a8e.

📒 Files selected for processing (1)
  • packages/static-renderer/__tests__/pm-self-closing-tags.spec.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/static-renderer/tests/pm-self-closing-tags.spec.ts

📝 Walkthrough

Summary

  • Fix the static renderer to output audio and video as <audio></audio> / <video></video> instead of self-closing tags.
  • Add a Vitest spec to verify audio/video render with explicit closing tags, and that multiple audio players are siblings (not nested).
  • Add a patch changeset for @tiptap/static-renderer to release the fix.

Walkthrough

The static renderer now outputs explicit closing tags for audio and video elements. Tests verify individual and sibling outputs, and a patch changeset documents the update.

Changes

Static renderer media tags

Layer / File(s) Summary
Media tag serialization and validation
packages/static-renderer/src/pm/html-string/html-string.ts, packages/static-renderer/__tests__/pm-self-closing-tags.spec.ts, .changeset/2026-07-29-static-renderer-audio-video.md
audio and video are serialized with explicit closing tags, tests verify individual and sibling elements, and the package changeset records a patch release.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related issues

  • ueberdosis/tiptap#8130 — Directly tracks the static-renderer self-closing audio bug addressed by this change.

Suggested labels: area: core, impact: medium, complexity: medium

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the main change: audio and video tags are no longer self-closing in the static renderer.
Description check ✅ Passed The description follows the template and includes fixes, changes, checklist items, and responsibility.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot added area: core Core editor engine and ProseMirror integration complexity: trivial Quick fix, single line code change impact: medium Affects some users or workflows labels Jul 29, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/static-renderer/__tests__/pm-self-closing-tags.spec.ts`:
- Around line 34-58: Extend the existing static renderer tests with a regression
case containing multiple media nodes and a paragraph between or after them. Use
renderToHTMLString with the existing extensions, then assert the exact HTML
preserves sibling order and emits explicit closing tags for every audio and
video element, including the paragraph content.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 13576658-e535-4d5b-9961-84e856f311b9

📥 Commits

Reviewing files that changed from the base of the PR and between 5158212 and 05eb16f.

📒 Files selected for processing (3)
  • .changeset/2026-07-29-static-renderer-audio-video.md
  • packages/static-renderer/__tests__/pm-self-closing-tags.spec.ts
  • packages/static-renderer/src/pm/html-string/html-string.ts

Comment thread packages/static-renderer/__tests__/pm-self-closing-tags.spec.ts
@coderabbitai coderabbitai Bot added complexity: medium Moderate change, possibly multiple files and removed complexity: trivial Quick fix, single line code change labels Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: core Core editor engine and ProseMirror integration complexity: medium Moderate change, possibly multiple files impact: medium Affects some users or workflows

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@tiptap/static-renderer renders <audio> elements as self-closing tags, producing invalid HTML

1 participant