@zzish/math-rich-input 0.1.55 → 0.1.56

package/dist/index.js

@@ -22010,6 +22010,7 @@ var EMPTY_INLINE_FORMATTING_REG_EXP = /<(B|STRONG|I|EM|U|SUB|SUP)>(?:\s|&nbsp;|\
 // const LATEX_MARKER_END = "</annotation>"
 
 var MAX_HISTORY_LENGTH = 100;
+var CONTROLLED_VALUE_ECHO_TIMEOUT_MS = 50;
 var DEFAULT_OPTIONS = {
   useExpertMode: false,
   selectedTab: null
@@ -22197,6 +22198,18 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         isExpertMode: isExpertMode,
         selectedTab: selectedTab
       });
+      if (applyOptions.skipControlledRender === true) {
+        var 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(function () {
+          if (_this2.skipNextControlledValueRender === true && _this2.skipNextControlledValue === pendingNativeValue) {
+            _this2.skipNextControlledValueRender = false;
+            _this2.skipNextControlledValue = null;
+          }
+        }, CONTROLLED_VALUE_ECHO_TIMEOUT_MS);
+      }
       debugMathRichInput("applyChangesToComponent:after-onChange", {
         afterComponentUpdateData: _this2.afterComponentUpdateData,
         selection: getSelectionSnapshot(_this2.editableDiv)
@@ -24685,7 +24698,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     value: function getEditableHtmlForRender(html) {
       var currentRawText = this.editableDiv ? this.getCurrentRawTextForProps(this.props) : null;
       var liveEditableHtml = this.editableDiv ? this.editableDiv.innerHTML : null;
-      var canPreserveNativeDom = this.state.hasFocus === true && this.editableDiv !== null && this.editableDiv !== undefined && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined) && this.lastRenderedEditableHtml !== null && currentRawText === this.props.value;
+      var pendingNativeInputMatchesLiveDom = this.skipNextControlledValueRender === true && currentRawText === this.skipNextControlledValue;
+      var canPreserveNativeDom = this.state.hasFocus === true && this.editableDiv !== null && this.editableDiv !== undefined && (this.afterComponentUpdateData === null || this.afterComponentUpdateData === undefined) && this.lastRenderedEditableHtml !== null && (currentRawText === this.props.value || pendingNativeInputMatchesLiveDom);
       var preserveRangeParams = canPreserveNativeDom ? this.getRangeParamsPreservingInlinePlaceholder() : null;
       debugMathRichInput("render:editable-html", {
         canPreserveNativeDom: canPreserveNativeDom,
@@ -24696,6 +24710,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         liveEditableHtml: liveEditableHtml,
         lastRenderedEditableHtml: this.lastRenderedEditableHtml,
         currentRawText: currentRawText,
+        pendingNativeInputMatchesLiveDom: pendingNativeInputMatchesLiveDom,
         preserveRangeParams: preserveRangeParams,
         afterComponentUpdateData: this.afterComponentUpdateData,
         hasFocus: this.state.hasFocus,
@@ -25043,18 +25058,29 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps, nextState) {
       if (this.skipNextControlledValueRender === true) {
-        var canSkip = nextProps.value === this.skipNextControlledValue && nextState === this.state;
+        var controlledValueArrived = nextProps.value === this.skipNextControlledValue;
+        var canSkip = controlledValueArrived && nextState === this.state;
         debugMathRichInput("shouldComponentUpdate:native-input-gate", {
           canSkip: canSkip,
           nextValue: nextProps.value,
           skipNextControlledValue: this.skipNextControlledValue,
+          controlledValueArrived: 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;
       }
       if (this.shouldSkipRedundantFocusedRender(nextProps, nextState)) {