react-native-enriched 0.2.1 → 0.4.0

package/src/EnrichedTextInput.tsx

@@ -18,8 +18,10 @@ import EnrichedTextInputNativeComponent, {
   type OnMentionDetected,
   type OnMentionDetectedInternal,
   type OnRequestHtmlResultEvent,
-  type MentionStyleProperties,
-} from './EnrichedTextInputNativeComponent';
+  type OnChangeStateDeprecatedEvent,
+  type OnKeyPressEvent,
+  type OnPasteImagesEvent,
+} from './spec/EnrichedTextInputNativeComponent';
 import type {
   ColorValue,
   HostInstance,
@@ -28,17 +30,25 @@ import type {
   MeasureOnSuccessCallback,
   NativeMethods,
   NativeSyntheticEvent,
+  TargetedEvent,
   TextStyle,
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import { normalizeHtmlStyle } from './normalizeHtmlStyle';
+import { normalizeHtmlStyle } from './utils/normalizeHtmlStyle';
+import { toNativeRegexConfig } from './utils/regexParser';
+import { nullthrows } from './utils/nullthrows';
+import type { HtmlStyle } from './types';
+
+export type FocusEvent = NativeSyntheticEvent<TargetedEvent>;
+export type BlurEvent = NativeSyntheticEvent<TargetedEvent>;
 
 export interface EnrichedTextInputInstance extends NativeMethods {
   // General commands
   focus: () => void;
   blur: () => void;
   setValue: (value: string) => void;
+  setSelection: (start: number, end: number) => void;
   getHTML: () => Promise<string>;
 
   // Text formatting commands
@@ -50,10 +60,14 @@ export interface EnrichedTextInputInstance extends NativeMethods {
   toggleH1: () => void;
   toggleH2: () => void;
   toggleH3: () => void;
+  toggleH4: () => void;
+  toggleH5: () => void;
+  toggleH6: () => void;
   toggleCodeBlock: () => void;
   toggleBlockQuote: () => void;
   toggleOrderedList: () => void;
   toggleUnorderedList: () => void;
+  toggleCheckboxList: (checked: boolean) => void;
   setLink: (start: number, end: number, text: string, url: string) => void;
   setImage: (src: string, width: number, height: number) => void;
   startMention: (indicator: string) => void;
@@ -69,53 +83,6 @@ export interface OnChangeMentionEvent {
   text: string;
 }
 
-export interface HtmlStyle {
-  h1?: {
-    fontSize?: number;
-    bold?: boolean;
-  };
-  h2?: {
-    fontSize?: number;
-    bold?: boolean;
-  };
-  h3?: {
-    fontSize?: number;
-    bold?: boolean;
-  };
-  blockquote?: {
-    borderColor?: ColorValue;
-    borderWidth?: number;
-    gapWidth?: number;
-    color?: ColorValue;
-  };
-  codeblock?: {
-    color?: ColorValue;
-    borderRadius?: number;
-    backgroundColor?: ColorValue;
-  };
-  code?: {
-    color?: ColorValue;
-    backgroundColor?: ColorValue;
-  };
-  a?: {
-    color?: ColorValue;
-    textDecorationLine?: 'underline' | 'none';
-  };
-  mention?: Record<string, MentionStyleProperties> | MentionStyleProperties;
-  ol?: {
-    gapWidth?: number;
-    marginLeft?: number;
-    markerFontWeight?: TextStyle['fontWeight'];
-    markerColor?: ColorValue;
-  };
-  ul?: {
-    bulletColor?: ColorValue;
-    bulletSize?: number;
-    marginLeft?: number;
-    gapWidth?: number;
-  };
-}
-
 export interface EnrichedTextInputProps extends Omit<ViewProps, 'children'> {
   ref?: RefObject<EnrichedTextInputInstance | null>;
   autoFocus?: boolean;
@@ -130,17 +97,26 @@ export interface EnrichedTextInputProps extends Omit<ViewProps, 'children'> {
   htmlStyle?: HtmlStyle;
   style?: ViewStyle | TextStyle;
   scrollEnabled?: boolean;
-  onFocus?: () => void;
-  onBlur?: () => void;
+  linkRegex?: RegExp | null;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: BlurEvent) => void;
   onChangeText?: (e: NativeSyntheticEvent<OnChangeTextEvent>) => void;
   onChangeHtml?: (e: NativeSyntheticEvent<OnChangeHtmlEvent>) => void;
   onChangeState?: (e: NativeSyntheticEvent<OnChangeStateEvent>) => void;
+  /**
+   * @deprecated Use onChangeState prop instead.
+   */
+  onChangeStateDeprecated?: (
+    e: NativeSyntheticEvent<OnChangeStateDeprecatedEvent>
+  ) => void;
   onLinkDetected?: (e: OnLinkDetected) => void;
   onMentionDetected?: (e: OnMentionDetected) => void;
   onStartMention?: (indicator: string) => void;
   onChangeMention?: (e: OnChangeMentionEvent) => void;
   onEndMention?: (indicator: string) => void;
   onChangeSelection?: (e: NativeSyntheticEvent<OnChangeSelectionEvent>) => void;
+  onKeyPress?: (e: NativeSyntheticEvent<OnKeyPressEvent>) => void;
+  onPasteImages?: (e: NativeSyntheticEvent<OnPasteImagesEvent>) => void;
   /**
    * If true, Android will use experimental synchronous events.
    * This will prevent from input flickering when updating component size.
@@ -151,15 +127,7 @@ export interface EnrichedTextInputProps extends Omit<ViewProps, 'children'> {
   androidExperimentalSynchronousEvents?: boolean;
 }
 
-const nullthrows = <T,>(value: T | null | undefined): T => {
-  if (value == null) {
-    throw new Error('Unexpected null or undefined value');
-  }
-
-  return value;
-};
-
-const warnAboutMissconfiguredMentions = (indicator: string) => {
+const warnMentionIndicators = (indicator: string) => {
   console.warn(
     `Looks like you are trying to set a "${indicator}" but it's not in the mentionIndicators prop`
   );
@@ -185,17 +153,20 @@ export const EnrichedTextInput = ({
   style,
   autoCapitalize = 'sentences',
   htmlStyle = {},
+  linkRegex: _linkRegex,
   onFocus,
   onBlur,
   onChangeText,
   onChangeHtml,
   onChangeState,
+  onChangeStateDeprecated,
   onLinkDetected,
   onMentionDetected,
   onStartMention,
   onChangeMention,
   onEndMention,
   onChangeSelection,
+  onKeyPress,
   androidExperimentalSynchronousEvents = false,
   scrollEnabled = true,
   ...rest
@@ -220,6 +191,11 @@ export const EnrichedTextInput = ({
     [htmlStyle, mentionIndicators]
   );
 
+  const linkRegex = useMemo(
+    () => toNativeRegexConfig(_linkRegex),
+    [_linkRegex]
+  );
+
   useImperativeHandle(ref, () => ({
     measureInWindow: (callback: MeasureInWindowOnSuccessCallback) => {
       nullthrows(nativeRef.current).measureInWindow(callback);
@@ -281,6 +257,15 @@ export const EnrichedTextInput = ({
     toggleH3: () => {
       Commands.toggleH3(nullthrows(nativeRef.current));
     },
+    toggleH4: () => {
+      Commands.toggleH4(nullthrows(nativeRef.current));
+    },
+    toggleH5: () => {
+      Commands.toggleH5(nullthrows(nativeRef.current));
+    },
+    toggleH6: () => {
+      Commands.toggleH6(nullthrows(nativeRef.current));
+    },
     toggleCodeBlock: () => {
       Commands.toggleCodeBlock(nullthrows(nativeRef.current));
     },
@@ -293,6 +278,9 @@ export const EnrichedTextInput = ({
     toggleUnorderedList: () => {
       Commands.toggleUnorderedList(nullthrows(nativeRef.current));
     },
+    toggleCheckboxList: (checked: boolean) => {
+      Commands.toggleCheckboxList(nullthrows(nativeRef.current), checked);
+    },
     setLink: (start: number, end: number, text: string, url: string) => {
       Commands.addLink(nullthrows(nativeRef.current), start, end, text, url);
     },
@@ -316,11 +304,14 @@ export const EnrichedTextInput = ({
     },
     startMention: (indicator: string) => {
       if (!mentionIndicators?.includes(indicator)) {
-        warnAboutMissconfiguredMentions(indicator);
+        warnMentionIndicators(indicator);
       }
 
       Commands.startMention(nullthrows(nativeRef.current), indicator);
     },
+    setSelection: (start: number, end: number) => {
+      Commands.setSelection(nullthrows(nativeRef.current), start, end);
+    },
   }));
 
   const handleMentionEvent = (e: NativeSyntheticEvent<OnMentionEvent>) => {
@@ -367,6 +358,37 @@ export const EnrichedTextInput = ({
     pendingHtmlRequests.current.delete(requestId);
   };
 
+  const onChangeStateWithDeprecated = (
+    e: NativeSyntheticEvent<OnChangeStateEvent>
+  ) => {
+    onChangeState?.(e);
+    // TODO: remove in 0.5.0 release
+    onChangeStateDeprecated?.({
+      ...e,
+      nativeEvent: {
+        isBold: e.nativeEvent.bold.isActive,
+        isItalic: e.nativeEvent.italic.isActive,
+        isUnderline: e.nativeEvent.underline.isActive,
+        isStrikeThrough: e.nativeEvent.strikeThrough.isActive,
+        isInlineCode: e.nativeEvent.inlineCode.isActive,
+        isH1: e.nativeEvent.h1.isActive,
+        isH2: e.nativeEvent.h2.isActive,
+        isH3: e.nativeEvent.h3.isActive,
+        isH4: e.nativeEvent.h4.isActive,
+        isH5: e.nativeEvent.h5.isActive,
+        isH6: e.nativeEvent.h6.isActive,
+        isCodeBlock: e.nativeEvent.codeBlock.isActive,
+        isBlockQuote: e.nativeEvent.blockQuote.isActive,
+        isOrderedList: e.nativeEvent.orderedList.isActive,
+        isUnorderedList: e.nativeEvent.unorderedList.isActive,
+        isCheckboxList: e.nativeEvent.checkboxList.isActive,
+        isLink: e.nativeEvent.link.isActive,
+        isImage: e.nativeEvent.image.isActive,
+        isMention: e.nativeEvent.mention.isActive,
+      },
+    });
+  };
+
   return (
     <EnrichedTextInputNativeComponent
       ref={nativeRef}
@@ -381,17 +403,20 @@ export const EnrichedTextInput = ({
       style={style}
       autoCapitalize={autoCapitalize}
       htmlStyle={normalizedHtmlStyle}
+      linkRegex={linkRegex}
       onInputFocus={onFocus}
       onInputBlur={onBlur}
       onChangeText={onChangeText}
       onChangeHtml={onChangeHtml}
       isOnChangeHtmlSet={onChangeHtml !== undefined}
-      onChangeState={onChangeState}
+      isOnChangeTextSet={onChangeText !== undefined}
+      onChangeState={onChangeStateWithDeprecated}
       onLinkDetected={handleLinkDetected}
       onMentionDetected={handleMentionDetected}
       onMention={handleMentionEvent}
       onChangeSelection={onChangeSelection}
       onRequestHtmlResult={handleRequestHtmlResult}
+      onInputKeyPress={onKeyPress}
       androidExperimentalSynchronousEvents={
         androidExperimentalSynchronousEvents
       }

package/src/index.tsx

@@ -3,7 +3,11 @@ export type {
   OnChangeTextEvent,
   OnChangeHtmlEvent,
   OnChangeStateEvent,
+  OnChangeStateDeprecatedEvent,
   OnLinkDetected,
   OnMentionDetected,
   OnChangeSelectionEvent,
-} from './EnrichedTextInputNativeComponent';
+  OnKeyPressEvent,
+  OnPasteImagesEvent,
+} from './spec/EnrichedTextInputNativeComponent';
+export type { HtmlStyle, MentionStyleProperties } from './types';

package/src/{EnrichedTextInputNativeComponent.ts → spec/EnrichedTextInputNativeComponent.ts}

@@ -8,6 +8,16 @@ import type {
 import type { ColorValue, HostComponent, ViewProps } from 'react-native';
 import React from 'react';
 
+export interface LinkNativeRegex {
+  pattern: string;
+  caseInsensitive: boolean;
+  dotAll: boolean;
+  // Link detection will be disabled
+  isDisabled: boolean;
+  // Use default native link regex
+  isDefault: boolean;
+}
+
 export interface OnChangeTextEvent {
   value: string;
 }
@@ -17,6 +27,104 @@ export interface OnChangeHtmlEvent {
 }
 
 export interface OnChangeStateEvent {
+  bold: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  italic: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  underline: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  strikeThrough: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  inlineCode: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  h1: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  h2: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  h3: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  h4: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  h5: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  h6: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  codeBlock: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  blockQuote: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  orderedList: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  unorderedList: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  link: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  image: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  mention: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+  checkboxList: {
+    isActive: boolean;
+    isConflicting: boolean;
+    isBlocking: boolean;
+  };
+}
+
+export interface OnChangeStateDeprecatedEvent {
   isBold: boolean;
   isItalic: boolean;
   isUnderline: boolean;
@@ -25,10 +133,14 @@ export interface OnChangeStateEvent {
   isH1: boolean;
   isH2: boolean;
   isH3: boolean;
+  isH4: boolean;
+  isH5: boolean;
+  isH6: boolean;
   isCodeBlock: boolean;
   isBlockQuote: boolean;
   isOrderedList: boolean;
   isUnorderedList: boolean;
+  isCheckboxList: boolean;
   isLink: boolean;
   isImage: boolean;
   isMention: boolean;
@@ -69,25 +181,42 @@ export interface OnRequestHtmlResultEvent {
   html: UnsafeMixed;
 }
 
-export interface MentionStyleProperties {
-  color?: ColorValue;
-  backgroundColor?: ColorValue;
-  textDecorationLine?: 'underline' | 'none';
+export interface OnKeyPressEvent {
+  key: string;
+}
+
+interface TargetedEvent {
+  target: Int32;
+}
+
+export interface PastedImage {
+  uri: string;
+  type: string;
+  width: Float;
+  height: Float;
 }
 
+export interface OnPasteImagesEvent {
+  images: {
+    uri: string;
+    type: string;
+    width: Float;
+    height: Float;
+  }[];
+}
+
+type Heading = {
+  fontSize?: Float;
+  bold?: boolean;
+};
+
 export interface HtmlStyleInternal {
-  h1?: {
-    fontSize?: Float;
-    bold?: boolean;
-  };
-  h2?: {
-    fontSize?: Float;
-    bold?: boolean;
-  };
-  h3?: {
-    fontSize?: Float;
-    bold?: boolean;
-  };
+  h1?: Heading;
+  h2?: Heading;
+  h3?: Heading;
+  h4?: Heading;
+  h5?: Heading;
+  h6?: Heading;
   blockquote?: {
     borderColor?: ColorValue;
     borderWidth?: Float;
@@ -122,6 +251,12 @@ export interface HtmlStyleInternal {
     marginLeft?: Float;
     gapWidth?: Float;
   };
+  ulCheckbox?: {
+    gapWidth?: Float;
+    boxSize?: Float;
+    marginLeft?: Float;
+    boxColor?: ColorValue;
+  };
 }
 
 export interface NativeProps extends ViewProps {
@@ -137,10 +272,11 @@ export interface NativeProps extends ViewProps {
   autoCapitalize?: string;
   htmlStyle?: HtmlStyleInternal;
   scrollEnabled?: boolean;
+  linkRegex?: LinkNativeRegex;
 
   // event callbacks
-  onInputFocus?: DirectEventHandler<null>;
-  onInputBlur?: DirectEventHandler<null>;
+  onInputFocus?: DirectEventHandler<TargetedEvent>;
+  onInputBlur?: DirectEventHandler<TargetedEvent>;
   onChangeText?: DirectEventHandler<OnChangeTextEvent>;
   onChangeHtml?: DirectEventHandler<OnChangeHtmlEvent>;
   onChangeState?: DirectEventHandler<OnChangeStateEvent>;
@@ -149,6 +285,8 @@ export interface NativeProps extends ViewProps {
   onMention?: DirectEventHandler<OnMentionEvent>;
   onChangeSelection?: DirectEventHandler<OnChangeSelectionEvent>;
   onRequestHtmlResult?: DirectEventHandler<OnRequestHtmlResultEvent>;
+  onInputKeyPress?: DirectEventHandler<OnKeyPressEvent>;
+  onPasteImages?: DirectEventHandler<OnPasteImagesEvent>;
 
   // Style related props - used for generating proper setters in component's manager
   // These should not be passed as regular props
@@ -160,6 +298,8 @@ export interface NativeProps extends ViewProps {
 
   // Used for onChangeHtml event performance optimization
   isOnChangeHtmlSet: boolean;
+  // Used for onChangeText event performance optimization
+  isOnChangeTextSet: boolean;
 
   // Experimental
   androidExperimentalSynchronousEvents: boolean;
@@ -172,6 +312,11 @@ interface NativeCommands {
   focus: (viewRef: React.ElementRef<ComponentType>) => void;
   blur: (viewRef: React.ElementRef<ComponentType>) => void;
   setValue: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
+  setSelection: (
+    viewRef: React.ElementRef<ComponentType>,
+    start: Int32,
+    end: Int32
+  ) => void;
 
   // Text formatting commands
   toggleBold: (viewRef: React.ElementRef<ComponentType>) => void;
@@ -182,10 +327,17 @@ interface NativeCommands {
   toggleH1: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleH2: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleH3: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleH4: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleH5: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleH6: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleCodeBlock: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleBlockQuote: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleOrderedList: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleUnorderedList: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleCheckboxList: (
+    viewRef: React.ElementRef<ComponentType>,
+    checked: boolean
+  ) => void;
   addLink: (
     viewRef: React.ElementRef<ComponentType>,
     start: Int32,
@@ -221,6 +373,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'focus',
     'blur',
     'setValue',
+    'setSelection',
 
     // Text formatting commands
     'toggleBold',
@@ -231,10 +384,14 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'toggleH1',
     'toggleH2',
     'toggleH3',
+    'toggleH4',
+    'toggleH5',
+    'toggleH6',
     'toggleCodeBlock',
     'toggleBlockQuote',
     'toggleOrderedList',
     'toggleUnorderedList',
+    'toggleCheckboxList',
     'addLink',
     'addImage',
     'startMention',

package/src/types.ts

@@ -0,0 +1,59 @@
+import type { ColorValue, TextStyle } from 'react-native';
+
+interface HeadingStyle {
+  fontSize?: number;
+  bold?: boolean;
+}
+
+export interface MentionStyleProperties {
+  color?: ColorValue;
+  backgroundColor?: ColorValue;
+  textDecorationLine?: 'underline' | 'none';
+}
+
+export interface HtmlStyle {
+  h1?: HeadingStyle;
+  h2?: HeadingStyle;
+  h3?: HeadingStyle;
+  h4?: HeadingStyle;
+  h5?: HeadingStyle;
+  h6?: HeadingStyle;
+  blockquote?: {
+    borderColor?: ColorValue;
+    borderWidth?: number;
+    gapWidth?: number;
+    color?: ColorValue;
+  };
+  codeblock?: {
+    color?: ColorValue;
+    borderRadius?: number;
+    backgroundColor?: ColorValue;
+  };
+  code?: {
+    color?: ColorValue;
+    backgroundColor?: ColorValue;
+  };
+  a?: {
+    color?: ColorValue;
+    textDecorationLine?: 'underline' | 'none';
+  };
+  mention?: Record<string, MentionStyleProperties> | MentionStyleProperties;
+  ol?: {
+    gapWidth?: number;
+    marginLeft?: number;
+    markerFontWeight?: TextStyle['fontWeight'];
+    markerColor?: ColorValue;
+  };
+  ul?: {
+    bulletColor?: ColorValue;
+    bulletSize?: number;
+    marginLeft?: number;
+    gapWidth?: number;
+  };
+  ulCheckbox?: {
+    boxSize?: number;
+    gapWidth?: number;
+    marginLeft?: number;
+    boxColor?: ColorValue;
+  };
+}

package/src/{normalizeHtmlStyle.ts → utils/normalizeHtmlStyle.ts}

@@ -1,9 +1,6 @@
-import type { HtmlStyle } from './EnrichedTextInput';
 import { type ColorValue, processColor } from 'react-native';
-import type {
-  MentionStyleProperties,
-  HtmlStyleInternal,
-} from './EnrichedTextInputNativeComponent';
+import type { HtmlStyleInternal } from '../spec/EnrichedTextInputNativeComponent';
+import type { HtmlStyle, MentionStyleProperties } from '../types';
 
 const defaultStyle: Required<HtmlStyle> = {
   h1: {
@@ -18,6 +15,18 @@ const defaultStyle: Required<HtmlStyle> = {
     fontSize: 20,
     bold: false,
   },
+  h4: {
+    fontSize: 16,
+    bold: false,
+  },
+  h5: {
+    fontSize: 14,
+    bold: false,
+  },
+  h6: {
+    fontSize: 12,
+    bold: false,
+  },
   blockquote: {
     borderColor: 'darkgray',
     borderWidth: 4,
@@ -54,6 +63,12 @@ const defaultStyle: Required<HtmlStyle> = {
     marginLeft: 16,
     gapWidth: 16,
   },
+  ulCheckbox: {
+    boxSize: 24,
+    gapWidth: 16,
+    marginLeft: 16,
+    boxColor: 'blue',
+  },
 };
 
 const isMentionStyleRecord = (

package/src/utils/nullthrows.ts

@@ -0,0 +1,7 @@
+export const nullthrows = <T>(value: T | null | undefined): T => {
+  if (value == null) {
+    throw new Error('Unexpected null or undefined value');
+  }
+
+  return value;
+};