🥺

TiptapのTable拡張機能で、各セルへ属性を設定することができるが、テーブル全体へ属性を設定することができない

2022/08/10に公開

table全体へ属性を設定するコマンドが用意されていない

Tiptapが標準で用意しているTable関連の拡張機能では、特定セルに対して属性を設定するコマンドが用意されている。
このコマンドを利用することで、独自定義した属性(例えば、枠線の色)をエディタ側から変更することができる。

editor.commands.setCellAttribute('customAttribute', 'value')
editor.commands.setCellAttribute('backgroundColor', '#000')

同様に、table拡張にも属性を設定したいが、ドキュメントを見る限り、テーブル全体へ属性を設定するコマンドは用意されていない。
Tiptap Table拡張ドキュメント

既存機能を拡張して、Table拡張機能に属性とコマンドを追加する

Tiptapでは、標準で提供されている拡張機能に変更を加えることで、属性やコマンド、キーボードショートカット等をカスタマイズして利用することが可能である。
今回は、以下の通り、既存のTable拡張機能を拡張して、属性とコマンドを追加した。

const CustomTable = Table.extend({
  // 独自属性を追加する
  addAttributes() {
    return {
      ...this.parent?.(),
      class: {
        default: null,
        parseHTML: (element) => element.getAttribute("class"),
        renderHTML: (attributes) => {
          return {
            class: attributes.class
          };
        }
      }
    };
  },
  // 独自属性を設定するためのコマンドを用意する
  addCommands() {
    return {
      ...this.parent?.(),
      setCustomClass: (customClass) => ({ chain }) => {
        return chain()
          .updateAttributes(this.name, {
            class: customClass,
          })
          .run();
      }
    };
  }
})

拡張することで追加したコマンドから、属性を設定することができない

上述の方法で追加したsetCustomClassコマンドより、属性を設定することができない。

export default function App() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      CustomTable.configure({
        resizable: true
      }),
      TableRow,
      TableHeader,
      TableCell
    ]
  });

  return (
    <div className="App">
      <button onClick={() => editor.commands.insertTable()}>
        insertTable
      </button>
      
      // 下のコマンドが動作していない
      <button onClick={() => editor.commands.setCustomClass("border-red")}>
        changeTableBorder
      </button>
      <EditorContent editor={editor} />
    </div>
  );
}

解決策

方法1. resizableオプションをオフにする

export default function App() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      CustomTable.configure({
        resizable: false // ここをfalseに変更する
      }),
      TableRow,
      TableHeader,
      TableCell
    ]
  });

方法2. Table拡張モジュールのバージョンを2.0.0-beta.35以前に変更する

Discussion