@hero-design/rn-work-uikit 1.3.0 → 1.4.0

package/src/components/RichTextEditor/MentionList.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../theme';
+import { emitter } from './EditorEvent';
+import * as Events from './utils/events';
+
+const isEmptyString = (s: string | null): boolean => !s || s.length === 0;
+
+interface OnSelectOptionsType<TMetaData> {
+  highlighted: boolean;
+  meta?: TMetaData;
+}
+
+export interface MentionListProps<TMetaData = unknown> {
+  /**
+   * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
+   */
+  name: string;
+  /**
+   * Function used to render mention options
+   */
+  render: (
+    searchText: string,
+    onSelect: (
+      id: string,
+      name: string,
+      options?: OnSelectOptionsType<TMetaData>
+    ) => void
+  ) => JSX.Element;
+}
+
+const MentionList = <TMetaData,>({
+  name: eventPrefix,
+  render,
+}: MentionListProps<TMetaData>) => {
+  const theme = useTheme();
+  const [search, setSearch] = useState<string>('');
+  const [target, setTarget] = useState<string | null>(null);
+  const normalizeEventName = useCallback(
+    (event: string) => `${eventPrefix}/${event}`,
+    [eventPrefix]
+  );
+
+  useEffect(() => {
+    const removeMentionSearchListener = Events.on(
+      emitter,
+      normalizeEventName('mention-search'),
+      ({
+        search: nextSearch,
+        target: nextTarget,
+      }: {
+        search?: string;
+        target?: string;
+      }) => {
+        setSearch(nextSearch || '');
+        setTarget(nextTarget || null);
+      }
+    );
+
+    return () => {
+      removeMentionSearchListener();
+    };
+  }, [eventPrefix]);
+
+  if (isEmptyString(search)) {
+    return null;
+  }
+
+  return (
+    <View>
+      {render(search, (id, name, options = { highlighted: false }) => {
+        const { highlighted, meta } = options;
+
+        const highlightStyle = {
+          color: theme.colors.secondary,
+          borderRadius: theme.__hd__.richTextEditor.radii.mention,
+          padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
+          background: highlighted
+            ? theme.colors.highlightedSurface
+            : 'transparent',
+          marginTop: theme.space.xxsmall,
+          marginBottom: theme.space.xxsmall,
+          display: 'inline-flex',
+        };
+        const data = {
+          id,
+          name,
+          target,
+          meta,
+          style: highlightStyle,
+        };
+
+        Events.emit(emitter, normalizeEventName('mention-apply'), data);
+      })}
+    </View>
+  );
+};
+
+export default MentionList;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import type { ComponentType, ReactElement, Ref } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { plainSerializer } from 'hero-editor';
+import TextInput from '../TextInput';
+import RichTextEditorInput from './RichTextEditorInput';
+import type { EditorValue, TextUnit } from './types';
+import { StyledWrapper } from './StyledRichTextEditor';
+
+export interface RichTextEditorRef {
+  requestBlur: VoidFunction;
+  insertNodes: (nodes: Record<string, unknown>[]) => void;
+  deleteBackward: (unit?: TextUnit) => void;
+  setReadOnly: (readOnly: boolean) => void;
+}
+
+export interface RichTextEditorProps {
+  autoFocus?: boolean;
+  error?: string;
+  value?: EditorValue;
+  name: string;
+  onChange: (data: EditorValue) => void;
+  onCursorChange?: (params: { position: { top: number } }) => void;
+  placeholder?: string;
+  style?: StyleProp<ViewStyle>;
+  label: string;
+  helpText?: string;
+  required?: boolean;
+  testID?: string;
+  forwardedRef?: Ref<RichTextEditorRef>;
+}
+
+const defaultValue: EditorValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: '' }],
+  },
+];
+
+const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+  autoFocus = true,
+  name,
+  placeholder = '',
+  onChange,
+  onCursorChange,
+  error = '',
+  style = {},
+  label,
+  helpText,
+  required,
+  testID,
+  forwardedRef,
+  value = defaultValue,
+}: RichTextEditorProps): ReactElement => {
+  const plain = useMemo(() => plainSerializer(value), [value]);
+
+  return (
+    <StyledWrapper>
+      <TextInput
+        autoFocus={autoFocus}
+        error={error}
+        label={label}
+        required={required}
+        testID={testID}
+        placeholder={placeholder}
+        value={plain}
+        style={style}
+        helpText={helpText}
+        renderInputValue={(inputProps, ref) => (
+          <RichTextEditorInput
+            {...inputProps}
+            ref={ref}
+            value={value}
+            autoFocus={autoFocus}
+            name={name}
+            onChange={onChange}
+            onCursorChange={onCursorChange}
+            forwardedRef={forwardedRef}
+            placeholder={placeholder}
+          />
+        )}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default RichTextEditor;

package/src/components/RichTextEditor/RichTextEditorInput.tsx

@@ -0,0 +1,286 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { Ref } from 'react';
+import { WebView } from 'react-native-webview';
+
+import { isAndroid } from '../../utils/helpers';
+import { emitter } from './EditorEvent';
+import * as Events from './utils/events';
+import heroEditorApp from './heroEditorApp';
+import { ToolbarEvents } from './constants';
+import type { EditorValue, RichTextEditorRef, TextUnit } from './types';
+import {
+  postMessage,
+  requestBlurEditor,
+  requestFocusEditor,
+} from './utils/rnWebView';
+import type { WebViewEventMessage } from './utils/rnWebView';
+import { useTheme } from '../../theme';
+import { StyledWebView } from './StyledRichTextEditor';
+import { TextInputRef } from '../TextInput/types';
+
+const RichTextEditorInput = forwardRef<
+  TextInputRef,
+  {
+    value: EditorValue;
+    name: string;
+    autoFocus: boolean;
+    placeholder: string;
+    onChange: (data: EditorValue) => void;
+    onCursorChange?: (params: { position: { top: number } }) => void;
+    forwardedRef?: Ref<RichTextEditorRef>;
+    onFocus?: () => void;
+    onBlur?: () => void;
+  }
+>(
+  (
+    {
+      value,
+      name,
+      autoFocus,
+      placeholder,
+      onChange,
+      onCursorChange,
+      forwardedRef,
+      onFocus,
+      onBlur,
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+    const webview = useRef<WebView | null>(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [webviewHeight, setWebviewHeight] = useState<number | undefined>(24);
+    const initialValueRef = useRef(value);
+
+    const normalizeEventName = (event: string) => `${name}/${event}`;
+    const postMessageToWebview = useCallback((message: WebViewEventMessage) => {
+      if (webview && webview.current) {
+        postMessage(webview.current, message);
+      }
+    }, []);
+
+    useEffect(() => {
+      const removeFocusListener = Events.on(
+        emitter,
+        normalizeEventName('editor-focus'),
+        () => {
+          onFocus?.();
+          setIsFocused(true);
+        }
+      );
+
+      const removeBlurListener = Events.on(
+        emitter,
+        normalizeEventName('editor-blur'),
+        () => {
+          setIsFocused(false);
+          onBlur?.();
+        }
+      );
+
+      return () => {
+        removeFocusListener();
+        removeBlurListener();
+      };
+    }, [name, onFocus, onBlur]);
+
+    const html = useMemo(() => {
+      const initialValueString = JSON.stringify(initialValueRef.current);
+
+      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>
+      `;
+    }, [placeholder, autoFocus, theme]);
+
+    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]
+    );
+
+    useLayoutEffect(() => {
+      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());
+      };
+    }, [name]);
+
+    const handleEditorLayoutEvent = useCallback(
+      (messageData: Record<string, unknown>) => {
+        const editorLayout = messageData
+          ? {
+              width: Number(messageData.width),
+              height: Number(messageData.height),
+            }
+          : undefined;
+
+        if (editorLayout) {
+          setWebviewHeight(editorLayout.height);
+        }
+      },
+      []
+    );
+
+    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
+            );
+            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;
+        }
+      },
+      [name, onChange, onCursorChange, handleEditorLayoutEvent]
+    );
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          if (webview.current) {
+            requestFocusEditor(webview.current);
+          }
+        },
+        isFocused: () => isFocused,
+        clear: () => {
+          // Not applicable for WebView, but required by the interface
+        },
+        blur: () => {
+          if (webview.current) {
+            requestBlurEditor(webview.current);
+          }
+        },
+      }),
+      [isFocused]
+    );
+
+    return (
+      <StyledWebView
+        ref={webview}
+        testID="webview"
+        originWhitelist={['*']}
+        height={webviewHeight}
+        source={{ html }}
+        onMessage={onMessage}
+        scrollEnabled={false}
+        hideKeyboardAccessoryView
+        keyboardDisplayRequiresUserAction={false}
+      />
+    );
+  }
+);
+
+export default RichTextEditorInput;

package/src/components/RichTextEditor/StyledRichTextEditor.tsx

@@ -0,0 +1,18 @@
+import { styled } from '@hero-design/rn';
+import { View } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+export const StyledWrapper = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
+}));
+
+export const StyledWebView = styled(WebView)<{
+  height: number | undefined;
+}>(({ height, theme }) => ({
+  height,
+  minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
+  backgroundColor: 'transparent',
+  textAlignVertical: 'center',
+  fontSize: theme.__hd__.textInput.fontSizes.text,
+  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+}));

package/src/components/RichTextEditor/StyledToolbar.ts

@@ -0,0 +1,32 @@
+import { styled } from '@hero-design/rn';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+
+export const StyledToolbarButton = styled(TouchableOpacity)<{
+  selected: boolean;
+}>(({ theme, selected }) => ({
+  width: theme.__hd__.richTextEditor.sizes.toolbarButtonSize,
+  height: theme.__hd__.richTextEditor.sizes.toolbarButtonSize,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: selected
+    ? theme.__hd__.richTextEditor.colors.toolbarButtonSelectedBackground
+    : undefined,
+}));
+
+export const StyledToolbar = styled(View)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderTopWidth: StyleSheet.hairlineWidth,
+  borderTopColor: theme.__hd__.richTextEditor.colors.toolbarBorderColor,
+  backgroundColor: theme.__hd__.richTextEditor.colors.toolbarBackgroundColor,
+  paddingHorizontal: theme.__hd__.richTextEditor.space.toolbarHorizontalPadding,
+}));
+
+export const StyledSeparator = styled(View)(({ theme }) => ({
+  width: theme.__hd__.richTextEditor.sizes.toolbarSeparatorWidth,
+  height: theme.__hd__.richTextEditor.sizes.toolbarSeparatorHeight,
+  flexDirection: 'row',
+  alignItems: 'center',
+  marginHorizontal: theme.space.small,
+  backgroundColor: theme.colors.secondaryOutline,
+}));

package/src/components/RichTextEditor/__mocks__/hero-editor.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plainSerializer: () => 'mocked',
+};

package/src/components/RichTextEditor/__mocks__/heroEditorApp.ts

@@ -0,0 +1,2 @@
+const mockHeroEditApp = 'mockHeroEditApp';
+export default mockHeroEditApp;

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

@@ -0,0 +1,144 @@
+import React from 'react';
+import { act, fireEvent, waitFor } from '@testing-library/react-native';
+import type { RenderAPI } from '@testing-library/react-native';
+import EditorToolbar from '../EditorToolbar';
+import { emitter as editorEventEmmitor } from '../EditorEvent';
+import { theme, ThemeProvider } from '../../../index';
+import * as Events from '../utils/events';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+describe('EditorToolbar', () => {
+  it('should not render toolbar when the editor is not focused', () => {
+    const wrapper = renderWithTheme(
+      <EditorToolbar testID="editor-toolbar" name="toolbar" />
+    );
+    const toolbar = wrapper.queryByTestId('editor-toolbar');
+    expect(toolbar).toBeNull();
+  });
+
+  describe('when the editor is focused', () => {
+    let wrapper: RenderAPI;
+
+    beforeEach(async () => {
+      wrapper = renderWithTheme(
+        <EditorToolbar name="toolbar" testID="toolbar" />
+      );
+      act(() => {
+        editorEventEmmitor.emit('toolbar/editor-focus');
+      });
+      await waitFor(() => wrapper.getByTestId('toolbar'));
+    });
+
+    it('should render toolbar', async () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+
+      [
+        'format-bold',
+        'format-italic',
+        'format-underlined',
+        'format-list-bulleted',
+        'format-list-numbered',
+        'format-heading1',
+        'format-heading2',
+      ].forEach((testId) => {
+        expect(wrapper.queryAllByTestId(testId)).toHaveLength(1);
+      });
+    });
+
+    it('should hide toolbar when blur', async () => {
+      act(() => {
+        editorEventEmmitor.emit('toolbar/editor-blur');
+      });
+      await waitFor(() => wrapper.queryAllByTestId('toolbar').length === 0);
+      expect(wrapper.queryAllByTestId('toolbar')).toHaveLength(0);
+    });
+
+    describe("should change button's background color when pressing", () => {
+      it('should send event and highlight buttons correctly', async () => {
+        const emmitedEvents: string[] = [];
+
+        const eventNameAndTestIDArray = [
+          {
+            eventName: 'toolbar/bold',
+            testID: 'format-bold',
+          },
+          {
+            eventName: 'toolbar/italic',
+            testID: 'format-italic',
+          },
+          {
+            eventName: 'toolbar/underline',
+            testID: 'format-underlined',
+          },
+          {
+            eventName: 'toolbar/bulleted-list',
+            testID: 'format-list-bulleted',
+          },
+          {
+            eventName: 'toolbar/numbered-list',
+            testID: 'format-list-numbered',
+          },
+          {
+            eventName: 'toolbar/heading-one',
+            testID: 'format-heading1',
+          },
+          {
+            eventName: 'toolbar/heading-two',
+            testID: 'format-heading2',
+          },
+        ];
+
+        eventNameAndTestIDArray.forEach(async ({ eventName, testID }) => {
+          Events.on(editorEventEmmitor, eventName, () => {
+            emmitedEvents.push(testID);
+          });
+
+          expect(wrapper.getByTestId(testID)).toHaveStyle({
+            backgroundColor: undefined,
+          });
+
+          await act(() => {
+            fireEvent.press(wrapper.getByTestId(testID));
+          });
+
+          // rerender
+          wrapper.rerender(
+            <ThemeProvider theme={theme}>
+              <EditorToolbar name="toolbar" testID="toolbar" />
+            </ThemeProvider>
+          );
+          // match snapshot
+          // add waitfor to ensure the style is applied
+          await waitFor(() => {
+            expect(wrapper.getByTestId(testID)).toHaveStyle({
+              backgroundColor:
+                theme.__hd__.richTextEditor.colors
+                  .toolbarButtonSelectedBackground,
+            });
+          });
+        });
+
+        const standaloneButtonTestIDs = [
+          'format-list-bulleted',
+          'format-list-numbered',
+          'format-heading1',
+        ];
+        standaloneButtonTestIDs.forEach((testID) => {
+          expect(wrapper.getByTestId(testID)).toHaveStyle({
+            backgroundColor: undefined,
+          });
+        });
+
+        expect(emmitedEvents).toMatchObject([
+          'format-bold',
+          'format-italic',
+          'format-underlined',
+          'format-list-bulleted',
+          'format-list-numbered',
+          'format-heading1',
+          'format-heading2',
+        ]);
+      });
+    });
+  });
+});