@hero-design/rn 7.12.1 → 7.14.0

package/src/components/RichTextEditor/MentionList.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { emitter } from './EditorEvent';
+import * as Events from './utils/events';
+
+const isEmptyString = (s: string | null): boolean => !s || s.length === 0;
+
+export interface MentionListProps {
+  /**
+   * 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) => void
+  ) => JSX.Element;
+}
+
+const MentionList = ({ name: eventPrefix, render }: MentionListProps) => {
+  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();
+    };
+  }, []);
+
+  if (isEmptyString(search)) {
+    return null;
+  }
+
+  return (
+    <View>
+      {render(search, (id, name) => {
+        const data = {
+          id,
+          name,
+          target,
+        };
+
+        Events.emit(emitter, normalizeEventName('mention-apply'), data);
+      })}
+    </View>
+  );
+};
+
+export default MentionList;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,396 @@
+import { useTheme } from '@emotion/react';
+import { isEmptyContent } from 'hero-editor';
+import * as heroEditorApp from 'hero-editor/dist/app.js';
+import React, {
+  ComponentType,
+  forwardRef,
+  ReactElement,
+  Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  Keyboard,
+  StyleProp,
+  TouchableWithoutFeedback,
+  ViewStyle,
+} from 'react-native';
+import { WebView } from 'react-native-webview';
+import { isAndroid } from '../../utils/helpers';
+import Icon from '../Icon';
+import {
+  StyledAsteriskLabel,
+  StyledAsteriskLabelInsideTextInput,
+  StyledBorderBackDrop,
+  StyledContainer,
+  StyledError,
+  StyledErrorAndHelpTextContainer,
+  StyledErrorAndMaxLengthContainer,
+  StyledErrorContainer,
+  StyledHelperText,
+  StyledLabel,
+  StyledLabelContainer,
+  StyledLabelContainerInsideTextInput,
+  StyledLabelInsideTextInput,
+  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,
+  WebViewEventMessage,
+} from './utils/rnWebView';
+
+export interface RichTextEditorRef {
+  requestBlur: VoidFunction;
+}
+
+export type EditorValue = {
+  type: string;
+  children: any;
+}[];
+
+export interface RichTextEditorProps {
+  /**
+   * 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>;
+  /**
+   * Field label
+   */
+  label: string;
+  /**
+   * Field helper text
+   */
+  helpText?: string;
+  /**
+   *  Whether the input is required, if true, an asterisk will be appended to the label.
+   * */
+  required?: boolean;
+  /**
+   * Testing ID of the component
+   */
+  testID?: string;
+  /**
+   * Imperative ref to expose the component method
+   */
+  forwardedRef?: Ref<RichTextEditorRef>;
+}
+
+const noop = () => {};
+const defaultValue: EditorValue = [
+  {
+    type: 'paragraph',
+    children: [{ text: '' }],
+  },
+];
+
+const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+  name,
+  placeholder = '',
+  onChange = noop,
+  onCursorChange = noop,
+  error = '',
+  style = {},
+  label,
+  helpText,
+  required,
+  testID,
+  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 variant = useMemo(() => {
+    if (error) {
+      return 'error';
+    }
+    if (isFocused) {
+      return 'focused';
+    }
+    if (isEmptyValue) {
+      return 'filled';
+    }
+    return 'default';
+  }, [isFocused, error, isEmptyValue]);
+
+  const normalizeEventName = (event: string) => `${name}/${event}`;
+  const postMessageToWebview = (message: WebViewEventMessage) => {
+    if (webview && webview.current) {
+      postMessage(webview.current, message);
+    }
+  };
+
+  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: true,
+              style: {
+                padding: '0 !important',
+                fontSize: ${theme.__hd__.richTextEditor.fontSizes.editor}
+              }
+            };
+            ${heroEditorApp}
+          </script>
+        </body>
+      </html>
+      `;
+  }, []);
+
+  const requestBlur = useCallback(() => {
+    if (webview.current) {
+      requestBlurEditor(webview.current);
+      Keyboard.dismiss();
+    }
+  }, []);
+
+  useImperativeHandle(forwardedRef, () => ({ requestBlur }), [requestBlur]);
+
+  /* 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
+          );
+
+          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;
+      }
+    },
+    []
+  );
+
+  return (
+    <StyledContainer style={style} testID={testID}>
+      <StyledTextInputContainer>
+        <StyledBorderBackDrop themeVariant={variant} />
+        {(isFocused || (label && !isEmptyValue)) && (
+          <StyledLabelContainer pointerEvents="none">
+            {required && (
+              <StyledAsteriskLabel themeVariant={variant} fontSize="small">
+                *
+              </StyledAsteriskLabel>
+            )}
+            {!!label && (
+              <StyledLabel
+                testID="input-label"
+                fontSize="small"
+                themeVariant={variant}
+              >
+                {label}
+              </StyledLabel>
+            )}
+          </StyledLabelContainer>
+        )}
+        <StyledTextInputAndLabelContainer>
+          {!isFocused && isEmptyValue && (
+            <StyledLabelContainerInsideTextInput pointerEvents="none">
+              {required && (
+                <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                  *
+                </StyledAsteriskLabelInsideTextInput>
+              )}
+              {!!label && (
+                <StyledLabelInsideTextInput
+                  testID="input-label"
+                  fontSize="medium"
+                  themeVariant={variant}
+                >
+                  {label}
+                </StyledLabelInsideTextInput>
+              )}
+            </StyledLabelContainerInsideTextInput>
+          )}
+          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+            <StyledWebView
+              ref={webview}
+              testID="webview"
+              style={style}
+              originWhitelist={['*']}
+              source={{ html }}
+              onMessage={onMessage}
+              scrollEnabled={false}
+              hideKeyboardAccessoryView
+              keyboardDisplayRequiresUserAction={false}
+              height={webviewHeight}
+            />
+          </TouchableWithoutFeedback>
+        </StyledTextInputAndLabelContainer>
+      </StyledTextInputContainer>
+      <StyledErrorAndHelpTextContainer>
+        <StyledErrorAndMaxLengthContainer>
+          {!!error && (
+            <StyledErrorContainer>
+              <Icon
+                testID="input-error-icon"
+                icon="circle-info"
+                size="xsmall"
+                intent="danger"
+              />
+              <StyledError testID="input-error-message">{error}</StyledError>
+            </StyledErrorContainer>
+          )}
+        </StyledErrorAndMaxLengthContainer>
+        {!!helpText && <StyledHelperText>{helpText}</StyledHelperText>}
+      </StyledErrorAndHelpTextContainer>
+    </StyledContainer>
+  );
+};
+
+export default forwardRef<
+  RichTextEditorRef,
+  Omit<RichTextEditorProps, 'forwardedRef'>
+>((props, ref) => <RichTextEditor {...props} forwardedRef={ref} />);

package/src/components/RichTextEditor/StyledRichTextEditor.ts

@@ -0,0 +1,20 @@
+import styled from '@emotion/native';
+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,
+  alignSelf: 'stretch',
+  flexGrow: 2,
+  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+}));

package/src/components/RichTextEditor/StyledToolbar.ts

@@ -0,0 +1,32 @@
+import styled from '@emotion/native';
+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.outline,
+}));

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  RenderAPI,
+  waitFor,
+} from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import EditorToolbar from '../EditorToolbar';
+import { emitter as editorEventEmmitor } from '../EditorEvent';
+import { theme } from '../../../index';
+import * as Events from '../utils/events';
+
+describe('EditorToolbar', () => {
+  it('should not render toolbar when the editor is not focused', () => {
+    const wrapper = renderWithTheme(<EditorToolbar name="toolbar" />);
+    expect(wrapper.toJSON()).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', () => {
+        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(({ eventName, testID }) => {
+          Events.on(editorEventEmmitor, eventName, () => {
+            emmitedEvents.push(testID);
+          });
+
+          expect(wrapper.getByTestId(testID)).toHaveStyle({
+            backgroundColor: undefined,
+          });
+
+          fireEvent(wrapper.getByTestId(testID), 'press');
+          expect(wrapper.getByTestId(testID)).toHaveStyle({
+            backgroundColor: theme.colors.outline,
+          });
+        });
+
+        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',
+        ]);
+      });
+    });
+  });
+});