# RichText

[TwebBlockRichText](https://github.com/tigriweb/components/blob/master/controls/TwebBlockRichText.js)

<div align="left" data-full-width="false"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FcJcfVHdutItrO4e8f6KO%2Frich-text.jpg?alt=media&#x26;token=c51dfbfc-8a90-46f5-8f91-a21b13084689" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>{ tagName, className, allowedFormats, onChange, placeholder, name*, attributes*, setAttributes* }</summary>

```jsx
/**
 * @param {string} [tagName] - HTML tag name to use for the rich text element.
 * @param {string} [className] - CSS class name for styling the rich text element.
 * @param {Array} [allowedFormats] - Array of allowed text formats.
 * @param {function} [onChange] - Callback called when the value changes.
 * @param {string} [placeholder] - Placeholder text for the rich text element.
 * @param {string} name - Attribute name identifying the rich text content.
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */
```

</details>

{% code title="block.json" overflow="wrap" %}
```json
"testRichText": {
	"type": "string",
	"default": ""
},
```
{% endcode %}

{% code title="index.js" overflow="wrap" %}
```jsx
import {
	TwebBlockRichText,
} from '@tigriweb/components/controls';
```
{% endcode %}

{% code title="index.js | edit()" %}
```jsx
<TwebBlockRichText
	tagName="h2"
	className="custom-class"
	placeholder={ __('BlockControls...', 'your-theme-name') }
	name="testRichText"
	{...{ attributes, setAttributes }}
/>
```
{% endcode %}

### TwebBlockRichTex&#x74;**.Content** <a href="#twebblockmedia.content" id="twebblockmedia.content"></a>

<details>

<summary>{ tagName, className, value* }</summary>

```jsx
/**
 * @param {string} [tagName] - HTML tag name to use for the rich text element.
 * @param {string} [className] - CSS class name for styling the rich text element.
 * @param {object} value - Current value of the rich text.
 */
```

</details>

{% code title="index.js | save()" %}
```jsx
<TwebBlockRichText.Content
	tagName="h2"
	className="custom-class"
	value={ attributes.testRichText }
/>
```
{% endcode %}

