Merge branch 'main' into @ksienkiewicz/fix-android-initial-measuring

Author: hejsztynx

.playwright/tests/renderCycle.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+const ROOT_SELECTOR = '[data-testid="test-render-cycle-root"]';
+const EDITOR_SELECTOR = `${ROOT_SELECTOR} .eti-editor [contenteditable="true"]`;
+const TOGGLE_BUTTON_SELECTOR = '[data-testid="toggle-variant-button"]';
+const VARIANT_OUTPUT_SELECTOR = '[data-testid="variant-output"]';
+const PAGE_PATH = '/test-render-cycle';
+
+test.describe('EnrichedTextInput render cycle', () => {
+  test('does not throw on simultaneous defaultValue and htmlStyle change', async ({
+    page,
+  }) => {
+    const pageErrors: Error[] = [];
+    const consoleErrors: string[] = [];
+
+    page.on('pageerror', (error) => pageErrors.push(error));
+    page.on('console', (message) => {
+      if (message.type() === 'error') {
+        consoleErrors.push(message.text());
+      }
+    });
+
+    await page.goto(PAGE_PATH);
+    await page.waitForSelector(EDITOR_SELECTOR);
+
+    await expect(page.locator(EDITOR_SELECTOR)).toContainText('Variant A');
+
+    await page.click(TOGGLE_BUTTON_SELECTOR);
+    await expect(page.locator(VARIANT_OUTPUT_SELECTOR)).toHaveText('b');
+    await expect(page.locator(EDITOR_SELECTOR)).toContainText('Variant B');
+
+    await page.click(TOGGLE_BUTTON_SELECTOR);
+    await expect(page.locator(VARIANT_OUTPUT_SELECTOR)).toHaveText('a');
+    await expect(page.locator(EDITOR_SELECTOR)).toContainText('Variant A');
+
+    const editor = page.locator(EDITOR_SELECTOR);
+    await editor.click();
+    await expect(editor).toBeFocused();
+    await editor.pressSequentially(' more text');
+    await expect(editor).toContainText('Variant A more text');
+
+    expect(pageErrors).toEqual([]);
+    expect(consoleErrors).toEqual([]);
+  });
+});

android/gradle.properties

@@ -1,5 +1,5 @@
-ReactNativeEnrichedHtml_kotlinVersion=2.0.21
+ReactNativeEnrichedHtml_kotlinVersion=2.2.0
 ReactNativeEnrichedHtml_minSdkVersion=24
-ReactNativeEnrichedHtml_targetSdkVersion=34
-ReactNativeEnrichedHtml_compileSdkVersion=35
+ReactNativeEnrichedHtml_targetSdkVersion=36
+ReactNativeEnrichedHtml_compileSdkVersion=37
 ReactNativeEnrichedHtml_ndkVersion=27.1.12297006

apps/example-web/src/RouteSelector.tsx

@@ -6,6 +6,7 @@ import { VisualRegression } from './testScreens/VisualRegression';
 import { TestSubmitProps } from './testScreens/TestSubmitProps';
 import { TestEnrichedText } from './testScreens/TestEnrichedText';
 import { TestEllipsize } from './testScreens/TestEllipsize';
+import { TestRenderCycle } from './testScreens/TestRenderCycle';
 import { useEffect, useState } from 'react';
 
 export default function RouteSelector() {
@@ -50,5 +51,9 @@ export default function RouteSelector() {
     return <TestEllipsize />;
   }
 
+  if (path === '/test-render-cycle') {
+    return <TestRenderCycle />;
+  }
+
   return <App />;
 }

apps/example-web/src/testScreens/TestRenderCycle.tsx

@@ -0,0 +1,70 @@
+import { useMemo, useRef, useState } from 'react';
+import {
+  EnrichedTextInput,
+  type EnrichedTextInputInstance,
+  type HtmlStyle,
+} from 'react-native-enriched-html';
+import { WEB_DEFAULT_HTML_STYLE } from '../defaultHtmlStyle';
+
+const VARIANTS = {
+  a: {
+    defaultValue: '<p>Variant A</p>',
+    htmlStyle: WEB_DEFAULT_HTML_STYLE,
+  },
+  b: {
+    defaultValue: '<h1>Variant B</h1>',
+    htmlStyle: { ...WEB_DEFAULT_HTML_STYLE, h1: { fontSize: 48 } },
+  },
+} as const satisfies Record<
+  string,
+  { defaultValue: string; htmlStyle: HtmlStyle }
+>;
+
+export function TestRenderCycle() {
+  const ref = useRef<EnrichedTextInputInstance>(null);
+  const [variant, setVariant] = useState<keyof typeof VARIANTS>('a');
+
+  const { defaultValue, htmlStyle } = useMemo(
+    () => VARIANTS[variant],
+    [variant]
+  );
+
+  return (
+    <div data-testid="test-render-cycle-root">
+      <div
+        className="editor-wrapper"
+        style={editorContainerStyle}
+        data-testid="editor-container"
+        onClick={() => ref.current?.focus()}
+      >
+        <EnrichedTextInput
+          ref={ref}
+          defaultValue={defaultValue}
+          htmlStyle={htmlStyle}
+          placeholder="Test editor"
+          autoFocus
+          editable
+          scrollEnabled
+        />
+      </div>
+
+      <button
+        type="button"
+        data-testid="toggle-variant-button"
+        onClick={() => {
+          setVariant((prev) => (prev === 'a' ? 'b' : 'a'));
+        }}
+      >
+        Toggle variant
+      </button>
+
+      <pre data-testid="variant-output">{variant}</pre>
+    </div>
+  );
+}
+
+const editorContainerStyle = {
+  backgroundColor: '#ddd',
+  padding: '16px',
+  borderRadius: '8px',
+} as const;

apps/example-web/tsconfig.app.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
-    "baseUrl": ".",
     "paths": {
       "react-native-enriched-html": ["../../src/index.tsx"]
     }

apps/example/android/app/build.gradle

@@ -102,7 +102,7 @@ android {
             // see https://reactnative.dev/docs/signed-apk-android.
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
         }
     }
 }

apps/example/android/build.gradle

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "36.0.0"
+        buildToolsVersion = "37.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 36
+        compileSdkVersion = 37
         targetSdkVersion = 36
         ndkVersion = "27.1.12297006"
-        kotlinVersion = "2.1.20"
+        kotlinVersion = "2.2.0"
     }
     repositories {
         google()

apps/example/android/gradle.properties

@@ -41,4 +41,9 @@ hermesEnabled=true
 # Use this property to enable edge-to-edge display support.
 # This allows your app to draw behind system bars for an immersive UI.
 # Note: Only works with ReactActivity and should not be used with custom Activity.
-edgeToEdgeEnabled=false
+edgeToEdgeEnabled=true
+ 
+# Opt out of built-in kotlin and new DSL behavior that ships with AGP 9.
+# Starting from AGP 10.x these opt outs will be removed.
+android.builtInKotlin=false
+android.newDsl=false

apps/example/android/gradle/wrapper/gradle-wrapper.jar

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-9.3.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.4.1-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME