@tinymce/tinymce-react - npm Package Compare versions

Comparing version 3.11.2-feature.20210324034326911.23e59f4 to 3.11.2-feature.20210325043937355.ec9d5e3

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

@@ -66,4 +66,6 @@ /**
     private handleBeforeInput;
+    private handleBeforeInputSpecial;
     private handleEditorChange;
+    private handleEditorChangeSpecial;
     private initialise;
 }

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

@@ -42,2 +42,4 @@ "use strict";
 var EditorPropTypes_1 = require("./EditorPropTypes");
+var changeEvents = function () { var _a, _b, _c; return ((_c = (_b = (_a = TinyMCE_1.getTinymce()) === null || _a === void 0 ? void 0 : _a.Env) === null || _b === void 0 ? void 0 : _b.browser) === null || _c === void 0 ? void 0 : _c.isIE()) ? 'change keyup compositionend setcontent' : 'input compositionend setcontent'; };
+var beforeInputEvent = Utils_1.isBeforeInputEventAvailable() ? 'beforeinput' : 'SelectionChange';
 var Editor = /** @class */ (function (_super) {
@@ -71,6 +73,15 @@ __extends(Editor, _super);
             if (_this.props.value !== undefined && _this.props.value === _this.currentContent && _this.editor) {
+                // eslint-disable-next-line no-console
+                console.log('Update bookmark', _evt.type);
                 _this.valueCursor = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.selection.getBookmark(3);
             }
         };
+        _this.handleBeforeInputSpecial = function (evt) {
+            if (evt.key === 'Enter' || evt.key === 'Backspace' || evt.key === 'Delete') {
+                _this.handleBeforeInput(evt);
+            }
+        };
         _this.handleEditorChange = function (_evt) {
+            // eslint-disable-next-line no-console
+            console.log('Handle change', _evt.type);
             var editor = _this.editor;
@@ -94,2 +105,7 @@ if (editor && editor.initialized) {
         };
+        _this.handleEditorChangeSpecial = function (evt) {
+            if (evt.key === 'Backspace' || evt.key === 'Delete') {
+                _this.handleEditorChange(evt);
+            }
+        };
         _this.initialise = function () {
@@ -178,3 +194,3 @@ var target = _this.elementRef.current;
                         // so we don't try to keep their selection unless they are currently focused
-                        var bookmark;
+                        var cursor;
                         if (!_this.inline || localEditor_1.hasFocus()) {
@@ -184,12 +200,20 @@ try {
                                 // possibly only in inline mode but I'm not taking chances
-                                bookmark = localEditor_1.selection.getBookmark(3);
+                                cursor = localEditor_1.selection.getBookmark(3);
                             }
                             catch (e) { /* ignore */ }
                         }
+                        var valueCursor = _this.valueCursor;
                         localEditor_1.setContent(_this.props.value);
-                        if (bookmark) {
-                            try {
-                                localEditor_1.selection.moveToBookmark(bookmark);
+                        if (!_this.inline || localEditor_1.hasFocus()) {
+                            for (var _i = 0, _a = [cursor, valueCursor]; _i < _a.length; _i++) {
+                                var bookmark = _a[_i];
+                                if (bookmark) {
+                                    try {
+                                        localEditor_1.selection.moveToBookmark(bookmark);
+                                        _this.valueCursor = bookmark;
+                                        break;
+                                    }
+                                    catch (e) { /* ignore */ }
+                                }
                             }
-                            catch (e) { /* ignore */ }
                         }
@@ -218,4 +242,7 @@ });
         if (editor) {
-            editor.off('change input compositionend setcontent', this.handleEditorChange);
-            editor.off('SelectionChange', this.handleBeforeInput);
+            editor.off(changeEvents(), this.handleEditorChange);
+            editor.off(beforeInputEvent, this.handleBeforeInput);
+            editor.off('keypress', this.handleEditorChangeSpecial);
+            editor.off('keydown', this.handleBeforeInputSpecial);
+            editor.off('NewBlock', this.handleEditorChange);
             Object.keys(this.boundHandlers).forEach(function (eventName) {
@@ -278,8 +305,14 @@ editor.off(eventName, _this.boundHandlers[eventName]);
             if (!wasControlled && nowControlled) {
-                this.editor.on('change input compositionend setcontent', this.handleEditorChange);
-                this.editor.on('SelectionChange', this.handleBeforeInput);
+                this.editor.on(changeEvents(), this.handleEditorChange);
+                this.editor.on(beforeInputEvent, this.handleBeforeInput);
+                this.editor.on('keydown', this.handleBeforeInputSpecial);
+                this.editor.on('keyup', this.handleEditorChangeSpecial);
+                this.editor.on('NewBlock', this.handleEditorChange);
             }
             else if (wasControlled && !nowControlled) {
-                this.editor.off('change input compositionend setcontent', this.handleEditorChange);
-                this.editor.off('SelectionChange', this.handleBeforeInput);
+                this.editor.off(changeEvents(), this.handleEditorChange);
+                this.editor.off(beforeInputEvent, this.handleBeforeInput);
+                this.editor.off('keydown', this.handleBeforeInputSpecial);
+                this.editor.off('keyup', this.handleEditorChangeSpecial);
+                this.editor.off('NewBlock', this.handleEditorChange);
             }
@@ -286,0 +319,0 @@ }

lib/cjs/main/ts/Utils.d.ts

@@ -18,2 +18,3 @@ /**
 export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];
+export declare const isBeforeInputEventAvailable: () => boolean;
 export {};

lib/cjs/main/ts/Utils.js

@@ -10,3 +10,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergePlugins = exports.isTextareaOrInput = exports.uuid = exports.configHandlers = exports.configHandlers2 = exports.isFunction = void 0;
+exports.isBeforeInputEventAvailable = exports.mergePlugins = exports.isTextareaOrInput = exports.uuid = exports.configHandlers = exports.configHandlers2 = exports.isFunction = void 0;
 var EditorPropTypes_1 = require("./components/EditorPropTypes");
@@ -62,1 +62,3 @@ var isFunction = function (x) { return typeof x === 'function'; };
 exports.mergePlugins = mergePlugins;
+var isBeforeInputEventAvailable = function () { return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function'; };
+exports.isBeforeInputEventAvailable = isBeforeInputEventAvailable;

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

@@ -66,4 +66,6 @@ /**
     private handleBeforeInput;
+    private handleBeforeInputSpecial;
     private handleEditorChange;
+    private handleEditorChangeSpecial;
     private initialise;
 }

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

@@ -37,4 +37,6 @@ /**
 import { getTinymce } from '../TinyMCE';
-import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers } from '../Utils';
+import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers, isBeforeInputEventAvailable } from '../Utils';
 import { EditorPropTypes } from './EditorPropTypes';
+var changeEvents = function () { var _a, _b, _c; return ((_c = (_b = (_a = getTinymce()) === null || _a === void 0 ? void 0 : _a.Env) === null || _b === void 0 ? void 0 : _b.browser) === null || _c === void 0 ? void 0 : _c.isIE()) ? 'change keyup compositionend setcontent' : 'input compositionend setcontent'; };
+var beforeInputEvent = isBeforeInputEventAvailable() ? 'beforeinput' : 'SelectionChange';
 var Editor = /** @class */ (function (_super) {
@@ -68,6 +70,15 @@ __extends(Editor, _super);
             if (_this.props.value !== undefined && _this.props.value === _this.currentContent && _this.editor) {
+                // eslint-disable-next-line no-console
+                console.log('Update bookmark', _evt.type);
                 _this.valueCursor = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.selection.getBookmark(3);
             }
         };
+        _this.handleBeforeInputSpecial = function (evt) {
+            if (evt.key === 'Enter' || evt.key === 'Backspace' || evt.key === 'Delete') {
+                _this.handleBeforeInput(evt);
+            }
+        };
         _this.handleEditorChange = function (_evt) {
+            // eslint-disable-next-line no-console
+            console.log('Handle change', _evt.type);
             var editor = _this.editor;
@@ -91,2 +102,7 @@ if (editor && editor.initialized) {
         };
+        _this.handleEditorChangeSpecial = function (evt) {
+            if (evt.key === 'Backspace' || evt.key === 'Delete') {
+                _this.handleEditorChange(evt);
+            }
+        };
         _this.initialise = function () {
@@ -175,3 +191,3 @@ var target = _this.elementRef.current;
                         // so we don't try to keep their selection unless they are currently focused
-                        var bookmark;
+                        var cursor;
                         if (!_this.inline || localEditor_1.hasFocus()) {
@@ -181,12 +197,20 @@ try {
                                 // possibly only in inline mode but I'm not taking chances
-                                bookmark = localEditor_1.selection.getBookmark(3);
+                                cursor = localEditor_1.selection.getBookmark(3);
                             }
                             catch (e) { /* ignore */ }
                         }
+                        var valueCursor = _this.valueCursor;
                         localEditor_1.setContent(_this.props.value);
-                        if (bookmark) {
-                            try {
-                                localEditor_1.selection.moveToBookmark(bookmark);
+                        if (!_this.inline || localEditor_1.hasFocus()) {
+                            for (var _i = 0, _a = [cursor, valueCursor]; _i < _a.length; _i++) {
+                                var bookmark = _a[_i];
+                                if (bookmark) {
+                                    try {
+                                        localEditor_1.selection.moveToBookmark(bookmark);
+                                        _this.valueCursor = bookmark;
+                                        break;
+                                    }
+                                    catch (e) { /* ignore */ }
+                                }
                             }
-                            catch (e) { /* ignore */ }
                         }
@@ -215,4 +239,7 @@ });
         if (editor) {
-            editor.off('change input compositionend setcontent', this.handleEditorChange);
-            editor.off('SelectionChange', this.handleBeforeInput);
+            editor.off(changeEvents(), this.handleEditorChange);
+            editor.off(beforeInputEvent, this.handleBeforeInput);
+            editor.off('keypress', this.handleEditorChangeSpecial);
+            editor.off('keydown', this.handleBeforeInputSpecial);
+            editor.off('NewBlock', this.handleEditorChange);
             Object.keys(this.boundHandlers).forEach(function (eventName) {
@@ -275,8 +302,14 @@ editor.off(eventName, _this.boundHandlers[eventName]);
             if (!wasControlled && nowControlled) {
-                this.editor.on('change input compositionend setcontent', this.handleEditorChange);
-                this.editor.on('SelectionChange', this.handleBeforeInput);
+                this.editor.on(changeEvents(), this.handleEditorChange);
+                this.editor.on(beforeInputEvent, this.handleBeforeInput);
+                this.editor.on('keydown', this.handleBeforeInputSpecial);
+                this.editor.on('keyup', this.handleEditorChangeSpecial);
+                this.editor.on('NewBlock', this.handleEditorChange);
             }
             else if (wasControlled && !nowControlled) {
-                this.editor.off('change input compositionend setcontent', this.handleEditorChange);
-                this.editor.off('SelectionChange', this.handleBeforeInput);
+                this.editor.off(changeEvents(), this.handleEditorChange);
+                this.editor.off(beforeInputEvent, this.handleBeforeInput);
+                this.editor.off('keydown', this.handleBeforeInputSpecial);
+                this.editor.off('keyup', this.handleEditorChangeSpecial);
+                this.editor.off('NewBlock', this.handleEditorChange);
             }
@@ -283,0 +316,0 @@ }

lib/es2015/main/ts/Utils.d.ts

@@ -18,2 +18,3 @@ /**
 export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];
+export declare const isBeforeInputEventAvailable: () => boolean;
 export {};

lib/es2015/main/ts/Utils.js

@@ -52,1 +52,2 @@ /**
 export var mergePlugins = function (initPlugins, inputPlugins) { return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins)); };
+export var isBeforeInputEventAvailable = function () { return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function'; };

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

80723

increased by6.47%

Lines of code

1591

increased by5.02%

No dependency changes