Update tinymce image toolbar plugin [SCI-7152]

app/assets/stylesheets/tiny_mce.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule
+// scss-lint:disable ImportantRule SelectorDepth
 @import "constants";
 
 @font-face {
@@ -156,25 +156,6 @@
   &::after {
     display: none;
   }
-
-  .mce-container-body.mce-abs-layout {
-    background: $brand-primary;
-    position: relative;
-    top: -10px;
-
-    .mce-container,
-    .mce-widget {
-      background: transparent !important;
-    }
-
-    .mce-btn:hover {
-      border-color: transparent;
-    }
-
-    .mce-ico {
-      color: $color-white;
-    }
-  }
 }
 
 .mce-window {
@@ -202,4 +183,29 @@
   display: flex !important;
 }
 
-// scss-lint:enable ImportantRule
+
+
+.tox .tox-pop {
+  margin-top: -12px;
+
+  &::after,
+  &::before {
+    display: none !important;
+  }
+
+  .tox-pop__dialog {
+    border: 0;
+    border-radius: 0 0 3px 3px;
+    box-shadow: none;
+  }
+
+  .tox-toolbar {
+    background: $brand-primary !important;
+    top: -10px;
+
+    .tox-icon svg {
+      fill: $color-white;
+    }
+  }
+}
+// scss-lint:enable ImportantRule SelectorDepth

app/javascript/packs/tiny_mce.js

@@ -22,6 +22,7 @@ import 'tinymce/plugins/nonbreaking';
 import 'tinymce/plugins/save';
 import 'tinymce/plugins/directionality';
 import './tinymce/marvinjs/plugin';
+import './tinymce/image_toolbar/plugin';
 
 window.TinyMCE = (function() {
   'use strict';
@@ -87,13 +88,13 @@ window.TinyMCE = (function() {
   }
 
   function initImageToolBar(editor) {
-    var editorIframe = $('#' + editor.id).prev().find('.mce-edit-area iframe');
+    var editorIframe = $('#' + editor.id).next().find('.tox-edit-area iframe');
     var primaryColor = '#104da9';
     editorIframe.contents().find('head').append(`<style type="text/css">
         img::-moz-selection{background:0 0}
         img::selection{background:0 0}
         .mce-content-body img[data-mce-selected]{outline:2px solid ${primaryColor}}
-        .mce-content-body div.mce-resizehandle{background:transparent;border-color:transparent;box-sizing:border-box;height:10px;width:10px}
+        .mce-content-body div.mce-resizehandle{background:transparent;border-color:transparent;box-sizing:border-box;height:10px;width:10px; position:absolute}
         .mce-content-body div.mce-resizehandle:hover{background:transparent}
         .mce-content-body div#mceResizeHandlenw{border-left: 2px solid ${primaryColor}; border-top: 2px solid ${primaryColor}}
         .mce-content-body div#mceResizeHandlene{border-right: 2px solid ${primaryColor}; border-top: 2px solid ${primaryColor}}
@@ -158,7 +159,7 @@ window.TinyMCE = (function() {
         $(selector).closest('.form-group')
           .before('<div class="tinymce-placeholder" style="height:' + tinyMceInitSize + 'px"></div>');
         tinyMceContainer.addClass('hidden');
-        plugins = 'table autosave autoresize link advlist codesample autolink lists charmap anchor searchreplace wordcount visualblocks visualchars insertdatetime nonbreaking save directionality marvinjs';
+        plugins = 'table autosave autoresize link advlist codesample autolink lists charmap anchor searchreplace wordcount visualblocks visualchars insertdatetime nonbreaking save directionality marvinjs custom_image_toolbar';
 
         // if (typeof (MarvinJsEditor) !== 'undefined') plugins += ' marvinjsplugin';
 

app/javascript/packs/tinymce/image_toolbar/plugin.js

@@ -0,0 +1,47 @@
+/* global tinymce MarvinJsEditor */
+tinymce.PluginManager.add('custom_image_toolbar', (editor) => {
+  editor.ui.registry.addButton('image_download', {
+    icon: 'upload',
+    onAction: () => {
+      const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
+      const image = editorIframe.contents().find('img[data-mce-selected="1"]');
+
+      window.open(`/tiny_mce_assets/${image.data('mce-token')}/download`, '_blank');
+    }
+  });
+
+  editor.ui.registry.addButton('marvinjs_edit', {
+    icon: 'edit-block',
+    onAction: () => {
+      const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
+      const image = editorIframe.contents().find('img[data-mce-selected="1"]');
+      MarvinJsEditor.open({
+        mode: 'edit-tinymce',
+        marvinUrl: `/tiny_mce_assets/${image[0].dataset.mceToken}/marvinjs`,
+        editor,
+        image
+      });
+    }
+  });
+
+  function isImage(elem) {
+    return editor.dom.is(elem, 'img') && elem.dataset.mceToken;
+  }
+  function isMarvinJs(elem) {
+    return elem.dataset.sourceType === 'marvinjs';
+  }
+
+  editor.ui.registry.addContextToolbar('marvinJsToolbar', {
+    predicate: (node) => isMarvinJs(node),
+    items: 'marvinjs_edit',
+    position: 'node',
+    scope: 'node'
+  });
+
+  editor.ui.registry.addContextToolbar('ImageToolbar', {
+    predicate: (node) => isImage(node),
+    items: 'image_download',
+    position: 'node',
+    scope: 'node'
+  });
+});