@tinymce/tinymce-react - npm Package Compare versions

Comparing version 3.10.2-feature.20210210072829537.ea17f83 to 3.10.2-feature.20210215063124868.9c2ca6b

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

@@ -42,5 +42,5 @@ /**
     static defaultProps: Partial<IAllProps>;
+    editor?: TinyMCEEditor;
     private id;
     private elementRef;
-    private editor?;
     private inline;
@@ -63,4 +63,3 @@ private currentContent?;
     private handleEditorChange;
-    private handleInit;
     private initialise;
 }

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

@@ -40,3 +40,2 @@ "use strict";
 var EditorPropTypes_1 = require("./EditorPropTypes");
-var TextToHtml_1 = require("../TextToHtml");
 var Editor = /** @class */ (function (_super) {
@@ -50,3 +49,3 @@ __extends(Editor, _super);
             var editor = _this.editor;
-            if (editor) {
+            if (editor && editor.initialized) {
                 var newContent = editor.getContent({ format: _this.props.outputFormat });
@@ -61,19 +60,2 @@ if (newContent !== _this.currentContent) {
         };
-        _this.handleInit = function (initEvent) {
-            var editor = _this.editor;
-            if (editor) {
-                var initialValue = _this.getInitialValue();
-                editor.setContent(_this.props.outputFormat === 'text' ? TextToHtml_1.textToHtml(initialValue) : initialValue);
-                editor.undoManager.clear();
-                editor.undoManager.add();
-                editor.setDirty(false);
-                if (Utils_1.isFunction(_this.props.onEditorChange)) {
-                    editor.on('change keyup setcontent', _this.handleEditorChange);
-                }
-                if (Utils_1.isFunction(_this.props.onInit)) {
-                    _this.props.onInit(initEvent, editor);
-                }
-                _this.bindHandlers({});
-            }
-        };
         _this.initialise = function () {
@@ -90,3 +72,3 @@ var target = _this.elementRef.current;
                     _this.editor = editor;
-                    editor.on('init', _this.handleInit);
+                    _this.bindHandlers({});
                     if (_this.props.init && Utils_1.isFunction(_this.props.init.setup)) {
@@ -96,5 +78,11 @@ _this.props.init.setup(editor);
                 } });
-            if (Utils_1.isTextarea(_this.elementRef.current)) {
-                _this.elementRef.current.style.visibility = '';
+            if (!_this.inline) {
+                target.style.visibility = '';
             }
+            if (Utils_1.isTextareaOrInput(target)) {
+                target.value = _this.getInitialValue();
+            }
+            else {
+                target.innerHTML = _this.getInitialValue();
+            }
             tinymce.init(finalInit);
@@ -109,2 +97,3 @@ };
     Editor.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
         var _a;
@@ -116,4 +105,3 @@ if (this.editor && this.editor.initialized) {
                 var localEditor_1 = this.editor;
-                var value_1 = this.props.outputFormat === 'text' ? TextToHtml_1.textToHtml(this.props.value) : this.props.value;
-                localEditor_1.undoManager.transact(function () { return localEditor_1.setContent(value_1); });
+                localEditor_1.undoManager.transact(function () { return localEditor_1.setContent(_this.props.value); });
             }
@@ -138,11 +126,9 @@ if (typeof this.props.disabled === 'boolean' && this.props.disabled !== prevProps.disabled) {
         if (editor) {
-            editor.off('init', this.handleInit);
-            if (editor.initialized) {
-                editor.off('change keyup setcontent', this.handleEditorChange);
-                Object.keys(this.boundHandlers).forEach(function (eventName) {
-                    editor.off(eventName, _this.boundHandlers[eventName]);
-                });
-                this.boundHandlers = {};
-            }
+            editor.off('change keyup setcontent', this.handleEditorChange);
+            Object.keys(this.boundHandlers).forEach(function (eventName) {
+                editor.off(eventName, _this.boundHandlers[eventName]);
+            });
+            this.boundHandlers = {};
             editor.remove();
+            this.editor = undefined;
         }
@@ -194,2 +180,14 @@ };
             Utils_1.configHandlers(this.editor, prevProps, this.props, this.boundHandlers, function (key) { return _this.props[key]; });
+            if (prevProps.onEditorChange === undefined) {
+                if (this.props.onEditorChange !== undefined) {
+                    // added onEditorChange
+                    this.editor.on('change keyup setcontent', this.handleEditorChange);
+                }
+            }
+            else {
+                if (this.props.onEditorChange === undefined) {
+                    // removed onEditorChange
+                    this.editor.off('change keyup setcontent', this.handleEditorChange);
+                }
+            }
         }
@@ -196,0 +194,0 @@ };

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

@@ -16,4 +16,4 @@ /**
 export declare const uuid: (prefix: string) => string;
-export declare const isTextarea: (element: Element | null) => element is HTMLTextAreaElement;
+export declare const isTextareaOrInput: (element: Element | null) => element is HTMLInputElement | HTMLTextAreaElement;
 export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];
 export {};

lib/cjs/main/ts/Utils.js

@@ -10,3 +10,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergePlugins = exports.isTextarea = exports.uuid = exports.configHandlers = exports.configHandlers2 = exports.isFunction = void 0;
+exports.mergePlugins = exports.isTextareaOrInput = exports.uuid = exports.configHandlers = exports.configHandlers2 = exports.isFunction = void 0;
 var EditorPropTypes_1 = require("./components/EditorPropTypes");
@@ -49,4 +49,6 @@ var isFunction = function (x) { return typeof x === 'function'; };
 exports.uuid = uuid;
-var isTextarea = function (element) { return element !== null && element.tagName.toLowerCase() === 'textarea'; };
-exports.isTextarea = isTextarea;
+var isTextareaOrInput = function (element) {
+    return element !== null && (element.tagName.toLowerCase() === 'textarea' || element.tagName.toLowerCase() === 'input');
+};
+exports.isTextareaOrInput = isTextareaOrInput;
 var normalizePluginArray = function (plugins) {
@@ -53,0 +55,0 @@ if (typeof plugins === 'undefined' || plugins === '') {

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

@@ -42,5 +42,5 @@ /**
     static defaultProps: Partial<IAllProps>;
+    editor?: TinyMCEEditor;
     private id;
     private elementRef;
-    private editor?;
     private inline;
@@ -63,4 +63,3 @@ private currentContent?;
     private handleEditorChange;
-    private handleInit;
     private initialise;
 }

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

@@ -35,5 +35,4 @@ /**
 import { getTinymce } from '../TinyMCE';
-import { isFunction, isTextarea, mergePlugins, uuid, configHandlers } from '../Utils';
+import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers } from '../Utils';
 import { EditorPropTypes } from './EditorPropTypes';
-import { textToHtml } from '../TextToHtml';
 var Editor = /** @class */ (function (_super) {
@@ -47,3 +46,3 @@ __extends(Editor, _super);
             var editor = _this.editor;
-            if (editor) {
+            if (editor && editor.initialized) {
                 var newContent = editor.getContent({ format: _this.props.outputFormat });
@@ -58,19 +57,2 @@ if (newContent !== _this.currentContent) {
         };
-        _this.handleInit = function (initEvent) {
-            var editor = _this.editor;
-            if (editor) {
-                var initialValue = _this.getInitialValue();
-                editor.setContent(_this.props.outputFormat === 'text' ? textToHtml(initialValue) : initialValue);
-                editor.undoManager.clear();
-                editor.undoManager.add();
-                editor.setDirty(false);
-                if (isFunction(_this.props.onEditorChange)) {
-                    editor.on('change keyup setcontent', _this.handleEditorChange);
-                }
-                if (isFunction(_this.props.onInit)) {
-                    _this.props.onInit(initEvent, editor);
-                }
-                _this.bindHandlers({});
-            }
-        };
         _this.initialise = function () {
@@ -87,3 +69,3 @@ var target = _this.elementRef.current;
                     _this.editor = editor;
-                    editor.on('init', _this.handleInit);
+                    _this.bindHandlers({});
                     if (_this.props.init && isFunction(_this.props.init.setup)) {
@@ -93,5 +75,11 @@ _this.props.init.setup(editor);
                 } });
-            if (isTextarea(_this.elementRef.current)) {
-                _this.elementRef.current.style.visibility = '';
+            if (!_this.inline) {
+                target.style.visibility = '';
             }
+            if (isTextareaOrInput(target)) {
+                target.value = _this.getInitialValue();
+            }
+            else {
+                target.innerHTML = _this.getInitialValue();
+            }
             tinymce.init(finalInit);
@@ -106,2 +94,3 @@ };
     Editor.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
         var _a;
@@ -113,4 +102,3 @@ if (this.editor && this.editor.initialized) {
                 var localEditor_1 = this.editor;
-                var value_1 = this.props.outputFormat === 'text' ? textToHtml(this.props.value) : this.props.value;
-                localEditor_1.undoManager.transact(function () { return localEditor_1.setContent(value_1); });
+                localEditor_1.undoManager.transact(function () { return localEditor_1.setContent(_this.props.value); });
             }
@@ -135,11 +123,9 @@ if (typeof this.props.disabled === 'boolean' && this.props.disabled !== prevProps.disabled) {
         if (editor) {
-            editor.off('init', this.handleInit);
-            if (editor.initialized) {
-                editor.off('change keyup setcontent', this.handleEditorChange);
-                Object.keys(this.boundHandlers).forEach(function (eventName) {
-                    editor.off(eventName, _this.boundHandlers[eventName]);
-                });
-                this.boundHandlers = {};
-            }
+            editor.off('change keyup setcontent', this.handleEditorChange);
+            Object.keys(this.boundHandlers).forEach(function (eventName) {
+                editor.off(eventName, _this.boundHandlers[eventName]);
+            });
+            this.boundHandlers = {};
             editor.remove();
+            this.editor = undefined;
         }
@@ -191,2 +177,14 @@ };
             configHandlers(this.editor, prevProps, this.props, this.boundHandlers, function (key) { return _this.props[key]; });
+            if (prevProps.onEditorChange === undefined) {
+                if (this.props.onEditorChange !== undefined) {
+                    // added onEditorChange
+                    this.editor.on('change keyup setcontent', this.handleEditorChange);
+                }
+            }
+            else {
+                if (this.props.onEditorChange === undefined) {
+                    // removed onEditorChange
+                    this.editor.off('change keyup setcontent', this.handleEditorChange);
+                }
+            }
         }
@@ -193,0 +191,0 @@ };

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

@@ -16,4 +16,4 @@ /**
 export declare const uuid: (prefix: string) => string;
-export declare const isTextarea: (element: Element | null) => element is HTMLTextAreaElement;
+export declare const isTextareaOrInput: (element: Element | null) => element is HTMLInputElement | HTMLTextAreaElement;
 export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];
 export {};

lib/es2015/main/ts/Utils.js

@@ -41,3 +41,5 @@ /**
 };
-export var isTextarea = function (element) { return element !== null && element.tagName.toLowerCase() === 'textarea'; };
+export var isTextareaOrInput = function (element) {
+    return element !== null && (element.tagName.toLowerCase() === 'textarea' || element.tagName.toLowerCase() === 'input');
+};
 var normalizePluginArray = function (plugins) {
@@ -44,0 +46,0 @@ if (typeof plugins === 'undefined' || plugins === '') {

package.json

@@ -69,4 +69,4 @@ {
   },
-  "version": "3.10.2-feature.20210210072829537.ea17f83",
+  "version": "3.10.2-feature.20210215063124868.9c2ca6b",
   "name": "@tinymce/tinymce-react"
 }

No alert changes

Worsened metrics

Total package byte prevSize

64529

decreased by-8.31%

Number of package files

32

decreased by-11.11%

Lines of code

1321

decreased by-7.69%

No dependency changes