TipTapのパーツの作成方法を解説します。

目標

こんな感じに、background-colorが変わるやつです。 このRunstantでは、esm.shをインポートに使用していますが、Viteなどをつかってもかまいません。

作る

パーツを作る方法はいろいろあります。 この記事では、「Mark」という種類のパーツを作成します。

import {
  Mark, 
  mergeAttributes, // あとで使う
} from "@tiptap/core" // Markをインポート

const MyPlugin = Mark.create({
  // ここにプラグインを書く
})

基本はこんな感じです。

パーツの名前を、sheetとして作っていきます。

const Sheet = Mark.create({
  name: 'sheet', // 名前
  priority: 1000, // プラグインの優先度
})

これで、空のプラグインが完成です！ 空なので、何もできません。なので、レンダリングできるようにしましょう！

...
  renderHTML({ HTMLAttributes }) {
    return ['span', mergeAttributes(HTMLAttributes, {
      style: "background-color: #f88;",
      class: "sheet",
    }), 0];
  },
...

配列を返していることがわかりますね。3つの要素を持った配列です。 [<要素のタグ名>, <属性が入ったRecordのObject>, <知らない>]を示しています。

HTMLAttributesは基本のHTML属性で、追加する属性とmergeAttributesで結合しています。 追加する属性は、識別するためのクラス名と、適応するスタイルが書かれています。