Gutenberg RichText コンポーネント和訳

このページは Gutenberg の [RichText コンポーネントのリファレンス](https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/rich-text/README.md) 2019年11月25日版を和訳したものです。

# `RichText`

リッチで [`contenteditable` な入力欄](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) をレンダリングし、ユーザがコンテンツをフォーマットすることが可能です。

## プロパティ

### `value: String`

**必須**
編集対象の HTML 文字列。 HTML は整合性がとれている( valid な)必要があります。`tagName` を指定した場合はその中の HTML が valid な必要があります。

### `onChange( value: String ): Function`

**必須**
値の変更時に呼び出されます。

### `tagName: String`

**デフォルト値:** `div`
編集可能要素の[タグ名](https://www.w3.org/TR/html51/syntax.html#tag-name)。インライン表示要素はサポートされません。

### `placeholder: String`

**任意**
フィールドが空のときのプレースホルダテキスト。[`input` や `textarea` の同名属性](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute) と似た動作。

### `keepPlaceholderOnFocus: Boolean`

**任意**
コンテンツが未記入の場合、ブロックを選択・フォーカスしてもプレースホルダ文字を表示し続けるかを指定します。

### `multiline: Boolean | String`

**任意**
デフォルトでは、<kbd>Enter</kbd> で改行が挿入されます。
このプロパティを設定すると、編集可能フィールドが複数の段落を持てるようになり、<kbd>Enter</kbd> で新しい段落が生成されます。

### `onSplit( value: String ): Function`

**任意**
コンテンツが分割可能なときに呼び出されます。`value` には分割したコンテンツが指定されます。この内容で新しいブロックを生成してリターンします。
これが動作するためには、`onReplace` も同時に指定する必要があります。

### `onReplace( blocks: Array ): Function`

**任意** 
`RichText` のインスタンスが指定したブロックで置き換えできるときに呼び出されます。

### `onMerge( forward: Boolean ): Function`

**任意**
ブロックをマージできるときに呼び出されます。次のブロックとマージできるときは `forward` が true に、手前のブロックとマージできるときは false になります。

### `onRemove( forward: Boolean ): Function`

**任意**
ブロックが削除可能なときに呼び出されます。選択箇所が次のブロックに移動できる場合 `forward` が true に、手前のブロックと移動できる場合は false になります。

### `allowedFormats: Array`

**任意**
デフォルトでは、登録された全フォーマットが使用できます。この設定により使用可能なフォーマットを微調整できます。例: `[ 'core/bold', 'core/link' ]`

### `withoutInteractiveFormatting: Boolean`

**任意**
デフォルトでは、全てのフォーマット操作が表示されます。この設定はコンテンツを[インタラクティブ](https://html.spec.whatwg.org/multipage/dom.html#interactive-content)にするフォーマット操作を削除するのに使用します。
これは、

### `isSelected: Boolean`

**任意**
フォーマット操作を表示するため、入力欄の選択状態を表示するかを指定します。デフォルトではブロックを選択したとき、操作部を表示します。

### `autocompleters: Array<Completer>`

**任意**
デフォルト設定の代わりに、autocompleters が使用するリスト。

### `preserveWhiteSpace: Boolean`

**任意**
`value` 内の空白文字を保持するかどうかを指定します。通常、タブ文字、ニューライン文字、スペース文字が一つのスペースにまとめられます。オンにすると、ソフト改行は改行要素ではなく、ニューライン文字として保存されます。

## RichText.Content

`RichText.Content` はブロックの `save` 関数でリッチテキストのコンテンツを正しく保存するために使います。


## 使用例

```jsx

const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;

registerBlockType( /* ... */, {
	// ...

	attributes: {
		content: {
			source: 'html',
			selector: 'h2',
		},
	},

	edit( { className, attributes, setAttributes } ) {
		return (
			<div className={ className }>
				<RichText
					tagName="h2"
					value={ attributes.content }
					onChange={ ( content ) => setAttributes( { content } ) }
				/>
			</div>
		);
	},

	save( { attributes } ) {
		return (
			<div>
				<RichText.Content tagName="h2" value={ attributes.content } />
			</div>
		);
	}
} );
```


## RichTextToolbarButton

フォーマットツールバーの拡張スロット。フォーマットを UI に引き上げるための `registerFormatType` のコールの edit 関数で使用します。

### 使用例

```jsx
import { registerFormatType } from 'wp-rich-text';
import { richTextToolbarButton } from 'wp-editor';

registerFormatType( /* ... */, {
	/* ... */
	edit( { isActive } ) {
		return (
			<RichTextToolbarButton
				icon={ 'editor-code' }
				title={ 'My formatting button' }
				onClick={ /* ... */ }
				isActive={ isActive }
				/>
		);
	},
	/* ... */
} );
```