developit / preact-richtextarea

:newspaper: A text field that supports HTML editing. :memo:

preact-richtextarea

A <textarea> that supports HTML editing, powered by Preact & contentEditable.

---

Usage Example

Use <RichTextArea /> like a normal <input>. It supports the same props/attributes, including value, onInput() and onChange().

import RichTextArea from 'preact-richtextarea';

const HtmlEditor = ({ html, ...props }) => (
	<form class="html">
		Body HTML:
		<RichTextArea value={html} {...props} />
	</form>
);

let html = `<h1>hello</h1><p>Testing 1 2 3...</p>`;
render(<HtmlEditor html={html} />, document.body);

Usage with Linked State

<RichTextArea /> works with Linked State exactly the same way as any other input field:

import RichTextArea from 'preact-richtextarea';

class Form extends Component {
	render({ }, { html }) {
		return (
			<form>
				<RichTextArea value={html} onChange={ this.linkState('html') } />
			</form>
		);
	}
}

render(<Form />, document.body);

---

License

MIT