Toolbar, Toolbox, UI (#239)

* Toolbox making

* Add Toolbox buttons click handler

* Toolbar, Toolbox, UI

* Updates

* update css prefix

example/plugins/text/text.css

@@ -0,0 +1,35 @@
+/**
+* Empty paragraph placeholder
+*/
+
+.ce-text {
+    padding: 15px 0 !important;
+    line-height: 1.6em;
+    outline: none;
+}
+
+.ce-paragraph:empty::before,
+.ce-paragraph p:empty::before{
+    content : attr(data-placeholder);
+    color: #818BA1;
+    opacity: .7;
+    transition: opacity 200ms ease;
+}
+.ce-paragraph:focus::before{
+	opacity: .1;
+}
+
+.toolbar-opened .ce-paragraph::before {
+    display: none;
+}
+
+
+.ce-paragraph p {
+    margin: 1.2em 0;
+}
+.ce-paragraph p:first-of-type{
+    margin-top: 0;
+}
+.ce-paragraph p:last-of-type{
+    margin-bottom: 0;
+}

example/plugins/text/text.js

@@ -0,0 +1,135 @@
+/**
+ * @class Text
+ * @classdesc Paragraph plugin for CodexEditor
+ *
+ * @author CodeX Team (team@ifmo.su)
+ * @copyright CodeX Team 2017
+ * @license The MIT License (MIT)
+ * @version 2.0.0
+ *
+ *
+ * @typedef {Object} TextData
+ * @property {String} text — HTML content to insert to text element
+ *
+ */
+
+class Text {
+
+    /**
+     * Pass true to display this tool in the Editor's Toolbox
+     *
+     * @returns {boolean}
+     */
+    static get displayInToolbox() {
+
+        return true;
+
+    }
+
+    /**
+     * Class for the Toolbox icon
+     *
+     * @returns {string}
+     */
+    static get iconClassName() {
+
+        return 'cdx-text-icon';
+
+    }
+
+    /**
+     * Render plugin`s html and set initial content
+     *
+     * @param {TextData} data — initial plugin content
+     */
+    constructor(data = {}) {
+
+        this._CSS = {
+            wrapper: 'ce-text'
+        };
+
+        this._data = {};
+
+        this._element = this._render();
+        this.data = data;
+
+
+    }
+
+    /**
+     * Create div element and add needed css classes
+     *
+     * @returns {HTMLDivElement} Created DIV element
+     * @private
+     */
+    _render() {
+
+        let div = document.createElement('DIV');
+
+        div.classList.add(this._CSS.wrapper);
+        div.contentEditable = true;
+
+        return div;
+
+    }
+
+    /**
+     * Check if saved text is empty
+     *
+     * @param {TextData} savedData — data received from plugins`s element
+     * @returns {boolean} false if saved text is empty, true otherwise
+     */
+    validate(savedData) {
+
+        if (savedData.text.trim() === '') {
+
+            return false;
+
+        }
+
+        return true;
+
+    }
+
+    /**
+     * Get plugin`s element HTMLDivElement
+     *
+     * @returns {HTMLDivElement} Plugin`s element
+     */
+    get html() {
+
+        return this._element;
+
+    }
+
+    /**
+     * Get current plugin`s data
+     *
+     * @todo sanitize data while saving
+     *
+     * @returns {TextData} Current data
+     */
+    get data() {
+
+        let text = this._element.innerHTML;
+
+        this._data.text = text;
+
+        return this._data;
+
+    }
+
+    /**
+     * Set new data for plugin
+     *
+     * @param {TextData} data — data to set
+     */
+    set data(data) {
+
+        Object.assign(this._data, data);
+
+        this._element.innerHTML = this._data.text || '';
+
+    }
+
+}