PB-170: TinyMCE Performance is very poor with multiple instances on Stage

- Refactor code for selection
- Add default line height to reduce jumping
- Rename tinymce utility to editor

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/text/_default.less

@@ -16,6 +16,7 @@
         z-index: 20;
     }
     > .inline-wysiwyg {
+        line-height: 1.3;
         min-height: 1rem;
         overflow: auto;
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

@@ -14,8 +14,8 @@ import {OptionsInterface} from "../../content-type-menu/option.types";
 import {DataObject} from "../../data-store";
 import Uploader from "../../uploader";
 import delayUntil from "../../utils/delay-until";
+import {createBookmark, isWysiwygSupported, lockImageSize, moveToBookmark, unlockImageSize} from "../../utils/editor";
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
-import {getSelection, isWysiwygSupported, restoreSelection} from "../../utils/tinymce";
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import {ContentTypeMountEventParamsInterface} from "../content-type-events.types";
@@ -158,20 +158,16 @@ export default class Preview extends BasePreview {
      * @returns {Boolean}
      */
     public activateEditor(preview: Preview, event: JQueryEventObject) {
-        const activate = () => {
-            const element = this.wysiwyg && this.element || this.textarea;
-            element.focus();
-        };
-
         if (this.element && !this.wysiwyg) {
-            const selection = getSelection();
+            const bookmark = createBookmark(event);
+            lockImageSize(this.element);
             this.element.removeAttribute("contenteditable");
             _.defer(() => {
                 this.initWysiwyg(true)
                     .then(() => delayUntil(
                         () => {
-                            activate();
-                            restoreSelection(this.element, selection);
+                            moveToBookmark(bookmark);
+                            unlockImageSize(this.element);
                         },
                         () => this.element.classList.contains("mce-edit-focus"),
                         10,
@@ -180,8 +176,6 @@ export default class Preview extends BasePreview {
                     console.error(error);
                 });
             });
-        } else {
-            activate();
         }
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js

@@ -9,7 +9,7 @@ import _ from "underscore";
 import HideShowOption from "../../content-type-menu/hide-show-option";
 import {OptionsInterface} from "../../content-type-menu/option.types";
 import delayUntil from "../../utils/delay-until";
-import {createBookmark, isWysiwygSupported, moveToBookmark} from "../../utils/tinymce";
+import {createBookmark, isWysiwygSupported, lockImageSize, moveToBookmark, unlockImageSize} from "../../utils/editor";
 import WysiwygFactory from "../../wysiwyg/factory";
 import WysiwygInterface from "../../wysiwyg/wysiwyg-interface";
 import BasePreview from "../preview";
@@ -134,13 +134,14 @@ export default class Preview extends BasePreview {
     public activateEditor(preview: Preview, event: JQueryEventObject) {
         if (this.element && !this.wysiwyg) {
             const bookmark = createBookmark(event);
+            lockImageSize(this.element);
             this.element.removeAttribute("contenteditable");
             _.defer(() => {
                 this.initWysiwyg(true)
                     .then(() => delayUntil(
                         () => {
-                            console.log(bookmark);
                             moveToBookmark(bookmark);
+                            unlockImageSize(this.element);
                         },
                         () => this.element.classList.contains("mce-edit-focus"),
                         10,

app/code/Magento/PageBuilder/view/adminhtml/web/js/converter/html/directive.js

@@ -5,8 +5,8 @@
 
 import {DataObject} from "../../data-store";
 import {convertMediaDirectivesToUrls, removeQuotesInMediaDirectives} from "../../utils/directives";
+import {encodeContent} from "../../utils/editor";
 import {get} from "../../utils/object";
-import {encodeContent} from "../../utils/tinymce";
 import ConverterInterface from "../converter-interface";
 
 /**