🥺
TiptapのTable拡張機能で、各セルへ属性を設定することができるが、テーブル全体へ属性を設定することができない
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