WordPress

applyFormat

フォーマットの適用のみ（追加した値は解除することができない）

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

const testFn = ({ isActive, onChange, value }) => {

    const onClickedTestBtn = () => {
        onChange(applyFormat(value, {
            'type': 'systech/test'
        }))
    }

    return (
        <RichTextToolbarButton
            title='テストボタン'
            icon='desktop'
            onClick={onClickedTestBtn}
            isActive={isActive}
        />
    )
}

registerFormatType('systech/test', {
    title: 'テスト',
    tagName: 'span',
    className: 'u-test',
    edit: testFn
});
  • 第一引数：変更する値
  • 第二引数：適用するフォーマット
  • 第三引数：開始インデックス
  • 第四引数：終了インデックス
  • 戻り値：適用後の値

第三引数・第四引数はほとんど使わない

類似パッケージ

toggleFormat

外部リンク

ドキュメント