@hero-design/rn 8.108.2 → 8.109.0

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,21 +1,17 @@
-import { useTheme } from '@emotion/react';
 import { isEmptyContent } from 'hero-editor';
 import React, {
   forwardRef,
   useCallback,
   useEffect,
-  useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from 'react';
 
-import { Animated, TouchableWithoutFeedback, Easing } from 'react-native';
-import type { WebView } from 'react-native-webview';
-import type { ComponentType, ReactElement, Ref } from 'react';
-import type { StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
-import heroEditorApp from './heroEditorApp';
-import { isAndroid } from '../../utils/helpers';
+import { Animated, Easing } from 'react-native';
+import type { ReactElement, Ref } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { useTheme } from '../../theme';
 import Icon from '../Icon';
 import {
   StyledAsteriskLabelInsideTextInput,
@@ -31,61 +27,21 @@ import {
   StyledTextInputAndLabelContainer,
   StyledTextInputContainer,
 } from '../TextInput/StyledTextInput';
-import { ToolbarEvents } from './constants';
-import { emitter } from './EditorEvent';
-import { StyledWebView } from './StyledRichTextEditor';
-import * as Events from './utils/events';
-import { postMessage, requestBlurEditor } from './utils/rnWebView';
-import type { WebViewEventMessage } from './utils/rnWebView';
 import { LABEL_ANIMATION_DURATION } from '../TextInput';
-import type { TextUnit } from './types';
 import Typography from '../Typography';
-
-export interface RichTextEditorRef {
-  requestBlur: VoidFunction;
-  insertNodes: (nodes: Record<string, unknown>[]) => void;
-  deleteBackward: (unit?: TextUnit) => void;
-  setReadOnly: (readOnly: boolean) => void;
-}
+import BaseRichTextEditor from './BaseRichTextEditor';
+import type {
+  BaseRichTextEditorProps,
+  RichTextEditorRef,
+} from './BaseRichTextEditor';
 
 export type EditorValue = {
   type: string;
   children: any;
 }[];
 
-export interface RichTextEditorProps {
-  /**
-   * If true, the editor will be focused when the user enters the screen
-   */
-  autoFocus?: boolean;
-  /**
-   * Error message
-   */
-  error?: string;
-  /**
-   * Field value
-   */
-  value?: EditorValue;
-  /**
-   * Unique name used to communicate with webview
-   */
-  name: string;
-  /**
-   * Callback function called when the field value changed
-   */
-  onChange: (data: EditorValue) => void;
-  /**
-   * Callback function called when the cursor position changed
-   */
-  onCursorChange?: (params: { position: { top: number } }) => void;
-  /**
-   * Field placeholder
-   */
-  placeholder?: string;
-  /**
-   * Additional styles
-   */
-  style?: StyleProp<ViewStyle>;
+export interface RichTextEditorProps
+  extends Omit<BaseRichTextEditorProps, 'editorRef'> {
   /**
    * Field label
    */
@@ -115,7 +71,7 @@ const defaultValue: EditorValue = [
   },
 ];
 
-const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+const RichTextEditor = ({
   autoFocus = true,
   name,
   placeholder = '',
@@ -127,14 +83,13 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   helpText,
   required,
   testID,
+  onFocus,
+  onBlur,
   forwardedRef,
   value = defaultValue,
 }: RichTextEditorProps): ReactElement => {
   const theme = useTheme();
 
-  const webview = useRef<WebView | null>(null);
-  const [webviewHeight, setWebviewHeight] = useState<number | undefined>();
-
   const [isFocused, setIsFocused] = useState(false);
   const isEmptyValue = useMemo(() => isEmptyContent(value), [value]);
   const state = useMemo(() => {
@@ -147,12 +102,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     return 'default';
   }, [isFocused, error, isEmptyValue]);
 
-  const normalizeEventName = (event: string) => `${name}/${event}`;
-  const postMessageToWebview = (message: WebViewEventMessage) => {
-    if (webview && webview.current) {
-      postMessage(webview.current, message);
-    }
-  };
   const [inputSize, setInputSize] = React.useState<{
     height: number;
     width: number;
@@ -174,184 +123,15 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     setInputSize((prev) => ({ ...prev, height, width }));
   }, []);
 
-  useEffect(() => {
-    const removeFocusListener = Events.on(
-      emitter,
-      normalizeEventName('editor-focus'),
-      () => setIsFocused(true)
-    );
-
-    const removeBlurListener = Events.on(
-      emitter,
-      normalizeEventName('editor-blur'),
-      () => setIsFocused(false)
-    );
-
-    return () => {
-      removeFocusListener();
-      removeBlurListener();
-    };
-  }, []);
-
-  const html = useMemo(() => {
-    const initialValueString = JSON.stringify(value);
-
-    return `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <meta charset="utf-8">
-          <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
-          <style>
-            body {
-              margin: 0;
-            }
-          </style>
-        </head>
-        <body>
-          <div id="root"></div>
-          <script>
-            window.__editorConfigs = {
-              placeholder: "${placeholder}",
-              initialValue: ${initialValueString},
-              isAndroid: ${isAndroid ? 'true' : 'false'},
-              autoFocus: ${autoFocus},
-              style: {
-                padding: '0 !important',
-                fontSize: ${theme.__hd__.richTextEditor.fontSizes.editor},
-                color: '${theme.__hd__.richTextEditor.colors.text}'
-              }
-            };
-            ${heroEditorApp}
-          </script>
-        </body>
-      </html>
-      `;
-  }, []);
-
-  const requestBlur = useCallback(() => {
-    if (webview.current && isFocused) {
-      requestBlurEditor(webview.current);
-    }
-  }, [isFocused]);
-
-  const insertNodes = useCallback((nodes: Record<string, unknown>[]) => {
-    postMessageToWebview({
-      type: '@hero-editor/webview/editor-insert-nodes',
-      data: { nodes },
-    });
-  }, []);
-
-  const deleteBackward = useCallback((unit?: TextUnit) => {
-    postMessageToWebview({
-      type: '@hero-editor/webview/editor-delete-backward',
-      data: { unit },
-    });
-  }, []);
-
-  const setReadOnly = useCallback((readOnly: boolean) => {
-    postMessageToWebview({
-      type: '@hero-editor/webview/editor-read-only',
-      data: { readOnly },
-    });
-  }, []);
-
-  useImperativeHandle(
-    forwardedRef,
-    () => ({ requestBlur, insertNodes, deleteBackward, setReadOnly }),
-    [requestBlur, deleteBackward, insertNodes, setReadOnly]
-  );
-
-  /* Forward events from Toolbar and MentionList to webview */
-  useEffect(() => {
-    const toolbarEventListenerRemovers = Object.values(ToolbarEvents).map(
-      (eventName) =>
-        Events.on(emitter, normalizeEventName(eventName), (data) => {
-          postMessageToWebview({
-            type: `@hero-editor/webview/${eventName}`,
-            data,
-          });
-        })
-    );
-
-    const removeMentionApplyListener = Events.on(
-      emitter,
-      normalizeEventName('mention-apply'),
-      (data) =>
-        postMessageToWebview({
-          type: '@hero-editor/webview/mention-apply',
-          data,
-        })
-    );
-
-    return () => {
-      removeMentionApplyListener();
-      toolbarEventListenerRemovers.forEach((remover) => remover());
-    };
-  }, []);
-
-  const handleEditorLayoutEvent = useCallback((messageData: any) => {
-    const editorLayout = messageData
-      ? {
-          width: Number(messageData.width),
-          height: Number(messageData.height),
-        }
-      : undefined;
-
-    if (editorLayout) {
-      setWebviewHeight(editorLayout.height);
-    }
-  }, []);
-
-  /* Handle events from webview */
-  const onMessage = useCallback(
-    (event?: { nativeEvent?: { data?: string } }) => {
-      const message = event?.nativeEvent?.data
-        ? JSON.parse(event?.nativeEvent?.data)
-        : undefined;
-
-      const messageType = message?.type;
-
-      const messageData = message?.data;
-
-      switch (messageType) {
-        case '@hero-editor/webview/editor-focus':
-          Events.emit(emitter, normalizeEventName('editor-focus'), undefined);
-
-          break;
-        case '@hero-editor/webview/editor-blur':
-          Events.emit(emitter, normalizeEventName('editor-blur'), undefined);
-
-          break;
-        case '@hero-editor/webview/mention-search':
-          Events.emit(
-            emitter,
-            normalizeEventName('mention-search'),
-            messageData
-          );
+  const handleEditorFocus = useCallback(() => {
+    onFocus?.();
+    setIsFocused(true);
+  }, [onFocus]);
 
-          break;
-        case '@hero-editor/webview/editor-change':
-          if (messageData) {
-            onChange(messageData.value);
-          }
-
-          break;
-        case '@hero-editor/webview/cursor-change':
-          onCursorChange?.(messageData);
-
-          break;
-
-        case '@hero-editor/webview/editor-layout':
-          handleEditorLayoutEvent(messageData);
-          break;
-
-        default:
-          break;
-      }
-    },
-    []
-  );
+  const handleEditorBlur = useCallback(() => {
+    onBlur?.();
+    setIsFocused(false);
+  }, [onBlur]);
 
   return (
     <StyledContainer testID={testID}>
@@ -408,25 +188,26 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
       <StyledTextInputContainer onLayout={onLayout}>
         <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
 
-        <StyledTextInputAndLabelContainer
-          style={{
-            height: webviewHeight,
-          }}
-          testID="webViewWrapper"
-        >
-          <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-            <StyledWebView
-              ref={webview}
-              testID="webview"
-              style={style}
-              originWhitelist={['*']}
-              source={{ html }}
-              onMessage={onMessage}
-              scrollEnabled={false}
-              hideKeyboardAccessoryView
-              keyboardDisplayRequiresUserAction={false}
-            />
-          </TouchableWithoutFeedback>
+        <StyledTextInputAndLabelContainer testID="webViewWrapper">
+          <BaseRichTextEditor
+            name={name}
+            value={value}
+            style={[
+              style,
+              {
+                marginHorizontal:
+                  theme.__hd__.textInput.space.inputHorizontalMargin,
+              },
+            ]}
+            testID="webview"
+            onChange={onChange}
+            autoFocus={autoFocus}
+            editorRef={forwardedRef}
+            placeholder={placeholder}
+            onBlur={handleEditorBlur}
+            onFocus={handleEditorFocus}
+            onCursorChange={onCursorChange}
+          />
         </StyledTextInputAndLabelContainer>
       </StyledTextInputContainer>
       <StyledErrorAndHelpTextContainer>

package/src/components/RichTextEditor/StyledRichTextEditor.ts

@@ -11,5 +11,4 @@ export const StyledWebView = styled(WebView)(({ theme }) => ({
   backgroundColor: 'transparent',
   textAlignVertical: 'center',
   fontSize: theme.__hd__.textInput.fontSizes.text,
-  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));

package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx

@@ -10,6 +10,7 @@ import RichTextEditor from '../RichTextEditor';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { theme } from '../../../index';
 import HeroDesignProvider from '../../HeroDesignProvider';
+import type { RichTextEditorRef } from '../BaseRichTextEditor';
 
 type OnMessageCallback = (event: {
   nativeEvent: { data: string };
@@ -58,7 +59,6 @@ jest.mock('../utils/rnWebView', () => {
 /* eslint-disable */
 /// @ts-ignore
 import { postMessageMock } from '../utils/rnWebView';
-import { RichTextEditorRef } from '../../../../types';
 /* eslint-enable */
 
 describe('RichTextEditor', () => {
@@ -100,7 +100,7 @@ describe('RichTextEditor', () => {
       );
     });
 
-    describe('recevied event editor-focus', () => {
+    describe('received event editor-focus', () => {
       it('should emit correct data', () => {
         const emittedEvents: string[] = [];
         Events.on(EditorEventEmitter, 'rich-text-editor/editor-focus', () => {
@@ -118,7 +118,7 @@ describe('RichTextEditor', () => {
       });
     });
 
-    describe('recevied event editor-blur', () => {
+    describe('received event editor-blur', () => {
       it('should emit correct data', () => {
         const emittedEvents: string[] = [];
         Events.on(EditorEventEmitter, 'rich-text-editor/editor-blur', () => {
@@ -133,7 +133,7 @@ describe('RichTextEditor', () => {
       });
     });
 
-    describe('recevied event mention-search', () => {
+    describe('received event mention-search', () => {
       it('should emit correct data', () => {
         const emittedEvents: string[] = [];
         Events.on(EditorEventEmitter, 'rich-text-editor/mention-search', () => {
@@ -148,7 +148,7 @@ describe('RichTextEditor', () => {
       });
     });
 
-    describe('recevied event editor-change', () => {
+    describe('received event editor-change', () => {
       beforeEach(() => {
         onChangeMock.mockReset();
       });
@@ -163,7 +163,7 @@ describe('RichTextEditor', () => {
       });
     });
 
-    describe('recevied event cursor-change', () => {
+    describe('received event cursor-change', () => {
       beforeEach(() => {
         onCursorChangeMock.mockReset();
       });
@@ -178,7 +178,7 @@ describe('RichTextEditor', () => {
       });
     });
 
-    describe('recevied event editor-layout', () => {
+    describe('received event editor-layout', () => {
       it('should update height', () => {
         act(() => {
           onMessageOfLatestRendering({
@@ -201,7 +201,7 @@ describe('RichTextEditor', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.getByTestId('webViewWrapper')).toHaveStyle({
+        expect(wrapper.getByTestId('webview')).toHaveStyle({
           height: 480,
         });
       });

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RichTextEditor onMessage recevied event editor-layout should update height 1`] = `
+exports[`RichTextEditor onMessage received event editor-layout should update height 1`] = `
 <View
   style={
     {
@@ -132,9 +132,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               "flexGrow": 2,
               "flexShrink": 1,
             },
-            {
-              "height": 480,
-            },
+            undefined,
           ]
         }
         testID="webViewWrapper"
@@ -206,12 +204,13 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               {
                 "backgroundColor": "transparent",
                 "fontSize": 16,
-                "marginHorizontal": 8,
                 "minHeight": 24,
                 "textAlignVertical": "center",
               },
               {
                 "backgroundColor": "yellow",
+                "height": 480,
+                "marginHorizontal": 8,
               },
             ]
           }
@@ -458,9 +457,7 @@ exports[`RichTextEditor should render correctly 1`] = `
               "flexGrow": 2,
               "flexShrink": 1,
             },
-            {
-              "height": undefined,
-            },
+            undefined,
           ]
         }
         testID="webViewWrapper"
@@ -532,12 +529,13 @@ exports[`RichTextEditor should render correctly 1`] = `
               {
                 "backgroundColor": "transparent",
                 "fontSize": 16,
-                "marginHorizontal": 8,
                 "minHeight": 24,
                 "textAlignVertical": "center",
               },
               {
                 "backgroundColor": "yellow",
+                "height": undefined,
+                "marginHorizontal": 8,
               },
             ]
           }

package/src/components/RichTextEditor/constants.ts

@@ -7,3 +7,8 @@ export enum ToolbarEvents {
   HeadingOne = 'heading-one',
   HeadingTwo = 'heading-two',
 }
+
+export enum EditorEvents {
+  EditorFocus = 'editor-focus',
+  EditorBlur = 'editor-blur',
+}

package/src/components/RichTextEditor/hooks/useRichTextEditorEvents.ts

@@ -0,0 +1,60 @@
+import { useCallback } from 'react';
+
+import * as Events from '../utils/events';
+import { emitter } from '../EditorEvent';
+import type { EditorEvents, ToolbarEvents } from '../constants';
+
+type SubscribableEvent = ToolbarEvents | EditorEvents;
+
+/**
+ * Hook to subscribe to events for a rich text editor
+ * @param editorName - The name of the editor to subscribe to events for
+ * @returns An object with two functions: emitEvent and subscribeToEvents
+ * @example
+ * const { emitEvent, subscribeToEvents } = useRichTextEditorEvents('editorName');
+ * subscribeToEvents(EditorEvents.EditorFocus, () => {
+ *   console.log('Editor focused');
+ * });
+ * emitEvent({ type: EditorEvents.EditorFocus, data: null });
+ */
+const useRichTextEditorEvents = (editorName: string) => {
+  const normalizeEventName = useCallback(
+    (event: string) => `${editorName}/${event}`,
+    [editorName]
+  );
+
+  const subscribeToEvents = useCallback(
+    <TEventName extends SubscribableEvent>(
+      eventName: TEventName,
+      onEvent: (data: unknown) => void
+    ) =>
+      Events.on(
+        emitter,
+        normalizeEventName(eventName),
+        (eventData: unknown) => {
+          onEvent(eventData);
+        }
+      ),
+    [normalizeEventName]
+  );
+
+  const emitEvent = useCallback(
+    <TEventName extends ToolbarEvents>({
+      type,
+      data,
+    }: {
+      type: TEventName;
+      data: unknown;
+    }) => {
+      Events.emit(emitter, normalizeEventName(type), data);
+    },
+    [normalizeEventName]
+  );
+
+  return {
+    emitEvent,
+    subscribeToEvents,
+  };
+};
+
+export default useRichTextEditorEvents;

package/src/components/RichTextEditor/index.tsx

@@ -1,11 +1,19 @@
 import Toolbar from './EditorToolbar';
 import MentionList from './MentionList';
 import RichTextEditor from './RichTextEditor';
-import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
+import { EditorEvents, ToolbarEvents } from './constants';
+import useRichTextEditorEvents from './hooks/useRichTextEditorEvents';
+import type { RichTextEditorProps } from './RichTextEditor';
+import BaseRichTextEditor from './BaseRichTextEditor';
+import type { RichTextEditorRef } from './BaseRichTextEditor';
 
 export type { RichTextEditorProps, RichTextEditorRef };
 
 export default Object.assign(RichTextEditor, {
-  MentionList,
   Toolbar,
+  MentionList,
+  EditorEvents,
+  ToolbarEvents,
+  useRichTextEditorEvents,
+  Base: BaseRichTextEditor,
 });