react-native-enriched 0.0.0 → 0.1.0

package/lib/typescript/src/EnrichedTextInputNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnrichedTextInputNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/EnrichedTextInputNativeComponent.ts"],"names":[],"mappings":"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"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EnrichedTextInput';
+export type { OnChangeTextEvent, OnChangeHtmlEvent, OnChangeStateEvent, OnLinkDetected, OnMentionDetected, OnChangeSelectionEvent, } from './EnrichedTextInputNativeComponent';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,oCAAoC,CAAC"}

package/lib/typescript/src/normalizeHtmlStyle.d.ts

@@ -0,0 +1,4 @@
+import type { HtmlStyle } from './EnrichedTextInput';
+import type { HtmlStyleInternal } from './EnrichedTextInputNativeComponent';
+export declare const normalizeHtmlStyle: (style: HtmlStyle, mentionIndicators: string[]) => HtmlStyleInternal;
+//# sourceMappingURL=normalizeHtmlStyle.d.ts.map

package/lib/typescript/src/normalizeHtmlStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeHtmlStyle.d.ts","sourceRoot":"","sources":["../../../src/normalizeHtmlStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,oCAAoC,CAAC;AA+K5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,SAAS,EAChB,mBAAmB,MAAM,EAAE,KAC1B,iBAIF,CAAC"}

package/package.json

@@ -1,4 +1,175 @@
 {
   "name": "react-native-enriched",
-  "version": "0.0.0"
+  "version": "0.1.0",
+  "description": "Rich Text Editor component for React Native",
+  "source": "./src/index.tsx",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-enriched-example",
+    "test": "jest --passWithNoTests",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "release": "release-it",
+    "android-studio": "open -a 'Android Studio' example/android"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/software-mansion-labs/react-native-rich-text-editor.git"
+  },
+  "author": "Software Mansion <contact@swmansion.com> (https://swmansion.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/software-mansion-labs/react-native-rich-text-editor/issues"
+  },
+  "homepage": "https://github.com/software-mansion-labs/react-native-rich-text-editor#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native/eslint-config": "^0.81.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.1.0",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "19.1.0",
+    "react-native": "0.81.0",
+    "react-native-builder-bob": "^0.40.6",
+    "release-it": "^17.10.0",
+    "turbo": "^1.10.7",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "codegen",
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "RNEnrichedTextInputViewSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "outputDir": {
+      "ios": "ios/generated",
+      "android": "android/generated"
+    },
+    "android": {
+      "javaPackageName": "com.swmansion.enriched"
+    },
+    "ios": {
+      "componentProvider": {
+        "EnrichedTextInputView": "EnrichedTextInputView"
+      }
+    },
+    "includesGeneratedCode": true
+  },
+  "create-react-native-library": {
+    "languages": "kotlin-objc",
+    "type": "fabric-view",
+    "version": "0.49.8"
+  }
 }

package/react-native.config.js

@@ -0,0 +1,13 @@
+/**
+ * @type {import('@react-native-community/cli-types').UserDependencyConfig}
+ */
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        cmakeListsPath: '../android/src/main/new_arch/CMakeLists.txt',
+        componentDescriptors: ['EnrichedTextInputComponentDescriptor'],
+      },
+    },
+  },
+};

package/src/EnrichedTextInput.tsx

@@ -0,0 +1,358 @@
+import {
+  type Component,
+  type RefObject,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import EnrichedTextInputNativeComponent, {
+  Commands,
+  type NativeProps,
+  type OnChangeHtmlEvent,
+  type OnChangeSelectionEvent,
+  type OnChangeStateEvent,
+  type OnChangeTextEvent,
+  type OnLinkDetected,
+  type OnMentionEvent,
+  type OnMentionDetected,
+  type OnMentionDetectedInternal,
+  type MentionStyleProperties,
+} from './EnrichedTextInputNativeComponent';
+import type {
+  ColorValue,
+  HostInstance,
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+  NativeMethods,
+  NativeSyntheticEvent,
+  TextStyle,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import { normalizeHtmlStyle } from './normalizeHtmlStyle';
+
+export interface EnrichedTextInputInstance extends NativeMethods {
+  // General commands
+  focus: () => void;
+  blur: () => void;
+  setValue: (value: string) => void;
+
+  // Text formatting commands
+  toggleBold: () => void;
+  toggleItalic: () => void;
+  toggleUnderline: () => void;
+  toggleStrikeThrough: () => void;
+  toggleInlineCode: () => void;
+  toggleH1: () => void;
+  toggleH2: () => void;
+  toggleH3: () => void;
+  toggleCodeBlock: () => void;
+  toggleBlockQuote: () => void;
+  toggleOrderedList: () => void;
+  toggleUnorderedList: () => void;
+  setLink: (start: number, end: number, text: string, url: string) => void;
+  setImage: (src: string) => void;
+  startMention: (indicator: string) => void;
+  setMention: (
+    indicator: string,
+    text: string,
+    attributes?: Record<string, string>
+  ) => void;
+}
+
+export interface OnChangeMentionEvent {
+  indicator: string;
+  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;
+  img?: {
+    width?: number;
+    height?: number;
+  };
+  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;
+  editable?: boolean;
+  mentionIndicators?: string[];
+  defaultValue?: string;
+  placeholder?: string;
+  placeholderTextColor?: ColorValue;
+  cursorColor?: ColorValue;
+  selectionColor?: ColorValue;
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  htmlStyle?: HtmlStyle;
+  style?: ViewStyle | TextStyle;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onChangeText?: (e: NativeSyntheticEvent<OnChangeTextEvent>) => void;
+  onChangeHtml?: (e: NativeSyntheticEvent<OnChangeHtmlEvent>) => void;
+  onChangeState?: (e: NativeSyntheticEvent<OnChangeStateEvent>) => 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;
+  /**
+   * If true, Android will use experimental synchronous events.
+   * This will prevent from input flickering when updating component size.
+   * However, this is an experimental feature, which has not been thoroughly tested.
+   * We may decide to enable it by default in a future release.
+   * Disabled by default.
+   */
+  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) => {
+  console.warn(
+    `Looks like you are trying to set a "${indicator}" but it's not in the mentionIndicators prop`
+  );
+};
+
+type ComponentType = (Component<NativeProps, {}, any> & NativeMethods) | null;
+
+export const EnrichedTextInput = ({
+  ref,
+  autoFocus,
+  editable = true,
+  mentionIndicators = ['@'],
+  defaultValue,
+  placeholder,
+  placeholderTextColor,
+  cursorColor,
+  selectionColor,
+  style,
+  autoCapitalize = 'sentences',
+  htmlStyle = {},
+  onFocus,
+  onBlur,
+  onChangeText,
+  onChangeHtml,
+  onChangeState,
+  onLinkDetected,
+  onMentionDetected,
+  onStartMention,
+  onChangeMention,
+  onEndMention,
+  onChangeSelection,
+  androidExperimentalSynchronousEvents = false,
+  ...rest
+}: EnrichedTextInputProps) => {
+  const nativeRef = useRef<ComponentType | null>(null);
+
+  const normalizedHtmlStyle = useMemo(
+    () => normalizeHtmlStyle(htmlStyle, mentionIndicators),
+    [htmlStyle, mentionIndicators]
+  );
+
+  useImperativeHandle(ref, () => ({
+    measureInWindow: (callback: MeasureInWindowOnSuccessCallback) => {
+      nullthrows(nativeRef.current).measureInWindow(callback);
+    },
+    measure: (callback: MeasureOnSuccessCallback) => {
+      nullthrows(nativeRef.current).measure(callback);
+    },
+    measureLayout: (
+      relativeToNativeComponentRef: HostInstance | number,
+      onSuccess: MeasureLayoutOnSuccessCallback,
+      onFail?: () => void
+    ) => {
+      nullthrows(nativeRef.current).measureLayout(
+        relativeToNativeComponentRef,
+        onSuccess,
+        onFail
+      );
+    },
+    setNativeProps: (nativeProps: object) => {
+      nullthrows(nativeRef.current).setNativeProps(nativeProps);
+    },
+    focus: () => {
+      Commands.focus(nullthrows(nativeRef.current));
+    },
+    blur: () => {
+      Commands.blur(nullthrows(nativeRef.current));
+    },
+    setValue: (value: string) => {
+      Commands.setValue(nullthrows(nativeRef.current), value);
+    },
+    toggleBold: () => {
+      Commands.toggleBold(nullthrows(nativeRef.current));
+    },
+    toggleItalic: () => {
+      Commands.toggleItalic(nullthrows(nativeRef.current));
+    },
+    toggleUnderline: () => {
+      Commands.toggleUnderline(nullthrows(nativeRef.current));
+    },
+    toggleStrikeThrough: () => {
+      Commands.toggleStrikeThrough(nullthrows(nativeRef.current));
+    },
+    toggleInlineCode: () => {
+      Commands.toggleInlineCode(nullthrows(nativeRef.current));
+    },
+    toggleH1: () => {
+      Commands.toggleH1(nullthrows(nativeRef.current));
+    },
+    toggleH2: () => {
+      Commands.toggleH2(nullthrows(nativeRef.current));
+    },
+    toggleH3: () => {
+      Commands.toggleH3(nullthrows(nativeRef.current));
+    },
+    toggleCodeBlock: () => {
+      Commands.toggleCodeBlock(nullthrows(nativeRef.current));
+    },
+    toggleBlockQuote: () => {
+      Commands.toggleBlockQuote(nullthrows(nativeRef.current));
+    },
+    toggleOrderedList: () => {
+      Commands.toggleOrderedList(nullthrows(nativeRef.current));
+    },
+    toggleUnorderedList: () => {
+      Commands.toggleUnorderedList(nullthrows(nativeRef.current));
+    },
+    setLink: (start: number, end: number, text: string, url: string) => {
+      Commands.addLink(nullthrows(nativeRef.current), start, end, text, url);
+    },
+    setImage: (uri: string) => {
+      Commands.addImage(nullthrows(nativeRef.current), uri);
+    },
+    setMention: (
+      indicator: string,
+      text: string,
+      attributes?: Record<string, string>
+    ) => {
+      // Codegen does not support objects as Commands parameters, so we stringify attributes
+      const parsedAttributes = JSON.stringify(attributes ?? {});
+
+      Commands.addMention(
+        nullthrows(nativeRef.current),
+        indicator,
+        text,
+        parsedAttributes
+      );
+    },
+    startMention: (indicator: string) => {
+      if (!mentionIndicators?.includes(indicator)) {
+        warnAboutMissconfiguredMentions(indicator);
+      }
+
+      Commands.startMention(nullthrows(nativeRef.current), indicator);
+    },
+  }));
+
+  const handleMentionEvent = (e: NativeSyntheticEvent<OnMentionEvent>) => {
+    const mentionText = e.nativeEvent.text;
+    const mentionIndicator = e.nativeEvent.indicator;
+
+    if (typeof mentionText === 'string') {
+      if (mentionText === '') {
+        onStartMention?.(mentionIndicator);
+      } else {
+        onChangeMention?.({ indicator: mentionIndicator, text: mentionText });
+      }
+    } else if (mentionText === null) {
+      onEndMention?.(mentionIndicator);
+    }
+  };
+
+  const handleLinkDetected = (e: NativeSyntheticEvent<OnLinkDetected>) => {
+    const { text, url, start, end } = e.nativeEvent;
+    onLinkDetected?.({ text, url, start, end });
+  };
+
+  const handleMentionDetected = (
+    e: NativeSyntheticEvent<OnMentionDetectedInternal>
+  ) => {
+    const { text, indicator, payload } = e.nativeEvent;
+    const attributes = JSON.parse(payload) as Record<string, string>;
+    onMentionDetected?.({ text, indicator, attributes });
+  };
+
+  return (
+    <EnrichedTextInputNativeComponent
+      ref={nativeRef}
+      mentionIndicators={mentionIndicators}
+      editable={editable}
+      autoFocus={autoFocus}
+      defaultValue={defaultValue}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor}
+      cursorColor={cursorColor}
+      selectionColor={selectionColor}
+      style={style}
+      autoCapitalize={autoCapitalize}
+      htmlStyle={normalizedHtmlStyle}
+      onInputFocus={onFocus}
+      onInputBlur={onBlur}
+      onChangeText={onChangeText}
+      onChangeHtml={onChangeHtml}
+      isOnChangeHtmlSet={onChangeHtml !== undefined}
+      onChangeState={onChangeState}
+      onLinkDetected={handleLinkDetected}
+      onMentionDetected={handleMentionDetected}
+      onMention={handleMentionEvent}
+      onChangeSelection={onChangeSelection}
+      androidExperimentalSynchronousEvents={
+        androidExperimentalSynchronousEvents
+      }
+      {...rest}
+    />
+  );
+};