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

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

@@ -0,0 +1,105 @@
+import type { RenderAPI } from '@testing-library/react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { Text, View } from 'react-native';
+import { emitter as editorEventEmitter } from '../EditorEvent';
+import MentionList from '../MentionList';
+import * as Events from '../utils/events';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+const SuggestionListData: Array<{ id: string; name: string }> = [
+  { id: '1', name: 'Kien Tran' },
+  { id: '2', name: 'Minh Dinh' },
+  { id: '3', name: 'Hieu Pham' },
+  { id: '4', name: 'Hau' },
+  { id: '5', name: 'Tung Ten' },
+  { id: '6', name: 'Thong Quach' },
+];
+
+const SuggestionList = ({
+  searchValue,
+  onSelect,
+}: {
+  searchValue: string;
+  onSelect: (id: string, name: string) => void;
+}) => {
+  const filteredData = SuggestionListData.filter((item) =>
+    item.name.includes(searchValue)
+  );
+
+  return (
+    <View>
+      {filteredData.map((item) => (
+        <Text key={item.id} onPress={() => onSelect(item.id, item.name)}>
+          {item.name}
+        </Text>
+      ))}
+    </View>
+  );
+};
+
+describe('MentionList', () => {
+  describe('when search string is empty', () => {
+    it('should not render mention list', () => {
+      const wrapper = render(
+        <MentionList
+          name="give-shout-out"
+          render={() => <Text>Mention List</Text>}
+        />
+      );
+
+      expect(wrapper.toJSON()).toBeNull();
+    });
+  });
+
+  describe('when search string is not empty', () => {
+    let wrapper: RenderAPI;
+
+    beforeEach(async () => {
+      wrapper = renderWithTheme(
+        <MentionList
+          name="give-shout-out"
+          render={(
+            searchValue: string,
+            onSelect: (id: string, name: string) => void
+          ) => <SuggestionList searchValue={searchValue} onSelect={onSelect} />}
+        />
+      );
+      await act(() => {
+        editorEventEmitter.emit('give-shout-out/mention-search', {
+          search: 'Hieu',
+          target: 'give-shout-out',
+        });
+      });
+    });
+
+    it('should render mention list showing filtered results', async () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByText('Hieu Pham')).toHaveLength(1);
+      expect(wrapper.queryAllByText('Kien Tran')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Minh Dinh')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Hau')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Tung Teng')).toHaveLength(0);
+      expect(wrapper.queryAllByText('Thong Quach')).toHaveLength(0);
+    });
+
+    describe('onPress suggesstion item', () => {
+      it('should emit action metion-only', () => {
+        const result: { id: string; name: string; target: string }[] = [];
+        act(() => {
+          Events.on(
+            editorEventEmitter,
+            'give-shout-out/mention-apply',
+            (data: { id: string; name: string; target: string }) => {
+              result.push(data);
+            }
+          );
+        });
+        fireEvent(wrapper.getByText('Hieu Pham'), 'press');
+        expect(result).toMatchObject([
+          { id: '3', name: 'Hieu Pham', target: 'give-shout-out' },
+        ]);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,136 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import RichTextEditorInput from '../RichTextEditorInput';
+import { emitter } from '../EditorEvent';
+import * as Events from '../utils/events';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+// Mock minimal EditorValue type for test
+const initialValue = [
+  { type: 'paragraph', children: [{ text: 'Hello world' }] },
+];
+
+describe('RichTextEditorInput', () => {
+  it('renders a WebView with correct initial html', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type something..."
+        onChange={jest.fn()}
+      />
+    );
+
+    const webview = getByTestId('webview');
+    expect(webview).toBeTruthy();
+    expect(webview.props.source.html).toContain(
+      'placeholder: "Type something..."'
+    );
+    expect(webview.props.source.html).toContain(JSON.stringify(initialValue));
+  });
+
+  it('handles editor-change event from webview', () => {
+    const onChange = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type here..."
+        onChange={onChange}
+      />
+    );
+
+    const webview = getByTestId('webview');
+    const newValue = [{ type: 'paragraph', children: [{ text: 'Changed' }] }];
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/editor-change',
+          data: { value: newValue },
+        }),
+      },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(newValue);
+  });
+
+  it('handles editor-focus and editor-blur events from webview', () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type here..."
+        onChange={jest.fn()}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    );
+
+    const webview = getByTestId('webview');
+
+    // Spy on emitter
+    const spy = jest.spyOn(Events, 'emit');
+
+    // Simulate focus
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/editor-focus',
+        }),
+      },
+    });
+    expect(spy).toHaveBeenCalledWith(
+      emitter,
+      'test-editor/editor-focus',
+      undefined
+    );
+
+    // Simulate blur
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/editor-blur',
+        }),
+      },
+    });
+    expect(spy).toHaveBeenCalledWith(
+      emitter,
+      'test-editor/editor-blur',
+      undefined
+    );
+
+    spy.mockRestore();
+  });
+
+  it('handles cursor-change event from webview', () => {
+    const onCursorChange = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditorInput
+        value={initialValue}
+        name="test-editor"
+        autoFocus={false}
+        placeholder="Type here..."
+        onChange={jest.fn()}
+        onCursorChange={onCursorChange}
+      />
+    );
+
+    const webview = getByTestId('webview');
+    const cursorData = { position: { top: 10 } };
+    fireEvent(webview, 'message', {
+      nativeEvent: {
+        data: JSON.stringify({
+          type: '@hero-editor/webview/cursor-change',
+          data: cursorData,
+        }),
+      },
+    });
+
+    expect(onCursorChange).toHaveBeenCalledWith(cursorData);
+  });
+});

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

@@ -0,0 +1,414 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditorToolbar when the editor is focused should render toolbar 1`] = `
+<View
+  style={
+    [
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#f6f6f7",
+          "borderTopColor": "#e8e9ea",
+          "borderTopWidth": undefined,
+          "flexDirection": "row",
+          "paddingHorizontal": 7.846153846153847,
+        },
+      ],
+      undefined,
+    ]
+  }
+  testID="toolbar"
+>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-bold"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-italic"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-underlined"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <View
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#e8e9ea",
+            "flexDirection": "row",
+            "height": 15.692307692307693,
+            "marginHorizontal": 7.846153846153847,
+            "width": 1.9615384615384617,
+          },
+        ],
+        undefined,
+      ]
+    }
+  />
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-list-bulleted"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-list-numbered"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <View
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#e8e9ea",
+            "flexDirection": "row",
+            "height": 15.692307692307693,
+            "marginHorizontal": 7.846153846153847,
+            "width": 1.9615384615384617,
+          },
+        ],
+        undefined,
+      ]
+    }
+  />
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-heading1"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+  <TouchableOpacity
+    onPress={[Function]}
+    selected={false}
+    style={
+      [
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "height": 47.07692307692308,
+            "justifyContent": "center",
+            "width": 47.07692307692308,
+          },
+        ],
+        undefined,
+      ]
+    }
+    testID="format-heading2"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": undefined,
+            "fontSize": 12,
+          },
+          [
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 19.615384615384613,
+              },
+            ],
+            undefined,
+          ],
+          {
+            "fontFamily": "hero-icons-mobile",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          {},
+        ]
+      }
+      themeIntent="text"
+      themeSize="small"
+    >
+      
+    </Text>
+  </TouchableOpacity>
+</View>
+`;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MentionList when search string is not empty should render mention list showing filtered results 1`] = `
+<View>
+  <View>
+    <Text
+      onPress={[Function]}
+    >
+      Hieu Pham
+    </Text>
+  </View>
+</View>
+`;

package/src/components/RichTextEditor/constants.ts

@@ -0,0 +1,9 @@
+export enum ToolbarEvents {
+  Bold = 'bold',
+  Italic = 'italic',
+  Underline = 'underline',
+  BulletedList = 'bulleted-list',
+  NumberedList = 'numbered-list',
+  HeadingOne = 'heading-one',
+  HeadingTwo = 'heading-two',
+}

package/src/{hero-editor.d.ts → components/RichTextEditor/hero-editor.d.ts}

@@ -5,4 +5,10 @@ declare module 'hero-editor/dist/app.js' {
 
 declare module 'hero-editor' {
   export function isEmptyContent(content: unknown): boolean;
+  export function plainSerializer(
+    content: {
+      type: string;
+      children: unknown;
+    }[]
+  ): string;
 }

package/src/components/RichTextEditor/heroEditorApp.ts

@@ -0,0 +1,3 @@
+import * as heroEditorApp from 'hero-editor/dist/app.js';
+
+export default heroEditorApp;

package/src/components/RichTextEditor/index.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import RichTextEditor, {
+  RichTextEditorProps,
+  RichTextEditorRef,
+} from './RichTextEditor';
+import MentionList from './MentionList';
+
+import Toolbar from './EditorToolbar';
+
+const RichTextEditorWithRef = forwardRef<
+  RichTextEditorRef,
+  Omit<RichTextEditorProps, 'forwardedRef'>
+>((props, ref) => <RichTextEditor {...props} forwardedRef={ref} />);
+
+RichTextEditorWithRef.displayName = 'RichTextEditor';
+
+export default Object.assign(RichTextEditorWithRef, {
+  MentionList,
+  Toolbar,
+});