Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/2026-08-17-fix-blockquote-unset-text-style.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tiptap/extension-text-style': patch
---

Unsetting one text style inside a blockquote no longer removes the other text styles in it.
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Editor } from '@tiptap/core'
import Blockquote from '@tiptap/extension-blockquote'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { FontSize, TextStyle } from '@tiptap/extension-text-style'
import { Color, FontSize, TextStyle } from '@tiptap/extension-text-style'
import { afterEach, beforeEach, describe, expect, it } from 'vitest'

describe('FontSize commands', () => {
Expand Down Expand Up @@ -40,3 +41,43 @@ describe('FontSize commands', () => {
expect(editor.getHTML()).not.toContain('<span')
})
})

describe('FontSize commands inside a wrapper node', () => {
let editor: Editor

const editorWith = (content: string) => {
const element = document.createElement('div')
document.body.appendChild(element)
editor = new Editor({
element,
extensions: [Document, Paragraph, Text, Blockquote, TextStyle, Color, FontSize],
content,
})
editor.commands.selectAll()
return editor
}

afterEach(() => {
editor.destroy()
})

it('keeps the other text styles when unsetting inside a blockquote', () => {
editorWith(
'<blockquote><p><span style="color: #ff0000; font-size: 28px">Example Text</span></p></blockquote>',
)

editor.commands.unsetFontSize()

expect(editor.getHTML()).toContain('color: #ff0000')
expect(editor.getHTML()).not.toContain('font-size')
})

it('keeps the other text styles when unsetting inside a paragraph', () => {
editorWith('<p><span style="color: #ff0000; font-size: 28px">Example Text</span></p>')

editor.commands.unsetFontSize()

expect(editor.getHTML()).toContain('color: #ff0000')
expect(editor.getHTML()).not.toContain('font-size')
})
})
5 changes: 2 additions & 3 deletions packages/extension-text-style/src/text-style/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,8 @@ export const TextStyle = Mark.create<TextStyleOptions>({
// removes everything from all the nodes
// within the selection range.
tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
// Check if it's a paragraph element, if so, skip this node as we apply
// the text style to inline text nodes only (span).
if (node.isTextblock) {
// Skip non-inline nodes, the text style only applies to spans
if (!node.isInline) {
return true
}

Expand Down
Loading