Fix #75 Allow text alignment on text editor

client/package.json

@@ -58,9 +58,10 @@
     "axios": "^0.18.0",
     "chart.js": "^2.4.0",
     "classnames": "^2.2.5",
-    "draft-js": "^0.10.0",
-    "draft-js-export-html": "^0.5.2",
+    "draft-js": "^0.10.5",
+    "draftjs-to-html": "^0.8.4",
     "history": "^3.0.0",
+    "html-to-draftjs": "^1.4.0",
     "html-to-text": "^4.0.0",
     "keycode": "^2.1.4",
     "localStorage": "^1.0.3",

client/src/core-components/text-editor.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import {Editor} from 'react-draft-wysiwyg';
-import {EditorState, ContentState, convertFromHTML} from 'draft-js';
-import {stateToHTML} from 'draft-js-export-html';
+import {EditorState, ContentState, convertToRaw} from 'draft-js';
+import draftToHtml from 'draftjs-to-html';
+import htmlToDraft from 'html-to-draftjs';
+
 import {isIE} from 'lib-core/navigator';
 
 class TextEditor extends React.Component {
@@ -21,7 +23,7 @@ class TextEditor extends React.Component {
 
     static getEditorStateFromHTML(htmlString) {
         if(isIE()) return htmlString;
-        const blocksFromHTML = convertFromHTML(htmlString);
+        const blocksFromHTML = htmlToDraft(htmlString);
         const state = ContentState.createFromBlockArray(
             blocksFromHTML.contentBlocks,
             blocksFromHTML.entityMap
@@ -32,7 +34,7 @@ class TextEditor extends React.Component {
 
     static getHTMLFromEditorState(editorState) {
         if(isIE()) return editorState;
-        return stateToHTML(editorState.getCurrentContent());
+        return draftToHtml(convertToRaw(editorState.getCurrentContent()));
     }
 
     static isEditorState(editorState) {
@@ -97,7 +99,7 @@ class TextEditor extends React.Component {
 
     getToolbarOptions() {
         return {
-            options: ['inline', 'blockType', 'list', 'link', 'image'],
+            options: ['inline', 'blockType', 'list', 'link', 'image', 'textAlign'],
             inline: {
                 inDropdown: false,
                 options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace']
@@ -114,7 +116,11 @@ class TextEditor extends React.Component {
                 urlEnabled: true,
                 uploadEnabled: false,
                 alignmentEnabled: false
-            }
+            },
+            textAlign: {
+                inDropdown: false,
+                options: ['left', 'center', 'right', 'justify'],
+            },
         };
     }
 

tests/system/add-department.rb

@@ -30,7 +30,7 @@ describe'system/add-department' do
 
             row = $database.getRow('department', 5, 'id')
 
-            (row['name']).should.equal('<b>new department</b>')
+            (row['name']).should.equal('<b>new department</b>')
 
             lastLog = $database.getLastRow('log')
             (lastLog['type']).should.equal('ADD_DEPARTMENT')