need to figure out with assets

src/assets/toolbar-settings.svg

@@ -0,0 +1,16 @@
+<svg width="18px" height="4px" viewBox="0 0 18 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+  <desc>Created with Sketch.</desc>
+  <defs></defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Settings" transform="translate(-1288.000000, -1593.000000)" fill="#7B7E89">
+      <g id="Block---HEADER" transform="translate(53.000000, 1572.000000)">
+        <g id="Settings-Icon" transform="translate(1235.000000, 21.000000)">
+          <circle id="Oval-3" cx="9" cy="2" r="2"></circle>
+          <circle id="Oval-3" cx="2" cy="2" r="2"></circle>
+          <circle id="Oval-3" cx="16" cy="2" r="2"></circle>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/components/__module.js

@@ -0,0 +1,42 @@
+/**
+ * @abstract
+ * @class      Module
+ * @classdesc  All modules inherits from this class.
+ *
+ * @typedef {Module} Module
+ * @property {Object} config - Editor user settings
+ * @property {Object} Editor - List of Editor modules
+ */
+export default class Module {
+    /**
+     * @constructor
+     *
+     * @param {EditorConfig} config
+     */
+    constructor({ config }) {
+        /**
+         * Editor modules list
+         * @type {EditorComponents}
+         */
+        this.Editor = null;
+        /**
+         * Editor configuration object
+         * @type {EditorConfig}
+         */
+        this.config = {};
+        if (new.target === Module) {
+            throw new TypeError('Constructors for abstract class Module are not allowed.');
+        }
+        this.config = config;
+    }
+    /**
+     * Editor modules setter
+     *
+     * @param Editor
+     * @param Editor.modules {@link CodexEditor#moduleInstances}
+     * @param Editor.config {@link CodexEditor#configuration}
+     */
+    set state(Editor) {
+        this.Editor = Editor;
+    }
+}

src/components/block-tunes/block-tune-move-up.js

@@ -6,15 +6,17 @@ import BlockTune from './block-tune';
 export default class MoveUpTune extends BlockTune {
   constructor(state) {
     super(state);
+    this.CSS = {
+      wrapper: '',
+      icon: ''
+    };
   }
   /**
      * Create "MoveUp" button and add click event listener
      * @returns [Element}
      */
   render() {
-    let moveUpButton = $.make('div', [], {
-      textContent: 'Her'
-    });
+    let moveUpButton = $.make('div', [], {});
 
     moveUpButton.addEventListener('click', this.handle, false);
     return moveUpButton;

src/components/block-tunes/block-tune-move-up.ts

@@ -7,20 +7,31 @@ import BlockTune from './block-tune';
 declare var $: any;
 declare var _: any;
 
+/**
+ * CSS classes interface
+ */
+interface ICSS {
+  wrapper: string;
+  icon: string;
+}
+
 export default class MoveUpTune extends BlockTune {
   constructor(state) {
     super(state);
   }
 
+  private CSS: ICSS = {
+    wrapper: '',
+    icon: ''
+  };
+
   /**
    * Create "MoveUp" button and add click event listener
    * @returns [Element}
    */
   render() {
 
-    let moveUpButton = $.make('div', [], {
-      textContent: 'Her'
-    });
+    let moveUpButton = $.make('div', [], {});
 
     moveUpButton.addEventListener('click', this.handle, false);
     return moveUpButton;

src/components/modules/toolbar-inline.js

@@ -0,0 +1,118 @@
+import Selection from '../selection';
+export default class InlineToolbar extends Module {
+  /**
+     * @constructor
+     */
+  constructor({ config }) {
+    super({ config });
+    /**
+         * Inline Toolbar elements
+         */
+    this.nodes = {
+      wrapper: null,
+    };
+    /**
+         * CSS styles
+         */
+    this.CSS = {
+      inlineToolbar: 'ce-inline-toolbar',
+      inlineToolbarShowed: 'ce-inline-toolbar--showed',
+    };
+    /**
+         * Margin above/below the Toolbar
+         */
+    this.toolbarVerticalMargin = 20;
+  }
+  /**
+     * Making DOM
+     */
+  make() {
+    this.nodes.wrapper = $.make('div', this.CSS.inlineToolbar);
+    /**
+         * Append Inline Toolbar to the Editor
+         */
+    $.append(this.Editor.UI.nodes.wrapper, this.nodes.wrapper);
+  }
+  /**
+     * Shows Inline Toolbar by keyup/mouseup
+     * @param {KeyboardEvent|MouseEvent} event
+     */
+  handleShowingEvent(event) {
+    if (!this.allowedToShow(event)) {
+      this.close();
+      return;
+    }
+    this.move();
+    this.open();
+  }
+  /**
+     * Move Toolbar to the selected text
+     */
+  move() {
+    const selectionRect = Selection.rect;
+    const wrapperOffset = this.Editor.UI.nodes.wrapper.getBoundingClientRect();
+    const newCoords = {
+      x: selectionRect.x - wrapperOffset.left,
+      y: selectionRect.y
+                + selectionRect.height
+                // + window.scrollY
+                - wrapperOffset.top
+                + this.toolbarVerticalMargin,
+    };
+    /**
+         * If we know selections width, place InlineToolbar to center
+         */
+
+    if (selectionRect.width) {
+      newCoords.x += Math.floor(selectionRect.width / 2);
+    }
+    this.nodes.wrapper.style.left = Math.floor(newCoords.x) + 'px';
+    this.nodes.wrapper.style.top = Math.floor(newCoords.y) + 'px';
+  }
+  /**
+     * Shows Inline Toolbar
+     */
+  open() {
+    this.nodes.wrapper.classList.add(this.CSS.inlineToolbarShowed);
+  }
+  /**
+     * Hides Inline Toolbar
+     */
+  close() {
+    this.nodes.wrapper.classList.remove(this.CSS.inlineToolbarShowed);
+  }
+  /**
+     * Need to show Inline Toolbar or not
+     * @param {KeyboardEvent|MouseEvent} event
+     */
+  allowedToShow(event) {
+    /**
+         * Tags conflicts with window.selection function.
+         * Ex. IMG tag returns null (Firefox) or Redactors wrapper (Chrome)
+         */
+    const tagsConflictsWithSelection = ['IMG', 'INPUT'];
+
+    if (event && tagsConflictsWithSelection.includes(event.target.tagName)) {
+      return false;
+    }
+    const currentSelection = Selection.get(), selectedText = Selection.text;
+    // old browsers
+
+    if (!currentSelection || !currentSelection.anchorNode) {
+      return false;
+    }
+    // empty selection
+    if (currentSelection.isCollapsed || selectedText.length < 1) {
+      return false;
+    }
+    // is enabled by current Block's Tool
+    const currentBlock = this.Editor.BlockManager.getBlock(currentSelection.anchorNode);
+
+    if (!currentBlock) {
+      return false;
+    }
+    const toolConfig = this.config.toolsConfig[currentBlock.name];
+
+    return toolConfig && toolConfig[this.Editor.Tools.apiSettings.IS_ENABLED_INLINE_TOOLBAR];
+  }
+}

src/styles/settings.css

@@ -2,7 +2,6 @@
   border: 1px dotted #ccc;
   padding: 2px;
   display: none;
-
   &--opened {
     display: block;
   }
@@ -23,7 +22,7 @@
     border: 1px dotted #ccc;
     padding: 2px;
     &::before {
-      content: 'DEFAULT SETTINGS';
+      /*content: 'DEFAULT SETTINGS';*/
       opacity: .4;
       font-size: 12px;
     }
@@ -37,4 +36,4 @@
       background: var(--bg-light);
     }
   }
-}
+}