Skip to content

Commit

Permalink
fix(font-family): Prevent removal of quotes in parseHTML (#5828)
Browse files Browse the repository at this point in the history
Removed the quote removal step in font-family parsing to support fonts that contain both spaces and numbers, such as "Exo 2", which require quotes for proper recognition.

---------

Co-authored-by: Sander <sander@blueberry.nl>
Co-authored-by: Nick Perez <nicholas.perez@tiptap.dev>
3 people authored Nov 17, 2024
1 parent 177868a commit 38abfdf
Showing 4 changed files with 28 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/tiny-buckets-behave.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiptap/extension-font-family": patch
---

Font-family extension: Prevent removal of quotes in parseHTML
16 changes: 14 additions & 2 deletions demos/src/Extensions/FontFamily/React/index.jsx
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ export default () => {
<p><span style="font-family: monospace">The cool kids can apply monospace fonts aswell.</span></p>
<p><span style="font-family: cursive">But hopefully we all can agree, that cursive fonts are the best.</span></p>
<p><span style="font-family: var(--title-font-family)">Then there are CSS variables, the new hotness.</span></p>
<p><span style="font-family: 'Exo 2'">TipTap even can handle exotic fonts as Exo 2.</span></p>
`,
})

@@ -27,6 +28,9 @@ export default () => {

return (
<>
<link
href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"/>
<div className="control-group">
<div className="button-group">
<button
@@ -82,12 +86,20 @@ export default () => {
>
Comic Sans quoted
</button>
<button onClick={() => editor.chain().focus().unsetFontFamily().run()} data-test-id="unsetFontFamily">
<button
onClick={() => editor.chain().focus().setFontFamily('"Exo 2"').run()}
className={editor.isActive('textStyle', { fontFamily: '"Exo 2"' }) ? 'is-active' : ''}
data-test-id="exo2"
>
Exo 2
</button>
<button onClick={() => editor.chain().focus().unsetFontFamily().run()}
data-test-id="unsetFontFamily">
Unset font family
</button>
</div>
</div>
<EditorContent editor={editor} />
<EditorContent editor={editor}/>
</>
)
}
8 changes: 8 additions & 0 deletions demos/src/Extensions/FontFamily/React/index.spec.js
Original file line number Diff line number Diff line change
@@ -46,4 +46,12 @@ context('/src/Extensions/FontFamily/React/', () => {

cy.get('.tiptap').find('span').should('have.attr', 'style', 'font-family: var(--title-font-family)')
})
it('should allow fonts containing a space and number as a font-family', () => {
cy.get('[data-test-id="exo2"]')
.should('not.have.class', 'is-active')
.click()
.should('have.class', 'is-active')

cy.get('.tiptap').find('span').should('have.attr', 'style', 'font-family: "Exo 2"')
})
})
2 changes: 1 addition & 1 deletion packages/extension-font-family/src/font-family.ts
Original file line number Diff line number Diff line change
@@ -49,7 +49,7 @@ export const FontFamily = Extension.create<FontFamilyOptions>({
attributes: {
fontFamily: {
default: null,
parseHTML: element => element.style.fontFamily?.replace(/['"]+/g, ''),
parseHTML: element => element.style.fontFamily,
renderHTML: attributes => {
if (!attributes.fontFamily) {
return {}

0 comments on commit 38abfdf

Please sign in to comment.