From f95fb640aff2526e7f822d741be92f04fc52b584 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 1 May 2024 17:20:45 +0100
Subject: [PATCH] WYSWIYG: Improved use of object tags to embed content
- Prevented image toolbars showing for objects embeds due to tinymce
image placeholder, and added media toolbar.
- Fixed height of object embed placeholder being forced to auto
when in the editor, allowing height attributed to be properly
reflected as it would on normal page view.
Closes #4974
---
resources/js/wysiwyg/toolbars.js | 17 ++++++++++++++++-
resources/sass/_content.scss | 14 ++++++++++----
2 files changed, 26 insertions(+), 5 deletions(-)
diff --git a/resources/js/wysiwyg/toolbars.js b/resources/js/wysiwyg/toolbars.js
index bd1ff1b6d..897aa9f06 100644
--- a/resources/js/wysiwyg/toolbars.js
+++ b/resources/js/wysiwyg/toolbars.js
@@ -60,7 +60,7 @@ function registerLinkContextToolbar(editor) {
function registerImageContextToolbar(editor) {
editor.ui.registry.addContextToolbar('imagecontexttoolbar', {
predicate(node) {
- return node.closest('img') !== null;
+ return node.closest('img') !== null && !node.hasAttribute('data-mce-object');
},
position: 'node',
scope: 'node',
@@ -68,6 +68,20 @@ function registerImageContextToolbar(editor) {
});
}
+/**
+ * @param {Editor} editor
+ */
+function registerObjectContextToolbar(editor) {
+ editor.ui.registry.addContextToolbar('objectcontexttoolbar', {
+ predicate(node) {
+ return node.closest('img') !== null && node.hasAttribute('data-mce-object');
+ },
+ position: 'node',
+ scope: 'node',
+ items: 'media',
+ });
+}
+
/**
* @param {Editor} editor
*/
@@ -75,4 +89,5 @@ export function registerAdditionalToolbars(editor) {
registerPrimaryToolbarGroups(editor);
registerLinkContextToolbar(editor);
registerImageContextToolbar(editor);
+ registerObjectContextToolbar(editor);
}
diff --git a/resources/sass/_content.scss b/resources/sass/_content.scss
index f84499364..3aa4ac653 100644
--- a/resources/sass/_content.scss
+++ b/resources/sass/_content.scss
@@ -32,10 +32,6 @@
margin-left: auto;
margin-right: auto;
}
- img {
- max-width: 100%;
- height:auto;
- }
h1, h2, h3, h4, h5, h6, pre {
clear: left;
}
@@ -119,6 +115,16 @@
}
}
+// This is seperated out so we can target it out-of-editor by default
+// and use advanced (:not) syntax, not supported by things like PDF gen,
+// to target in-editor scenarios to handle edge-case of TinyMCE using an
+// image for data placeholders where we'd want height attributes to take effect.
+body .page-content img,
+.page-content img:not([data-mce-object]) {
+ max-width: 100%;
+ height:auto;
+}
+
/**
* Callouts
*/