angular-markdown-editor - npm Package Compare versions

Comparing version 2.0.0-beta to 2.0.0

angular-markdown-editor.d.ts

@@ -5,1 +5,3 @@ /**
 export * from './public_api';
+export { MARKDOWN_EDITOR_VALUE_ACCESSOR as ɵa } from './lib/angular-markdown-editor/angular-markdown-editor.component';
+export { EditorOption as ɵb } from './lib/angular-markdown-editor/models';

angular-markdown-editor.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"Dictionary":{"__symbolic":"interface"},"EditorInstance":{"__symbolic":"interface"},"EditorLocale":{"__symbolic":"interface"},"EditorMethod":{"__symbolic":"interface"},"EditorOption":{"__symbolic":"interface"},"Icon":{"__symbolic":"interface"},"IconSet":{"__symbolic":"interface"},"MarkdownEditorConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}}},"origins":{"Dictionary":"./lib/angular-markdown-editor/models/dictionary.interface","EditorInstance":"./lib/angular-markdown-editor/models/editorInstance.interface","EditorLocale":"./lib/angular-markdown-editor/models/editorLocale.interface","EditorMethod":"./lib/angular-markdown-editor/models/editorMethod.interface","EditorOption":"./lib/angular-markdown-editor/models/editorOption.interface","Icon":"./lib/angular-markdown-editor/models/icon.interface","IconSet":"./lib/angular-markdown-editor/models/iconSet.interface","MarkdownEditorConfig":"./lib/angular-markdown-editor/markdown-editor-config"},"importAs":"angular-markdown-editor"}
+{"__symbolic":"module","version":4,"metadata":{"ɵa":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"AngularMarkdownEditorComponent"},"multi":true},"Dictionary":{"__symbolic":"interface"},"EditorInstance":{"__symbolic":"interface"},"EditorLocale":{"__symbolic":"interface"},"EditorMethod":{"__symbolic":"interface"},"EditorOption":{"__symbolic":"interface"},"Icon":{"__symbolic":"interface"},"IconSet":{"__symbolic":"interface"},"MarkdownEditorConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}]}},"AngularMarkdownEditorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":"angulaMarkdownEditor","selector":"angular-markdown-editor","template":"<textarea #markdownEditorElm id=\"{{textareaId}}\" name=\"{{textareaId}}\" data-provide=\"markdown\" rows=\"{{rows}}\"></textarea>","providers":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{"elm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["markdownEditorElm"]}]}],"locale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textareaId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":["config"]}]],"parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"addLocaleSet":[{"__symbolic":"method"}],"initialization":[{"__symbolic":"method"}],"hookToEditorEvents":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"dispatchCustomEvent":[{"__symbolic":"method"}]}},"AngularMarkdownEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"AngularMarkdownEditorComponent"}],"exports":[{"__symbolic":"reference","name":"AngularMarkdownEditorComponent"}],"entryComponents":[{"__symbolic":"reference","name":"AngularMarkdownEditorComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"defaults":[{}],"value":{"ngModule":{"__symbolic":"reference","name":"AngularMarkdownEditorModule"},"providers":[{"provide":"config","useValue":{"__symbolic":"reference","name":"config"}}]}}}}},"origins":{"ɵa":"./lib/angular-markdown-editor/angular-markdown-editor.component","Dictionary":"./lib/angular-markdown-editor/models/dictionary.interface","EditorInstance":"./lib/angular-markdown-editor/models/editorInstance.interface","EditorLocale":"./lib/angular-markdown-editor/models/editorLocale.interface","EditorMethod":"./lib/angular-markdown-editor/models/editorMethod.interface","EditorOption":"./lib/angular-markdown-editor/models/editorOption.interface","Icon":"./lib/angular-markdown-editor/models/icon.interface","IconSet":"./lib/angular-markdown-editor/models/iconSet.interface","MarkdownEditorConfig":"./lib/angular-markdown-editor/markdown-editor-config","AngularMarkdownEditorComponent":"./lib/angular-markdown-editor/angular-markdown-editor.component","AngularMarkdownEditorModule":"./lib/angular-markdown-editor/angular-markdown-editor.module","ɵb":"./lib/angular-markdown-editor/models"},"importAs":"angular-markdown-editor"}

bundles/angular-markdown-editor.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-	typeof define === 'function' && define.amd ? define('angular-markdown-editor', ['exports'], factory) :
-	(factory((global['angular-markdown-editor'] = {})));
-}(this, (function (exports) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common')) :
+	typeof define === 'function' && define.amd ? define('angular-markdown-editor', ['exports', '@angular/core', '@angular/forms', '@angular/common'], factory) :
+	(factory((global['angular-markdown-editor'] = {}),global.ng.core,global.ng.forms,global.ng.common));
+}(this, (function (exports,core,forms,common) { 'use strict';
 
@@ -88,4 +88,136 @@ var GlobalEditorOptions = {
 }());
+var MARKDOWN_EDITOR_VALUE_ACCESSOR = {
+    provide: forms.NG_VALUE_ACCESSOR,
+    useExisting: core.forwardRef(function () { return AngularMarkdownEditorComponent; }),
+    multi: true
+};
+var AngularMarkdownEditorComponent = /** @class */ (function () {
+    function AngularMarkdownEditorComponent(forRootConfig) {
+        this.forRootConfig = forRootConfig;
+        this.rows = 10;
+        this.onModelChange = function () { };
+        this.onModelTouched = function () { };
+    }
+    Object.defineProperty(AngularMarkdownEditorComponent.prototype, "locale", {
+        set: function (locale) {
+            this.addLocaleSet(locale);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AngularMarkdownEditorComponent.prototype.ngAfterViewInit = function () {
+        this.initialization();
+    };
+    AngularMarkdownEditorComponent.prototype.addLocaleSet = function (editorLocale) {
+        if (!editorLocale) {
+            return;
+        }
+        if (Array.isArray(editorLocale)) {
+            editorLocale.forEach(function (locale) { return $.fn.markdown.messages[locale.language] = locale.dictionary; });
+        }
+        else {
+            $.fn.markdown.messages[editorLocale.language] = editorLocale.dictionary;
+        }
+    };
+    AngularMarkdownEditorComponent.prototype.initialization = function () {
+        var _this = this;
+        var markdownDefaultOptions = $.fn.markdown.defaults;
+        var options = Object.assign({}, markdownDefaultOptions, GlobalEditorOptions, this.forRootConfig, this.options);
+        this.hookToEditorEvents(options);
+        var previousOnChange = options.onChange;
+        options.onChange = function (e) {
+            _this.onModelChange(e && e.getContent && e.getContent());
+            if (typeof previousOnChange === 'function') {
+                previousOnChange(e);
+            }
+        };
+        $("#" + this.textareaId).markdown(options);
+    };
+    AngularMarkdownEditorComponent.prototype.hookToEditorEvents = function (options) {
+        var _this = this;
+        var _loop_1 = function (prop) {
+            if (options.hasOwnProperty(prop) && prop.startsWith('on')) {
+                var previousEvent_1 = options[prop];
+                options[prop] = function (e) {
+                    _this.dispatchCustomEvent(prop, { eventData: e });
+                    if (typeof previousEvent_1 === 'function') {
+                        previousEvent_1(e);
+                    }
+                };
+            }
+        };
+        for (var prop in options) {
+            _loop_1(prop);
+        }
+    };
+    AngularMarkdownEditorComponent.prototype.writeValue = function (value) {
+        this.value = value;
+        if (this.value) {
+            this.elm.nativeElement.value = this.value;
+        }
+    };
+    AngularMarkdownEditorComponent.prototype.registerOnChange = function (fn) {
+        this.onModelChange = fn;
+    };
+    AngularMarkdownEditorComponent.prototype.registerOnTouched = function (fn) {
+        this.onModelTouched = fn;
+    };
+    AngularMarkdownEditorComponent.prototype.dispatchCustomEvent = function (eventName, data, isBubbling, isCancelable) {
+        if (isBubbling === void 0) { isBubbling = true; }
+        if (isCancelable === void 0) { isCancelable = true; }
+        var eventInit = { bubbles: isBubbling, cancelable: isCancelable };
+        if (data) {
+            eventInit.detail = data;
+        }
+        return this.elm.nativeElement.dispatchEvent(new CustomEvent(eventName, eventInit));
+    };
+    return AngularMarkdownEditorComponent;
+}());
+AngularMarkdownEditorComponent.decorators = [
+    { type: core.Injectable },
+    { type: core.Component, args: [{
+                moduleId: 'angulaMarkdownEditor',
+                selector: 'angular-markdown-editor',
+                template: '<textarea #markdownEditorElm id="{{textareaId}}" name="{{textareaId}}" data-provide="markdown" rows="{{rows}}"></textarea>',
+                providers: [MARKDOWN_EDITOR_VALUE_ACCESSOR]
+            },] },
+];
+AngularMarkdownEditorComponent.ctorParameters = function () { return [
+    { type: undefined, decorators: [{ type: core.Inject, args: ['config',] },] },
+]; };
+AngularMarkdownEditorComponent.propDecorators = {
+    "elm": [{ type: core.ViewChild, args: ['markdownEditorElm',] },],
+    "locale": [{ type: core.Input },],
+    "textareaId": [{ type: core.Input },],
+    "options": [{ type: core.Input },],
+    "rows": [{ type: core.Input },],
+};
+var AngularMarkdownEditorModule = /** @class */ (function () {
+    function AngularMarkdownEditorModule() {
+    }
+    AngularMarkdownEditorModule.forRoot = function (config) {
+        if (config === void 0) { config = {}; }
+        return {
+            ngModule: AngularMarkdownEditorModule,
+            providers: [
+                { provide: 'config', useValue: config }
+            ]
+        };
+    };
+    return AngularMarkdownEditorModule;
+}());
+AngularMarkdownEditorModule.decorators = [
+    { type: core.NgModule, args: [{
+                imports: [common.CommonModule],
+                declarations: [AngularMarkdownEditorComponent],
+                exports: [AngularMarkdownEditorComponent],
+                entryComponents: [AngularMarkdownEditorComponent]
+            },] },
+];
+AngularMarkdownEditorModule.ctorParameters = function () { return []; };
 
 exports.MarkdownEditorConfig = MarkdownEditorConfig;
+exports.AngularMarkdownEditorComponent = AngularMarkdownEditorComponent;
+exports.AngularMarkdownEditorModule = AngularMarkdownEditorModule;
+exports.ɵa = MARKDOWN_EDITOR_VALUE_ACCESSOR;
 
@@ -92,0 +224,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

bundles/angular-markdown-editor.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define("angular-markdown-editor",["exports"],t):t(e["angular-markdown-editor"]={})}(this,function(e){"use strict";var t={autofocus:!1,disabledButtons:[],dropZoneOptions:null,enableDropDataUri:!1,footer:"",height:"inherit",hiddenButtons:[],hideable:!1,iconlibrary:"glyph",initialstate:"editor",language:"fr",additionalButtons:[[{name:"groupFont",data:[{name:"cmdStrikethrough",toggle:!1,title:"Strikethrough",icon:{fa:"fa fa-strikethrough",glyph:"glyphicon glyphicon-minus"},callback:function(e){var t,n,o=e.getSelection(),i=e.getContent();t=0===o.length?e.__localize("strikethrough"):o.text,"~~"===i.substr(o.start-2,2)&&"~~"===i.substr(o.end,2)?(e.setSelection(o.start-2,o.end+2),e.replaceSelection(t),n=o.start-2):(e.replaceSelection("~~"+t+"~~"),n=o.start+2),e.setSelection(n,n+t.length)}}]},{name:"groupMisc",data:[{name:"cmdTable",toggle:!1,title:"Table",icon:{fa:"fa fa-table",glyph:"glyphicon glyphicon-th"},callback:function(e){var t,n,o=e.getSelection();t="\n| Tables        | Are           | Cool  | \n| ------------- |:-------------:| -----:| \n| col 3 is      | right-aligned | $1600 | \n| col 2 is      | centered      |   $12 | \n| zebra stripes | are neat      |    $1 |",e.replaceSelection(t),n=o.start,e.setSelection(n,n+t.length)}}]}]]},n=function(){this.options=t};e.MarkdownEditorConfig=n,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("angular-markdown-editor",["exports","@angular/core","@angular/forms","@angular/common"],e):e(t["angular-markdown-editor"]={},t.ng.core,t.ng.forms,t.ng.common)}(this,function(t,e,o,n){"use strict";var r={autofocus:!1,disabledButtons:[],dropZoneOptions:null,enableDropDataUri:!1,footer:"",height:"inherit",hiddenButtons:[],hideable:!1,iconlibrary:"glyph",initialstate:"editor",language:"fr",additionalButtons:[[{name:"groupFont",data:[{name:"cmdStrikethrough",toggle:!1,title:"Strikethrough",icon:{fa:"fa fa-strikethrough",glyph:"glyphicon glyphicon-minus"},callback:function(t){var e,o,n=t.getSelection(),r=t.getContent();e=0===n.length?t.__localize("strikethrough"):n.text,"~~"===r.substr(n.start-2,2)&&"~~"===r.substr(n.end,2)?(t.setSelection(n.start-2,n.end+2),t.replaceSelection(e),o=n.start-2):(t.replaceSelection("~~"+e+"~~"),o=n.start+2),t.setSelection(o,o+e.length)}}]},{name:"groupMisc",data:[{name:"cmdTable",toggle:!1,title:"Table",icon:{fa:"fa fa-table",glyph:"glyphicon glyphicon-th"},callback:function(t){var e,o,n=t.getSelection();e="\n| Tables        | Are           | Cool  | \n| ------------- |:-------------:| -----:| \n| col 3 is      | right-aligned | $1600 | \n| col 2 is      | centered      |   $12 | \n| zebra stripes | are neat      |    $1 |",t.replaceSelection(e),o=n.start,t.setSelection(o,o+e.length)}}]}]]},a=function(){this.options=r},i={provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef(function(){return s}),multi:!0},s=function(){function t(t){this.forRootConfig=t,this.rows=10,this.onModelChange=function(){},this.onModelTouched=function(){}}return Object.defineProperty(t.prototype,"locale",{set:function(t){this.addLocaleSet(t)},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewInit=function(){this.initialization()},t.prototype.addLocaleSet=function(t){t&&(Array.isArray(t)?t.forEach(function(t){return $.fn.markdown.messages[t.language]=t.dictionary}):$.fn.markdown.messages[t.language]=t.dictionary)},t.prototype.initialization=function(){var e=this,t=$.fn.markdown.defaults,o=Object.assign({},t,r,this.forRootConfig,this.options);this.hookToEditorEvents(o);var n=o.onChange;o.onChange=function(t){e.onModelChange(t&&t.getContent&&t.getContent()),"function"==typeof n&&n(t)},$("#"+this.textareaId).markdown(o)},t.prototype.hookToEditorEvents=function(t){var n=this,e=function(e){if(t.hasOwnProperty(e)&&e.startsWith("on")){var o=t[e];t[e]=function(t){n.dispatchCustomEvent(e,{eventData:t}),"function"==typeof o&&o(t)}}};for(var o in t)e(o)},t.prototype.writeValue=function(t){this.value=t,this.value&&(this.elm.nativeElement.value=this.value)},t.prototype.registerOnChange=function(t){this.onModelChange=t},t.prototype.registerOnTouched=function(t){this.onModelTouched=t},t.prototype.dispatchCustomEvent=function(t,e,o,n){void 0===o&&(o=!0),void 0===n&&(n=!0);var r={bubbles:o,cancelable:n};return e&&(r.detail=e),this.elm.nativeElement.dispatchEvent(new CustomEvent(t,r))},t}();s.decorators=[{type:e.Injectable},{type:e.Component,args:[{moduleId:"angulaMarkdownEditor",selector:"angular-markdown-editor",template:'<textarea #markdownEditorElm id="{{textareaId}}" name="{{textareaId}}" data-provide="markdown" rows="{{rows}}"></textarea>',providers:[i]}]}],s.ctorParameters=function(){return[{type:undefined,decorators:[{type:e.Inject,args:["config"]}]}]},s.propDecorators={elm:[{type:e.ViewChild,args:["markdownEditorElm"]}],locale:[{type:e.Input}],textareaId:[{type:e.Input}],options:[{type:e.Input}],rows:[{type:e.Input}]};var l=function(){function e(){}return e.forRoot=function(t){return void 0===t&&(t={}),{ngModule:e,providers:[{provide:"config",useValue:t}]}},e}();l.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule],declarations:[s],exports:[s],entryComponents:[s]}]}],l.ctorParameters=function(){return[]},t.MarkdownEditorConfig=a,t.AngularMarkdownEditorComponent=s,t.AngularMarkdownEditorModule=l,t.ɵa=i,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=angular-markdown-editor.umd.min.js.map

esm2015/angular-markdown-editor.js

@@ -0,1 +1,5 @@
+import { Component, forwardRef, Inject, Injectable, Input, ViewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
 /**
@@ -6,3 +10,2 @@ * @fileoverview added by tsickle
 const GlobalEditorOptions = {
-    // additionalButtons: [],
     autofocus: false,
@@ -104,2 +107,193 @@ disabledButtons: [],
  */
+const MARKDOWN_EDITOR_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => AngularMarkdownEditorComponent),
+    multi: true
+};
+class AngularMarkdownEditorComponent {
+    /**
+     * @param {?} forRootConfig
+     */
+    constructor(forRootConfig) {
+        this.forRootConfig = forRootConfig;
+        /**
+         * Number of rows for the textarea
+         */
+        this.rows = 10;
+        this.onModelChange = () => { };
+        this.onModelTouched = () => { };
+    }
+    /**
+     * Locale set that has a language and dictionary that can be added as an alternative language. Can be 1 or more dictionaries
+     * @param {?} locale
+     * @return {?}
+     */
+    set locale(locale) {
+        this.addLocaleSet(locale);
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterViewInit() {
+        this.initialization();
+    }
+    /**
+     * @param {?} editorLocale
+     * @return {?}
+     */
+    addLocaleSet(editorLocale) {
+        if (!editorLocale) {
+            return;
+        }
+        if (Array.isArray(editorLocale)) {
+            editorLocale.forEach((locale) => $.fn.markdown.messages[locale.language] = locale.dictionary);
+        }
+        else {
+            $.fn.markdown.messages[editorLocale.language] = editorLocale.dictionary;
+        }
+    }
+    /**
+     * @return {?}
+     */
+    initialization() {
+        // get all default options to get the entire list of onEvent so that we can attach Dispatch Custom Event to them
+        // we also merge these with the options, and pass these merged options to the hookToEditorEvents() method to cover all onEvent callbacks
+        const /** @type {?} */ markdownDefaultOptions = $.fn.markdown.defaults;
+        // re-hook new events that were optionally defined in the options
+        // merge the options, the order matters (last options on the right have higher priorities)
+        const /** @type {?} */ options = Object.assign({}, markdownDefaultOptions, GlobalEditorOptions, this.forRootConfig, this.options);
+        // hook all events to respective callbacks
+        // 1- could be coming from a Dispatched Event in the View:: (onX)="do()"
+        // 2- or from editor option callback in the Component:: const options = { onX: () => do() }
+        this.hookToEditorEvents(options);
+        // hook to the onChange event to update our model
+        // however we don't want to override the previous callback, so we will run that one to if exists
+        const /** @type {?} */ previousOnChange = options.onChange;
+        options.onChange = (e) => {
+            this.onModelChange(e && e.getContent && e.getContent());
+            if (typeof previousOnChange === 'function') {
+                previousOnChange(e);
+            }
+        };
+        // finally create the editor
+        $(`#${this.textareaId}`).markdown(options);
+    }
+    /**
+     * Hook any of the editor event(s) to Dispatch Custom Event so that we can use them in Angular with (onX)="doSomething($event.detail.eventData)"
+     * @param {?} options
+     * @return {?}
+     */
+    hookToEditorEvents(options) {
+        for (const /** @type {?} */ prop in options) {
+            if (options.hasOwnProperty(prop) && prop.startsWith('on')) {
+                const /** @type {?} */ previousEvent = options[prop];
+                // on Callback triggered
+                options[prop] = (e) => {
+                    // Dispatch a Custom Event, so that the (onX)="do()" from the View works
+                    this.dispatchCustomEvent(prop, { eventData: e });
+                    // if an event was passed through the options (instead of dispatch), and is not empty function, then we need to run it as well
+                    // basically we don't want the Dispatch Custom Event (onX)="do()" to override the ones passed directly in the editor option callbacks
+                    if (typeof previousEvent === 'function') {
+                        previousEvent(e);
+                    }
+                };
+            }
+        }
+    }
+    /**
+     * Write value to the native element
+     * @param {?} value string
+     * @return {?}
+     */
+    writeValue(value) {
+        this.value = value;
+        // preset values in the DOM element
+        if (this.value) {
+            this.elm.nativeElement.value = this.value;
+        }
+    }
+    /**
+     * @param {?} fn
+     * @return {?}
+     */
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    /**
+     * @param {?} fn
+     * @return {?}
+     */
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    /**
+     * Dispatch of Custom Event, which by default will bubble & is cancelable
+     * @param {?} eventName
+     * @param {?=} data
+     * @param {?=} isBubbling
+     * @param {?=} isCancelable
+     * @return {?}
+     */
+    dispatchCustomEvent(eventName, data, isBubbling = true, isCancelable = true) {
+        const /** @type {?} */ eventInit = { bubbles: isBubbling, cancelable: isCancelable };
+        if (data) {
+            eventInit.detail = data;
+        }
+        return this.elm.nativeElement.dispatchEvent(new CustomEvent(eventName, eventInit));
+    }
+}
+AngularMarkdownEditorComponent.decorators = [
+    { type: Injectable },
+    { type: Component, args: [{
+                moduleId: 'angulaMarkdownEditor',
+                selector: 'angular-markdown-editor',
+                template: '<textarea #markdownEditorElm id="{{textareaId}}" name="{{textareaId}}" data-provide="markdown" rows="{{rows}}"></textarea>',
+                providers: [MARKDOWN_EDITOR_VALUE_ACCESSOR]
+            },] },
+];
+/** @nocollapse */
+AngularMarkdownEditorComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: ['config',] },] },
+];
+AngularMarkdownEditorComponent.propDecorators = {
+    "elm": [{ type: ViewChild, args: ['markdownEditorElm',] },],
+    "locale": [{ type: Input },],
+    "textareaId": [{ type: Input },],
+    "options": [{ type: Input },],
+    "rows": [{ type: Input },],
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
+class AngularMarkdownEditorModule {
+    /**
+     * @param {?=} config
+     * @return {?}
+     */
+    static forRoot(config = {}) {
+        return {
+            ngModule: AngularMarkdownEditorModule,
+            providers: [
+                { provide: 'config', useValue: config }
+            ]
+        };
+    }
+}
+AngularMarkdownEditorModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [AngularMarkdownEditorComponent],
+                exports: [AngularMarkdownEditorComponent],
+                entryComponents: [AngularMarkdownEditorComponent]
+            },] },
+];
+/** @nocollapse */
+AngularMarkdownEditorModule.ctorParameters = () => [];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes} checked by tsc
+ */
 // Public classes.
@@ -120,3 +314,3 @@
 
-export { MarkdownEditorConfig };
+export { MarkdownEditorConfig, AngularMarkdownEditorComponent, AngularMarkdownEditorModule, MARKDOWN_EDITOR_VALUE_ACCESSOR as ɵa };
 //# sourceMappingURL=angular-markdown-editor.js.map

esm5/angular-markdown-editor.js

@@ -0,1 +1,5 @@
+import { Component, forwardRef, Inject, Injectable, Input, ViewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
 var GlobalEditorOptions = {
@@ -82,4 +86,133 @@ autofocus: false,
 }());
+var MARKDOWN_EDITOR_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return AngularMarkdownEditorComponent; }),
+    multi: true
+};
+var AngularMarkdownEditorComponent = /** @class */ (function () {
+    function AngularMarkdownEditorComponent(forRootConfig) {
+        this.forRootConfig = forRootConfig;
+        this.rows = 10;
+        this.onModelChange = function () { };
+        this.onModelTouched = function () { };
+    }
+    Object.defineProperty(AngularMarkdownEditorComponent.prototype, "locale", {
+        set: function (locale) {
+            this.addLocaleSet(locale);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    AngularMarkdownEditorComponent.prototype.ngAfterViewInit = function () {
+        this.initialization();
+    };
+    AngularMarkdownEditorComponent.prototype.addLocaleSet = function (editorLocale) {
+        if (!editorLocale) {
+            return;
+        }
+        if (Array.isArray(editorLocale)) {
+            editorLocale.forEach(function (locale) { return $.fn.markdown.messages[locale.language] = locale.dictionary; });
+        }
+        else {
+            $.fn.markdown.messages[editorLocale.language] = editorLocale.dictionary;
+        }
+    };
+    AngularMarkdownEditorComponent.prototype.initialization = function () {
+        var _this = this;
+        var markdownDefaultOptions = $.fn.markdown.defaults;
+        var options = Object.assign({}, markdownDefaultOptions, GlobalEditorOptions, this.forRootConfig, this.options);
+        this.hookToEditorEvents(options);
+        var previousOnChange = options.onChange;
+        options.onChange = function (e) {
+            _this.onModelChange(e && e.getContent && e.getContent());
+            if (typeof previousOnChange === 'function') {
+                previousOnChange(e);
+            }
+        };
+        $("#" + this.textareaId).markdown(options);
+    };
+    AngularMarkdownEditorComponent.prototype.hookToEditorEvents = function (options) {
+        var _this = this;
+        var _loop_1 = function (prop) {
+            if (options.hasOwnProperty(prop) && prop.startsWith('on')) {
+                var previousEvent_1 = options[prop];
+                options[prop] = function (e) {
+                    _this.dispatchCustomEvent(prop, { eventData: e });
+                    if (typeof previousEvent_1 === 'function') {
+                        previousEvent_1(e);
+                    }
+                };
+            }
+        };
+        for (var prop in options) {
+            _loop_1(prop);
+        }
+    };
+    AngularMarkdownEditorComponent.prototype.writeValue = function (value) {
+        this.value = value;
+        if (this.value) {
+            this.elm.nativeElement.value = this.value;
+        }
+    };
+    AngularMarkdownEditorComponent.prototype.registerOnChange = function (fn) {
+        this.onModelChange = fn;
+    };
+    AngularMarkdownEditorComponent.prototype.registerOnTouched = function (fn) {
+        this.onModelTouched = fn;
+    };
+    AngularMarkdownEditorComponent.prototype.dispatchCustomEvent = function (eventName, data, isBubbling, isCancelable) {
+        if (isBubbling === void 0) { isBubbling = true; }
+        if (isCancelable === void 0) { isCancelable = true; }
+        var eventInit = { bubbles: isBubbling, cancelable: isCancelable };
+        if (data) {
+            eventInit.detail = data;
+        }
+        return this.elm.nativeElement.dispatchEvent(new CustomEvent(eventName, eventInit));
+    };
+    return AngularMarkdownEditorComponent;
+}());
+AngularMarkdownEditorComponent.decorators = [
+    { type: Injectable },
+    { type: Component, args: [{
+                moduleId: 'angulaMarkdownEditor',
+                selector: 'angular-markdown-editor',
+                template: '<textarea #markdownEditorElm id="{{textareaId}}" name="{{textareaId}}" data-provide="markdown" rows="{{rows}}"></textarea>',
+                providers: [MARKDOWN_EDITOR_VALUE_ACCESSOR]
+            },] },
+];
+AngularMarkdownEditorComponent.ctorParameters = function () { return [
+    { type: undefined, decorators: [{ type: Inject, args: ['config',] },] },
+]; };
+AngularMarkdownEditorComponent.propDecorators = {
+    "elm": [{ type: ViewChild, args: ['markdownEditorElm',] },],
+    "locale": [{ type: Input },],
+    "textareaId": [{ type: Input },],
+    "options": [{ type: Input },],
+    "rows": [{ type: Input },],
+};
+var AngularMarkdownEditorModule = /** @class */ (function () {
+    function AngularMarkdownEditorModule() {
+    }
+    AngularMarkdownEditorModule.forRoot = function (config) {
+        if (config === void 0) { config = {}; }
+        return {
+            ngModule: AngularMarkdownEditorModule,
+            providers: [
+                { provide: 'config', useValue: config }
+            ]
+        };
+    };
+    return AngularMarkdownEditorModule;
+}());
+AngularMarkdownEditorModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule],
+                declarations: [AngularMarkdownEditorComponent],
+                exports: [AngularMarkdownEditorComponent],
+                entryComponents: [AngularMarkdownEditorComponent]
+            },] },
+];
+AngularMarkdownEditorModule.ctorParameters = function () { return []; };
 
-export { MarkdownEditorConfig };
+export { MarkdownEditorConfig, AngularMarkdownEditorComponent, AngularMarkdownEditorModule, MARKDOWN_EDITOR_VALUE_ACCESSOR as ɵa };
 //# sourceMappingURL=angular-markdown-editor.js.map

lib/angular-markdown-editor/index.d.ts

 export * from './models/index';
 export { MarkdownEditorConfig } from './markdown-editor-config';
+export { AngularMarkdownEditorComponent } from './angular-markdown-editor.component';
+export { AngularMarkdownEditorModule } from './angular-markdown-editor.module';

package.json

 {
   "name": "angular-markdown-editor",
-  "version": "2.0.0-beta",
+  "version": "2.0.0",
   "description": "Bootstrap Markdown components made available in Angular",
@@ -22,3 +22,2 @@ "keywords": [
     "core-js": "^2.5.1",
-    "font-awesome": "^4.7.0",
     "jquery": ">=3.2.1",
@@ -53,2 +52,3 @@ "vinyl-paths": "^2.1.0",
     "del-cli": "^1.1.0",
+    "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
@@ -55,0 +55,0 @@ "gulp-bump": "^2.7.0",

README.md

@@ -68,2 +68,15 @@ # Angular-Markdown-Editor
 
+### Import Module
+```typescript
+import { AngularMarkdownEditorModule } from 'angular-markdown-editor';
+
+@NgModule({
+  declarations: [],
+  imports: [AngularMarkdownEditorModule]
+
+  // or pre-define global configuration using the forRoot
+  // imports: [AngularMarkdownEditorModule.forRoot({ iconlibrary: 'fa' })]
+});
+```
+
 ### Input attributes
@@ -80,3 +93,3 @@ You can pass the following input attribute:
 ### Global Options
-The library comes with it's own Global Editor Options, these propertoes can be overriden at any by the `options` attribute. Click to see the [Global Options]() defined.
+The library comes with it's own Global Editor Options, these propertoes can be overriden at any by the `options` attribute. Click to see the [Global Options](https://github.com/ghiscoding/angular-markdown-editor/blob/master/src/lib/angular-markdown-editor/global-editor-options.ts) defined.
 
@@ -153,3 +166,3 @@ ### Event Hooks
 ### API - Editor Methods
-The editor API is quite dense and I will not list the entire set of methods, but you can see the entire list [here]().
+The editor API is quite dense and I will not list the entire set of methods, but you can see the entire list from the [Editor Method Interface](https://github.com/ghiscoding/angular-markdown-editor/blob/master/src/lib/angular-markdown-editor/models/editorMethod.interface.ts).
 To call any of the Editor Methods, you will have to first get a reference to the Editor's instance which you can get from the `onShow` callback.
@@ -207,6 +220,6 @@
 ### Additional Editor Buttons
-I really thought that some buttons were missing to go a great job (~~Strikethrough~~ & **Table**). So I added them directly in the [Global Options](). If you want to add your own, then just look at how it was done in the [Global Options]() and read the section `additionalButtons` of [Bootstrap Markdown](http://www.codingdrama.com/bootstrap-markdown/) website.
+I really thought that some buttons were missing to go a great job (~~Strikethrough~~ & **Table**). So I added them directly in the [Global Options](https://github.com/ghiscoding/angular-markdown-editor/blob/master/src/lib/angular-markdown-editor/global-editor-options.ts). If you want to add your own, then just look at how it was done in the [Global Options](https://github.com/ghiscoding/angular-markdown-editor/blob/master/src/lib/angular-markdown-editor/global-editor-options.ts) and read the section `additionalButtons` of [Bootstrap Markdown](http://www.codingdrama.com/bootstrap-markdown/) website.
 
 ### Adding Locale
-You can add a locale to the editor but passing a `locale` object (and bind it in the View) which contain a `language` and the dictionary of words used by the editor. The entire list of words can be seen in the example below. So for example, if we want to add French locale, we will do the following (you can see [demo code]()):
+You can add a locale to the editor but passing a `locale` object (and bind it in the View) which contain a `language` and the dictionary of words used by the editor. The entire list of words can be seen in the example below. So for example, if we want to add French locale, we will do the following (you can see [demo code](https://github.com/ghiscoding/angular-markdown-editor/blob/master/src/app/template/template.component.ts)):
 
@@ -213,0 +226,0 @@ ###### View

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125235

increased by116.79%

Dependency count

6

decreased by-14.29%

Number of package files

28

increased by7.69%

Lines of code

994

increased by107.52%

Number of lines in readme file

293

increased by4.64%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

53

increased by1.92%

Dependency changes

• - Removedfont-awesome@^4.7.0

• - Removedfont-awesome@4.7.0(transitive)