@tinymce/tinymce-react - npm Package Compare versions

Comparing version 3.11.1 to 3.11.2-feature.20210324034326911.23e59f4

lib/cjs/main/ts/components/Editor.d.ts

@@ -49,2 +49,4 @@ /**
     private boundHandlers;
+    private rollbackTimer;
+    private valueCursor;
     constructor(props: Partial<IAllProps>);
@@ -63,4 +65,6 @@ componentDidUpdate(prevProps: Partial<IAllProps>): void;
     private bindHandlers;
+    private rollbackChange;
+    private handleBeforeInput;
     private handleEditorChange;
     private initialise;
 }

lib/cjs/main/ts/components/Editor.js

@@ -47,2 +47,28 @@ "use strict";
         var _this = _super.call(this, props) || this;
+        _this.rollbackTimer = undefined;
+        _this.valueCursor = undefined;
+        _this.rollbackChange = function () {
+            var editor = _this.editor;
+            var value = _this.props.value;
+            if (editor && value && value !== _this.currentContent) {
+                editor.undoManager.ignore(function () {
+                    editor.setContent(value);
+                    // only restore cursor on inline editors when they are focused
+                    // as otherwise it will cause a focus grab
+                    if (_this.valueCursor && (!_this.inline || editor.hasFocus())) {
+                        try {
+                            editor.selection.moveToBookmark(_this.valueCursor);
+                        }
+                        catch (e) { /* ignore */ }
+                    }
+                });
+            }
+            _this.rollbackTimer = undefined;
+        };
+        _this.handleBeforeInput = function (_evt) {
+            var _a;
+            if (_this.props.value !== undefined && _this.props.value === _this.currentContent && _this.editor) {
+                _this.valueCursor = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.selection.getBookmark(3);
+            }
+        };
         _this.handleEditorChange = function (_evt) {
@@ -52,2 +78,7 @@ var editor = _this.editor;
                 var newContent = editor.getContent();
+                if (_this.props.value !== undefined && _this.props.value !== newContent) {
+                    // start a timer and revert to the value if not applied in time
+                    clearTimeout(_this.rollbackTimer);
+                    _this.rollbackTimer = window.setTimeout(_this.rollbackChange, 1);
+                }
                 if (newContent !== _this.currentContent) {
@@ -126,2 +157,6 @@ _this.currentContent = newContent;
         var _a, _b;
+        if (this.rollbackTimer) {
+            clearTimeout(this.rollbackTimer);
+            this.rollbackTimer = undefined;
+        }
         if (this.editor) {
@@ -181,3 +216,4 @@ this.bindHandlers(prevProps);
         if (editor) {
-            editor.off('change keyup compositionend setcontent', this.handleEditorChange);
+            editor.off('change input compositionend setcontent', this.handleEditorChange);
+            editor.off('SelectionChange', this.handleBeforeInput);
             Object.keys(this.boundHandlers).forEach(function (eventName) {
@@ -240,6 +276,8 @@ editor.off(eventName, _this.boundHandlers[eventName]);
             if (!wasControlled && nowControlled) {
-                this.editor.on('change keyup compositionend setcontent', this.handleEditorChange);
+                this.editor.on('change input compositionend setcontent', this.handleEditorChange);
+                this.editor.on('SelectionChange', this.handleBeforeInput);
             }
             else if (wasControlled && !nowControlled) {
-                this.editor.off('change keyup compositionend setcontent', this.handleEditorChange);
+                this.editor.off('change input compositionend setcontent', this.handleEditorChange);
+                this.editor.off('SelectionChange', this.handleBeforeInput);
             }
@@ -246,0 +284,0 @@ }

lib/es2015/main/ts/components/Editor.d.ts

@@ -49,2 +49,4 @@ /**
     private boundHandlers;
+    private rollbackTimer;
+    private valueCursor;
     constructor(props: Partial<IAllProps>);
@@ -63,4 +65,6 @@ componentDidUpdate(prevProps: Partial<IAllProps>): void;
     private bindHandlers;
+    private rollbackChange;
+    private handleBeforeInput;
     private handleEditorChange;
     private initialise;
 }

lib/es2015/main/ts/components/Editor.js

@@ -44,2 +44,28 @@ /**
         var _this = _super.call(this, props) || this;
+        _this.rollbackTimer = undefined;
+        _this.valueCursor = undefined;
+        _this.rollbackChange = function () {
+            var editor = _this.editor;
+            var value = _this.props.value;
+            if (editor && value && value !== _this.currentContent) {
+                editor.undoManager.ignore(function () {
+                    editor.setContent(value);
+                    // only restore cursor on inline editors when they are focused
+                    // as otherwise it will cause a focus grab
+                    if (_this.valueCursor && (!_this.inline || editor.hasFocus())) {
+                        try {
+                            editor.selection.moveToBookmark(_this.valueCursor);
+                        }
+                        catch (e) { /* ignore */ }
+                    }
+                });
+            }
+            _this.rollbackTimer = undefined;
+        };
+        _this.handleBeforeInput = function (_evt) {
+            var _a;
+            if (_this.props.value !== undefined && _this.props.value === _this.currentContent && _this.editor) {
+                _this.valueCursor = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.selection.getBookmark(3);
+            }
+        };
         _this.handleEditorChange = function (_evt) {
@@ -49,2 +75,7 @@ var editor = _this.editor;
                 var newContent = editor.getContent();
+                if (_this.props.value !== undefined && _this.props.value !== newContent) {
+                    // start a timer and revert to the value if not applied in time
+                    clearTimeout(_this.rollbackTimer);
+                    _this.rollbackTimer = window.setTimeout(_this.rollbackChange, 1);
+                }
                 if (newContent !== _this.currentContent) {
@@ -123,2 +154,6 @@ _this.currentContent = newContent;
         var _a, _b;
+        if (this.rollbackTimer) {
+            clearTimeout(this.rollbackTimer);
+            this.rollbackTimer = undefined;
+        }
         if (this.editor) {
@@ -178,3 +213,4 @@ this.bindHandlers(prevProps);
         if (editor) {
-            editor.off('change keyup compositionend setcontent', this.handleEditorChange);
+            editor.off('change input compositionend setcontent', this.handleEditorChange);
+            editor.off('SelectionChange', this.handleBeforeInput);
             Object.keys(this.boundHandlers).forEach(function (eventName) {
@@ -237,6 +273,8 @@ editor.off(eventName, _this.boundHandlers[eventName]);
             if (!wasControlled && nowControlled) {
-                this.editor.on('change keyup compositionend setcontent', this.handleEditorChange);
+                this.editor.on('change input compositionend setcontent', this.handleEditorChange);
+                this.editor.on('SelectionChange', this.handleBeforeInput);
             }
             else if (wasControlled && !nowControlled) {
-                this.editor.off('change keyup compositionend setcontent', this.handleEditorChange);
+                this.editor.off('change input compositionend setcontent', this.handleEditorChange);
+                this.editor.off('SelectionChange', this.handleBeforeInput);
             }
@@ -243,0 +281,0 @@ }

package.json

@@ -69,4 +69,4 @@ {
   },
-  "version": "3.11.1",
+  "version": "3.11.2-feature.20210324034326911.23e59f4",
   "name": "@tinymce/tinymce-react"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75820

increased by5.73%

Lines of code

1515

increased by5.87%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes