Notifier module and API (#486)

* Notifier module and API

* add docs

* update notifier module

* bump version

* impr image module

* git cache cleared

* remove image submobule

* add sumbodule

.gitmodules

@@ -27,4 +27,4 @@
 	url = https://github.com/codex-editor/code
 [submodule "example/tools/image"]
 	path = example/tools/image
-	url = git@github.com:codex-editor/image.git
+	url = https://github.com/codex-editor/image

docs/api.md

@@ -13,6 +13,7 @@ export interface IAPI {
    caret: ICaretAPI;
    sanitizer: ISanitizerAPI;
    toolbar: IToolbarAPI;
+   // ...
  }
  ```
 
@@ -20,27 +21,27 @@ export interface IAPI {
 
 Methods that working with Blocks
 
-```swap(fromIndex, toIndex)``` - swaps two Blocks by their positions
+`swap(fromIndex, toIndex)` - swaps two Blocks by their positions
 
-```delete(blockIndex?: Number)``` - deletes Block with passed index
+`delete(blockIndex?: Number)` - deletes Block with passed index
 
-```getCurrentBlockIndex()``` - current Block index
+`getCurrentBlockIndex()` - current Block index
 
-```getBlockByIndex(index: Number)``` - returns Block with passed index
+`getBlockByIndex(index: Number)` - returns Block with passed index
 
-```getBlocksCount()``` - returns Blocks count
+`getBlocksCount()` - returns Blocks count
 
-```stretchBlock(index: number, status: boolean)``` - make Block stretched
+`stretchBlock(index: number, status: boolean)` - make Block stretched
 
-```insertNewBlock()``` - insert new Block after working place
+`insertNewBlock()` - insert new Block after working place
 
 #### ISanitizerAPI
 
-```clean(taintString, config)``` - method uses HTMLJanitor to clean taint string.
+`clean(taintString, config)` - method uses HTMLJanitor to clean taint string.
+
 CodeX Editor provides basic config without attributes, but you can inherit by passing your own config.
 
-If Tool enables inline-tools, we get it's sanitizing rules and merge with your passed custom
-rules.
+If Tool enables inline-tools, we get it's sanitizing rules and merge with your passed custom rules.
 
 Usage:
 
@@ -59,36 +60,68 @@ this.api.sanitizer.clean(taintString, customConfig);
 
 Methods that working with Toolbar
 
-```open()``` - Opens toolbar
+`open()` - opens toolbar
 
-```close()``` - Closes toolbar, toolbox and blockSettings if they are opened
+`close()` - closes toolbar, toolbox and blockSettings if they are opened
 
 ### IEventsAPI
 
 Methods that allows to subscribe on CodeX Editor events
 
-```on(eventName: string, callback: Function)``` - subscribe callback on event
+`on(eventName: string, callback: Function)` - subscribe callback on event
 
-```off(eventName: string, callback: Function)``` - unsubscribe callback from event
+`off(eventName: string, callback: Function)` - unsubscribe callback from event
 
-```emit(eventName: string, data: object)``` - fires all subscribed callbacks with passed data
+`emit(eventName: string, data: object)` - fires all subscribed callbacks with passed data
 
 ### IListenerAPI
 
-Methods that allows to work with DOM listener. Useful when you forgot to remove listener.
-Module collects all listeners and destroys automatically
+Methods that allows to work with DOM listener. Useful when you forgot to remove listener. Module collects all listeners and destroys automatically
 
-```on(element: HTMLElement, eventType: string, handler: Function, useCapture?: boolean)``` - add event listener to HTML element
+`on(element: HTMLElement, eventType: string, handler: Function, useCapture?: boolean)` - add event listener to HTML element
 
-```off(element: HTMLElement, eventType: string, handler: Function)``` - remove event handler from HTML element
+`off(element: HTMLElement, eventType: string, handler: Function)` - remove event handler from HTML element
 
+### NotifierAPI
+
+If you need to show any messages for success or failure events you can use notifications module.
+
+Call on target Editor:
+
+```javascript
+let editor = new CodexEditor({
+  onReady: () => {
+    editor.notifier.show({
+      message: 'Editor is ready!'
+    });
+  },
+});
+```
+
+In Tool's class:
+
+```javascript
+this.api.notifier.show({
+  message: 'Cannot upload image. Wrong mime-type.',
+  style: 'error',
+});
+```
+
+![](https://capella.pics/14fcdbe4-d6eb-41d4-b66e-e0e86ccf1a4b.jpg)
+
+
+Check out [`codex-notifier` package page](https://github.com/codex-team/js-notifier) on GitHub to find docs, params and examples. 
 
 ### Destroy API
+
 If there are necessity to remove CodeX Editor instance from the page you can use `destroy()` method.
 
 It makes following steps:
+
 1. Clear the holder element by setting it\`s innerHTML to empty string
+
 2. Remove all event listeners related to CodeX Editor
+
 3. Delete all properties from instance object and set it\`s prototype to `null`
 
 After executing the `destroy` method, editor inctance becomes an empty object. This way you will free occupied JS Heap on your page.

example/tools/quote

@@ -1 +1 @@
-Subproject commit 718a9e2f1bb13cc04d72911228768700ecaac014
+Subproject commit 68190ac47c4e5aac39f695e9337cb879b35cce22

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "build/codex-editor.js",
   "scripts": {
@@ -25,6 +25,7 @@
     "babel-loader": "^8.0.4",
     "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-class-display-name": "^2.1.0",
+    "codex-notifier": "^1.1.0",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
     "eslint-loader": "^2.1.0",

src/components/interfaces/api.ts

@@ -1,4 +1,5 @@
 import IInputOutputData from './input-output-data';
+import {ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions} from 'codex-notifier';
 
 /**
  * CodeX Editor Public API
@@ -10,6 +11,7 @@ export interface IAPI {
   caret: ICaretAPI;
   events: IEventsAPI;
   listener: IListenerAPI;
+  notifier: INotifierAPI;
   sanitizer: ISanitizerAPI;
   saver: ISaverAPI;
   selection: ISelectionAPI;
@@ -131,6 +133,19 @@ export interface IListenerAPI {
   off: (element: HTMLElement, eventType: string, handler: () => void) => void;
 }
 
+/**
+ * Notifier API
+ */
+export interface INotifierAPI {
+
+  /**
+   * Show web notification
+   *
+   * @param {NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions}
+   */
+  show: (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions) => void;
+}
+
 /**
  * Sanitizer's methods
  */

src/components/interfaces/editor.ts

@@ -32,6 +32,8 @@ export default interface IEditor {
 
   Listeners: Module; // @todo create interface
 
+  Notifier: Module; // @todo create interface
+
   Renderer: Module; // @todo create interface
 
   Sanitizer: Module; // @todo create interface

src/components/modules/api-notifier.ts

@@ -0,0 +1,18 @@
+import Module from '../__module';
+import {ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions} from 'codex-notifier';
+
+export default class NotifierAPI extends Module {
+
+  /**
+   * Available methods
+   */
+  get methods() {
+    return {
+      show: (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions) => this.show(options),
+    };
+  }
+
+  public show(options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions) {
+    return this.Editor.Notifier.show(options);
+  }
+}

src/components/modules/api.ts

@@ -30,6 +30,7 @@ export default class API extends Module {
       caret: this.Editor.CaretAPI.methods,
       events: this.Editor.EventsAPI.methods,
       listener: this.Editor.ListenerAPI.methods,
+      notifier: this.Editor.NotifierAPI.methods,
       sanitizer: this.Editor.SanitizerAPI.methods,
       saver: this.Editor.SaverAPI.methods,
       selection: this.Editor.SelectionAPI.methods,

src/components/modules/notifier.ts

@@ -0,0 +1,25 @@
+import Module from '../__module';
+
+/**
+ * Use external package module for notifications
+ *
+ * @see https://github.com/codex-team/js-notifier
+ */
+import notifier, {ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions} from 'codex-notifier';
+
+/**
+ * Notifier module
+ */
+export default class Notifier extends Module {
+
+  /**
+   * Show web notification
+   *
+   * @param {NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions} options
+   */
+  public show(options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions) {
+    notifier.show(options);
+  }
+}
+
+

yarn.lock

@@ -1374,6 +1374,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codex-notifier@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/codex-notifier/-/codex-notifier-1.1.0.tgz#2374eaa365109f788f74b67782cee3d91db46a20"
+
 collapse-white-space@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.4.tgz#ce05cf49e54c3277ae573036a26851ba430a0091"