From 24e6dc4b37f857ffe6f8eab85ca177ed290bb38a Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 30 Jan 2024 11:38:47 +0000 Subject: [PATCH] WYSIWYG: Altered how custom head added to editors Updated to parse and add as DOM nodes instead of innerHTML to avoid triggering an update of all head content, which would throw warnings in chromium in regard to setting the base URI. For #4814 --- resources/js/wysiwyg/config.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js index 6c96e47e9..36d78b325 100644 --- a/resources/js/wysiwyg/config.js +++ b/resources/js/wysiwyg/config.js @@ -143,16 +143,23 @@ function gatherPlugins(options) { } /** - * Fetch custom HTML head content from the parent page head into the editor. + * Fetch custom HTML head content nodes from the outer page head + * and add them to the given editor document. + * @param {Document} editorDoc */ -function fetchCustomHeadContent() { +function addCustomHeadContent(editorDoc) { const headContentLines = document.head.innerHTML.split('\n'); const startLineIndex = headContentLines.findIndex(line => line.trim() === ''); const endLineIndex = headContentLines.findIndex(line => line.trim() === ''); if (startLineIndex === -1 || endLineIndex === -1) { - return ''; + return; } - return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n'); + + const customHeadHtml = headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n'); + const el = editorDoc.createElement('div'); + el.innerHTML = customHeadHtml; + + editorDoc.head.append(...el.children); } /** @@ -284,8 +291,7 @@ export function buildForEditor(options) { } }, init_instance_callback(editor) { - const head = editor.getDoc().querySelector('head'); - head.innerHTML += fetchCustomHeadContent(); + addCustomHeadContent(editor.getDoc()); }, setup(editor) { registerCustomIcons(editor); @@ -335,8 +341,7 @@ export function buildForInput(options) { file_picker_types: 'file', file_picker_callback: filePickerCallback, init_instance_callback(editor) { - const head = editor.getDoc().querySelector('head'); - head.innerHTML += fetchCustomHeadContent(); + addCustomHeadContent(editor.getDoc()); editor.contentDocument.documentElement.classList.toggle('dark-mode', options.darkMode); },