react-native-enriched 0.0.0 → 0.1.1

package/src/EnrichedTextInputNativeComponent.ts

@@ -0,0 +1,235 @@
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
+import type {
+  DirectEventHandler,
+  Float,
+  Int32,
+  UnsafeMixed,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import React from 'react';
+
+export interface OnChangeTextEvent {
+  value: string;
+}
+
+export interface OnChangeHtmlEvent {
+  value: string;
+}
+
+export interface OnChangeStateEvent {
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
+  isStrikeThrough: boolean;
+  isInlineCode: boolean;
+  isH1: boolean;
+  isH2: boolean;
+  isH3: boolean;
+  isCodeBlock: boolean;
+  isBlockQuote: boolean;
+  isOrderedList: boolean;
+  isUnorderedList: boolean;
+  isLink: boolean;
+  isImage: boolean;
+  isMention: boolean;
+}
+
+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 MentionStyleProperties {
+  color?: ColorValue;
+  backgroundColor?: ColorValue;
+  textDecorationLine?: 'underline' | 'none';
+}
+
+export interface HtmlStyleInternal {
+  h1?: {
+    fontSize?: Float;
+    bold?: boolean;
+  };
+  h2?: {
+    fontSize?: Float;
+    bold?: boolean;
+  };
+  h3?: {
+    fontSize?: Float;
+    bold?: boolean;
+  };
+  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;
+  img?: {
+    width?: Float;
+    height?: Float;
+  };
+  ol?: {
+    gapWidth?: Float;
+    marginLeft?: Float;
+    markerFontWeight?: string;
+    markerColor?: ColorValue;
+  };
+  ul?: {
+    bulletColor?: ColorValue;
+    bulletSize?: Float;
+    marginLeft?: Float;
+    gapWidth?: Float;
+  };
+}
+
+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;
+
+  // event callbacks
+  onInputFocus?: DirectEventHandler<null>;
+  onInputBlur?: DirectEventHandler<null>;
+  onChangeText?: DirectEventHandler<OnChangeTextEvent>;
+  onChangeHtml?: DirectEventHandler<OnChangeHtmlEvent>;
+  onChangeState?: DirectEventHandler<OnChangeStateEvent>;
+  onLinkDetected?: DirectEventHandler<OnLinkDetected>;
+  onMentionDetected?: DirectEventHandler<OnMentionDetectedInternal>;
+  onMention?: DirectEventHandler<OnMentionEvent>;
+  onChangeSelection?: DirectEventHandler<OnChangeSelectionEvent>;
+
+  // 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;
+
+  // Used for onChangeHtml event performance optimization
+  isOnChangeHtmlSet: boolean;
+
+  // Experimental
+  androidExperimentalSynchronousEvents: 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;
+
+  // 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;
+  toggleCodeBlock: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleBlockQuote: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleOrderedList: (viewRef: React.ElementRef<ComponentType>) => void;
+  toggleUnorderedList: (viewRef: React.ElementRef<ComponentType>) => void;
+  addLink: (
+    viewRef: React.ElementRef<ComponentType>,
+    start: Int32,
+    end: Int32,
+    text: string,
+    url: string
+  ) => void;
+  addImage: (viewRef: React.ElementRef<ComponentType>, uri: string) => void;
+  startMention: (
+    viewRef: React.ElementRef<ComponentType>,
+    indicator: string
+  ) => void;
+  addMention: (
+    viewRef: React.ElementRef<ComponentType>,
+    indicator: string,
+    text: string,
+    payload: string
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    // General commands
+    'focus',
+    'blur',
+    'setValue',
+
+    // Text formatting commands
+    'toggleBold',
+    'toggleItalic',
+    'toggleUnderline',
+    'toggleStrikeThrough',
+    'toggleInlineCode',
+    'toggleH1',
+    'toggleH2',
+    'toggleH3',
+    'toggleCodeBlock',
+    'toggleBlockQuote',
+    'toggleOrderedList',
+    'toggleUnorderedList',
+    'addLink',
+    'addImage',
+    'startMention',
+    'addMention',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>('EnrichedTextInputView', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/index.tsx

@@ -0,0 +1,9 @@
+export * from './EnrichedTextInput';
+export type {
+  OnChangeTextEvent,
+  OnChangeHtmlEvent,
+  OnChangeStateEvent,
+  OnLinkDetected,
+  OnMentionDetected,
+  OnChangeSelectionEvent,
+} from './EnrichedTextInputNativeComponent';

package/src/normalizeHtmlStyle.ts

@@ -0,0 +1,188 @@
+import type { HtmlStyle } from './EnrichedTextInput';
+import { type ColorValue, processColor } from 'react-native';
+import type {
+  MentionStyleProperties,
+  HtmlStyleInternal,
+} from './EnrichedTextInputNativeComponent';
+
+const defaultStyle: Required<HtmlStyle> = {
+  h1: {
+    fontSize: 32,
+    bold: false,
+  },
+  h2: {
+    fontSize: 24,
+    bold: false,
+  },
+  h3: {
+    fontSize: 20,
+    bold: false,
+  },
+  blockquote: {
+    borderColor: 'darkgray',
+    borderWidth: 4,
+    gapWidth: 16,
+    color: undefined,
+  },
+  codeblock: {
+    color: 'black',
+    borderRadius: 8,
+    backgroundColor: 'darkgray',
+  },
+  code: {
+    color: 'red',
+    backgroundColor: 'darkgray',
+  },
+  a: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+  mention: {
+    color: 'blue',
+    backgroundColor: 'yellow',
+    textDecorationLine: 'underline',
+  },
+  img: {
+    width: 80,
+    height: 80,
+  },
+  ol: {
+    gapWidth: 16,
+    marginLeft: 16,
+    markerFontWeight: undefined,
+    markerColor: undefined,
+  },
+  ul: {
+    bulletColor: 'black',
+    bulletSize: 8,
+    marginLeft: 16,
+    gapWidth: 16,
+  },
+};
+
+const isMentionStyleRecord = (
+  mentionStyle: HtmlStyle['mention']
+): mentionStyle is Record<string, MentionStyleProperties> => {
+  if (
+    mentionStyle &&
+    typeof mentionStyle === 'object' &&
+    !Array.isArray(mentionStyle)
+  ) {
+    const keys = Object.keys(mentionStyle);
+
+    return (
+      keys.length > 0 &&
+      keys.every(
+        (key) =>
+          typeof (mentionStyle as Record<string, unknown>)[key] === 'object' &&
+          (mentionStyle as Record<string, unknown>)[key] !== null
+      )
+    );
+  }
+  return false;
+};
+
+const convertToHtmlStyleInternal = (
+  style: HtmlStyle,
+  mentionIndicators: string[]
+): HtmlStyleInternal => {
+  const mentionStyles: Record<string, MentionStyleProperties> = {};
+
+  mentionIndicators.forEach((indicator) => {
+    mentionStyles[indicator] = {
+      ...defaultStyle.mention,
+      ...(isMentionStyleRecord(style.mention)
+        ? (style.mention[indicator] ?? style.mention.default ?? {})
+        : style.mention),
+    };
+  });
+
+  let markerFontWeight: string | undefined;
+  if (style.ol?.markerFontWeight) {
+    if (typeof style.ol?.markerFontWeight === 'number') {
+      markerFontWeight = String(style.ol?.markerFontWeight);
+    } else if (typeof style.ol?.markerFontWeight === 'string') {
+      markerFontWeight = style.ol?.markerFontWeight;
+    }
+  }
+
+  const olStyles = {
+    ...style.ol,
+    markerFontWeight: markerFontWeight,
+  };
+
+  return {
+    ...style,
+    mention: mentionStyles,
+    ol: olStyles,
+  };
+};
+
+const assignDefaultValues = (style: HtmlStyleInternal): HtmlStyleInternal => {
+  const merged: Record<string, any> = { ...defaultStyle };
+
+  for (const key in style) {
+    if (key === 'mention') {
+      merged[key] = {
+        ...(style.mention as object),
+      };
+
+      continue;
+    }
+
+    merged[key] = {
+      ...defaultStyle[key as keyof HtmlStyle],
+      ...(style[key as keyof HtmlStyle] as object),
+    };
+  }
+
+  return merged;
+};
+
+const parseStyle = (name: string, value: unknown) => {
+  if (name !== 'color' && !name.endsWith('Color')) {
+    return value;
+  }
+
+  return processColor(value as ColorValue);
+};
+
+const parseColors = (style: HtmlStyleInternal): HtmlStyleInternal => {
+  const finalStyle: Record<string, any> = {};
+
+  for (const [tagName, tagStyle] of Object.entries(style)) {
+    const tagStyles: Record<string, any> = {};
+
+    if (tagName === 'mention') {
+      for (const [indicator, mentionStyle] of Object.entries(tagStyle)) {
+        tagStyles[indicator] = {};
+
+        for (const [styleName, styleValue] of Object.entries(
+          mentionStyle as MentionStyleProperties
+        )) {
+          tagStyles[indicator][styleName] = parseStyle(styleName, styleValue);
+        }
+      }
+
+      finalStyle[tagName] = tagStyles;
+      continue;
+    }
+
+    for (const [styleName, styleValue] of Object.entries(tagStyle)) {
+      tagStyles[styleName] = parseStyle(styleName, styleValue);
+    }
+
+    finalStyle[tagName] = tagStyles;
+  }
+
+  return finalStyle;
+};
+
+export const normalizeHtmlStyle = (
+  style: HtmlStyle,
+  mentionIndicators: string[]
+): HtmlStyleInternal => {
+  const converted = convertToHtmlStyleInternal(style, mentionIndicators);
+  const withDefaults = assignDefaultValues(converted);
+  return parseColors(withDefaults);
+};