Made a bunch of tinymce 6 upgrade fixes

- Added workaround for new 'srcdoc' usage that's breaking content in
  Firefox, added new 'custom-changes.md' file to document for future.
- Updated old usages of 'new' when creating nodes.
- Tested and changed logic, where required, where 'editor.dom.select'
  has been used to replace the old '$' usages.
- Fixed bad boolean value being passed to 'setActive' in task list
  logic.

public/libs/tinymce/custom-changes.md

@@ -0,0 +1,17 @@
+
+
+### Srcdoc usage
+
+By default, as of tiny 6, the editor would use srcdoc which prevents cookies being sent with images in Firefox as 
+it's considered cross origin. This removes that usage to work around this case:
+
+[Relevant TinyMCE issue](https://github.com/tinymce/tinymce/issues/7746).
+
+Source code change applied:
+
+```javascript
+// Find:
+t.srcdoc=e.iframeHTML
+// Replace:
+t.contentDocument.open();t.contentDocument.write(e.iframeHTML);t.contentDocument.close();
+```

resources/js/wysiwyg/config.js

@@ -121,7 +121,7 @@ function setupBrFilter(editor) {
     editor.serializer.addNodeFilter('br', function(nodes) {
         for (const node of nodes) {
             if (node.parent && node.parent.name === 'code') {
-                const newline = new tinymce.html.Node.create('#text');
+                const newline = tinymce.html.Node.create('#text');
                 newline.value = '\n';
                 node.replace(newline);
             }

resources/js/wysiwyg/drop-paste-handling.js

@@ -132,9 +132,9 @@ function drop(editor, options, event) {
             const range = editor.selection.getRng();
             const selectedNodeRoot = selectedNode.closest('body > *');
             if (range.startOffset > (range.startContainer.length / 2)) {
-                editor.dom.select(selectedNodeRoot).after(draggedContentEditable);
+                selectedNodeRoot.after(draggedContentEditable);
             } else {
-                editor.dom.select(selectedNodeRoot).before(draggedContentEditable);
+                selectedNodeRoot.before(draggedContentEditable);
             }
         });
     }

resources/js/wysiwyg/plugin-codeeditor.js

@@ -110,7 +110,6 @@ function defineCodeBlockCustomElement(editor) {
 
             const container = this.shadowRoot.querySelector('.CodeMirrorContainer');
             const renderCodeMirror = (Code) => {
-                console.log({content});
                 this.cm = Code.wysiwygView(container, content, this.getLanguage());
                 Code.updateLayout(this.cm);
                 setTimeout(() => {
@@ -186,7 +185,7 @@ function register(editor, url) {
     editor.on('PreInit', () => {
         editor.parser.addNodeFilter('pre', function(elms) {
             for (const el of elms) {
-                const wrapper = new tinymce.html.Node.create('code-block', {
+                const wrapper = tinymce.html.Node.create('code-block', {
                     contenteditable: 'false',
                 });
 

resources/js/wysiwyg/plugin-drawio.js

@@ -135,9 +135,9 @@ export function getPlugin(providedOptions) {
             if (!drawings.length) return;
 
             editor.undoManager.transact(function () {
-                drawings.each((index, elem) => {
+                for (const drawing of drawings) {
-                    elem.setAttribute('contenteditable', 'false');
+                    drawing.setAttribute('contenteditable', 'false');
-                });
+                }
             });
         });
 

resources/js/wysiwyg/plugins-details.js

@@ -64,13 +64,13 @@ function register(editor, url) {
         editor.insertContent(details.outerHTML);
         editor.focus();
 
-        const domDetails = editor.dom.select(`[data-id="${id}"]`);
+        const domDetails = editor.dom.select(`[data-id="${id}"]`)[0] || null;
-        if (!domDetails.length) {
+        if (domDetails) {
-            const firstChild = domDetails.find('doc-root > *');
+            const firstChild = domDetails.querySelector('doc-root > *');
             if (firstChild) {
-                firstChild[0].focus();
+                firstChild.focus();
             }
-            domDetails.removeAttr('data-id');
+            domDetails.removeAttribute('data-id');
         }
     });
 

resources/js/wysiwyg/plugins-tasklist.js

@@ -26,7 +26,7 @@ function register(editor, url) {
             editor.on('NodeChange', event => {
                 const parentListEl = event.parents.find(el => el.nodeName === 'LI');
                 const inList = parentListEl && parentListEl.classList.contains('task-list-item');
-                api.setActive(inList);
+                api.setActive(Boolean(inList));
             });
         }
     });
@@ -39,7 +39,7 @@ function register(editor, url) {
             const parentList = event.parents.find(el => el.nodeName === 'LI');
             const inTaskList = parentList && parentList.classList.contains('task-list-item');
             const inUlList = parentList && parentList.parentNode.nodeName === 'UL';
-            api.setActive(inUlList && !inTaskList);
+            api.setActive(Boolean(inUlList && !inTaskList));
         });
     };
     existingBullListButton.onAction = function() {
@@ -157,7 +157,7 @@ function serializeTaskListNode(node) {
     }
 
     // Create & insert checkbox input element
-    const checkbox = new tinymce.html.Node.create('input', inputAttrs);
+    const checkbox = tinymce.html.Node.create('input', inputAttrs);
     checkbox.shortEnded = true;
     node.firstChild ? node.insert(checkbox, node.firstChild, true) : node.append(checkbox);
 }