書式ツールバーAPI タグで囲う

基本のコード

index.js

import "./custom-format/index";

src/custom-format/index.js

import { registerFormatType, toggleFormat } from "@wordpress/rich-text";
import { RichTextToolbarButton } from "@wordpress/block-editor";

// ツールバーにボタンを追加;
const MyCustomButton = ({ isActive, onChange, value }) => {
	return (
		<RichTextToolbarButton
			icon="editor-code"
			title="Sample output"
			onClick={() => {
				onChange(
					toggleFormat(value, {
						type: "my-custom-format/sample-output",
					}),
				);
			}}
			isActive={isActive}
		/>
	);
};

// 新しい書式を登録
registerFormatType("my-custom-format/sample-output", {
	title: "Sample output",
	tagName: "samp",
	className: null,
	edit: MyCustomButton,
});