@zzish/math-rich-input 0.1.55 → 0.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -13,10 +13,11 @@
   },
   "main": "dist/index.js",
   "scripts": {
+    "test": "playwright test tests/caret-regression.spec.js --workers=1",
     "build": "rollup --config && webpack --config webpack.standalone.config.js",
     "build:legacy": "rollup --config",
     "build:standalone": "webpack --config webpack.standalone.config.js",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm test && npm run build"
   },
   "dependencies": {
     "katex": "^0.12.0",
@@ -36,6 +37,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/register": "^7.13.8",
+    "@playwright/test": "^1.62.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",

package/src/MathRichInput.jsx

@@ -84,6 +84,7 @@ const EMPTY_INLINE_FORMATTING_REG_EXP =
 // const LATEX_MARKER_END = "</annotation>"
 
 const MAX_HISTORY_LENGTH = 100;
+const CONTROLLED_VALUE_ECHO_TIMEOUT_MS = 50;
 
 const DEFAULT_OPTIONS = {
   useExpertMode: false,
@@ -367,6 +368,21 @@ export default class MathRichInput extends React.Component {
 
     // Call the parent handler to apply the changes
     this.onChangeCallback({ value, mimeType }, { isExpertMode, selectedTab });
+    if (applyOptions.skipControlledRender === true) {
+      const pendingNativeValue = value;
+      // Give a scheduled controlled echo one short render window. If the host
+      // never echoes the value, release the gate rather than preserving a
+      // rejected native edit indefinitely.
+      setTimeout(() => {
+        if (
+          this.skipNextControlledValueRender === true &&
+          this.skipNextControlledValue === pendingNativeValue
+        ) {
+          this.skipNextControlledValueRender = false;
+          this.skipNextControlledValue = null;
+        }
+      }, CONTROLLED_VALUE_ECHO_TIMEOUT_MS);
+    }
     debugMathRichInput("applyChangesToComponent:after-onChange", {
       afterComponentUpdateData: this.afterComponentUpdateData,
       selection: getSelectionSnapshot(this.editableDiv),
@@ -587,6 +603,9 @@ export default class MathRichInput extends React.Component {
       ? this.getCurrentRawTextForProps(this.props)
       : null;
     const liveEditableHtml = this.editableDiv ? this.editableDiv.innerHTML : null;
+    const pendingNativeInputMatchesLiveDom =
+      this.skipNextControlledValueRender === true &&
+      currentRawText === this.skipNextControlledValue;
     const canPreserveNativeDom =
       this.state.hasFocus === true &&
       this.editableDiv !== null &&
@@ -594,7 +613,7 @@ export default class MathRichInput extends React.Component {
       (this.afterComponentUpdateData === null ||
         this.afterComponentUpdateData === undefined) &&
       this.lastRenderedEditableHtml !== null &&
-      currentRawText === this.props.value;
+      (currentRawText === this.props.value || pendingNativeInputMatchesLiveDom);
     const preserveRangeParams = canPreserveNativeDom
       ? this.getRangeParamsPreservingInlinePlaceholder()
       : null;
@@ -609,6 +628,7 @@ export default class MathRichInput extends React.Component {
       liveEditableHtml,
       lastRenderedEditableHtml: this.lastRenderedEditableHtml,
       currentRawText,
+      pendingNativeInputMatchesLiveDom,
       preserveRangeParams,
       afterComponentUpdateData: this.afterComponentUpdateData,
       hasFocus: this.state.hasFocus,
@@ -2694,22 +2714,32 @@ export default class MathRichInput extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     if (this.skipNextControlledValueRender === true) {
+      const controlledValueArrived =
+        nextProps.value === this.skipNextControlledValue;
       const canSkip =
-        nextProps.value === this.skipNextControlledValue &&
-        nextState === this.state;
+        controlledValueArrived && nextState === this.state;
 
       debugMathRichInput("shouldComponentUpdate:native-input-gate", {
         canSkip,
         nextValue: nextProps.value,
         skipNextControlledValue: this.skipNextControlledValue,
+        controlledValueArrived,
         currentPropsValue: this.props.value,
         stateChanged: nextState !== this.state,
         innerHTML: this.editableDiv ? this.editableDiv.innerHTML : null,
         selection: getSelectionSnapshot(this.editableDiv),
       });
 
-      this.skipNextControlledValueRender = false;
-      this.skipNextControlledValue = null;
+      // A controlled host may commit an unrelated render before it echoes the
+      // value from this native input event. Keep the gate armed through that
+      // stale render so getEditableHtmlForRender can preserve the browser DOM
+      // and its selection. The time-bounded fallback armed by
+      // applyChangesToComponent keeps a host that rejects the value from
+      // leaving the gate armed indefinitely.
+      if (controlledValueArrived) {
+        this.skipNextControlledValueRender = false;
+        this.skipNextControlledValue = null;
+      }
 
       if (canSkip) return false;
     }