preact/demo/contenteditable.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { createElement } from 'preact';
import { useState } from 'preact/hooks';

export default function Contenteditable() {
	const [value, setValue] = useState("Hey there<br />I'm editable!");

	return (
		<div>
			<div>
				<button onClick={() => setValue('')}>Clear!</button>
			</div>
			<div
				style={{
					border: '1px solid gray',
					padding: '8px',
					margin: '8px 0',
					background: 'white'
				}}
				contentEditable
				onInput={e => setValue(e.currentTarget.innerHTML)}
				dangerouslySetInnerHTML={{ __html: value }}
			/>
		</div>
	);
}