Toolbar, Toolbox, UI (#239)

* Toolbox making

* Add Toolbox buttons click handler

* Toolbar, Toolbox, UI

* Updates

* update css prefix

example/plugins/text/text.css

@@ -2,9 +2,10 @@
 * Empty paragraph placeholder
 */
 
-.ce-paragraph {
-    padding: 0.7em 0 !important;
-    line-height: 1.7em;
+.ce-text {
+    padding: 15px 0 !important;
+    line-height: 1.6em;
+    outline: none;
 }
 
 .ce-paragraph:empty::before,

example/plugins/text/text.js

@@ -1,5 +1,5 @@
 /**
- * @class Paragraph
+ * @class Text
  * @classdesc Paragraph plugin for CodexEditor
  *
  * @author CodeX Team (team@ifmo.su)
@@ -8,33 +8,44 @@
  * @version 2.0.0
  *
  *
- * @typedef {Object} ParagraphData
- * @property {String} text — HTML content to insert to paragraph element
+ * @typedef {Object} TextData
+ * @property {String} text — HTML content to insert to text element
  *
  */
 
-class Paragraph {
+class Text {
 
     /**
-     * Get the name of the plugin
+     * Pass true to display this tool in the Editor's Toolbox
      *
-     * @returns {string} The plugin name
+     * @returns {boolean}
      */
-    static get name() {
+    static get displayInToolbox() {
 
-        return 'paragraph';
+        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 {ParagraphData} data — initial plugin content
+     * @param {TextData} data — initial plugin content
      */
     constructor(data = {}) {
 
         this._CSS = {
-            wrapper: 'ce-paragraph'
+            wrapper: 'ce-text'
         };
 
         this._data = {};
@@ -65,7 +76,7 @@ class Paragraph {
     /**
      * Check if saved text is empty
      *
-     * @param {ParagraphData} savedData — data received from plugins`s element
+     * @param {TextData} savedData — data received from plugins`s element
      * @returns {boolean} false if saved text is empty, true otherwise
      */
     validate(savedData) {
@@ -96,7 +107,7 @@ class Paragraph {
      *
      * @todo sanitize data while saving
      *
-     * @returns {ParagraphData} Current data
+     * @returns {TextData} Current data
      */
     get data() {
 
@@ -111,7 +122,7 @@ class Paragraph {
     /**
      * Set new data for plugin
      *
-     * @param {ParagraphData} data — data to set
+     * @param {TextData} data — data to set
      */
     set data(data) {