Dont show Block Actions on new paragraphs (#532)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "build/codex-editor.js",
   "types": "./types/index.d.ts",

src/components/modules/blockEvents.ts

@@ -200,7 +200,7 @@ export default class BlockEvents extends Module {
       /**
        * Show Toolbar
        */
-      this.Editor.Toolbar.open();
+      this.Editor.Toolbar.open(false);
 
       /**
        * Show Plus Button

src/components/modules/toolbar/index.ts

@@ -78,6 +78,7 @@ export default class Toolbar extends Module {
       toolbar: 'ce-toolbar',
       content: 'ce-toolbar__content',
       actions: 'ce-toolbar__actions',
+      actionsOpened: 'ce-toolbar__actions--opened',
 
       toolbarOpened: 'ce-toolbar--opened',
 
@@ -186,15 +187,23 @@ export default class Toolbar extends Module {
   }
 
   /**
-   * Open Toolbar with Plus Button
+   * Open Toolbar with Plus Button and Actions
+   * @param {boolean} withBlockActions - by default, Toolbar opens with Block Actions.
+   *                                     This flag allows to open Toolbar without Actions.
    */
-  public open(): void {
+  public open(withBlockActions: boolean = true): void {
     /**
      * Wait Block rendering for correct height computing
      */
     setTimeout(() => {
       this.move();
       this.nodes.wrapper.classList.add(Toolbar.CSS.toolbarOpened);
+
+      if (withBlockActions) {
+        this.blockActions.show();
+      } else {
+        this.blockActions.hide();
+      }
     }, 50);
   }
 
@@ -213,6 +222,7 @@ export default class Toolbar extends Module {
     this.nodes.wrapper.classList.remove(Toolbar.CSS.toolbarOpened);
 
     /** Close components */
+    this.blockActions.hide();
     this.Editor.Toolbox.close();
     this.Editor.BlockSettings.close();
   }
@@ -233,6 +243,21 @@ export default class Toolbar extends Module {
     };
   }
 
+  /**
+   * Block actions appearance manipulations
+   * @return {{hide: function(): void, show: function(): void}}
+   */
+  private get blockActions(): {hide: () => void, show: () => void} {
+    return {
+      hide: () => {
+        this.nodes.actions.classList.remove(Toolbar.CSS.actionsOpened);
+      },
+      show : () => {
+        this.nodes.actions.classList.add(Toolbar.CSS.actionsOpened);
+      },
+    };
+  }
+
   /**
    * Handler for Plus Button
    * @param {MouseEvent} event

src/styles/toolbar.css

@@ -47,6 +47,11 @@
     right: 0;
     top: 10px;
     padding-right: 16px;
+    opacity: 0;
+
+    &--opened {
+      opacity: 1;
+    }
 
     &-buttons {
       text-align: right;