import { Extension } from '@tiptap/core'

export const FontSize = Extension.create({
  name: 'fontSize',
  addGlobalAttributes() {
    return [
      {
        types: ['textStyle'],
        attributes: {
          fontSize: {
            default: null,
            parseHTML: element => {
              const sizeWithUnit = (element as HTMLElement).style.fontSize
              return sizeWithUnit || null
            },
            renderHTML: attributes => {
              if (!attributes.fontSize) return {}
              const value = String(attributes.fontSize)
              const withUnit = /(px|em|rem|%)$/i.test(value) ? value : `${value}px`
              return {
                style: `font-size: ${withUnit}`,
              }
            },
          },
        },
      },
    ]
  },
})