feat: paragraph alignment

README.md

@@ -69,19 +69,21 @@ The Paragraph Tool supports these configuration parameters:
 | ----- | -------- | ------------------ |
 | placeholder | `string` | The placeholder. Will be shown only in the first paragraph when the whole editor is empty.  |
 | preserveBlank | `boolean` | (default: `false`) Whether or not to keep blank paragraphs when saving editor data |
+| defaultAlignment | `left|center|right` | (default: `left`) Where should be aligned the by default the paragraph text |
 
 ## Output data
 
 | Field  | Type     | Description      |
 | ------ | -------- | ---------------- |
 | text   | `string` | paragraph's text |
-
+| alignment   | `left|center|right` | paragraph's alignment |
 
 ```json
 {
     "type" : "paragraph",
     "data" : {
         "text" : "Check out our projects on a <a href=\"https://github.com/codex-team\">GitHub page</a>.",
+        "alignment": "left"
     }
 }
 ```

src/index.css

@@ -3,6 +3,16 @@
     outline: none;
 }
 
+.ce-paragraph--right {
+  text-align: right;
+}
+.ce-paragraph--center {
+  text-align: center;
+}
+.ce-paragraph--left {
+  text-align: left;
+}
+
 .ce-paragraph[data-placeholder]:empty::before{
   content: attr(data-placeholder);
   color: #707684;

src/index.js

@@ -34,6 +34,30 @@ class Paragraph {
     return '';
   }
 
+  /**
+   * Allowed paragraph alignments
+   *
+   * @public
+   * @returns {{left: string, center: string}}
+  */
+  static get ALIGNMENTS() {
+    return {
+      left: 'left',
+      center: 'center',
+      right: 'right',
+    };
+  }
+
+  /**
+   * Default paragraph alignment
+   *
+   * @public
+   * @returns {string}
+   */
+  static get DEFAULT_ALIGNMENT() {
+    return Paragraph.ALIGNMENTS.left;
+  }
+
   /**
    * Render plugin`s main Element and fill it with saved data
    *
@@ -44,10 +68,17 @@ class Paragraph {
    */
   constructor({data, config, api}) {
     this.api = api;
+    this.config = config;
 
     this._CSS = {
       block: this.api.styles.block,
-      wrapper: 'ce-paragraph'
+      wrapper: 'ce-paragraph',
+      settingsButtonActive: this.api.styles.settingsButtonActive,
+      alignment: {
+        left: 'ce-paragraph--left',
+        center: 'ce-paragraph--center',
+        right: 'ce-paragraph--right',
+      }
     };
     this.onKeyUp = this.onKeyUp.bind(this);
 
@@ -56,7 +87,24 @@ class Paragraph {
      * @type {string}
      */
     this._placeholder = config.placeholder ? config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;
-    this._data = {};
+    this._data = {
+      text: data.text || '',
+      alignment: data.alignment || config.defaultAlignment || Paragraph.DEFAULT_ALIGNMENT
+    };
+    this._tunesButtons = [
+      {
+        name: 'left',
+        icon: require('./tune-left-icon.svg').default
+      },
+      {
+        name: 'center',
+        icon: require('./tune-center-icon.svg').default
+      },
+      {
+        name: 'right',
+        icon: require('./tune-right-icon.svg').default
+      }
+    ];
     this._element = this.drawView();
     this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
 
@@ -89,7 +137,7 @@ class Paragraph {
   drawView() {
     let div = document.createElement('DIV');
 
-    div.classList.add(this._CSS.wrapper, this._CSS.block);
+    div.classList.add(this._CSS.wrapper, this._CSS.block, this._CSS.alignment[this._data.alignment]);
     div.contentEditable = true;
     div.dataset.placeholder = this.api.i18n.t(this._placeholder);
 
@@ -115,12 +163,41 @@ class Paragraph {
    */
   merge(data) {
     let newData = {
-      text : this.data.text + data.text
+      text : this.data.text + data.text,
+      alignment: this.data.alignment,
     };
 
     this.data = newData;
   }
 
+  /**
+   * Renders tunes buttons
+   */
+  renderSettings() {
+    const wrapper = document.createElement('div');
+    this._tunesButtons.map(tune => {
+      const button = document.createElement('div');
+      button.classList.add('cdx-settings-button');
+      button.innerHTML = tune.icon;
+      // if we pass default alignment on config tool, it must display activated because
+      // isn't the default lifecycle
+      button.classList.toggle(this._CSS.settingsButtonActive, tune.name === (this.data.alignment || this.config.defaultAlignment));
+      wrapper.appendChild(button);
+      return button;
+    }).forEach((element, index, elements) => {
+      element.addEventListener('click', () => {
+        this._toggleTune(this._tunesButtons[index].name);
+        elements.forEach((el, i) => {
+          const { name } = this._tunesButtons[i];
+          el.classList.toggle(this._CSS.settingsButtonActive, name === this.data.alignment);
+          this._element.classList.toggle(this._CSS.alignment[name], name === this.data.alignment)
+        });
+      });
+    });
+
+    return wrapper;
+  }
+
   /**
    * Validate Paragraph block data:
    * - check for emptiness
@@ -145,7 +222,8 @@ class Paragraph {
    */
   save(toolsContent) {
     return {
-      text: toolsContent.innerHTML
+      text: toolsContent.innerHTML,
+      alignment: this.data.alignment,
     };
   }
 
@@ -156,7 +234,8 @@ class Paragraph {
    */
   onPaste(event) {
     const data = {
-      text: event.detail.data.innerHTML
+      text: event.detail.data.innerHTML,
+      alignment: event.detail.data.style.textAlign || this.config.defaultAlignment || Paragraph.DEFAULT_ALIGNMENT,
     };
 
     this.data = data;
@@ -179,7 +258,7 @@ class Paragraph {
     return {
       text: {
         br: true,
-      }
+      },
     };
   }
 
@@ -210,6 +289,20 @@ class Paragraph {
     this._element.innerHTML = this._data.text || '';
   }
 
+  /**
+ * @private
+ * Click on the Settings Button
+ * If the same alignment is clicked, we reset to default status
+ * @param {string} tune — tune name from this.settings
+ */
+  _toggleTune(tune) {
+    if (this.data.alignment === tune) {
+      this.data.alignment = this.config.defaultAlignment;
+    } else {
+      this.data.alignment = tune;
+    }
+  }
+
   /**
    * Used by Editor paste handling API.
    * Provides configuration to handle P tags.
@@ -218,8 +311,8 @@ class Paragraph {
    */
   static get pasteConfig() {
     return {
-      tags: [ 'P' ]
-    };
+      tags: ['p'],
+    }
   }
 
   /**