You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- To **observe** content or styling, listen to an event: `onChangeState`,
27
-
`onChangeHtml`, `onChangeSelection`.
24
+
- To **change** the content or formatting, call a method on the ref, e.g. `ref.current?.toggleBold()`, `ref.current?.setValue(html)`, or `ref.current?.setLink(...)`.
25
+
- To **observe** changes to the content or formatting, listen to events such as `onChangeState`, `onChangeHtml`, or `onChangeSelection`.
28
26
29
27
You never set a `value` prop and re-render to make an edit happen.
30
28
@@ -35,22 +33,22 @@ The editor's content is HTML. `setValue` and `defaultValue` seeds it with an HTM
35
33
changes. What you store and what you render is a string of HTML.
36
34
37
35
The library uses a fixed set of standard and custom tags, so the output is
38
-
predictable and portable. [Supported HTML tags](/fundamentals/html-format-and-supported-tags)
36
+
predictable and portable. [Supported tags](/fundamentals/html-format-and-supported-tags)
39
37
lists exactly what it produces and accepts.
40
38
41
39
:::caution
42
40
43
-
You own sanitization. The library doesn't guarantee safe or clean HTML, so
41
+
Sanitizing HTML is your responsibility. The library doesn't guarantee safe or clean HTML, so
44
42
sanitize anything you persist, render elsewhere, or accept from untrusted
45
43
sources.
46
44
47
45
:::
48
46
49
47
## Normalization
50
-
HTML can be messy. If a user pastes text from Google Docs or MS Word, it can arrive packed with wrapper tags, inline styles, and structural quirks that don't match the format we expect.
48
+
HTML can be messy. When users paste rich text from applications like Google Docs or Microsoft Word, the HTML often contains additional wrapper elements, inline styles, and structural quirks that may not match the HTML structure expected by the library.
51
49
52
50
To handle this, both components provide a `useHtmlNormalizer` prop that normalizes incoming HTML. The normalizer cleans and restructures the input into the predictable format the library expects (e.g. it maps `<strong>` to `<b>`, unwraps `<div>` containers into `<p>` tags, and strips unsupported tags). The `useHtmlNormalizer` prop defaults to `true`.
53
-
All supported and canonical tags are listed in [Supported HTML tags](/fundamentals/html-format-and-supported-tags).
51
+
All supported and canonical tags are listed in [Supported tags](/fundamentals/html-format-and-supported-tags).
54
52
55
53
## Two components, one styling API
56
54
@@ -68,9 +66,7 @@ drift between the two. A common setup edits in `EnrichedTextInput`, stores the
68
66
69
67
## The style state model
70
68
71
-
Not every style can combine with every other. A heading isn't a list; bold
72
-
inside a code block doesn't make sense. The editor tracks this and reports it
73
-
through `onChangeState`, which gives each style three booleans:
69
+
Not every style can be combined with every other. For example, a paragraph can't be both a heading and a list item, code blocks don't support inline formatting such as bold or italic. The editor tracks this and reports it through `onChangeState`, which gives each style three booleans:
74
70
75
71
-**`isActive`** — the style is applied at the current selection. Use it to
76
72
highlight a toolbar button.
@@ -85,4 +81,4 @@ Driving your toolbar from these three flags keeps the UI honest: buttons light
85
81
up and grey out according to the editor's state.
86
82
87
83
For the comprehensive list of which styles block or conflict with each other, see
88
-
[Supported HTML tags](/fundamentals/html-format-and-supported-tags).
0 commit comments