feat: ref methods

Author: hejsztynx

docs/WEB.md

@@ -38,14 +38,15 @@ See [Web Keyboard Shortcuts](./INPUT_API_REFERENCE.md#web-keyboard-shortcuts) fo
 ### What works
 
 - Customizing the styling using props: `style`, `htmlStyle`, `selectionColor`.
+- `selectable` prop
+- `useHtmlNormalizer`
 
 ### Unsupported
 
-- **`selectable`**: ignored on web.
-- **`useHtmlNormalizer`**: ignored on web.
 - **`ellipsizeMode`**: ignored on web.
 - **`numberOfLines`**: ignored on web.
 - **Press events**: `onLinkPress` and `onMentionPress` callbacks are ignored on web.
+- **RN layout ref methods**: `measure`, `measureInWindow`, `measureLayout`, and `setNativeProps` are no-ops.
 
 ## HTML sanitization
 

src/web/EnrichedText.tsx

@@ -1,4 +1,10 @@
-import { memo, useMemo, useRef, type CSSProperties } from 'react';
+import {
+  memo,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  type CSSProperties,
+} from 'react';
 import type { EnrichedTextProps } from '../types';
 import './EnrichedText.css';
 import { enrichedTextStyleToCSSProperties } from './styleConversion/enrichedTextStyleToCSSProperties';
@@ -17,6 +23,7 @@ import { usePressInteractions } from './usePressInteractions';
 
 export const EnrichedText = memo(
   ({
+    ref,
     children,
     htmlStyle,
     style,
@@ -26,6 +33,19 @@ export const EnrichedText = memo(
   }: EnrichedTextProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
 
+    useImperativeHandle(ref, () => ({
+      measureInWindow: () => {},
+      measure: () => {},
+      measureLayout: () => {},
+      setNativeProps: () => {},
+      focus: () => {
+        containerRef.current?.focus();
+      },
+      blur: () => {
+        containerRef.current?.blur();
+      },
+    }));
+
     const sanitizedHtml = useMemo(() => sanitizeHtml(children), [children]);
 
     const finalHtml = useMemo(
@@ -79,6 +99,7 @@ export const EnrichedText = memo(
         {mentionRulesCSS ? <style>{mentionRulesCSS}</style> : null}
         <div
           ref={containerRef}
+          tabIndex={-1}
           style={finalStyle}
           className={ENRICHED_TEXT_CLASSNAME}
           dangerouslySetInnerHTML={{ __html: finalHtml }}