@tinymce/tinymce-react - npm Package Compare versions

Comparing version 3.10.5-rc.20210310104715455.1d80a91 to 3.11.0-feature.20210321235248954.dbdd6d1

CHANGELOG.md

@@ -7,5 +7,18 @@ # Change log
 
+## Unreleased
+### Changed
+- Updates to `initialValue` after editor initialization will now be detected and applied and will result in a complete reset of undo state.
+- During `componentDidUpdate` the `value` prop will be applied if it is different to the current editor content even when it is not different to the previous value of the `value` prop.
+
+### Fixed
+- Apply changes to `initialValue`, `value` and `disabled` which occur between editor setup and initialization that were previously ignored.
+- An attempt will be made to retain the cursor position when the `value` prop forces an update to the editor content. If the cursor position can not be found it will return to the start of the document as before.
+- Internal tracking of the current content is now always done in HTML so `outputFormat` should not cause any unexpected behavior.
+
+### Deprecated
+- The `outputFormat` prop will be removed in a future release. If text output is required call `editor.getContent({ format: 'text' })` in any of the event callbacks.
+
 ## [3.10.4] - 2021-03-10
 ### Fixed
-- Check for editor changes on `"compositionend"` event to more accurately trigger `onEditorChange`. INT-2348
+- Check for editor changes on `"compositionend"` event to more accurately trigger `onEditorChange`. #INT-2348
 - Updated dependencies to latest available
@@ -12,0 +25,0 @@

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

@@ -23,2 +23,3 @@ /**
     };
+    /** @deprecated use `editor.getContent({format: 'text' })` in `onEditorChange` prop instead */
     outputFormat: 'html' | 'text';
@@ -25,0 +26,0 @@ tagName: string;

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

@@ -48,10 +48,11 @@ "use strict";
         _this.handleEditorChange = function (_evt) {
-            var _a;
             var editor = _this.editor;
             if (editor && editor.initialized) {
-                var newContent = editor.getContent({ format: _this.props.outputFormat });
+                var newContent = editor.getContent();
                 if (newContent !== _this.currentContent) {
                     _this.currentContent = newContent;
                     if (Utils_1.isFunction(_this.props.onEditorChange)) {
-                        _this.props.onEditorChange((_a = _this.currentContent) !== null && _a !== void 0 ? _a : '', editor);
+                        var format = _this.props.outputFormat;
+                        var out = format === 'html' ? newContent : editor.getContent({ format: format });
+                        _this.props.onEditorChange(out, editor);
                     }
@@ -87,2 +88,21 @@ }
                     }
+                }, init_instance_callback: function (editor) {
+                    var _a, _b;
+                    // check for changes that happened since tinymce.init() was called
+                    var value = _this.getInitialValue();
+                    _this.currentContent = (_a = _this.currentContent) !== null && _a !== void 0 ? _a : editor.getContent();
+                    if (!_this.currentContent && _this.currentContent !== value) {
+                        _this.currentContent = value;
+                        // same as resetContent in TinyMCE 5
+                        editor.setContent(value);
+                        editor.undoManager.clear();
+                        editor.undoManager.add();
+                        editor.setDirty(false);
+                    }
+                    var disabled = (_b = _this.props.disabled) !== null && _b !== void 0 ? _b : false;
+                    editor.setMode(disabled ? 'readonly' : 'design');
+                    // ensure existing init_instance_callback is called
+                    if (_this.props.init && Utils_1.isFunction(_this.props.init.init_instance_callback)) {
+                        _this.props.init.init_instance_callback(editor);
+                    }
                 } });
@@ -105,13 +125,30 @@ if (!_this.inline) {
         var _this = this;
-        var _a;
-        if (this.editor && this.editor.initialized) {
+        var _a, _b;
+        if (this.editor) {
             this.bindHandlers(prevProps);
-            this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent({ format: this.props.outputFormat });
-            if (typeof this.props.value === 'string' && this.props.value !== prevProps.value && this.props.value !== this.currentContent) {
-                var localEditor_1 = this.editor;
-                localEditor_1.undoManager.transact(function () { return localEditor_1.setContent(_this.props.value); });
+            if (this.editor.initialized) {
+                this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent();
+                if (typeof this.props.initialValue === 'string' && this.props.initialValue !== prevProps.initialValue) {
+                    // same as resetContent in TinyMCE 5
+                    this.editor.setContent(this.props.initialValue);
+                    this.editor.undoManager.clear();
+                    this.editor.undoManager.add();
+                    this.editor.setDirty(false);
+                }
+                else if (typeof this.props.value === 'string' && this.props.value !== this.currentContent) {
+                    var localEditor_1 = this.editor;
+                    localEditor_1.undoManager.transact(function () {
+                        var bookmark = localEditor_1.selection.getBookmark(3);
+                        localEditor_1.setContent(_this.props.value);
+                        try {
+                            localEditor_1.selection.moveToBookmark(bookmark);
+                        }
+                        catch (e) { /* ignore */ }
+                    });
+                }
+                if (this.props.disabled !== prevProps.disabled) {
+                    var disabled = (_b = this.props.disabled) !== null && _b !== void 0 ? _b : false;
+                    this.editor.setMode(disabled ? 'readonly' : 'design');
+                }
             }
-            if (typeof this.props.disabled === 'boolean' && this.props.disabled !== prevProps.disabled) {
-                this.editor.setMode(this.props.disabled ? 'readonly' : 'design');
-            }
         }
@@ -170,8 +207,8 @@ };
     Editor.prototype.getInitialValue = function () {
-        if (typeof this.props.value === 'string') {
+        if (typeof this.props.initialValue === 'string') {
+            return this.props.initialValue;
+        }
+        else if (typeof this.props.value === 'string') {
             return this.props.value;
         }
-        else if (typeof this.props.initialValue === 'string') {
-            return this.props.initialValue;
-        }
         else {
@@ -178,0 +215,0 @@ return '';

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

@@ -23,2 +23,3 @@ /**
     };
+    /** @deprecated use `editor.getContent({format: 'text' })` in `onEditorChange` prop instead */
     outputFormat: 'html' | 'text';
@@ -25,0 +26,0 @@ tagName: string;

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

@@ -45,10 +45,11 @@ /**
         _this.handleEditorChange = function (_evt) {
-            var _a;
             var editor = _this.editor;
             if (editor && editor.initialized) {
-                var newContent = editor.getContent({ format: _this.props.outputFormat });
+                var newContent = editor.getContent();
                 if (newContent !== _this.currentContent) {
                     _this.currentContent = newContent;
                     if (isFunction(_this.props.onEditorChange)) {
-                        _this.props.onEditorChange((_a = _this.currentContent) !== null && _a !== void 0 ? _a : '', editor);
+                        var format = _this.props.outputFormat;
+                        var out = format === 'html' ? newContent : editor.getContent({ format: format });
+                        _this.props.onEditorChange(out, editor);
                     }
@@ -84,2 +85,21 @@ }
                     }
+                }, init_instance_callback: function (editor) {
+                    var _a, _b;
+                    // check for changes that happened since tinymce.init() was called
+                    var value = _this.getInitialValue();
+                    _this.currentContent = (_a = _this.currentContent) !== null && _a !== void 0 ? _a : editor.getContent();
+                    if (!_this.currentContent && _this.currentContent !== value) {
+                        _this.currentContent = value;
+                        // same as resetContent in TinyMCE 5
+                        editor.setContent(value);
+                        editor.undoManager.clear();
+                        editor.undoManager.add();
+                        editor.setDirty(false);
+                    }
+                    var disabled = (_b = _this.props.disabled) !== null && _b !== void 0 ? _b : false;
+                    editor.setMode(disabled ? 'readonly' : 'design');
+                    // ensure existing init_instance_callback is called
+                    if (_this.props.init && isFunction(_this.props.init.init_instance_callback)) {
+                        _this.props.init.init_instance_callback(editor);
+                    }
                 } });
@@ -102,13 +122,30 @@ if (!_this.inline) {
         var _this = this;
-        var _a;
-        if (this.editor && this.editor.initialized) {
+        var _a, _b;
+        if (this.editor) {
             this.bindHandlers(prevProps);
-            this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent({ format: this.props.outputFormat });
-            if (typeof this.props.value === 'string' && this.props.value !== prevProps.value && this.props.value !== this.currentContent) {
-                var localEditor_1 = this.editor;
-                localEditor_1.undoManager.transact(function () { return localEditor_1.setContent(_this.props.value); });
+            if (this.editor.initialized) {
+                this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent();
+                if (typeof this.props.initialValue === 'string' && this.props.initialValue !== prevProps.initialValue) {
+                    // same as resetContent in TinyMCE 5
+                    this.editor.setContent(this.props.initialValue);
+                    this.editor.undoManager.clear();
+                    this.editor.undoManager.add();
+                    this.editor.setDirty(false);
+                }
+                else if (typeof this.props.value === 'string' && this.props.value !== this.currentContent) {
+                    var localEditor_1 = this.editor;
+                    localEditor_1.undoManager.transact(function () {
+                        var bookmark = localEditor_1.selection.getBookmark(3);
+                        localEditor_1.setContent(_this.props.value);
+                        try {
+                            localEditor_1.selection.moveToBookmark(bookmark);
+                        }
+                        catch (e) { /* ignore */ }
+                    });
+                }
+                if (this.props.disabled !== prevProps.disabled) {
+                    var disabled = (_b = this.props.disabled) !== null && _b !== void 0 ? _b : false;
+                    this.editor.setMode(disabled ? 'readonly' : 'design');
+                }
             }
-            if (typeof this.props.disabled === 'boolean' && this.props.disabled !== prevProps.disabled) {
-                this.editor.setMode(this.props.disabled ? 'readonly' : 'design');
-            }
         }
@@ -167,8 +204,8 @@ };
     Editor.prototype.getInitialValue = function () {
-        if (typeof this.props.value === 'string') {
+        if (typeof this.props.initialValue === 'string') {
+            return this.props.initialValue;
+        }
+        else if (typeof this.props.value === 'string') {
             return this.props.value;
         }
-        else if (typeof this.props.initialValue === 'string') {
-            return this.props.initialValue;
-        }
         else {
@@ -175,0 +212,0 @@ return '';

package.json

@@ -69,4 +69,4 @@ {
   },
-  "version": "3.10.5-rc.20210310104715455.1d80a91",
+  "version": "3.11.0-feature.20210321235248954.dbdd6d1",
   "name": "@tinymce/tinymce-react"
 }

No alert changes

Improved metrics

Total package byte prevSize

70065

increased by8.21%

Lines of code

1407

increased by5.71%

No dependency changes