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

diff --git a/resources/js/wysiwyg/toolbars.js b/resources/js/wysiwyg/toolbars.js
index bd1ff1b6d94e7d4ecabc778e3090a1d39ff0f472..897aa9f06ef2facbded27b2f64b2dfdfa2b3fbc4 100644 (file)
--- 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 f844993644c1ea6bafe08595ce1a634f60722003..3aa4ac653d92da1db9eb5be4be90dd7e7a7ceeb1 100644 (file)
--- 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
  */