fix(textStyle): Null-safe parseHTML getting no color/fontFamily from HTMLElement styles

[d8vjork]

When having another extension reusing textStyle base extension (like one we use for text size) and we just use textSize on a node without color class, it fails at parsing it back to JSON at the color extension (we really need both, and many others in case of future contribution extensions to Tiptap).

Example HTML to send into generateJSON(html):

<p>Take a pictures <span style="font-size: 1.25rem;line-height: 1.75rem">hello world, this won't work</span> </p>

Example code of the extension we've (I'll open source it soon):

import { Extension } from '@tiptap/core'
import '@tiptap/extension-text-style'

export type TextSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'

export const TEXT_SIZE_CLASS_MAP: Record<TextSize, string> = {
  sm: 'font-size: 0.875rem;line-height: 1.25rem',
  md: 'font-size: 1rem;line-height: 1.5rem',
  lg: 'font-size: 1.125rem;line-height: 1.75rem',
  xl: 'font-size: 1.25rem;line-height: 1.75rem',
  '2xl': 'font-size: 1.5rem;line-height: 2rem',
  '3xl': 'font-size: 1.875rem;line-height: 2.25rem',
  '4xl': 'font-size: 2rem;line-height: 2.5rem',
  '5xl': 'font-size: 2.25rem;line-height: 2.875rem'
}

export type SizeOptions = {
  types: string[],
}

export const TextSize = Extension.create<SizeOptions>({
  name: 'textSize',

  addOptions() {
    return {
      types: ['textStyle'],
    }
  },

  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          textSize: {
            default: null,
            parseHTML: element => {
              const textSizeStyleIndex = Object.values(TEXT_SIZE_CLASS_MAP).indexOf(`font-size: ${element.style.fontSize};line-height: ${element.style.lineHeight}`)

              if (textSizeStyleIndex === -1) {
                return 'lg'
              }

              return Object.keys(TEXT_SIZE_CLASS_MAP)[textSizeStyleIndex]
            },
            renderHTML: attributes => {
              if (!attributes.textSize) {
                return {}
              }

              const matchedClassStr = Object.values(TEXT_SIZE_CLASS_MAP)[Object.keys(TEXT_SIZE_CLASS_MAP).indexOf(attributes.textSize)]

              return {
                style: `${matchedClassStr}`,
              }
            },
          },
        },
      },
    ]
  },
})

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	80319d0
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/628cfccced044400082d490f
😎 Deploy Preview	https://deploy-preview-2825--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.