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 */