feat(web): HTML normalization (#630)

# Summary

Web implementation was missing the HTML normalizer

- implemented the normalizer, mirroring the one in the native code
- tests also mirror the native ones 

## Test Plan

Try pasting styled text from `Google Docs`, `MS Word` or any other
platform

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ❌     |
| Android |    ❌     |
| Web |    ✅      |

## Checklist

- [x] E2E tests are passing
- [ ] Required E2E tests have been added (if applicable)

Author: hejsztynx

apps/example-web/src/App.tsx

@@ -261,6 +261,7 @@ function App() {
           onMentionDetected={handleOnMentionDetected}
           mentionIndicators={['@', '#']}
           htmlStyle={WEB_DEFAULT_HTML_STYLE}
+          useHtmlNormalizer
         />
         <MentionPopup
           variant="user"

docs/INPUT_API_REFERENCE.md

@@ -643,9 +643,9 @@ If true, Android will use experimental synchronous events. This will prevent fro
 
 If true, external HTML pasted/inserted into the input (e.g. from Google Docs, Word, or web pages) will be normalized into the canonical tag subset that the enriched parser understands. However, this is an experimental feature, which has not been thoroughly tested. We may decide to enable it by default in a future release.
 
-| Type   | Default Value | Platform     |
-| ------ | ------------- | ------------ |
-| `bool` | `false`       | iOS, Android |
+| Type   | Default Value | Platform          |
+| ------ | ------------- | ----------------- |
+| `bool` | `false`       | iOS, Android, Web |
 
 ## Ref Methods
 

docs/WEB.md

@@ -16,6 +16,7 @@ Web support is still experimental. APIs and behavior can change in future releas
 - Submit props: `submitBehavior` and `onSubmitEditing`. `returnKeyType` is only a hint, it maps to [enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) (`done`, `go`, `next`, `previous`, `search`, `send`, `default`/`enter`). Not all values of `ReturnKeyTypeOptions` are supported, the behavior of this prop is heavily dependent on the browser's capabilities.
 - Input theming via `placeholderTextColor`, `cursorColor` and `selectionColor` props
 - Keyboard shortcuts for formatting
+- `useHtmlNormalizer`
 
 ## Keyboard shortcuts
 
@@ -26,7 +27,6 @@ See [Web Keyboard Shortcuts](./INPUT_API_REFERENCE.md#web-keyboard-shortcuts) fo
 - **`returnKeyLabel`**: ignored on web, it's not possible to set it inside a browser.
 - **Automatic link detection**: `linkRegex` is ignored. Links only work when set explicitly via the `setLink` ref method.
 - **Context menu**: `contextMenuItems` is ignored.
-- **HTML normalizer flag**: `useHtmlNormalizer` is ignored; paste behavior follows the browser pipeline.
 - **RN layout ref methods**: `measure`, `measureInWindow`, `measureLayout`, and `setNativeProps` are no-ops.
 - **`EnrichedText`**: The read-only component is not exported on web.
 - **`ViewProps`**: Props inherited from `View` beyond the implemented subset are not forwarded.

package.json

@@ -127,6 +127,7 @@
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.3",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "playwright": "1.58.2",
     "prettier": "^3.0.3",
     "react": "19.1.0",
@@ -147,15 +148,35 @@
   ],
   "packageManager": "yarn@4.13.0",
   "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/apps/example/node_modules",
-      "<rootDir>/lib/"
-    ],
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "<rootDir>/.playwright/",
-      "<rootDir>/apps/example-web/"
+    "projects": [
+      {
+        "displayName": "native",
+        "preset": "react-native",
+        "modulePathIgnorePatterns": [
+          "<rootDir>/apps/example/node_modules",
+          "<rootDir>/lib/"
+        ],
+        "testPathIgnorePatterns": [
+          "/node_modules/",
+          "<rootDir>/.playwright/",
+          "<rootDir>/apps/example-web/",
+          "<rootDir>/src/web/"
+        ]
+      },
+      {
+        "displayName": "web",
+        "testEnvironment": "jsdom",
+        "testMatch": [
+          "<rootDir>/src/web/**/__tests__/**/*.test.{ts,tsx}"
+        ],
+        "modulePathIgnorePatterns": [
+          "<rootDir>/apps/example/node_modules",
+          "<rootDir>/lib/"
+        ],
+        "transform": {
+          "^.+\\.(js|ts|tsx)$": "babel-jest"
+        }
+      }
     ]
   },
   "commitlint": {

src/web/EnrichedTextInput.tsx

@@ -35,7 +35,7 @@ import { useOnLinkDetected } from './useOnLinkDetected';
 import {
   prepareHtmlForTiptap,
   normalizeHtmlFromTiptap,
-} from './tiptapHtmlNormalizer';
+} from './normalization/tiptapHtmlNormalizer';
 import { ENRICHED_TEXT_INPUT_DEFAULT_PROPS } from '../utils/EnrichedTextInputDefaultProps';
 import { enrichedInputStyleToCSSProperties } from './styleConversion/enrichedInputStyleToCSSProperties';
 import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedInputThemingToCSSProperties';
@@ -111,9 +111,12 @@ export const EnrichedTextInput = ({
   onChangeMention,
   onEndMention,
   htmlStyle,
+  useHtmlNormalizer,
 }: EnrichedTextInputProps) => {
   const tiptapContent =
-    defaultValue != null ? prepareHtmlForTiptap(defaultValue) : defaultValue;
+    defaultValue != null
+      ? prepareHtmlForTiptap(defaultValue, useHtmlNormalizer)
+      : defaultValue;
 
   const resolvedHtmlStyle = useMemo(
     () => mergeWithDefaultHtmlStyle(htmlStyle),
@@ -165,6 +168,11 @@ export const EnrichedTextInput = ({
     onKeyPressRef.current = onKeyPress;
   }, [onKeyPress]);
 
+  const useHtmlNormalizerRef = useRef(useHtmlNormalizer);
+  useEffect(() => {
+    useHtmlNormalizerRef.current = useHtmlNormalizer;
+  }, [useHtmlNormalizer]);
+
   const handleKeyDown = (doc: Node, event: KeyboardEvent): boolean => {
     onKeyPressRef.current?.(adaptWebToNativeEvent(event, { key: event.key }));
     if (event.key !== 'Enter') {
@@ -264,6 +272,9 @@ export const EnrichedTextInput = ({
           autoCapitalize,
           enterkeyhint: returnKeyTypeToEnterKeyHint(returnKeyType),
         },
+        transformPastedHTML: (html) => {
+          return prepareHtmlForTiptap(html, useHtmlNormalizerRef.current);
+        },
       },
     },
     [tiptapContent, extensions]
@@ -307,7 +318,9 @@ export const EnrichedTextInput = ({
       focus: () => editor.commands.focus(),
       blur: () => editor.commands.blur(),
       setValue: (value: string) =>
-        editor.commands.setContent(prepareHtmlForTiptap(value)),
+        editor.commands.setContent(
+          prepareHtmlForTiptap(value, useHtmlNormalizerRef.current)
+        ),
       setSelection: (start, end) => {
         const doc = editor.state.doc;
         runFocused(editor, (c) =>