feat: onFocus onBlur

Author: hejsztynx

apps/example-web/src/App.tsx

@@ -14,10 +14,9 @@ import {
   type OnSubmitEditing,
   type OnChangeMentionEvent,
   type OnMentionDetected,
-  EnrichedText,
 } from 'react-native-enriched-html';
 import { WEB_DEFAULT_HTML_STYLE } from './defaultHtmlStyle';
-import type { NativeSyntheticEvent, TextStyle } from 'react-native';
+import type { NativeSyntheticEvent } from 'react-native';
 import { EditorActions } from './components/EditorActions';
 import { SetValueModal } from './components/SetValueModal';
 import { ImageModal } from './components/ImageModal';
@@ -28,6 +27,7 @@ import { Toolbar } from './components/Toolbar';
 import { MentionPopup, type MentionItem } from './components/MentionPopup';
 import { useUserMention } from './hooks/useUserMention';
 import { useChannelMention } from './hooks/useChannelMention';
+import { TextRenderer } from './components/TextRenderer';
 
 const DEFAULT_LINK_STATE: OnLinkDetected = {
   text: '',
@@ -332,16 +332,7 @@ function App() {
 
       {showHtmlOutput && <HtmlOutputPanel html={currentHtml} />}
 
-      <div className="container enriched-text-container">
-        <h1 className="app-title">Enriched Text</h1>
-        <EnrichedText
-          style={enrichedTextStyle}
-          htmlStyle={WEB_DEFAULT_HTML_STYLE}
-          useHtmlNormalizer
-        >
-          {enrichedTextValue}
-        </EnrichedText>
-      </div>
+      <TextRenderer htmlValue={enrichedTextValue} />
 
       {isSetValueModalOpen && (
         <SetValueModal
@@ -383,14 +374,4 @@ const enrichedInputStyle: EnrichedInputStyle = {
   fontSize: 18,
 };
 
-const enrichedTextStyle: TextStyle = {
-  backgroundColor: 'gainsboro',
-  width: '100%',
-  marginVertical: 12,
-  paddingVertical: 12,
-  paddingHorizontal: 14,
-  borderRadius: 8,
-  fontSize: 18,
-};
-
 export default App;

…ple-web/src/components/EditorActions.css …s/example-web/src/components/Actions.cssapps/example-web/src/components/EditorActions.css renamed to apps/example-web/src/components/Actions.css apps/example-web/src/components/EditorActions.css renamed to apps/example-web/src/components/Actions.css

@@ -1,4 +1,4 @@
-import './EditorActions.css';
+import './Actions.css';
 
 interface EditorActionsProps {
   showHtmlOutput: boolean;

apps/example-web/src/components/EditorActions.tsx

@@ -0,0 +1,19 @@
+import './Actions.css';
+
+interface TextActionsProps {
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+export function TextActions({ onFocus, onBlur }: TextActionsProps) {
+  return (
+    <div className="btn-row" data-testid="text-actions-row">
+      <button className="btn" data-testid="text-focus-button" onClick={onFocus}>
+        Focus
+      </button>
+      <button className="btn" data-testid="text-blur-button" onClick={onBlur}>
+        Blur
+      </button>
+    </div>
+  );
+}

apps/example-web/src/components/TextActions.tsx

@@ -0,0 +1,67 @@
+import { useRef } from 'react';
+import type { TextStyle } from 'react-native';
+import {
+  EnrichedText,
+  type BlurEvent,
+  type EnrichedTextInstance,
+  type FocusEvent,
+} from 'react-native-enriched-html';
+import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';
+
+interface TextRendererProps {
+  htmlValue: string;
+}
+
+export function TextRenderer({ htmlValue }: TextRendererProps) {
+  const ref = useRef<EnrichedTextInstance>(null);
+
+  const handleTextFocus = (e: FocusEvent) => {
+    console.log('[EnrichedText] onFocus', e.nativeEvent);
+  };
+
+  const handleTextBlur = (e: BlurEvent) => {
+    console.log('[EnrichedText] onBlur', e.nativeEvent);
+  };
+
+  return (
+    <div className="container enriched-text-container">
+      <h1 className="app-title">Enriched Text</h1>
+      <EnrichedText
+        ref={ref}
+        style={enrichedTextStyle}
+        htmlStyle={WEB_DEFAULT_HTML_STYLE}
+        useHtmlNormalizer
+        onFocus={handleTextFocus}
+        onBlur={handleTextBlur}
+      >
+        {htmlValue}
+      </EnrichedText>
+      <div className="btn-row" data-testid="editor-actions-row">
+        <button
+          className="btn"
+          data-testid="focus-button"
+          onClick={() => ref.current?.focus()}
+        >
+          Focus
+        </button>
+        <button
+          className="btn"
+          data-testid="blur-button"
+          onClick={() => ref.current?.blur()}
+        >
+          Blur
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const enrichedTextStyle: TextStyle = {
+  backgroundColor: 'gainsboro',
+  width: '100%',
+  marginVertical: 12,
+  paddingVertical: 12,
+  paddingHorizontal: 14,
+  borderRadius: 8,
+  fontSize: 18,
+};

apps/example-web/src/components/TextRenderer.tsx

@@ -17,6 +17,7 @@ export type {
   FocusEvent,
   BlurEvent,
   EnrichedTextInputInstance,
+  EnrichedTextInstance,
   ContextMenuItem,
   OnChangeMentionEvent,
   EnrichedTextHtmlStyle,

src/index.tsx

@@ -20,6 +20,7 @@ import { prepareHtmlForWeb } from './normalization/prepareHtmlForWeb';
 import { INLINE_IMAGE_CSS_VARIABLES } from './styleConversion/inlineImageCSSVariables';
 import { useImageErrorFallback } from './useImageErrorFallback';
 import { usePressInteractions } from './usePressInteractions';
+import { adaptWebToNativeEvent } from './adaptWebToNativeEvent';
 
 export const EnrichedText = memo(
   ({
@@ -30,6 +31,8 @@ export const EnrichedText = memo(
     selectionColor,
     selectable = false,
     useHtmlNormalizer = false,
+    onFocus,
+    onBlur,
   }: EnrichedTextProps) => {
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -102,6 +105,16 @@ export const EnrichedText = memo(
           tabIndex={-1}
           style={finalStyle}
           className={ENRICHED_TEXT_CLASSNAME}
+          onFocus={
+            onFocus
+              ? (event) => onFocus(adaptWebToNativeEvent(event, { target: -1 }))
+              : undefined
+          }
+          onBlur={
+            onBlur
+              ? (event) => onBlur(adaptWebToNativeEvent(event, { target: -1 }))
+              : undefined
+          }
           dangerouslySetInnerHTML={{ __html: finalHtml }}
         />
       </>