Custom classes extension 。Fixed the problem that custom classes could be lost

[WangHaohui-org]

My requirement is to add a class to each tag.

[WangHaohui-org]

such as:

At first I noticed that adding classes and re-rendering classes would disappear.
So I wrote an extension called textClass, just to keep people from tricking .

path:src/editor/extensions/index.ts
path:src/editor/extensions/text_style.ts(I forgot to modify the file name)

[WangHaohui-org]

index.ts

import { TextStyle } from "./text-style"

export * from "./text-style"

export default TextStyle

text_style.ts

import { Mark, getMarkAttributes, mergeAttributes } from "@tiptap/core"

export interface TextClassOptions {
  HTMLAttributes: Record<string, any>
}

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    textClass: {
      /**
       * Remove spans without inline style attributes.
       */
      removeEmptyTextClass: () => ReturnType
    }
  }
}

export const TextStyle = Mark.create<TextClassOptions>({
  name: "textClass",

  addOptions() {
    return { HTMLAttributes: {} }
  },

  parseHTML() {
    return [
      {
        tag: "span",
        getAttrs: element => {
          return {
            class: (element as HTMLElement).getAttribute("class")
          }
        }
      }
    ]
  },

  renderHTML({ HTMLAttributes }) {
    console.log("渲染", HTMLAttributes, this.options.HTMLAttributes)
    return [
      "span",
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      0
    ]
  },

  addCommands() {
    return {
      removeEmptyTextClass:
        () =>
        ({ state, commands }) => {
          const attributes = getMarkAttributes(state, this.type)
          const hasStyles = Object.entries(attributes).some(
            ([, value]) => !!value
          )

          if (hasStyles) {
            return true
          }

          return commands.unsetMark(this.name)
        }
    }
  }
})

How use?
such as(this written by my change color extensions):

import { Extension } from "@tiptap/core"
import "../config/index"

export type ColorOptions = {
  types: string[]
}

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    color: {
      /**
       * Set the text color
       */
      setColor: (color: string) => ReturnType
      /**
       * Unset the text color
       */
      unsetColor: () => ReturnType
    }
  }
}

export const Color = Extension.create<ColorOptions>({
  name: "color",

  addOptions() {
    return {
   // 在这里声明这个类型
  // In here statement textClass type
      types: ["textClass"]
    }
  },

  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          color: {
            default: null,
            parseHTML: element =>
             //when parse need matching 
              element.getAttribute("class")?.replace(/['"]+/g, ""),
            renderHTML: attributes => {
              console.log("colorHTMLRander", attributes)
              if (!attributes.color) {
                return {}
              }

              return {
                class: `${attributes.color}`
              }
            }
          }
        }
      }
    ]
  },

  addCommands() {
    return {
      setColor:
        color =>
        ({ chain }) => {
         // in here use textClass type，
          return chain().setMark("textClass", { color }).run()
        },
      unsetColor:
        () =>
        ({ chain }) => {
          return chain()
            .setMark("textClass", { color: null })
            .removeEmptyTextClass()
            .run()
        }
    }
  }
})

last ，u need new Editor import the textClass.
such as:

new Editor({
    content:value,
    extensions: [
      StarterKit,
      TextClass,
    ].......
  })