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 {}