fix: repo's typescript and ESlint configuration and errors

.playwright/tests/codeblockInlineStyles.spec.ts

@@ -13,7 +13,7 @@ const INLINE_MARK_TAG = /<\s*(b|i|u|s|code)\b/i;
 
 function htmlInsideCodeblock(serialized: string): string {
   const m = serialized.match(/<codeblock[^>]*>([\s\S]*?)<\/codeblock>/i);
-  return m ? m[1] : '';
+  return m && m[1] ? m[1] : '';
 }
 
 test.describe('codeblock inline styles', () => {

.playwright/tests/headingBoldFromStyle.spec.ts

@@ -11,7 +11,7 @@ import { toolbarButton } from '../helpers/toolbar';
 
 function h1Inner(serialized: string): string | null {
   const m = serialized.match(/<h1[^>]*>([\s\S]*?)<\/h1>/);
-  return m ? m[1] : null;
+  return m && m[1] ? m[1] : null;
 }
 
 const HTML_STYLE_H1_BOLD_TRUE = '{ "h1": { "bold": true } }';

.playwright/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+  },
+  "include": ["**/*.ts"],
+}

apps/example-web/package.json

@@ -10,23 +10,15 @@
     "lint": "eslint . --ext ts,tsx"
   },
   "dependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.22.0",
-    "eslint-plugin-react-dom": "^2.3.13",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-react-x": "^2.3.13",
     "globals": "^16.5.0",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
   },
   "engines": {

apps/example-web/tsconfig.app.json

@@ -4,8 +4,12 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
     "paths": {
-      "react-native-enriched-html": ["../../src/index.tsx"]
-    }
+      "react-native-enriched-html": ["../../src/index.tsx"],
+      "react": ["../../node_modules/@types/react"],
+      "react/*": ["../../node_modules/@types/react/*"],
+      "react-dom": ["../../node_modules/@types/react-dom"],
+      "react-dom/*": ["../../node_modules/@types/react-dom/*"],
+    },
   },
-  "include": ["src"]
+  "include": ["src"],
 }

apps/example/src/components/ToolbarButton.tsx

@@ -29,8 +29,7 @@ interface ToolbarButtonTextProps {
 }
 
 export type ToolbarButtonProps =
-  | ToolbarButtonIconProps
-  | ToolbarButtonTextProps;
+  ToolbarButtonIconProps | ToolbarButtonTextProps;
 
 export const ToolbarButton: FC<ToolbarButtonProps> = ({
   icon,

package.json

@@ -47,11 +47,12 @@
     "docs-install": "cd docs && yarn install",
     "docs-start": "cd docs && yarn start",
     "test": "jest --passWithNoTests",
-    "typecheck": "yarn typecheck:lib && yarn typecheck:example && yarn typecheck:example-web",
+    "typecheck": "yarn typecheck:lib && yarn typecheck:example && yarn typecheck:example-web && yarn typecheck:playwright",
     "typecheck:lib": "tsc -p tsconfig.build.json",
     "typecheck:example": "tsc -p apps/example/tsconfig.json",
     "typecheck:example-web": "tsc -p apps/example-web/tsconfig.app.json",
     "typecheck:docs": "cd docs && yarn typecheck",
+    "typecheck:playwright": "tsc -p .playwright/tsconfig.json",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:android": "cd apps/example/android && ./gradlew lintVerify",
     "lint:android:fix": "cd apps/example/android && ./gradlew lintFormat",
@@ -124,6 +125,7 @@
     "@react-native/jest-preset": "^0.87.0",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
+    "@types/node": "^22.20.2",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "clang-format": "^1.8.0",

src/spec/EnrichedTextInputNativeComponent.ts

@@ -5,7 +5,6 @@ import type {
   HostComponent,
   ViewProps,
 } from 'react-native';
-import React from 'react';
 
 export interface LinkNativeRegex {
   pattern: string;
@@ -415,69 +414,69 @@ 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;
+  focus: (viewRef: React.ComponentRef<ComponentType>) => void;
+  blur: (viewRef: React.ComponentRef<ComponentType>) => void;
+  setValue: (viewRef: React.ComponentRef<ComponentType>, text: string) => void;
   setSelection: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     start: CodegenTypes.Int32,
     end: CodegenTypes.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;
+  toggleBold: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleItalic: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleUnderline: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleStrikeThrough: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleInlineCode: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleH1: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleH2: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleH3: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleH4: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleH5: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleH6: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleCodeBlock: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleBlockQuote: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleOrderedList: (viewRef: React.ComponentRef<ComponentType>) => void;
+  toggleUnorderedList: (viewRef: React.ComponentRef<ComponentType>) => void;
   toggleCheckboxList: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     checked: boolean
   ) => void;
   addLink: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     start: CodegenTypes.Int32,
     end: CodegenTypes.Int32,
     text: string,
     url: string
   ) => void;
   removeLink: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     start: CodegenTypes.Int32,
     end: CodegenTypes.Int32
   ) => void;
   addImage: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     uri: string,
     width: CodegenTypes.Float,
     height: CodegenTypes.Float
   ) => void;
   startMention: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     indicator: string
   ) => void;
   addMention: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     indicator: string,
     text: string,
     payload: string
   ) => void;
   requestHTML: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     requestId: CodegenTypes.Int32
   ) => void;
   setTextAlignment: (
-    viewRef: React.ElementRef<ComponentType>,
+    viewRef: React.ComponentRef<ComponentType>,
     alignment: string
   ) => void;
 }

src/web/nativeMappers/returnKeyTypeToEnterKeyHint.ts

@@ -2,13 +2,7 @@ import type { ReturnKeyTypeOptions } from 'react-native';
 
 // Keywords for the HTML global [`enterkeyhint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint) attribute
 export type EnterKeyHint =
-  | 'enter'
-  | 'done'
-  | 'go'
-  | 'next'
-  | 'previous'
-  | 'search'
-  | 'send';
+  'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 
 // Maps React Native `returnKeyType` to the HTML global `enterkeyhint` attribute
 // if possible, otherwise falls back to enter.

src/web/utils/pasteImages.ts

@@ -64,8 +64,7 @@ export function handleClipboardPasteImages(
   event: ClipboardEvent,
   getEditor: () => Editor | null,
   getOnPasteImages: () =>
-    | ((e: NativeSyntheticEvent<OnPasteImagesEvent>) => void)
-    | undefined
+    ((e: NativeSyntheticEvent<OnPasteImagesEvent>) => void) | undefined
 ): boolean {
   const clipboardData = event.clipboardData;
   if (!clipboardData) return false;

tsconfig.json

@@ -1,10 +1,13 @@
 {
   "extends": "./tsconfig.base.json",
+  "exclude": ["docs"],
   "compilerOptions": {
     "rootDir": ".",
     "types": ["jest"],
     "paths": {
-      "react-native-enriched-html": ["./src/index.native"]
-    }
-  }
+      "react-native-enriched-html": ["./src/index.native"],
+      "react": ["./node_modules/@types/react"],
+      "react/*": ["./node_modules/@types/react/*"],
+    },
+  },
 }