Skip to content

docs: Rich text formatting section#713

Open
hejsztynx wants to merge 8 commits into
@ksienkiewicz/docs-fundamentalsfrom
@ksienkiewicz/docs-rich-text-formatting
Open

docs: Rich text formatting section#713
hejsztynx wants to merge 8 commits into
@ksienkiewicz/docs-fundamentalsfrom
@ksienkiewicz/docs-rich-text-formatting

Conversation

@hejsztynx

Copy link
Copy Markdown
Collaborator

Summary

Rich text formatting section with:

  • basic styles,
  • links,
  • mentions,
  • lists,
  • inline images,
  • text alignment,
  • text shortcuts

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new “Rich text formatting” documentation section to the Docusaurus docs, introducing core formatting features of react-native-enriched-html with interactive editor examples.

Changes:

  • Adds new interactive example components for basic styles, links, mentions, lists, inline images, text alignment, and text shortcuts.
  • Replaces placeholder .md pages with full .mdx pages that embed the interactive examples.
  • Documents key API concepts for each feature (props/events/ref methods) with runnable snippets.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 9 comments.

Show a summary per file
File Description
docs/src/examples/BasicStylesEditor.tsx Adds interactive toolbar example for inline + paragraph style toggles.
docs/src/examples/LinksEditor.tsx Adds example showing autolink via linkRegex and manual linking via setLink.
docs/src/examples/MentionEditor.tsx Adds minimal mention insertion example using setMention.
docs/src/examples/ListsEditor.tsx Adds list toggling example (unordered/ordered/checkbox) driven by onChangeState.
docs/src/examples/ImagesEditor.tsx Adds inline image insertion example using setImage.
docs/src/examples/TextAlignmentEditor.tsx Adds alignment buttons example using setTextAlignment and state.alignment.
docs/src/examples/TextShortcutsEditor.tsx Adds example configuring textShortcuts for paragraph + inline shortcuts.
docs/docs/rich-text-formatting/basic-styles.mdx New “Basic styles” page describing inline vs paragraph styles with embedded example.
docs/docs/rich-text-formatting/basic-styles.md Removes placeholder TODO page (replaced by .mdx).
docs/docs/rich-text-formatting/links.mdx New “Links” page covering autolinks vs manual links with embedded example.
docs/docs/rich-text-formatting/links.md Removes placeholder TODO page (replaced by .mdx).
docs/docs/rich-text-formatting/mentions.mdx New “Mentions” page covering indicators, setMention, and mention events.
docs/docs/rich-text-formatting/mentions.md Removes placeholder TODO page (replaced by .mdx).
docs/docs/rich-text-formatting/lists.mdx New “Lists” page describing list toggles and behavior with embedded example.
docs/docs/rich-text-formatting/lists.md Removes placeholder TODO page (replaced by .mdx).
docs/docs/rich-text-formatting/inline-images.mdx New “Inline images” page describing setImage and failure behavior with example.
docs/docs/rich-text-formatting/inline-images.md Removes placeholder TODO page (replaced by .mdx).
docs/docs/rich-text-formatting/text-alignment.mdx New “Text alignment” page describing setTextAlignment + state reporting.
docs/docs/rich-text-formatting/text-alignment.md Removes placeholder TODO page (replaced by .mdx).
docs/docs/rich-text-formatting/text-shortcuts.mdx New “Text shortcuts” page explaining paragraph vs inline shortcuts and defaults.
docs/docs/rich-text-formatting/text-shortcuts.md Removes placeholder TODO page (replaced by .mdx).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread docs/docs/rich-text-formatting/text-shortcuts.mdx
Comment thread docs/docs/rich-text-formatting/text-shortcuts.mdx
Comment thread docs/docs/rich-text-formatting/text-shortcuts.mdx Outdated
Comment thread docs/docs/rich-text-formatting/text-shortcuts.mdx
Comment thread docs/docs/rich-text-formatting/text-alignment.mdx
Comment thread docs/src/examples/TextAlignmentEditor.tsx
Comment thread docs/docs/rich-text-formatting/lists.mdx Outdated
Comment thread docs/docs/rich-text-formatting/lists.mdx Outdated
Comment thread docs/docs/rich-text-formatting/basic-styles.mdx
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (3)

docs/docs/rich-text-formatting/text-shortcuts.mdx:12

  • The prose says typing # turns a line into a heading, but your configured trigger is '# ' (hash + space). Using # without the trailing space is misleading for readers trying the feature.
Text shortcuts let users format as they type, the way Markdown editors do -
typing `#` turns a line into a heading, wrapping a word in `**` makes it bold.

docs/docs/rich-text-formatting/text-shortcuts.mdx:38

  • Paragraph shortcut examples should include the trailing spaces required by the actual triggers (e.g. # , - , 1. ). Otherwise readers may try the prefix without a space and think shortcuts are broken.
  e.g. `#` for a heading, `-` for a bulleted list. Since a paragraph can only hold

docs/docs/rich-text-formatting/text-shortcuts.mdx:72

  • In the "Try it out" section, the paragraph shortcut is described as # but the example/editor uses the '# ' trigger. Updating this makes the instructions match the actual behavior.
The editor below wires up one shortcut of each kind - a paragraph one (`#` → H1)
and an inline one (`**` → bold). Start a line with `#` and watch it become a
heading, then wrap a word in `**stars**` to bold it.

Comment thread docs/src/examples/BasicStylesEditor.tsx Outdated
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@hejsztynx
hejsztynx force-pushed the @ksienkiewicz/docs-rich-text-formatting branch from 24db158 to 942497f Compare July 20, 2026 13:10
Comment thread docs/docs/rich-text-formatting/basic-styles.mdx
Comment thread docs/docs/rich-text-formatting/basic-styles.mdx
Comment thread docs/docs/rich-text-formatting/mentions.mdx
list type. Notice how switching from **Bulleted** to **Numbered** swaps the style
instead of stacking. Inserting a new line preserves the list format by creating another item, and tapping a checkbox toggles just that item.

<InteractiveExample src={ListsEditorSrc} component={ListsEditor} />

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe set boxColor on ulCheckbox to match the color of the active toolbar button.:

Image

Comment thread docs/docs/rich-text-formatting/lists.mdx
Comment thread docs/src/examples/ImagesEditor.tsx
@hejsztynx
hejsztynx requested review from exploIF and szydlovsky July 21, 2026 07:50
hejsztynx and others added 2 commits July 21, 2026 09:52
Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants