Add toolbox on top of each richeditor widget

assets/css/app.scss

@@ -209,6 +209,10 @@ html.is-disabled body {
     align-items: center !important;
 }
 
+.uie-flex-cross-right {
+    justify-content: flex-end !important;
+}
+
 .uie-flex-main-between {
     justify-content: space-between !important;
 }

assets/js/app.js

@@ -242,6 +242,8 @@ global.MonsieurBizRichEditorManager = class {
   initInterface() {
     this.initUiElementsInterface();
     this.initUiPanelsInterface();
+    this.initUiToolsInterface();
+
     document.dispatchEvent(new CustomEvent('mbiz:rich-editor:init-interface-complete', {
       'detail': {'editorManager': this}
     }));
@@ -252,6 +254,24 @@ global.MonsieurBizRichEditorManager = class {
     }.bind(this));
   }
 
+  initUiToolsInterface() {
+      const copyAllButton = this.container.querySelector('.js-uie-tools-copy-all');
+      const pasteAllButton = this.container.querySelector('.js-uie-tools-paste-all');
+      const trashAllButton = this.container.querySelector('.js-uie-tools-trash-all');
+
+      trashAllButton.addEventListener('click', e => {
+        this.resetUiElements();
+      });
+
+      copyAllButton.addEventListener('click', e => {
+        this.saveUiElementsToClipboard();
+      });
+
+      pasteAllButton.addEventListener('click', e => {
+        this.pasteUiElementsFromClipboard();
+      });
+  }
+
   initUiPanelsInterface() {
     let panelsWrapper = document.createElement('div');
     panelsWrapper.innerHTML = Mustache.render(this.config.panelsHtml, { uid: this.config.uid });
@@ -324,7 +344,7 @@ global.MonsieurBizRichEditorManager = class {
       );
     });
     // Disabled?
-    if (!this.isClipboardEmpty()) {
+    if (!this.isClipboardEmpty('monsieurBizRichEditorElementClipboard')) {
       actions.querySelector('.js-uie-paste').classList.remove('disabled');
     }
 
@@ -645,19 +665,41 @@ global.MonsieurBizRichEditorManager = class {
     req.send(data);
   }
 
-  isClipboardEmpty() {
-    const clipboard = window.localStorage.getItem('monsieurBizRichEditorClipboard');
+  isClipboardEmpty(clipboardKey) {
+    const clipboard = window.localStorage.getItem(clipboardKey);
     return null === clipboard || '' === clipboard;
   }
 
+  resetUiElements() {
+    this.initUiElements([], () => { this.write(); });
+  }
+
+  saveUiElementsToClipboard() {
+    window.localStorage.setItem('monsieurBizRichEditorElementsClipboard', JSON.stringify(this.uiElements));
+
+    const button = e.currentTarget;
+    const originalText = button.dataset.tooltip;
+    button.dataset.tooltip = button.dataset.alternateText;
+    window.setTimeout(function () {
+      button.dataset.tooltip = originalText;
+    }, 1000);
+  }
+
+  pasteUiElementsFromClipboard() {
+    const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementsClipboard');
+    const pastedUiElement = JSON.parse(clipboard);
+    this.initUiElements(pastedUiElement, () => { this.write(); });
+  }
+
   saveUiElementToClipboard(uiElement, callback) {
-    window.localStorage.setItem('monsieurBizRichEditorClipboard', JSON.stringify(uiElement));
+    window.localStorage.setItem('monsieurBizRichEditorElementClipboard', JSON.stringify(uiElement));
     callback();
     document.dispatchEvent(new CustomEvent('mbiz:rich-editor:uielement:copied', {}));
   }
 
+
   pasteUiElementFromClipboard(futurePosition) {
-    const clipboard = window.localStorage.getItem('monsieurBizRichEditorClipboard');
+    const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementClipboard');
     if (null !== clipboard) {
       const pastedUiElement = JSON.parse(clipboard);
       const manager = this;

src/Resources/translations/messages.en.yml

@@ -126,6 +126,8 @@ monsieurbiz_richeditor_plugin:
       justify: 'Justify'
     clipboard: 'Clipboard'
     paste_from_clipboard: 'Paste from clipboard'
+    paste_all_from_clipboard: 'Paste all elements'
+    copy_all_from_clipboard: 'Copy all elements'
     copied: 'Copied!'
     copy: 'Copy'
   action:

src/Resources/translations/messages.fr.yml

@@ -126,6 +126,8 @@ monsieurbiz_richeditor_plugin:
       justify: 'Justifié'
     clipboard: 'Presse-papier'
     paste_from_clipboard: 'Coller depuis le presse-papier'
+    paste_all_from_clipboard: 'Coller tous les élements'
+    copy_all_from_clipboard: 'Copier tous les élements '
     copied: 'Copié !'
     copy: 'Copier'
   action:

src/Resources/views/Admin/app.html.twig

@@ -53,7 +53,20 @@
 
 <script id="monsieurbiz-rich-editor-ui-elements-container" type="x-tmpl-mustache">
 {% verbatim %}
-    <div class="ui container">
+    <div class="ui">
+        <div class="uie-flex uie-flex-cross-right">
+            <div class="ui buttons" id="monsieurbiz-rich-editor-tools">
+                <button class="ui icon button js-uie-copy-all" type="button"  data-alternate-text="{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.copied'|trans }}{% verbatim %}" data-tooltip="{% endverbatim %}{{ "monsieurbiz_richeditor_plugin.form.copy_all_from_clipboard"|trans }}{% verbatim %}">
+                    <i class="copy icon"></i>
+                </button>
+                <button class="ui icon button js-uie-paste-all" type="button" data-tooltip="{% endverbatim %}{{ "monsieurbiz_richeditor_plugin.form.paste_all_from_clipboard"|trans }}{% verbatim %}">
+                    <i class="paste icon"></i>
+                </button>
+                 <button class="ui icon button js-uie-trash" type="button" data-tooltip="{% endverbatim %}{{ "monsieurbiz_richeditor_plugin.form.trash"|trans }}{% verbatim %}">
+                    <i class="trash icon"></i>
+                </button>
+            </div>
+        </div>
         <div class="ui segment js-uie-container">
         </div>
     </div>