save

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

@@ -4,28 +4,27 @@
  */
 import BlockTune from './block-tune';
 export default class MoveUpTune extends BlockTune {
-  constructor(state) {
-    super(state);
-    this.CSS = {
-      wrapper: '',
-      icon: ''
-    };
-  }
-  /**
+    constructor(state) {
+        super(state);
+        this.CSS = {
+            wrapper: '',
+            icon: ''
+        };
+    }
+    /**
      * Create "MoveUp" button and add click event listener
      * @returns [Element}
      */
-  render() {
-    let moveUpButton = $.make('div', [], {});
-
-    moveUpButton.addEventListener('click', this.handle, false);
-    return moveUpButton;
-  }
-  /**
+    render() {
+        let moveUpButton = $.make('div', [], {});
+        moveUpButton.addEventListener('click', this.handle, false);
+        return moveUpButton;
+    }
+    /**
      * Move current block up
      * @param {Event} event
      */
-  handle(event) {
-    console.log('hey');
-  }
+    handle(event) {
+        console.log("hey");
+    }
 }

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

@@ -4,20 +4,20 @@
  * All tunes must expand this class
  */
 export default class BlockTune {
-  /**
+    /**
      * Tune's state
      * @param {Object} state
      */
-  constructor(state) {
-    this.state = state;
-  }
-  /**
+    constructor(state) {
+        this.state = state;
+    }
+    /**
      * @return {Element}
      */
-  render() { }
-  /**
+    render() { }
+    /**
      * Handle click event
      * @param {Event} event
      */
-  handle(event) { }
+    handle(event) { }
 }

src/components/modules/toolbar-inline.js

@@ -1,118 +1,113 @@
 import Selection from '../selection';
 export default class InlineToolbar extends Module {
-  /**
+    /**
      * @constructor
      */
-  constructor({ config }) {
-    super({ config });
-    /**
+    constructor({ config }) {
+        super({ config });
+        /**
          * Inline Toolbar elements
          */
-    this.nodes = {
-      wrapper: null,
-    };
-    /**
+        this.nodes = {
+            wrapper: null,
+        };
+        /**
          * CSS styles
          */
-    this.CSS = {
-      inlineToolbar: 'ce-inline-toolbar',
-      inlineToolbarShowed: 'ce-inline-toolbar--showed',
-    };
-    /**
+        this.CSS = {
+            inlineToolbar: 'ce-inline-toolbar',
+            inlineToolbarShowed: 'ce-inline-toolbar--showed',
+        };
+        /**
          * Margin above/below the Toolbar
          */
-    this.toolbarVerticalMargin = 20;
-  }
-  /**
+        this.toolbarVerticalMargin = 20;
+    }
+    /**
      * Making DOM
      */
-  make() {
-    this.nodes.wrapper = $.make('div', this.CSS.inlineToolbar);
-    /**
+    make() {
+        this.nodes.wrapper = $.make('div', this.CSS.inlineToolbar);
+        /**
          * Append Inline Toolbar to the Editor
          */
-    $.append(this.Editor.UI.nodes.wrapper, this.nodes.wrapper);
-  }
-  /**
+        $.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;
+    handleShowingEvent(event) {
+        if (!this.allowedToShow(event)) {
+            this.close();
+            return;
+        }
+        this.move();
+        this.open();
     }
-    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
+    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);
+        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';
     }
-    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);
-  }
-  /**
+    open() {
+        this.nodes.wrapper.classList.add(this.CSS.inlineToolbarShowed);
+    }
+    /**
      * Hides Inline Toolbar
      */
-  close() {
-    this.nodes.wrapper.classList.remove(this.CSS.inlineToolbarShowed);
-  }
-  /**
+    close() {
+        this.nodes.wrapper.classList.remove(this.CSS.inlineToolbarShowed);
+    }
+    /**
      * Need to show Inline Toolbar or not
      * @param {KeyboardEvent|MouseEvent} event
      */
-  allowedToShow(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 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];
     }
-    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];
-  }
 }