TiptapのExtensionを使って見出し（ハイライト）機能をリリースしました

// 旧エディターのハイライト見出しを行った時のDOM構造
<ul>
	<li>
		<p>見出し</p>
	</li>
</ul>

import {Heading} from '@tiptap/extension-heading';

type Level = 2 | 3;

type HeadingOptions = {
  levels: Level[];
  HTMLAttributes: Record<string, any>;
};

export const HeadingExtension = Heading.extend<HeadingOptions>({
  name: 'heading',

  /**
    * 拡張の初期設定や動作をカスタマイズするのに必要な値を設定できます。
    * ここでは初期値のHTMLAttributesとlevelsの値を2, 3に絞るようにしています。
    * PR TIMESのエディター本文は中身出し（h2）と小見出し（h3）しか
    * 設定ができないようにしているためこのようにバリデーションをかけています。
    */
  addOptions() {
    return {
      levels: [2, 3],
      HTMLAttributes: {},
    };
  },

  /**
    * 拡張機能にカスタム属性、この実装の場合は見出しレベルの出し分けを行うために使用しています。
    * こうすることで中身出しと小見出しそれぞれの拡張機能を用意する必要がなくなり、
    * 外部からlevelを渡すことでエディターでの表示を出し分けることができます。
    */
  addAttributes() {
    return {
      level: {
        default: 2,
        rendered: false,
      },
    };
  },

  /**
    * 外部からDOMデータが渡ってきた際にパースして拡張機能の設定を当てるために必要な機能です。
    * PR TIMESの場合はエディターで記載した内容を保存することができるので編集ページに
    * アクセスした際にデータを呼び出して最後に記載した状態に戻す時に活躍しています。
    */
  parseHTML() {
    return this.options.levels?.map((level) => ({
      tag: `h${level}`,
      attrs: {level},
    }));
  },

  /**
    * 最終的にどのようなHTMLを書き出すかの設定を行なっています。
    * エディターページと公開後のプレスリリースページのdom構造は違っており、
    * それぞれの機能がどのように書き出されるかをここで指定しています。
    */
  renderHTML({node}) {
    const levels: Level[] = this.options.levels ?? [];
    const hasLevel = levels.includes(node.attrs.level as Level);
    const level: Level = hasLevel ? (node.attrs.level as Level) : levels[0];

    return [`h${level}`, 0];
  },
});

import {Heading, type Level} from '@tiptap/extension-heading';

type HeadingOptions = {
  levels: Level[];
  HTMLAttributes: Record<string, any>;
};

type PressReleaseHeaderHighlightAttributes = {
  level: Level;
  class: string;
};

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    'pr-heading': {
      toggleHeaderWithHighlight: (
        attributes: Partial<PressReleaseHeaderHighlightAttributes>,
      ) => ReturnType;
    };
  }
}

export const HeadingExtension = Heading.extend<HeadingOptions>({
  name: 'pr_heading',

  addOptions() {
    return {
      levels: [2, 3],
      HTMLAttributes: {},
    };
  },

  addAttributes() {
    return {
      level: {
        default: 2,
        rendered: false,
      },
      class: {
        default: '',
      },
    };
  },

  addCommands() {
    return {
      ...this.parent?.(),
      toggleHeaderWithHighlight:
        (attributes) =>
        ({commands}) => {
          const {level} = attributes;

          if (level === undefined || !this.options.levels.includes(level)) {
            return false;
          }

          return commands.toggleNode(this.name, 'paragraph', {
            ...attributes,
          });
        },
    };
  },

  parseHTML() {
    return this.options.levels?.map((level) => ({
      tag: `h${level}`,
      attrs: {level},
    }));
  },

  renderHTML({node}) {
    const {levels} = this.options;
    const {level, class: className} =
      node.attrs as PressReleaseHeaderHighlightAttributes;
    const headerLevel = levels.includes(level) ? level : levels[0];

		// classNameがあれば見出し（ハイライト）、なければ見出しになるようにする
    return className === ''
			// RSS用にハイライトでない見出しはクラス属性が付かないようにする必要があります
      ? [`h${headerLevel}`, 0]
      : [`h${headerLevel}`, {class: className}, 0];
  },
});

editor.chain().focus().toggleHeaderWithHighlight({level, isHighlight}).run();

export const HeadingExtension = Heading.extend<HeadingOptions>({
  name: 'pr_heading',

  addOptions() {
    return {
      levels: [2, 3],
      HTMLAttributes: {},
    };
  },

  addAttributes() {
    return {
      level: {
        default: 2,
        rendered: false,
      },
      isHighlight: {
        default: false,
      },
    };
  },

  addCommands() {
    return {
      ...this.parent?.(),
      toggleHeaderWithHighlight:
        (attributes) =>
        ({commands}) => {
          return commands.toggleNode(this.name, 'paragraph', {
            ...attributes,
          });
        },
    };
  },

  parseHTML() {
    return this.options.levels?.map((level) => ({
      tag: `h${level}`,
      attrs: {level},
    }));
  },

  renderHTML({node}) {
    const levels: Level[] = this.options.levels ?? [];
    const hasLevel = levels.includes(node.attrs.level as Level);
    const level: Level = hasLevel ? (node.attrs.level as Level) : levels[0];
    const isHighlight = node.attrs.isHighlight as boolean;

    return isHighlight
      ? [`h${level}`, {class: 'pr-header--highlight'}, 0]
      : [`h${level}`, 0];
  },
});

editor.chain().focus().toggleHeaderWithHighlight({level: 2, class: 'pr-header--highlight'}).run();

renderHTML({node}) {
  const {levels} = this.options;
  const {level, class: className} =
    node.attrs as PressReleaseHeaderHighlightAttributes;
  const headerLevel = levels.includes(level) ? level : levels[0];

	// RSS用にハイライトでない見出しはクラス属性が付かないようにするする必要があります
  return className === ''
    ? [`h${headerLevel}`, 0]
    : [`h${headerLevel}`, {class: className}, 0];
},

parseHTML() {
  const normals = this.options.levels.map((level) => ({
    tag: `h${level}`,
    attrs: {level},
  }));
  const highlights = this.options.levels.map((level) => ({
    tag: `h${level}.pr-header--highlight`,
    attrs: {level},
  }));

  return [...normals, ...highlights];
},