fix(font-family): Prevent removal of quotes in parseHTML (#5828)

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 <[email protected]> Co-authored-by: Nick Perez <[email protected]>
ueberdosis · Nov 17, 2024 · 38abfdf · 38abfdf
1 parent 177868a
commit 38abfdf
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/.changeset/tiny-buckets-behave.md 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
@@ -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}/>
     </>
   )
 }
diff --git 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
@@ -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 {}