Migrate web editor to react-native-enriched (web demo + UX fixes)

README.md

@@ -17,7 +17,7 @@ This library is a complete react-native implementation of [FastComments](https:/
 It supports live commenting, chat, threads, emoticons, notifications, SSO, skins, and full customization by passing in a stylesheet object. All assets
 can also be customized, and it supports toggling different assets based on dark mode.
 
-The benefit of this library is that it is more flexible than the `fastcomments-react-native` wrapper. Comments are rendered with native components rather than inside a webview. Note: `react-native-webview` is still required as a transitive dependency of the rich text editor (`@10play/tentap-editor`).
+The benefit of this library is that it is more flexible than the `fastcomments-react-native` wrapper. Comments are rendered with native components rather than inside a webview.
 
 It all runs on the FastComments backend, so you only have to incorporate the UI:
 
@@ -40,7 +40,9 @@ Add live chat to your existing React Native application, or even build a social
 
 ### Rich Text Editor
 
-This library uses the 10tap editor for rich text editing functionality, which provides a powerful WYSIWYG editing experience.
+This library uses [`react-native-enriched`](https://github.com/software-mansion/react-native-enriched) for rich text editing, which provides a powerful WYSIWYG editing experience. The same editor powers iOS, Android, and the web (via `react-native-web`), so the composer behaves consistently across every platform with a single implementation.
+
+`react-native-enriched` requires the React Native New Architecture (Fabric) on native, and a bundler that resolves package `exports` conditions (Metro with package exports / RN 0.72+). Web support is currently experimental.
 
 ### Configuration Options
 

example-web/index.html

@@ -6,6 +6,9 @@
     <title>FastComments React Native SDK - Web Example</title>
     <style>
       html, body, #root { height: 100%; margin: 0; padding: 0; }
+      /* Make #root a flex container so react-native-web's AppContainer (flex: 1)
+         resolves to the full viewport height instead of collapsing to content. */
+      #root { display: flex; flex-direction: column; }
       body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
     </style>
   </head>

example-web/package.json

@@ -10,13 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native-web": "^0.19.10"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-native-web": "^0.21.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "typescript": "^5.4.0",
     "vite": "^5.4.0"

example-web/vite.config.ts

@@ -54,7 +54,26 @@ export default defineConfig({
   resolve: {
     alias: [
       { find: /^fastcomments-react-native-sdk$/, replacement: path.join(sdkRoot, 'index.ts') },
+      // `react-native-enriched`'s web build (and react-native-render-html) import
+      // the bare `react-native` specifier (e.g. `processColor`). The custom
+      // `reactNativeWebAlias` plugin handles top-level resolves, but Rollup's
+      // commonjs resolver bypasses it for nested dep imports during build, pulling
+      // in the real (Flow-typed) react-native and failing to parse. An exact-match
+      // alias redirects it to react-native-web everywhere. The `$` anchor avoids
+      // catching `react-native-enriched` / `react-native-web` themselves.
+      { find: /^react-native$/, replacement: path.dirname(require.resolve('react-native-web/package.json')) },
+      // react-native-web's ESM dist imports inline-style-prefixer's CJS `lib/`
+      // deep paths (e.g. `inline-style-prefixer/lib/plugins/cursor`). Served raw
+      // to the browser, those CJS files expose no ESM `default` export and throw
+      // "doesn't provide an export named: 'default'". The package also ships a
+      // real ESM build under `es/`; redirect the deep `lib/` paths there.
+      { find: /^inline-style-prefixer\/lib\/(.*)$/, replacement: path.join(path.dirname(require.resolve('inline-style-prefixer/package.json')), 'es/$1') },
     ],
+    // The demo imports the SDK from source (`../src`), whose files `import 'react'`.
+    // Without deduping, that resolves to the SDK root's own React copy while the
+    // app uses example-web's React 19 -> two React instances -> "invalid hook
+    // call". Force a single copy (example-web's React 19) for the whole graph.
+    dedupe: ['react', 'react-dom'],
     extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.tsx', '.ts', '.jsx', '.js', '.json'],
     mainFields: ['module', 'browser', 'main'],
   },
@@ -81,10 +100,20 @@ export default defineConfig({
       'react-native-web > memoize-one',
       'react-native-web > styleq',
       'react-native-web > postcss-value-parser',
+      // react-native-web's ESM dist also imports these CJS *sub-entry* points
+      // directly. They aren't reachable from each package's main entry, so the
+      // `> pkg` includes above don't cover them, and served raw they expose no
+      // ESM named/default export ("doesn't provide an export named ..."). List
+      // them so Vite pre-bundles each with CJS->ESM interop.
+      'styleq/transform-localize-style',
+      'fbjs/lib/invariant',
+      'fbjs/lib/warning',
+      // react-native-web's renderer imports `{ createRoot }` from this CJS
+      // sub-entry; same raw-CJS named-export problem as the deps above.
+      'react-dom/client',
       'lodash',
       'fastcomments-typescript',
-      'react-quill-new',
-      'quill',
+      'react-native-enriched',
     ],
     exclude: ['react-native'],
   },