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

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,12 +1,15 @@
+import type { ComponentType, ReactElement } from 'react';
 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 { InternalTextInput } from '../TextInput';
 import RichTextEditorInput from './RichTextEditorInput';
-import type { EditorValue, TextUnit } from './types';
 import { StyledWrapper } from './StyledRichTextEditor';
+import type {
+  EditorValue,
+  InternalRichTextEditorProps,
+  TextUnit,
+} from './types';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -15,22 +18,6 @@ export interface RichTextEditorRef {
   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',
@@ -38,7 +25,7 @@ const defaultValue: EditorValue = [
   },
 ];
 
-const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+const RichTextEditor: ComponentType<InternalRichTextEditorProps> = ({
   autoFocus = true,
   name,
   placeholder = '',
@@ -46,18 +33,20 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   onCursorChange,
   error = '',
   style = {},
+  textStyle,
   label,
   helpText,
   required,
   testID,
   forwardedRef,
   value = defaultValue,
-}: RichTextEditorProps): ReactElement => {
+  groupStyleEnabled = false,
+}: InternalRichTextEditorProps): ReactElement => {
   const plain = useMemo(() => plainSerializer(value), [value]);
 
   return (
-    <StyledWrapper>
-      <TextInput
+    <StyledWrapper groupStyleEnabled={groupStyleEnabled}>
+      <InternalTextInput
         autoFocus={autoFocus}
         error={error}
         label={label}
@@ -66,7 +55,9 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
         placeholder={placeholder}
         value={plain}
         style={style}
+        textStyle={textStyle}
         helpText={helpText}
+        groupStyleEnabled={groupStyleEnabled}
         renderInputValue={(inputProps, ref) => (
           <RichTextEditorInput
             {...inputProps}

package/src/components/RichTextEditor/StyledRichTextEditor.tsx

@@ -2,9 +2,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 StyledWrapper = styled(View)<{ groupStyleEnabled?: boolean }>(
+  ({ theme, groupStyleEnabled }) => ({
+    ...(groupStyleEnabled
+      ? {}
+      : {
+          marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
+        }),
+  })
+);
 
 export const StyledWebView = styled(WebView)(({ theme }) => ({
   minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import RichTextEditor from '../RichTextEditor';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+const initialValue = [
+  { type: 'paragraph', children: [{ text: 'Hello world' }] },
+];
+
+describe('RichTextEditor zIndex', () => {
+  it('applies correct zIndex logic when groupStyleEnabled is true', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        groupStyleEnabled
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Initially should have zIndex 0 (normal state)
+    expect(container.props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          zIndex: 0,
+        }),
+      ])
+    );
+  });
+
+  it('applies correct zIndex when has error', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        error="This is an error"
+        groupStyleEnabled
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Should have zIndex 1 when has error (medium priority)
+    expect(container.props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          zIndex: 1,
+        }),
+      ])
+    );
+  });
+
+  it('does not apply zIndex when groupStyleEnabled is false', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        groupStyleEnabled={false}
+        error="This is an error"
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Should not have zIndex applied when groupStyleEnabled is false
+    const containerStyle = container.props.style.flat();
+    const hasZIndex = containerStyle.some(
+      (style: Record<string, unknown>) => style && style.zIndex !== undefined
+    );
+    expect(hasZIndex).toBe(false);
+  });
+});

package/src/components/RichTextEditor/index.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
-import RichTextEditor, {
-  RichTextEditorProps,
-  RichTextEditorRef,
-} from './RichTextEditor';
+import RichTextEditor, { RichTextEditorRef } from './RichTextEditor';
 import MentionList from './MentionList';
+import type { RichTextEditorProps } from './types';
 
 import Toolbar from './EditorToolbar';
 

package/src/components/RichTextEditor/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 import { Ref } from 'react';
 import type { TextInputProps } from '../TextInput';
@@ -83,5 +83,16 @@ export interface RichTextEditorProps {
 }
 
 export interface InternalRichTextEditorProps extends RichTextEditorProps {
+  /**
+   * Input text style
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * Whether the component is used within a FormGroup
+   */
+  groupStyleEnabled?: boolean;
+  /**
+   * Custom TextInput component to be used instead of the default one
+   */
   TextInputComponent?: React.ComponentType<TextInputProps>;
 }