Some checks failed
Verify / Install node dependencies (push) Failing after 2s
Verify / Build packages (push) Has been skipped
Verify / Check linting & formatting (push) Has been skipped
Verify / Run unit tests (push) Has been skipped
Verify / Run e2e tests (shard 1/4) (push) Has been skipped
Verify / Run e2e tests (shard 2/4) (push) Has been skipped
Verify / Run e2e tests (shard 3/4) (push) Has been skipped
Verify / Run e2e tests (shard 4/4) (push) Has been skipped
Publish / Resolve publish config (push) Failing after 2s
Publish / Send notification to Slack (push) Has been skipped
Publish / Send failure notification to Slack (push) Failing after 8s
Verify / Merge e2e reports (push) Has been skipped
Publish / Build (push) Has been skipped
Publish / Bump Versions OR Release to Registry (push) Has been skipped
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
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 { Color, FontSize, TextStyle } from '@tiptap/extension-text-style'
|
|
import { afterEach, beforeEach, describe, expect, it } from 'vite-plus/test'
|
|
|
|
describe('FontSize commands', () => {
|
|
let editor: Editor
|
|
|
|
beforeEach(() => {
|
|
const element = document.createElement('div')
|
|
document.body.appendChild(element)
|
|
editor = new Editor({
|
|
element,
|
|
extensions: [Document, Paragraph, Text, TextStyle, FontSize],
|
|
content: '<p>Example Text</p>',
|
|
})
|
|
editor.commands.selectAll()
|
|
})
|
|
|
|
afterEach(() => {
|
|
editor.destroy()
|
|
})
|
|
|
|
it('sets the font-size of the selected text', () => {
|
|
expect(editor.isActive('textStyle', { fontSize: '28px' })).toBe(false)
|
|
editor.commands.setFontSize('28px')
|
|
expect(editor.isActive('textStyle', { fontSize: '28px' })).toBe(true)
|
|
const span = editor.view.dom.querySelector('span')
|
|
expect(span?.textContent).toBe('Example Text')
|
|
expect(span?.style.fontSize).toBe('28px')
|
|
})
|
|
|
|
it('removes the font-size of the selected text', () => {
|
|
editor.commands.setFontSize('28px')
|
|
expect(editor.view.dom.querySelector('span')?.style.fontSize).toBe('28px')
|
|
|
|
editor.commands.unsetFontSize()
|
|
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')
|
|
})
|
|
})
|