@hero-design/rn-work-uikit 1.3.1 → 1.5.0

package/src/components/RichTextEditor/EditorToolbar.tsx

@@ -0,0 +1,216 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ComponentType } from 'react';
+import { Icon, IconProps } from '@hero-design/rn';
+import { ToolbarEvents } from './constants';
+import { emitter } from './EditorEvent';
+import {
+  StyledSeparator,
+  StyledToolbar,
+  StyledToolbarButton,
+} from './StyledToolbar';
+import { ToolbarButtonName } from './types';
+import * as Events from './utils/events';
+
+type ToolbarButtonProps = {
+  icon: IconProps['icon'];
+  onPress: () => void;
+  testID?: string;
+  selected: boolean;
+};
+const ToolbarButton: ComponentType<ToolbarButtonProps> = ({
+  icon,
+  onPress,
+  testID,
+  selected,
+}: ToolbarButtonProps) => (
+  <StyledToolbarButton selected={selected} onPress={onPress} testID={testID}>
+    <Icon size="small" icon={icon} />
+  </StyledToolbarButton>
+);
+
+interface ButtonConfig {
+  icon: IconProps['icon'];
+  eventName: ToolbarEvents;
+  standalone?: boolean;
+}
+
+const buttonConfigs: Partial<Record<ToolbarButtonName, ButtonConfig>> = {
+  bold: {
+    icon: 'format-bold',
+    eventName: ToolbarEvents.Bold,
+  },
+  italic: {
+    icon: 'format-italic',
+    eventName: ToolbarEvents.Italic,
+  },
+  underline: {
+    icon: 'format-underlined',
+    eventName: ToolbarEvents.Underline,
+  },
+  bulletedList: {
+    icon: 'format-list-bulleted',
+    eventName: ToolbarEvents.BulletedList,
+    standalone: true,
+  },
+  numberedList: {
+    icon: 'format-list-numbered',
+    eventName: ToolbarEvents.NumberedList,
+    standalone: true,
+  },
+  headingOne: {
+    icon: 'format-heading1',
+    eventName: ToolbarEvents.HeadingOne,
+    standalone: true,
+  },
+  headingTwo: {
+    icon: 'format-heading2',
+    eventName: ToolbarEvents.HeadingTwo,
+    standalone: true,
+  },
+};
+
+const defaultButtons: ToolbarButtonName[] = [
+  'bold',
+  'italic',
+  'underline',
+  '|',
+  'bulletedList',
+  'numberedList',
+  '|',
+  'headingOne',
+  'headingTwo',
+];
+
+export interface EditorToolbarProps {
+  /**
+   * List of buttons to display in toolbar
+   */
+  buttons?: ToolbarButtonName[];
+  /**
+   * Unique name used to communicate with webview, should be the same with the RichTextEditor component it used with
+   */
+  name: string;
+  /**
+   * Testing ID of the component
+   */
+  testID?: string;
+}
+
+type ButtonType = {
+  id: number;
+  buttonName: ToolbarButtonName;
+  selected: boolean;
+};
+
+const EditorToolbar = ({
+  name,
+  buttons = defaultButtons,
+  testID,
+}: EditorToolbarProps) => {
+  const [show, setShow] = useState(false);
+
+  const initialToolbarButtonArray: ButtonType[] = buttons.map(
+    (button, index) => ({
+      id: index + 1,
+      buttonName: button,
+      selected: false,
+    })
+  );
+
+  const [toolbarButtonArray, setToolbarButtonArray] = useState<ButtonType[]>(
+    initialToolbarButtonArray
+  );
+
+  const normalizeEventName = useCallback(
+    (event: string): string => `${name}/${event}`,
+    [name]
+  );
+
+  const toggleToolbarButton = useCallback(
+    ({ buttonName: currentButtonName, selected: prevSelected }: ButtonType) => {
+      const currentButtonConfig = buttonConfigs[currentButtonName];
+      const isStandalone =
+        currentButtonConfig && currentButtonConfig.standalone;
+
+      setToolbarButtonArray((prevState) =>
+        prevState.map((updatingButton) => {
+          if (updatingButton.buttonName === currentButtonName) {
+            return {
+              ...updatingButton,
+              selected: !prevSelected,
+            };
+          }
+
+          const updatingButtonConfig = buttonConfigs[updatingButton.buttonName];
+          const shouldToggleOff =
+            !prevSelected &&
+            isStandalone &&
+            updatingButtonConfig &&
+            updatingButtonConfig.standalone;
+
+          return {
+            ...updatingButton,
+            selected: shouldToggleOff ? false : updatingButton.selected,
+          };
+        })
+      );
+    },
+    []
+  );
+
+  useEffect(() => {
+    const removeFocusListener = Events.on(
+      emitter,
+      normalizeEventName('editor-focus'),
+      () => setShow(true)
+    );
+
+    const removeBlurListener = Events.on(
+      emitter,
+      normalizeEventName('editor-blur'),
+      () => setShow(false)
+    );
+
+    return () => {
+      removeFocusListener();
+      removeBlurListener();
+    };
+  }, [normalizeEventName]);
+
+  const toolbarButtons = useMemo(
+    () =>
+      toolbarButtonArray.map((button) => {
+        if (button.buttonName === '|') {
+          return <StyledSeparator key={button.id} />;
+        }
+        const config = buttonConfigs[button.buttonName];
+        if (config) {
+          return (
+            <ToolbarButton
+              key={button.id}
+              testID={config.icon}
+              icon={config.icon}
+              onPress={() => {
+                toggleToolbarButton(button);
+                Events.emit(
+                  emitter,
+                  normalizeEventName(config.eventName),
+                  null
+                );
+              }}
+              selected={button.selected}
+            />
+          );
+        }
+        return null;
+      }),
+    [toolbarButtonArray, normalizeEventName, toggleToolbarButton]
+  );
+
+  if (show) {
+    return <StyledToolbar testID={testID}>{toolbarButtons}</StyledToolbar>;
+  }
+  return null;
+};
+
+export default EditorToolbar;

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,292 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { Ref } from 'react';
+import { WebView } from 'react-native-webview';
+
+import { View } from 'react-native';
+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 (
+      <View
+        style={{
+          height: webviewHeight,
+        }}
+      >
+        <StyledWebView
+          ref={webview}
+          testID="webview"
+          originWhitelist={['*']}
+          source={{ html }}
+          onMessage={onMessage}
+          scrollEnabled={false}
+          hideKeyboardAccessoryView
+          keyboardDisplayRequiresUserAction={false}
+        />
+      </View>
+    );
+  }
+);
+
+export default RichTextEditorInput;

package/src/components/RichTextEditor/StyledRichTextEditor.tsx

@@ -0,0 +1,15 @@
+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)(({ theme }) => ({
+  minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
+  backgroundColor: 'transparent',
+  textAlignVertical: 'center',
+  fontSize: theme.__hd__.textInput.fontSizes.text,
+  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+}));