Implement simple formatting, add required packages

package.json

@@ -3,8 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
+    "prop-types": "^15.7.2",
+    "ramda": "^0.27.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-icons": "^3.10.0",
     "react-scripts": "1.1.1"
   },
   "scripts": {

src/App.js

@@ -1,28 +1,30 @@
-import React, {Component} from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.css';
-import ControlPanel from "./control-panel/ControlPanel";
-import FileZone from "./file-zone/FileZone";
+import PLUGINS from './text-editor/plugins';
+import { groupBy, isNil } from 'ramda';
+import TextEditor from './text-editor/TextEditor';
 import getMockText from './text.service';
 
-class App extends Component {
-    getText() {
-        getMockText().then(function (result) {
-            console.log(result);
-        });
-    }
-    render() {
-        return (
-            <div className="App">
-                <header>
-                    <span>Simple Text Editor</span>
-                </header>
-                <main>
-                    <ControlPanel/>
-                    <FileZone/>
-                </main>
-            </div>
-        );
-    }
+const groupedPlugins = groupBy(
+  plugin => String(!isNil(plugin.groupId) ? plugin.groupId : 0),
+  PLUGINS
+);
+
+function App() {
+  const [text, setText] = useState('');
+
+  useEffect(() => {getMockText().then(text => setText(text))}, []);
+
+  return (
+    <div className="App">
+      <header>
+        <span>Simple Text Editor</span>
+      </header>
+      <main>
+        <TextEditor groupedPlugins={groupedPlugins}>{text}</TextEditor>
+      </main>
+    </div>
+  );
 }
 
 export default App;

src/index.css

@@ -16,4 +16,8 @@ footer {
 
 #root {
   height: 100%;
-}
+}
+
+:root {
+  --content-width: 600px;
+}

src/text-editor/TextEditor.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+import ControlPanel from './components/control-panel/ControlPanel';
+import FileZone from './components/file-zone/FileZone';
+
+function TextEditor(props) {
+  return (
+    <Fragment>
+      <ControlPanel groups={props.groupedPlugins}/>
+      <FileZone>{props.children}</FileZone>
+    </Fragment>
+  );
+}
+
+TextEditor.propTypes = {
+  groupedPlugins: PropTypes.object
+};
+
+export default TextEditor;

src/text-editor/components/control-panel-action-group/ControlPanelActionGroup.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function ControlPanelActionGroup(props) {
+  const renderedPlugins = props.plugins.map((plugin, i) => {
+    const TagName = plugin.component;
+    return <TagName {...plugin.props} key={i}/>;
+  });
+  return (
+    <div className="control-panel-actions">
+      {renderedPlugins}
+    </div>
+  );
+}
+
+ControlPanelActionGroup.propTypes = {
+  plugins: PropTypes.array
+};
+
+ControlPanelActionGroup.defaultProps = {
+  plugins: []
+};
+
+export default ControlPanelActionGroup;

src/text-editor/components/control-panel/ControlPanel.css

@@ -0,0 +1,13 @@
+.control-panel {
+    background-color: #fff;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    padding: 5px 0;
+    width: var(--content-width);
+    margin: 0 auto;
+}
+
+.control-panel__group:not(:last-child) {
+    border-right: 1px solid gray;
+}

src/text-editor/components/control-panel/ControlPanel.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './ControlPanel.css';
+import ControlPanelActionGroup from '../control-panel-action-group/ControlPanelActionGroup';
+
+function ControlPanel(props) {
+  return (
+    <div className="control-panel">
+      {Object.keys(props.groups).map(groupId => (
+        <div className="control-panel__group" key={groupId}>
+          <ControlPanelActionGroup plugins={props.groups[groupId]}/>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+ControlPanel.propTypes = {
+  groups: PropTypes.object.isRequired
+};
+
+export default ControlPanel;

src/text-editor/components/file-zone/FileZone.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import './FileZone.css';
+
+function FileZone(props) {
+  return (
+    <div id="file-zone">
+      <div id="file" contentEditable={true}>
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+export default FileZone;

src/text-editor/plugins/index.js

@@ -0,0 +1,7 @@
+import { SIMPLE_ACTION_PLUGIN_CONFIG } from './simple-action';
+
+const PLUGINS = [
+  ...SIMPLE_ACTION_PLUGIN_CONFIG
+];
+
+export default PLUGINS;

src/text-editor/plugins/simple-action/SimpleAction.css

@@ -0,0 +1,17 @@
+.action-button {
+    background-color: transparent;
+    border: none;
+    padding: 5px 5px;
+}
+
+.action-button:hover {
+    background-color: lightgrey;
+}
+
+.action-button__icon {
+    vertical-align: middle;
+}
+
+.action-button--active {
+    background-color: grey;
+}

src/text-editor/plugins/simple-action/SimpleAction.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+
+import './SimpleAction.css';
+
+function SimpleAction(props) {
+  const [isActive, setIsActive] = useState(document.queryCommandState(props.command));
+  const Icon = props.icon;
+
+  useEffect(
+    () => {
+      const listener = () => setIsActive(document.queryCommandState(props.command));
+      document.addEventListener('selectionchange', listener);
+      return () => document.removeEventListener('selectionchange', listener);
+    },
+    []
+  );
+
+  return (
+    <button
+      type="button"
+      className={classNames({
+        'action-button': true,
+        'action-button--active': isActive
+      })}
+      onClick={() => document.execCommand(props.command)}
+    >
+      <Icon className="action-button__icon"/>
+    </button>
+  );
+}
+
+SimpleAction.propTypes = {
+  command: PropTypes.string.isRequired,
+  icon: PropTypes.func.isRequired
+};
+
+export default SimpleAction;