[DO NOT MERGE] feat: set up project for web + native

apps/example-web/src/App.tsx

@@ -1,10 +1,11 @@
 import './App.css';
+import { EnrichedTextInput } from 'react-native-enriched';
 
 function App() {
   return (
     <div className="container">
       <div>Text input</div>
-      <input type="text" placeholder="Type something..." />
+      <EnrichedTextInput placeholder="Type something..." />
     </div>
   );
 }

apps/example-web/tsconfig.app.json

@@ -1,8 +1,11 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
+    "paths": {
+      "react-native-enriched": ["../../src/index"]
+    }
   },
   "include": ["src"]
 }

apps/example-web/tsconfig.node.json

@@ -1,9 +1,12 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "lib": ["ES2023"],
     "types": ["node"],
+    "paths": {
+      "react-native-enriched": ["../../src/index"]
+    }
   },
   "include": ["vite.config.ts"]
 }

apps/example-web/vite.config.ts

@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import path from 'path';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      'react-native-enriched': path.resolve(__dirname, '../../src/index.tsx'),
+    },
+  },
 });

apps/example/src/App.tsx

@@ -318,18 +318,18 @@ export default function App() {
             cursorColor="dodgerblue"
             autoCapitalize="sentences"
             linkRegex={LINK_REGEX}
-            onChangeText={(e) => handleChangeText(e.nativeEvent)}
-            onChangeHtml={(e) => handleChangeHtml(e.nativeEvent)}
-            onChangeState={(e) => handleChangeState(e.nativeEvent)}
+            onChangeText={handleChangeText}
+            onChangeHtml={handleChangeHtml}
+            onChangeState={handleChangeState}
             onLinkDetected={handleLinkDetected}
             onMentionDetected={console.log}
             onStartMention={handleStartMention}
             onChangeMention={handleChangeMention}
             onEndMention={handleEndMention}
             onFocus={handleFocusEvent}
             onBlur={handleBlurEvent}
-            onChangeSelection={(e) => handleSelectionChangeEvent(e.nativeEvent)}
-            onKeyPress={(e) => handleKeyPress(e.nativeEvent)}
+            onChangeSelection={handleSelectionChangeEvent}
+            onKeyPress={handleKeyPress}
             androidExperimentalSynchronousEvents={
               ANDROID_EXPERIMENTAL_SYNCHRONOUS_EVENTS
             }

apps/example/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "react-native-enriched": ["../../src/index.native"]
+    }
+  }
+}

lefthook.yml

@@ -7,7 +7,7 @@ pre-commit:
 
     types:
       glob: "*.{js,ts, jsx, tsx}"
-      run: npx tsc
+      run: yarn typecheck:all
 
     lint-android:
       glob: "**/*.{kt,kts,java,gradle}"

package.json

@@ -2,11 +2,17 @@
   "name": "react-native-enriched",
   "version": "0.3.0",
   "description": "Rich Text Editor component for React Native",
-  "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
+  "module": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
+  "react-native": "./lib/module/index.native.js",
+  "sideEffects": false,
   "exports": {
     ".": {
+      "react-native": {
+        "types": "./lib/typescript/src/index.native.d.ts",
+        "default": "./lib/module/index.native.js"
+      },
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
@@ -35,7 +41,10 @@
     "example": "yarn workspace react-native-enriched-example",
     "example-web": "yarn workspace react-native-enriched-web-example",
     "test": "jest --passWithNoTests",
-    "typecheck": "tsc",
+    "typecheck": "tsc -p tsconfig.build.json",
+    "typecheck:example": "tsc -p apps/example/tsconfig.json",
+    "typecheck:example-web": "tsc -p apps/example-web/tsconfig.json",
+    "typecheck:all": "yarn typecheck && yarn typecheck:example && yarn typecheck:example-web",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:android": "cd apps/example/android && ./gradlew lintVerify",
     "lint:android:fix": "cd apps/example/android && ./gradlew lintFormat",

src/common/defaultProps.ts

@@ -0,0 +1,8 @@
+export const ENRICHED_TEXT_INPUT_DEFAULTS = {
+  editable: true,
+  mentionIndicators: ['@'],
+  autoCapitalize: 'sentences' as const,
+  htmlStyle: {},
+  androidExperimentalSynchronousEvents: false,
+  scrollEnabled: true,
+};

src/common/types.ts

@@ -0,0 +1,67 @@
+// Re-export event types from the NativeComponent spec file (source of truth for Codegen)
+export type {
+  OnChangeTextEvent,
+  OnChangeHtmlEvent,
+  OnChangeStateEvent,
+  OnChangeStateDeprecatedEvent,
+  OnKeyPressEvent,
+} from '../spec/EnrichedTextInputNativeComponent';
+
+export interface OnMentionDetected {
+  text: string;
+  indicator: string;
+  attributes: Record<string, string>;
+}
+
+export interface OnLinkDetected {
+  text: string;
+  url: string;
+  start: number;
+  end: number;
+}
+
+export interface OnChangeSelectionEvent {
+  start: number;
+  end: number;
+  text: string;
+}
+
+export interface OnChangeMentionEvent {
+  indicator: string;
+  text: string;
+}
+
+export interface EnrichedTextInputInstanceBase {
+  // General commands
+  focus: () => void;
+  blur: () => void;
+  setValue: (value: string) => void;
+  setSelection: (start: number, end: number) => void;
+  getHTML: () => Promise<string>;
+
+  // Text formatting commands
+  toggleBold: () => void;
+  toggleItalic: () => void;
+  toggleUnderline: () => void;
+  toggleStrikeThrough: () => void;
+  toggleInlineCode: () => void;
+  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;
+  setMention: (
+    indicator: string,
+    text: string,
+    attributes?: Record<string, string>
+  ) => void;
+}

src/index.native.tsx

@@ -0,0 +1,13 @@
+export * from './native/EnrichedTextInput';
+export type {
+  OnChangeTextEvent,
+  OnChangeHtmlEvent,
+  OnChangeMentionEvent,
+  OnChangeSelectionEvent,
+  OnChangeStateEvent,
+  OnChangeStateDeprecatedEvent,
+  OnKeyPressEvent,
+  OnLinkDetected,
+  OnMentionDetected,
+} from './common/types';
+export type { HtmlStyle, MentionStyleProperties } from './native/types';

src/index.tsx

@@ -1,12 +1,12 @@
-export * from './EnrichedTextInput';
+export * from './web/EnrichedTextInput';
 export type {
   OnChangeTextEvent,
   OnChangeHtmlEvent,
+  OnChangeMentionEvent,
+  OnChangeSelectionEvent,
   OnChangeStateEvent,
   OnChangeStateDeprecatedEvent,
+  OnKeyPressEvent,
   OnLinkDetected,
   OnMentionDetected,
-  OnChangeSelectionEvent,
-  OnKeyPressEvent,
-} from './spec/EnrichedTextInputNativeComponent';
-export type { HtmlStyle, MentionStyleProperties } from './types';
+} from './common/types';