react-native-enriched-html 0.0.0 → 1.1.0-nightly-20260617-3dfd09072

package/src/spec/EnrichedTextInputNativeComponent.ts

@@ -0,0 +1,524 @@
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
+import type {
+  BubblingEventHandler,
+  DirectEventHandler,
+  Float,
+  Int32,
+  UnsafeMixed,
+} from 'react-native/Libraries/Types/CodegenTypes';
+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;
+}
+
+export interface OnChangeHtmlEvent {
+  value: string;
+}
+
+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;
+  };
+  alignment: string;
+}
+
+export interface OnLinkDetected {
+  text: string;
+  url: string;
+  start: Int32;
+  end: Int32;
+}
+
+export interface OnMentionDetectedInternal {
+  text: string;
+  indicator: string;
+  payload: string;
+}
+
+export interface OnMentionDetected {
+  text: string;
+  indicator: string;
+  attributes: Record<string, string>;
+}
+
+export interface OnMentionEvent {
+  indicator: string;
+  text: UnsafeMixed;
+}
+
+export interface OnChangeSelectionEvent {
+  start: Int32;
+  end: Int32;
+  text: string;
+}
+
+export interface OnRequestHtmlResultEvent {
+  requestId: Int32;
+  html: UnsafeMixed;
+}
+
+export interface OnSubmitEditing {
+  text: string;
+}
+
+export interface OnKeyPressEvent {
+  key: string;
+}
+
+export interface ContextMenuItemConfig {
+  text: string;
+}
+
+export interface TextShortcut {
+  trigger: string;
+  style: string;
+}
+
+export interface OnContextMenuItemPressEvent {
+  itemText: string;
+  selectedText: string;
+  selectionStart: Int32;
+  selectionEnd: Int32;
+  styleState: {
+    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;
+    };
+    alignment: 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?: Heading;
+  h2?: Heading;
+  h3?: Heading;
+  h4?: Heading;
+  h5?: Heading;
+  h6?: Heading;
+  blockquote?: {
+    borderColor?: ColorValue;
+    borderWidth?: Float;
+    gapWidth?: Float;
+    color?: ColorValue;
+  };
+  codeblock?: {
+    color?: ColorValue;
+    borderRadius?: Float;
+    backgroundColor?: ColorValue;
+  };
+  code?: {
+    color?: ColorValue;
+    backgroundColor?: ColorValue;
+  };
+  a?: {
+    color?: ColorValue;
+    textDecorationLine?: string;
+  };
+  // This is a workaround for the fact that codegen does not support Records.
+  // On native Android side this will become a ReadableMap, on native iOS we can work with a folly::dynamic object.
+  mention?: UnsafeMixed;
+  ol?: {
+    gapWidth?: Float;
+    marginLeft?: Float;
+    markerFontWeight?: string;
+    markerColor?: ColorValue;
+  };
+  ul?: {
+    bulletColor?: ColorValue;
+    bulletSize?: Float;
+    marginLeft?: Float;
+    gapWidth?: Float;
+  };
+  ulCheckbox?: {
+    gapWidth?: Float;
+    boxSize?: Float;
+    marginLeft?: Float;
+    boxColor?: ColorValue;
+  };
+}
+
+export interface NativeProps extends ViewProps {
+  // base props
+  autoFocus?: boolean;
+  editable?: boolean;
+  defaultValue?: string;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  mentionIndicators: string[];
+  cursorColor?: ColorValue;
+  selectionColor?: ColorValue;
+  autoCapitalize?: string;
+  htmlStyle?: HtmlStyleInternal;
+  scrollEnabled?: boolean;
+  linkRegex?: LinkNativeRegex;
+  contextMenuItems?: ReadonlyArray<Readonly<ContextMenuItemConfig>>;
+  textShortcuts: ReadonlyArray<Readonly<TextShortcut>>;
+  returnKeyType?: string;
+  returnKeyLabel?: string;
+  submitBehavior?: string;
+  allowFontScaling?: boolean;
+
+  // event callbacks
+  onInputFocus?: DirectEventHandler<TargetedEvent>;
+  onInputBlur?: DirectEventHandler<TargetedEvent>;
+  onChangeText?: DirectEventHandler<OnChangeTextEvent>;
+  onChangeHtml?: DirectEventHandler<OnChangeHtmlEvent>;
+  onChangeState?: DirectEventHandler<OnChangeStateEvent>;
+  onLinkDetected?: DirectEventHandler<OnLinkDetected>;
+  onMentionDetected?: DirectEventHandler<OnMentionDetectedInternal>;
+  onMention?: DirectEventHandler<OnMentionEvent>;
+  onChangeSelection?: DirectEventHandler<OnChangeSelectionEvent>;
+  onRequestHtmlResult?: DirectEventHandler<OnRequestHtmlResultEvent>;
+  onInputKeyPress?: DirectEventHandler<OnKeyPressEvent>;
+  onPasteImages?: DirectEventHandler<OnPasteImagesEvent>;
+  onContextMenuItemPress?: DirectEventHandler<OnContextMenuItemPressEvent>;
+  onSubmitEditing?: BubblingEventHandler<OnSubmitEditing>;
+
+  // Style related props - used for generating proper setters in component's manager
+  // These should not be passed as regular props
+  color?: ColorValue;
+  fontSize?: Float;
+  lineHeight?: Float;
+  fontFamily?: string;
+  fontWeight?: string;
+  fontStyle?: string;
+
+  // Used for onChangeHtml event performance optimization
+  isOnChangeHtmlSet: boolean;
+  // Used for onChangeText event performance optimization
+  isOnChangeTextSet: boolean;
+
+  // Experimental
+  androidExperimentalSynchronousEvents: boolean;
+  useHtmlNormalizer: boolean;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  // General commands
+  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;
+  toggleItalic: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleUnderline: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleStrikeThrough: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleInlineCode: (viewRef: React.ElementRef<ComponentType>) => void;
+  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,
+    end: Int32,
+    text: string,
+    url: string
+  ) => void;
+  removeLink: (
+    viewRef: React.ElementRef<ComponentType>,
+    start: Int32,
+    end: Int32
+  ) => void;
+  addImage: (
+    viewRef: React.ElementRef<ComponentType>,
+    uri: string,
+    width: Float,
+    height: Float
+  ) => void;
+  startMention: (
+    viewRef: React.ElementRef<ComponentType>,
+    indicator: string
+  ) => void;
+  addMention: (
+    viewRef: React.ElementRef<ComponentType>,
+    indicator: string,
+    text: string,
+    payload: string
+  ) => void;
+  requestHTML: (
+    viewRef: React.ElementRef<ComponentType>,
+    requestId: Int32
+  ) => void;
+  setTextAlignment: (
+    viewRef: React.ElementRef<ComponentType>,
+    alignment: string
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    // General commands
+    'focus',
+    'blur',
+    'setValue',
+    'setSelection',
+
+    // Text formatting commands
+    'toggleBold',
+    'toggleItalic',
+    'toggleUnderline',
+    'toggleStrikeThrough',
+    'toggleInlineCode',
+    'toggleH1',
+    'toggleH2',
+    'toggleH3',
+    'toggleH4',
+    'toggleH5',
+    'toggleH6',
+    'toggleCodeBlock',
+    'toggleBlockQuote',
+    'toggleOrderedList',
+    'toggleUnorderedList',
+    'toggleCheckboxList',
+    'addLink',
+    'removeLink',
+    'addImage',
+    'startMention',
+    'addMention',
+    'requestHTML',
+    'setTextAlignment',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>('EnrichedTextInputView', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/spec/EnrichedTextNativeComponent.ts

@@ -0,0 +1,110 @@
+import { codegenNativeComponent, type ColorValue } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Float,
+  Int32,
+  UnsafeMixed,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type Heading = {
+  fontSize?: Float;
+  bold?: boolean;
+};
+
+export interface EnrichedTextHtmlStyleInternal {
+  h1?: Heading;
+  h2?: Heading;
+  h3?: Heading;
+  h4?: Heading;
+  h5?: Heading;
+  h6?: Heading;
+  blockquote?: {
+    borderColor?: ColorValue;
+    borderWidth?: Float;
+    gapWidth?: Float;
+    color?: ColorValue;
+  };
+  codeblock?: {
+    color?: ColorValue;
+    borderRadius?: Float;
+    backgroundColor?: ColorValue;
+  };
+  code?: {
+    color?: ColorValue;
+    backgroundColor?: ColorValue;
+  };
+  a?: {
+    color?: ColorValue;
+    textDecorationLine?: string;
+    pressColor?: ColorValue;
+    pressTextDecorationLine?: string;
+  };
+  // This is a workaround for the fact that codegen does not support Records.
+  // On native Android side this will become a ReadableMap, on native iOS we can work with a folly::dynamic object.
+  mention?: UnsafeMixed;
+  ol?: {
+    gapWidth?: Float;
+    marginLeft?: Float;
+    markerFontWeight?: string;
+    markerColor?: ColorValue;
+  };
+  ul?: {
+    bulletColor?: ColorValue;
+    bulletSize?: Float;
+    marginLeft?: Float;
+    gapWidth?: Float;
+  };
+  ulCheckbox?: {
+    gapWidth?: Float;
+    boxSize?: Float;
+    marginLeft?: Float;
+    boxColor?: ColorValue;
+  };
+}
+
+export interface OnLinkPressEvent {
+  url: string;
+}
+
+export interface OnMentionPressEventInternal {
+  text: string;
+  indicator: string;
+  attributes: UnsafeMixed;
+}
+
+export interface OnMentionPressEvent {
+  text: string;
+  indicator: string;
+  attributes: Record<string, string>;
+}
+
+export interface NativeProps extends ViewProps {
+  // Custom props
+  text: string;
+  htmlStyle?: EnrichedTextHtmlStyleInternal;
+  useHtmlNormalizer: boolean;
+  allowFontScaling?: boolean;
+
+  // ReactNative TextProps
+  ellipsizeMode: string;
+  numberOfLines: Int32;
+  selectable: boolean;
+  selectionColor?: ColorValue;
+
+  // Events
+  onLinkPress?: DirectEventHandler<OnLinkPressEvent>;
+  onMentionPress?: DirectEventHandler<OnMentionPressEventInternal>;
+
+  // Style related props - used for generating proper setters in component's manager
+  // These should not be passed as regular props
+  color?: ColorValue;
+  fontSize?: Float;
+  fontFamily?: string;
+  fontWeight?: string;
+  fontStyle?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('EnrichedTextView', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;