docs: fundamentals section#705
Conversation
There was a problem hiding this comment.
Pull request overview
Adds the initial “Fundamentals” documentation section for React Native Enriched HTML and introduces an interactive, in-browser example system for the docs site by wiring React Native components to react-native-web.
Changes:
- Added new Fundamentals pages (Getting started, Core concepts, HTML tags reference, and “Your first editor” walkthrough).
- Introduced an
InteractiveExamplecomponent (preview/code tabs + reset) and a first runnable example (FirstEditor.tsx). - Updated the docs build to support interactive RN examples via a
react-native-webwebpack alias, plus added required dependencies/loaders.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/yarn.lock | Updates lockfile for new docs dependencies (react-native(-web), raw-loader, etc.). |
| docs/src/theme/MDXComponents.js | Registers InteractiveExample as an available MDX component. |
| docs/src/examples/FirstEditor.tsx | Adds the first runnable interactive example used in Fundamentals docs. |
| docs/src/components/InteractiveExample/styles.module.css | Styles for the interactive example container, tabs, and preview/code layout. |
| docs/src/components/InteractiveExample/index.tsx | Implements interactive example preview/code tabs with a reset mechanism. |
| docs/package.json | Adds dependencies needed to render RN examples in the docs site and raw source loading. |
| docs/docusaurus.config.js | Adds a small plugin to alias react-native to react-native-web for the docs webpack build. |
| docs/docs/fundamentals/your-first-editor.mdx | New “Your first editor” page including a live interactive example embed. |
| docs/docs/fundamentals/your-first-editor.md | Removes the old placeholder page in favor of the new MDX version. |
| docs/docs/fundamentals/html-format-and-supported-tags.md | Fills in the supported-tags reference content and conflict/blocking rules. |
| docs/docs/fundamentals/getting-started.md | Replaces placeholder with Getting Started content (installation, prerequisites, etc.). |
| docs/docs/fundamentals/core-concepts.md | Replaces placeholder with Core Concepts content (uncontrolled model, HTML source of truth, etc.). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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>
| "react": "19.1.1", | ||
| "react-dom": "19.1.1" | ||
| "react-dom": "19.1.1", | ||
| "react-native": "0.83.0", |
There was a problem hiding this comment.
Why not the newest version of RN?
There was a problem hiding this comment.
I also bumped react-native-enriched-html
There was a problem hiding this comment.
react and react-dom should be at least 19.2.3 when we are using react-native: 0.86: https://react-native-community.github.io/upgrade-helper/?from=0.83.0&to=0.86.0
But now I'm wondering whether we should touch those dependencies at all, especially if this setup was generated by the marketing team. We could simply use React Native 0.82, which is compatible with React 19.1.1, and leave the rest of the dependencies as they are.
Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>
Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>
| "react-dom": "19.1.1", | ||
| "react-native": "0.86.0", | ||
| "react-native-enriched-html": "1.0.1", | ||
| "react-native-web": "0.21.2" |
There was a problem hiding this comment.
Why it's needed? react-native-enriched-html web should work without react-native-web dependency
Summary
First section of the docs -
FundamentalsAdded a
react-native-webplugin, to allow interactive examplesConfigured ESLint, so it checks the files in the
docs- we want to keep the code of interactive examples clean