diff --git a/.changeset/tiny-buckets-behave.md b/.changeset/tiny-buckets-behave.md
new file mode 100644
index 000000000..c288572bb
--- /dev/null
+++ b/.changeset/tiny-buckets-behave.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-font-family": patch
+---
+
+Font-family extension: Prevent removal of quotes in parseHTML
diff --git a/demos/src/Extensions/FontFamily/React/index.jsx b/demos/src/Extensions/FontFamily/React/index.jsx
index 41ef25bde..3d1fa851c 100644
--- a/demos/src/Extensions/FontFamily/React/index.jsx
+++ b/demos/src/Extensions/FontFamily/React/index.jsx
@@ -18,6 +18,7 @@ export default () => {
The cool kids can apply monospace fonts aswell.
But hopefully we all can agree, that cursive fonts are the best.
Then there are CSS variables, the new hotness.
+ TipTap even can handle exotic fonts as Exo 2.
`,
})
@@ -27,6 +28,9 @@ export default () => {
return (
<>
+
-
-
+
>
)
}
diff --git a/demos/src/Extensions/FontFamily/React/index.spec.js b/demos/src/Extensions/FontFamily/React/index.spec.js
index eee77683a..03bfe5677 100644
--- a/demos/src/Extensions/FontFamily/React/index.spec.js
+++ b/demos/src/Extensions/FontFamily/React/index.spec.js
@@ -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"')
+ })
})
diff --git a/packages/extension-font-family/src/font-family.ts b/packages/extension-font-family/src/font-family.ts
index b4f99a282..ac57f521c 100644
--- a/packages/extension-font-family/src/font-family.ts
+++ b/packages/extension-font-family/src/font-family.ts
@@ -49,7 +49,7 @@ export const FontFamily = Extension.create({
attributes: {
fontFamily: {
default: null,
- parseHTML: element => element.style.fontFamily?.replace(/['"]+/g, ''),
+ parseHTML: element => element.style.fontFamily,
renderHTML: attributes => {
if (!attributes.fontFamily) {
return {}