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.
This commit is contained in:
Dan Brown 2022-07-18 13:18:46 +01:00
parent c519f707e8
commit cd929b2555
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
8 changed files with 33 additions and 17 deletions

View File

@ -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();
```

File diff suppressed because one or more lines are too long

View File

@ -121,7 +121,7 @@ function setupBrFilter(editor) {
editor.serializer.addNodeFilter('br', function(nodes) { editor.serializer.addNodeFilter('br', function(nodes) {
for (const node of nodes) { for (const node of nodes) {
if (node.parent && node.parent.name === 'code') { 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'; newline.value = '\n';
node.replace(newline); node.replace(newline);
} }

View File

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

View File

@ -110,7 +110,6 @@ function defineCodeBlockCustomElement(editor) {
const container = this.shadowRoot.querySelector('.CodeMirrorContainer'); const container = this.shadowRoot.querySelector('.CodeMirrorContainer');
const renderCodeMirror = (Code) => { const renderCodeMirror = (Code) => {
console.log({content});
this.cm = Code.wysiwygView(container, content, this.getLanguage()); this.cm = Code.wysiwygView(container, content, this.getLanguage());
Code.updateLayout(this.cm); Code.updateLayout(this.cm);
setTimeout(() => { setTimeout(() => {
@ -186,7 +185,7 @@ function register(editor, url) {
editor.on('PreInit', () => { editor.on('PreInit', () => {
editor.parser.addNodeFilter('pre', function(elms) { editor.parser.addNodeFilter('pre', function(elms) {
for (const el of 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', contenteditable: 'false',
}); });

View File

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

View File

@ -64,13 +64,13 @@ function register(editor, url) {
editor.insertContent(details.outerHTML); editor.insertContent(details.outerHTML);
editor.focus(); 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) { if (firstChild) {
firstChild[0].focus(); firstChild.focus();
} }
domDetails.removeAttr('data-id'); domDetails.removeAttribute('data-id');
} }
}); });

View File

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