feat: added alignment tune

src/components/block-tunes/block-tune-alignment.ts

@@ -0,0 +1,147 @@
+/**
+ * @class AlignmentCenterTune
+ * @classdesc Editor's default tune that aligns blocks
+ *
+ * @copyright <CodeX Team> 2020
+ * @author Sergio Moreno <sergiomorenoalbert@gmail.com>
+ */
+import { API, BlockTune } from '../../../types';
+import $ from '../dom';
+import { AlignmentButtonType } from '../../../types/block-tunes';
+
+/**
+ *
+ */
+export default class AlignmentCenterTune implements BlockTune {
+  /**
+   * Property that contains Editor.js API methods
+   *
+   * @see {@link docs/api.md}
+   */
+  private readonly api: API;
+  private _state: { elements: HTMLElement[] }
+
+  /**
+   * Styles
+   */
+  private _CSS = {
+    button: 'ce-settings__button',
+    buttonActive: 'ce-settings__button--active',
+  };
+
+  /**
+   * AlignCenterTune constructor
+   *
+   * @param {API} api - Editor's API
+   */
+  constructor({ api }) {
+    this._state = {
+      elements: [],
+    };
+    this.api = api;
+  }
+
+  /**
+   * Create "Align" button and add click event listener
+   *
+   * @returns {HTMLElement[]}
+   */
+  public render(): HTMLElement[] {
+    this._state.elements = [
+      {
+        alignment: 'left',
+        icon: 'align-left',
+        t: this.api.i18n.t('Align left'),
+      },
+      {
+        alignment: 'center',
+        icon: 'align-center',
+        t: this.api.i18n.t('Align center'),
+      },
+      {
+        alignment: 'right',
+        icon: 'align-right',
+        t: this.api.i18n.t('Align right'),
+      },
+    ].map((el: AlignmentButtonType) => {
+      const button = this.createButtons(el);
+
+      return this.findTheSelected(button, el);
+    });
+
+    return this._state.elements;
+  }
+
+  /**
+   * This method searches on blocks if it's aligned, it's useful when opening and closing tunes popup.
+   * We can't store the selected option on the class, because reinitializes every time the tune is opened.
+   * So if the block, contains align-{left|right|center}, we add active to that element
+   *
+   * @param {HTMLElement} button - Button element
+   * @param {AlignmentButtonType} alignment - Aligment can be left, right or center
+   * @returns {HTMLElement}
+   */
+  private findTheSelected(button: HTMLElement, alignment: AlignmentButtonType): HTMLElement {
+    const block = this.api.blocks.getBlockByIndex(this.api.blocks.getCurrentBlockIndex());
+
+    if (block.holder.classList.contains(`align-${alignment.alignment}`)) {
+      button.classList.add(this._CSS.buttonActive);
+
+      return button;
+    }
+
+    return button;
+  }
+
+  /**
+   * Align block conditions passed
+   *
+   * @param {MouseEvent} event - click event
+   * @param button - Button element
+   * @param elementClicked - BUtton that is clicked on tunes
+   */
+  private handleClick(event: MouseEvent, button: AlignmentButtonType, elementClicked: HTMLElement): void {
+    // we check if the clicked button is the same, for just toggle it.
+    // if is not the same, we remove the active status.
+    // in this way, we can handle just one click on one aligment at the same time
+    this._state.elements = this._state.elements.map(e => {
+      if (!e.isEqualNode(elementClicked)) {
+        e.classList.remove(this._CSS.buttonActive);
+      } else {
+        e.classList.toggle(this._CSS.buttonActive);
+      }
+
+      return e;
+    });
+
+    // we add a class of the aligment of the content block
+    this.api.blocks.align(button.alignment);
+
+    this.api.tooltip.hide();
+
+    /**
+     * Prevent firing ui~documentClicked that can drop currentBlock pointer
+     */
+    event.stopPropagation();
+  }
+
+  /**
+   * Builder for alignment buttons
+   *
+   * @param {AlignmentButtonType} button - The button element
+   * @returns {HTMLElement}
+   */
+  private createButtons(button: AlignmentButtonType): HTMLElement {
+    const element = $.make('div', [ this._CSS.button ], {});
+
+    element.appendChild($.svg(button.icon, 16, 16));
+    this.api.listeners.on(element, 'click', (event: MouseEvent) => this.handleClick(event, button, element), false);
+
+    /**
+     * Enable tooltip module
+     */
+    this.api.tooltip.onHover(element, button.t);
+
+    return element;
+  }
+}

src/components/block/index.ts

@@ -22,6 +22,7 @@ import { ToolType } from '../modules/tools';
 import MoveUpTune from '../block-tunes/block-tune-move-up';
 import DeleteTune from '../block-tunes/block-tune-delete';
 import MoveDownTune from '../block-tunes/block-tune-move-down';
+import AlignTune from '../block-tunes/block-tune-alignment';
 
 /**
  * Interface describes Block class constructor argument
@@ -591,6 +592,10 @@ export default class Block {
         name: 'moveDown',
         Tune: MoveDownTune,
       },
+      {
+        name: 'align',
+        Tune: AlignTune,
+      },
     ];
 
     // Pluck tunes list and return tune instances with passed Editor API and settings

src/components/modules/api/blocks.ts

@@ -2,6 +2,7 @@ import Module from '../../__module';
 
 import { BlockAPI as BlockAPIInterface, Blocks } from '../../../../types/api';
 import { BlockToolData, OutputData, ToolConfig } from '../../../../types';
+import { AlignmentType } from '../../../../types/block-tunes';
 import * as _ from './../../utils';
 import BlockAPI from '../../block/api';
 
@@ -18,6 +19,7 @@ export default class BlocksAPI extends Module {
   public get methods(): Blocks {
     return {
       clear: (): void => this.clear(),
+      align: (alignment: 'left' | 'center' | 'right'): void => this.align(alignment),
       render: (data: OutputData): Promise<void> => this.render(data),
       renderFromHTML: (data: string): Promise<void> => this.renderFromHTML(data),
       delete: (index?: number): void => this.delete(index),
@@ -102,6 +104,28 @@ export default class BlocksAPI extends Module {
     this.Editor.Toolbar.move(false);
   }
 
+  /**
+   * Aligns content block to his content
+   *
+   * @param {AlignmentType} alignment - Aligment for the block, can be right, left, or center
+   */
+  public align(alignment: AlignmentType): void {
+    // check if some alignment is already present, if so just remove them and the new one
+    const classes = this.Editor.BlockManager.currentBlock.holder.classList;
+
+    if (classes.contains(`align-${alignment}`)) {
+      classes.remove(`align-${alignment}`);
+    } else {
+      classes.forEach(cls => {
+        if (cls.includes('align-')) {
+          classes.remove(cls);
+        }
+      });
+
+      classes.add(`align-${alignment}`);
+    }
+  }
+
   /**
    * Deletes Block
    *

src/styles/block.css

@@ -77,6 +77,18 @@
   }
 }
 
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-left {
+  text-align: left;
+}
+
 .codex-editor--narrow .ce-block--focused {
   @media (--not-mobile) {
     margin-right: calc(var(--narrow-mode-right-padding) * -1);

types/api/blocks.d.ts

@@ -1,6 +1,7 @@
 import {OutputData} from '../data-formats/output-data';
 import {BlockToolData, ToolConfig} from '../tools';
 import {BlockAPI} from './block';
+import { AlignmentType } from '../block-tunes';
 
 /**
  * Describes methods to manipulate with Editor`s blocks
@@ -11,6 +12,14 @@ export interface Blocks {
    */
   clear(): void;
 
+
+  /**
+   * Aligns content of the block
+   * @param {AlignmentType} alignment - alignment where the block is aligned to
+   * @returns {void}
+   */
+  align(align: AlignmentType): void;
+
   /**
    * Render passed data
    * @param {OutputData} data

types/block-tunes/block-tune.d.ts

@@ -7,9 +7,9 @@ export interface BlockTune {
   /**
    * Returns block tune HTMLElement
    *
-   * @return {HTMLElement}
+   * @return {HTMLElement[] | HTMLElement}
    */
-  render(): HTMLElement;
+  render(): HTMLElement[] | HTMLElement;
 }
 
 /**
@@ -18,3 +18,7 @@ export interface BlockTune {
 export interface BlockTuneConstructable {
   new (config: {api: API, settings?: ToolConfig}): BlockTune;
 }
+
+export type AlignmentType = 'right' | 'center' | 'left';
+
+export type AlignmentButtonType = { icon: string; alignment: AlignmentType; t: string; };