X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/ea62fe6004b2403c245d02a0b957f29d9c232ccd..refs/pull/4467/head:/resources/js/wysiwyg/toolbars.js

diff --git a/resources/js/wysiwyg/toolbars.js b/resources/js/wysiwyg/toolbars.js
index 740220d84..4663ad132 100644
--- a/resources/js/wysiwyg/toolbars.js
+++ b/resources/js/wysiwyg/toolbars.js
@@ -7,13 +7,13 @@ export function getPrimaryToolbar(options) {
 
     const toolbar = [
         'undo redo',
-        'styleselect',
+        'styles',
         'bold italic underline forecolor backcolor formatoverflow',
         'alignleft aligncenter alignright alignjustify',
         'bullist numlist listoverflow',
         textDirPlugins,
         'link table imagemanager-insert insertoverflow',
-        'code about fullscreen'
+        'code about fullscreen',
     ];
 
     return toolbar.filter(row => Boolean(row)).join(' | ');
@@ -26,17 +26,17 @@ function registerPrimaryToolbarGroups(editor) {
     editor.ui.registry.addGroupToolbarButton('formatoverflow', {
         icon: 'more-drawer',
         tooltip: 'More',
-        items: 'strikethrough superscript subscript inlinecode removeformat'
+        items: 'strikethrough superscript subscript inlinecode removeformat',
     });
     editor.ui.registry.addGroupToolbarButton('listoverflow', {
         icon: 'more-drawer',
         tooltip: 'More',
-        items: 'tasklist outdent indent'
+        items: 'tasklist outdent indent',
     });
     editor.ui.registry.addGroupToolbarButton('insertoverflow', {
         icon: 'more-drawer',
         tooltip: 'More',
-        items: 'hr codeeditor drawio media details'
+        items: 'customhr codeeditor drawio media details',
     });
 }
 
@@ -50,15 +50,29 @@ function registerLinkContextToolbar(editor) {
         },
         position: 'node',
         scope: 'node',
-        items: 'link unlink openlink'
+        items: 'link unlink openlink',
+    });
+}
+
+/**
+ * @param {Editor} editor
+ */
+function registerImageContextToolbar(editor) {
+    editor.ui.registry.addContextToolbar('imagecontexttoolbar', {
+        predicate(node) {
+            return node.closest('img') !== null;
+        },
+        position: 'node',
+        scope: 'node',
+        items: 'image',
     });
 }
 
 /**
  * @param {Editor} editor
- * @param {WysiwygConfigOptions} options
  */
-export function registerAdditionalToolbars(editor, options) {
+export function registerAdditionalToolbars(editor) {
     registerPrimaryToolbarGroups(editor);
     registerLinkContextToolbar(editor);
-}
\ No newline at end of file
+    registerImageContextToolbar(editor);
+}