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

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    dotted: {
      /** 切换加点字(下加点)标记 */
      toggleDotted: () => ReturnType
    }
  }
}

/**
 * 加点字 mark —— 用于语文试卷中"加点字"注音题、词语运用题等。
 * 渲染为下加点虚线下划线(text-decoration: underline dotted)。
 */
export const DottedMark = Mark.create({
  name: "dotted",
  inclusive: true,
  parseHTML: () => [
    { tag: "span[data-dotted]" },
    {
      style: "text-decoration",
      getAttrs: (v) => (v === "underline dotted" ? null : false),
    },
  ],
  renderHTML: ({ HTMLAttributes }) => [
    "span",
    mergeAttributes(HTMLAttributes, {
      "data-dotted": "true",
      style: "text-decoration: underline dotted; text-underline-offset: 3px;",
    }),
    0,
  ],
  addCommands() {
    return {
      toggleDotted:
        () =>
        ({ commands }) =>
          commands.toggleMark(this.name),
    }
  },
})
