Conversation
- scaffold docusaurus site in docs/, based on react-native-screens-docs, served at the site root and branded with the enriched logo and colors - add docs-build and docs-publish workflows deploying to gh-pages - move existing markdown docs to docs-md/ and update README links - port generic MDX components from react-native-reanimated docs - exclude docs/ from repo eslint and typecheck Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
# Summary - provided bare docs structure - added some babel configuration for `t-rex-ui` theme - modified the structure so top-level sections on the sidebar are interactible, eg `Fundamentals`
## Description This PR integrates Google Tag Manager (GTM) for analytics tracking and adds a new topbar component ## Changes - **GTM Integration:** Added container in docusaurus.config.ts. - **Dependencies Update** Updated t-rex-ui dependecy to 1.3.4 version - **Topbar Banner:** Used topbar banner from "@swmansion/t-rex-ui": "1.3.4". Co-authored-by: Artur Wojnar <arturwojnar@Arturs-MacBook-Pro.local>
# Summary First section of the docs - `Fundamentals` Added a `react-native-web` plugin, to allow interactive examples Configured ESLint, so it checks the files in the `docs` - we want to keep the code of interactive examples clean --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com> Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com> Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
# Summary Introduced `enriched-html` color palette, symmetrically how it was done in the `reanimated` [docs](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started), where the theme color was purple. Here it is orange, which encodings i took from the `enriched-html` [landing page](https://enriched.swmansion.com/html). - introduced orange `enriched-html` colorings, - made the `swm-red` a bit more saturated, so there is a clearer distinction between the `swm-red` and `swm-orange`, e.g. between a red `:::caution` note and a orange, drop-down `details`, - links are now blue, easier to spot - just like i the `reanimated` docs, - codeblock highlight colors slightly adjusted so the "main" color is orange, instead of `reanimated`'s purple - added a temporary docs page so you can see what's changed - it will be removed with this PR's closing ## Testing Go to `colors-demo` section where I added a couple elements to see the changes and if they are visually pleasing. Switch between light and dark mode in the docs. I'll remove the `colors-demo` once it's ready to merge ## Screenshots Before 🟣 : <img width="988" height="755" alt="image" src="https://github.com/user-attachments/assets/6905d30a-82c9-41af-9c36-8294cbacfd88" /> After 🟠 : <img width="991" height="802" alt="image" src="https://github.com/user-attachments/assets/fd8445ca-6618-48ca-84ff-cce2e9190a1f" /> --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
# Summary - wired up ESLint and TS, as we now have interactive examples' code visible directly in the docs. - `react-native-enriched-html` is now linked locally. - as the library is resolved locally, the CI build scripts need its dependencies installed,so the root `node_modules` has become available now in the CI scripts. --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com> Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>
# Summary Add Api reference section to docs --------- Co-authored-by: Krystian Sienkiewicz <krystian.sienkiewicz@swmansion.com> Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>
# Summary Added the `Misc` section to the docs. --------- Co-authored-by: Kacper Żółkiewski <kacper.zolkiewski@swmansion.com> Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com> Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>
# Summary `Rich text formatting` section with: - basic styles, - links, - mentions, - lists, - inline images, - text alignment, - text shortcuts --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com> Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com> Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>
# Summary The `Core functionalities` section in the docs - Styling the input - Rendering rich text - Handling events - Web support --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com> Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com> Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>
# Summary Added the `Guides` section to the docs. Aside from basic tutorials that taught general features in the `Rich text formatting` section, this section present 3 tutorials: - building user and channel mentions - similarly as it is in the main example app in the repo - building an emoji picker using mentions - shows that mentions are pretty powerful and can be used in more interesting situations - contextMenuItems - no live demo, as it is not available on web I tested the same code in an RN app - everything works nicely, the code is portable --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com> Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com> Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>
# Summary Provided an `htmlStyle` for the `EnrichedTextInput` and `EnrichedText` components in the interactive examples. The internal default values didn't look too well, so this `htmlStyle` provides colorings that match the docs' style both in dark and light mode. That makes the interactive examples' code not directly copiable, as `htmlStyle` is not present there to reduce noise. Added a note explaining that in the `your-first-editor` section.
# Summary Linked up sections across whole docs.
# Summary We have the new docs, updated the repo's structure - removed the `docs-md` directory - removed the `CONTRIBUTING.md` file - updated the main `README.md` to be shorter and now it directs users to the docs As the docs are not yet fully published, the new links temporarily direct to the landing page - this will be updated when the docs are available under an official `docs.swmansion` url --------- Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
# Summary Add RN 0.87 to compatibility table
# Conflicts: # README.md # docs/INPUT_API_REFERENCE.md # docs/TEXT_API_REFERENCE.md # docs/WEB.md
Contributor
There was a problem hiding this comment.
Pull request overview
Publishes a new Docusaurus-based documentation site for react-native-enriched-html, including interactive examples, custom theming, and GitHub Pages deployment automation.
Changes:
- Adds a standalone
docs/Docusaurus site (content, theme overrides, interactive examples, and styling). - Updates repo scripts/config to typecheck and lint appropriately alongside the new docs project.
- Adds GitHub Actions workflows to build docs on PRs and deploy docs to
gh-pagesonmain.
Reviewed changes
Copilot reviewed 114 out of 128 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.build.json | Excludes docs/ from the library build TS project. |
| package.json | Adds docs scripts and includes docs typecheck in typecheck. |
| eslint.config.mjs | Updates ESLint ignore rules to account for the docs site. |
| docs/WEB.md | Removes legacy docs page (replaced by Docusaurus site content). |
| docs/tsconfig.json | Adds docs TypeScript project config. |
| docs/TEXT_API_REFERENCE.md | Removes legacy docs page (replaced by Docusaurus site content). |
| docs/static/robots.txt | Blocks indexing for pre-launch docs deploy. |
| docs/static/img/logo.svg | Adds docs branding asset (light). |
| docs/static/img/logo-dark.svg | Adds docs branding asset (dark). |
| docs/static/img/github.svg | Adds GitHub icon asset for navbar link. |
| docs/static/img/Arrow.svg | Adds arrow icon asset (light). |
| docs/static/img/Arrow-dark.svg | Adds arrow icon asset (dark). |
| docs/static/CNAME | Configures custom domain for GitHub Pages. |
| docs/static/.nojekyll | Ensures GitHub Pages serves files without Jekyll processing. |
| docs/src/theme/TOCItems/Tree.js | Swizzles TOC item tree to t-rex-ui component. |
| docs/src/theme/TOCItems/index.js | Wraps TOC items with t-rex-ui component. |
| docs/src/theme/TOCCollapsible/index.js | Swizzles collapsible TOC to t-rex-ui component. |
| docs/src/theme/Tabs/styles.module.css | Customizes Tabs styling for the docs theme. |
| docs/src/theme/Tabs/index.js | Wraps Docusaurus Tabs with custom container styling. |
| docs/src/theme/Root.js | Adds MUI color-scheme initialization and theme provider. |
| docs/src/theme/ReactLiveScope/index.js | Exposes components to live code blocks. |
| docs/src/theme/Navbar/index.js | Wraps navbar with topbar banner integration. |
| docs/src/theme/muiTheme.tsx | Adds MUI theme definition for docs. |
| docs/src/theme/MDXComponents/styles.module.css | Styles custom MDX components (details/arrow). |
| docs/src/theme/MDXComponents/DetailsStyling.tsx | Custom <details> behavior + collapsible animation styling. |
| docs/src/theme/MDXComponents/Details.js | MDX <details> wrapper to extract <summary>. |
| docs/src/theme/MDXComponents.js | Registers custom MDX components used across the site. |
| docs/src/theme/Footer/index.js | Uses t-rex-ui footer component. |
| docs/src/theme/DocSidebar/index.js | Uses t-rex-ui doc sidebar component. |
| docs/src/theme/CodeBlock/index.js | Uses t-rex-ui code styling while preserving live blocks. |
| docs/src/theme/CodeBlock/highlighting-light.js | Provides branded Prism theme (light). |
| docs/src/theme/CodeBlock/highlighting-dark.js | Provides branded Prism theme (dark). |
| docs/src/theme/Admonition/index.js | Uses t-rex-ui admonition component. |
| docs/src/examples/TextShortcutsEditor.tsx | Interactive example: text shortcuts. |
| docs/src/examples/TextAlignmentEditor.tsx | Interactive example: text alignment. |
| docs/src/examples/RenderingEditor.tsx | Interactive example: render HTML into EnrichedText. |
| docs/src/examples/MentionOnlyEditor.tsx | Interactive example: mentions picker flow. |
| docs/src/examples/MentionEditor.tsx | Interactive example: basic mention insertion. |
| docs/src/examples/ListsEditor.tsx | Interactive example: list toggles. |
| docs/src/examples/LinksEditor.tsx | Interactive example: autolinks + manual links. |
| docs/src/examples/ImagesEditor.tsx | Interactive example: inserting images. |
| docs/src/examples/htmlStyle.ts | Shared htmlStyle for interactive examples. |
| docs/src/examples/FirstEditor.tsx | Interactive example: first editor / bold toggle. |
| docs/src/examples/EmojiEditor.tsx | Interactive example: emoji picker via mentions. |
| docs/src/examples/BasicStylesEditor.tsx | Interactive example: basic inline/paragraph styles. |
| docs/src/css/typography.css | Global typography + font-face definitions. |
| docs/src/css/overrides.css | Global CSS overrides for navbar, codeblocks, and layout. |
| docs/src/css/index.css | Aggregates docs CSS imports. |
| docs/src/components/topbarBanner.config.ts | Config for topbar banner zones/rotation. |
| docs/src/components/ThemedVideo/styles.module.css | Styles for themed (light/dark) videos. |
| docs/src/components/ThemedVideo/index.tsx | Component for rendering theme-dependent videos. |
| docs/src/components/Row/styles.module.css | Layout helper styles. |
| docs/src/components/Row/index.tsx | Row layout component. |
| docs/src/components/Required/styles.module.css | Styles for “Required” badge. |
| docs/src/components/Required/index.tsx | “Required” badge component. |
| docs/src/components/PlatformCompatibility/index.tsx | Platform support table component. |
| docs/src/components/Optional/styles.module.css | Styles for “Optional” badge. |
| docs/src/components/Optional/index.tsx | “Optional” badge component. |
| docs/src/components/InteractiveExample/styles.module.css | Styles for interactive example wrapper UI. |
| docs/src/components/InteractiveExample/index.tsx | Interactive example wrapper (preview/code tabs + reset). |
| docs/src/components/Indent/styles.module.css | Indent helper styles. |
| docs/src/components/Indent/index.tsx | Indent helper component. |
| docs/src/components/Grid/styles.module.css | Grid helper styles. |
| docs/src/components/Grid/index.tsx | Grid helper component. |
| docs/src/components/ExampleVideo/index.tsx | Side-by-side platform demo video component. |
| docs/src/components/Compatibility/styles.module.css | Styling for compatibility “Yes/No/Version” cells. |
| docs/src/components/Compatibility/index.tsx | Compatibility helper components (Yes/No/Version/Spacer). |
| docs/src/components/Compatibility/EnrichedCompatibility.tsx | React Native vs library version compatibility table. |
| docs/src/components/CollapsibleCode/styles.module.css | Styles for collapsible code blocks. |
| docs/src/components/CollapsibleCode/index.tsx | Collapsible code block wrapper. |
| docs/src/components/CollapseButton/styles.module.css | Styles for collapsible toggle button. |
| docs/src/components/CollapseButton/index.tsx | Collapse/expand button component. |
| docs/src/clientModules/topbarBannerRefresh.ts | Client module to refresh banner content on SPA route changes. |
| docs/sidebars.js | Enables autogenerated sidebar structure. |
| docs/RELEASE.md | Removes legacy release guide from docs folder. |
| docs/package.json | Adds docs project dependencies/scripts (standalone Yarn project). |
| docs/ENRICHED_INPUT_STYLE.md | Removes legacy docs page (replaced by Docusaurus site content). |
| docs/docusaurus.config.js | Configures Docusaurus site, theme, plugins, and deployment settings. |
| docs/docs/rich-text-formatting/text-shortcuts.mdx | New docs page: text shortcuts. |
| docs/docs/rich-text-formatting/text-alignment.mdx | New docs page: text alignment. |
| docs/docs/rich-text-formatting/mentions.mdx | New docs page: mentions. |
| docs/docs/rich-text-formatting/lists.mdx | New docs page: lists. |
| docs/docs/rich-text-formatting/links.mdx | New docs page: links. |
| docs/docs/rich-text-formatting/inline-images.mdx | New docs page: inline images. |
| docs/docs/rich-text-formatting/basic-styles.mdx | New docs page: basic styles. |
| docs/docs/rich-text-formatting/category.json | Adds docs sidebar category metadata. |
| docs/docs/misc/roadmap.md | New docs page: roadmap. |
| docs/docs/misc/known-limitations.md | New docs page: known limitations. |
| docs/docs/misc/contributing.md | New docs page: contributing guide (docs site). |
| docs/docs/misc/compatibility.mdx | New docs page: compatibility details. |
| docs/docs/misc/comparison-with-other-libraries.md | New docs page: comparisons with alternatives. |
| docs/docs/misc/category.json | Adds docs sidebar category metadata. |
| docs/docs/guides/user-and-channel-mentions.mdx | New guide: user/channel mentions picker. |
| docs/docs/guides/emojis.mdx | New guide: emojis via mentions. |
| docs/docs/guides/custom-context-menu.md | New guide: custom context menu usage. |
| docs/docs/guides/category.json | Adds docs sidebar category metadata. |
| docs/docs/fundamentals/your-first-editor.mdx | New fundamentals page: first editor. |
| docs/docs/fundamentals/html-format-and-supported-tags.md | New fundamentals page: supported tags. |
| docs/docs/fundamentals/getting-started.md | New fundamentals page: getting started (site home). |
| docs/docs/fundamentals/core-concepts.md | New fundamentals page: core concepts. |
| docs/docs/fundamentals/category.json | Adds docs sidebar category metadata. |
| docs/docs/core-functionalities/web-support.md | New docs page: web support. |
| docs/docs/core-functionalities/styling-the-input.mdx | New docs page: styling the input. |
| docs/docs/core-functionalities/rendering-rich-text.mdx | New docs page: rendering rich text. |
| docs/docs/core-functionalities/handling-input-events.md | New docs page: handling input events. |
| docs/docs/core-functionalities/category.json | Adds docs sidebar category metadata. |
| docs/docs/api-reference/enriched-text.md | Adds API reference page for EnrichedText. |
| docs/docs/api-reference/category.json | Adds docs sidebar category metadata. |
| docs/CLAUDE.md | Adds docs-site-specific contributor guidance. |
| docs/babel.config.js | Adds Babel preset config for the docs site. |
| docs/.prettierrc.js | Adds Prettier config for the docs site. |
| docs/.gitignore | Adds docs-site ignore rules (build, node_modules, etc.). |
| CONTRIBUTING.md | Removes legacy root contributing guide (superseded by docs content). |
| .github/workflows/docs-publish.yml | Adds workflow to build and publish docs to gh-pages. |
| .github/workflows/docs-build.yml | Adds workflow to build docs on PRs. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
# Summary Provided context menu demo video instead of a webp for stability
# Summary Enables indexing on docs page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Publish react-native-enriched-html docs