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`.
28
+
29
+
You never set a `value` prop and re-render to make an edit happen.
30
+
31
+
## HTML is the source of truth
32
+
33
+
The editor's content is HTML. `setValue` and `defaultValue` seeds it with an HTML string,
34
+
`getHTML` reads the current content back, and `onChangeHtml` streams it as it
35
+
changes. What you store and what you render is a string of HTML.
36
+
37
+
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)
39
+
lists exactly what it produces and accepts.
40
+
41
+
:::caution
42
+
43
+
You own sanitization. The library doesn't guarantee safe or clean HTML, so
44
+
sanitize anything you persist, render elsewhere, or accept from untrusted
45
+
sources.
46
+
47
+
:::
48
+
49
+
## Normalization
50
+
51
+
## Normalization
52
+
53
+
HTML can often be messy. If a user pastes text from Google Docs or MS Word, it arrives packed with wrapper tags, inline styles, and structural quirks that don't match the format we expect.
54
+
55
+
To handle this, both components provide `useHtmlNormalizer` prop that normalizes any incoming HTML. The normalizer cleans and restructures the input into the predictable format the library expects. For example, it maps `<strong>` to `<b>`, safely unwraps `<div>` containers into `<p>` tags, and strips tags that are unsupported. The `useHtmlNormalizer` prop defaults to `true`.
56
+
57
+
All supported and canonical tags are listed in [Supported HTML tags](/fundamentals/html-format-and-supported-tags).
58
+
59
+
## Two components, one styling API
60
+
61
+
The library is split into an editor and a viewer:
62
+
63
+
-**`EnrichedTextInput`** — the interactive editor from the previous page.
64
+
-**`EnrichedText`** — a read-only display component that renders the input's
65
+
HTML.
66
+
67
+
Both accept the same `htmlStyle` prop, which describes how each tag looks
68
+
(heading sizes, blockquote borders, code block colors, and so on). Because they
69
+
share it, text looks identical whether it's being edited or displayed — no
70
+
drift between the two. A common setup edits in `EnrichedTextInput`, stores the
71
+
`getHTML` output, and later shows it with `EnrichedText`.
72
+
73
+
## The style state model
74
+
75
+
Not every style can combine with every other. A heading isn't a list; bold
76
+
inside a code block doesn't make sense. The editor tracks this and reports it
77
+
through `onChangeState`, which gives each style three booleans:
78
+
79
+
-**`isActive`** — the style is applied at the current selection. Use it to
80
+
highlight a toolbar button.
81
+
-**`isBlocking`** — another active style forbids this one entirely, so toggling
82
+
it would do nothing. For example bold is blocked inside a code block. Use it
83
+
to disable a button.
84
+
-**`isConflicting`** — this style would replace an active one if toggled on.
85
+
For example switching a blockquote paragraph to a heading removes the
86
+
blockquote. Use it to hint that the toggle is a swap, not an addition.
87
+
88
+
Driving your toolbar from these three flags keeps the UI honest: buttons light
89
+
up and grey out according do the editor's state.
90
+
To find the comprehensive list about what style blocks or conflicts with, check out
91
+
[Supported HTML tags](/fundamentals/html-format-and-supported-tags).
0 commit comments