Skip to content

Commit 7b5c6c5

Browse files
kacperzolkiewskikacperzolkiewski
authored
docs: add supported tags, conflicting/blocking logic (software-mansion#507)
# Summary Update readme and add **Supported Tags** section with conflicting and blocking logic ---------
1 parent 46a7981 commit 7b5c6c5

1 file changed

Lines changed: 50 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ We can help you build your next dream product –
2424
- [Prerequisites](#prerequisites)
2525
- [Installation](#installation)
2626
- [Usage](#usage)
27+
- [Supported Tags](#supported-tags)
2728
- [Non Parametrized Styles](#non-parametrized-styles)
2829
- [Links](#links)
2930
- [Mentions](#mentions)
@@ -140,6 +141,55 @@ Summary of what happens here:
140141
- `isBlocking`: Indicates if the style is blocked by another active style (disable the button).
141142
- `isConflicting`: Indicates if the style is in conflict with another active style.
142143

144+
## Supported Tags
145+
146+
`react-native-enriched` uses both standard and custom HTML tags in its output and accepts them as input.
147+
148+
Not all styles can be combined freely. There are two kinds of restrictions:
149+
150+
- **Conflicting** - toggling a style that conflicts with an already active style will automatically remove the active one. For example: toggling `<h2>` on a `<blockquote>` paragraph will remove the blockquote and apply the heading.
151+
- **Blocking** - a style that is blocked cannot be toggled at all while the blocking style is active. For example: `<b>` is blocked inside `<codeblock>`, so the bold cannot be applied where codeblock is active.
152+
153+
These states are reported via the [onChangeState](docs/API_REFERENCE.md#onchangestate) event (`isConflicting` and `isBlocking` properties).
154+
155+
### Inline tags
156+
157+
| Style | HTML tag | Conflicts with | Blocked by |
158+
| ------------- | ----------- | ---------------------------- | ---------------------- |
159+
| Bold | `<b>` | -- | `<codeblock>` |
160+
| Italic | `<i>` | -- | `<codeblock>` |
161+
| Underline | `<u>` | -- | `<codeblock>` |
162+
| Strikethrough | `<s>` | -- | `<codeblock>` |
163+
| Inline code | `<code>` | `<a>`, `<mention>` | `<codeblock>`, `<img>` |
164+
| Link | `<a>` | `<code>`, `<a>`, `<mention>` | `<codeblock>`, `<img>` |
165+
| Mention | `<mention>` | `<code>`, `<a>` | `<codeblock>`, `<img>` |
166+
| Image | `<img>` | `<a>`, `<mention>` | `<code>` |
167+
168+
> [!NOTE]
169+
> Headings also block bold when `bold: true` is set on the heading style in the [htmlStyle](docs/API_REFERENCE.md#htmlstyle) prop. In that case, the heading itself renders as bold, so toggling bold on top of it is redundant and therefore blocked.
170+
171+
### Paragraph tags
172+
173+
Some paragraph styles are container elements that wrap each line of text inside them with an **inner content tag**. For example: each line inside `<ul>` is wrapped in `<li>` and each line inside `<codeblock>` is wrapped in `<p>`.
174+
175+
Only one paragraph-level style can be active per paragraph - all paragraph styles conflict with each other.
176+
177+
| Style | HTML tag | Inner content tag | Conflicts with | Blocked by |
178+
| -------------- | --------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
179+
| Heading 1 | `<h1>` | -- | `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
180+
| Heading 2 | `<h2>` | -- | `<h1>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
181+
| Heading 3 | `<h3>` | -- | `<h1>`, `<h2>`, `<h4>`, `<h5>`, `<h6>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
182+
| Heading 4 | `<h4>` | -- | `<h1>`, `<h2>`, `<h3>`, `<h5>`, `<h6>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
183+
| Heading 5 | `<h5>` | -- | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h6>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
184+
| Heading 6 | `<h6>` | -- | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
185+
| Unordered list | `<ul>` | `<li>` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
186+
| Ordered list | `<ol>` | `<li>` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<ul>`, `<ul data-type="checkbox">`, `<blockquote>`, `<codeblock>` | -- |
187+
| Checkbox list | `<ul data-type="checkbox">` | `<li>` / `<li checked>` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<ul>`, `<ol>`, `<blockquote>`, `<codeblock>` | -- |
188+
| Blockquote | `<blockquote>` | `<p>` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<codeblock>` | -- |
189+
| Codeblock | `<codeblock>` | `<p>` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<b>`, `<u>`, `<i>`, `<s>`, `<ul>`, `<ol>`, `<ul data-type="checkbox">`, `<blockquote>`, `<code>`, `<mention>`, `<a>` | -- |
190+
191+
Plain text paragraphs are wrapped in `<p>` tags. Empty paragraphs are represented as `<br>`.
192+
143193
## Non Parametrized Styles
144194

145195
Supported styles:

0 commit comments

Comments
 (0)