@mdefy/ngx-markdown-editor
Version:
An Angular Markdown Editor in WYSIWYG style with extensive functionality, high customizability and an integrated material theme.
1,893 lines • 105 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/platform-browser'), require('@mdefy/markdown-editor-core'), require('ngx-markdown'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/common/http'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/platform-browser/animations')) :
typeof define === 'function' && define.amd ? define('@mdefy/ngx-markdown-editor', ['exports', '@angular/core', '@angular/material/icon', '@angular/material/tooltip', '@angular/platform-browser', '@mdefy/markdown-editor-core', 'ngx-markdown', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/common/http', '@angular/material/button', '@angular/material/form-field', '@angular/material/select', '@angular/platform-browser/animations'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.mdefy = global.mdefy || {}, global.mdefy['ngx-markdown-editor'] = {}), global.ng.core, global.ng.material.icon, global.ng.material.tooltip, global.ng.platformBrowser, global.markdownEditorCore, global.ngxMarkdown, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.common.http, global.ng.material.button, global.ng.material.formField, global.ng.material.select, global.ng.platformBrowser.animations));
}(this, (function (exports, i0, icon, tooltip, i1, markdownEditorCore, ngxMarkdown, rxjs, operators, common, http, button, formField, select, animations) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* An injectable hotkeys service to add keybindings.
*/
var Keybindings = /** @class */ (function () {
function Keybindings(eventManager) {
this.eventManager = eventManager;
}
/**
* Adds an _keydown_ event listener to the Angular `EventManager` with the specified
* `keys`. The listener is applied to specified `element`. Returns an RxJS observable
* of the keyboard event.
*
* @param element The HTML element to which the keybinding shall be applied to.
* @param keys The key combination which shall trigger the event.
*/
Keybindings.prototype.addKeybinding = function (element, keys) {
var _this = this;
var event = "keydown." + keys;
return new rxjs.Observable(function (observer) {
var handler = function (e) {
e.preventDefault();
observer.next(e);
};
var dispose = _this.eventManager.addEventListener(element, event, handler);
return function () {
dispose();
};
});
};
return Keybindings;
}());
Keybindings.ɵprov = i0.ɵɵdefineInjectable({ factory: function Keybindings_Factory() { return new Keybindings(i0.ɵɵinject(i1.EventManager)); }, token: Keybindings, providedIn: "root" });
Keybindings.decorators = [
{ type: i0.Injectable, args: [{ providedIn: 'root' },] }
];
Keybindings.ctorParameters = function () { return [
{ type: i1.EventManager }
]; };
/**
* Transforms a _CodeMirror_ event to an RxJS observable.
*
* @param cm the `CodeMirror.Editor` instance of which the event shall be observed
* @param eventName the name of a _CodeMirror_ event
*/
function fromCmEvent(cm, eventName) {
return new rxjs.Observable(function (subscriber) {
var handler;
switch (eventName) {
case 'change':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], changeObj: args[1] });
};
break;
case 'changes':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], changes: args[1] });
};
break;
case 'beforeChange':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], changeObj: args[1] });
};
break;
case 'cursorActivity':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0] });
};
break;
case 'keyHandled':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], name: args[1], event: args[2] });
};
break;
case 'inputRead':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], changeObj: args[1] });
};
break;
case 'electricInput':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], line: args[1] });
};
break;
case 'beforeSelectionChange':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], obj: args[1] });
};
break;
case 'viewportChange':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], from: args[1], to: args[2] });
};
break;
case 'swapDoc':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], oldDoc: args[1] });
};
break;
case 'gutterClick':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], line: args[1], gutter: args[2], clickEvent: args[3] });
};
break;
case 'gutterContextMenu':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], line: args[1], gutter: args[2], contextMenu: args[3] });
};
break;
case 'focus':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], event: args[1] });
};
break;
case 'blur':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], event: args[1] });
};
break;
case 'scroll':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0] });
};
break;
case 'refresh':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0] });
};
break;
case 'optionChange':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], option: args[1] });
};
break;
case 'scrollCursorIntoView':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], event: args[1] });
};
break;
case 'update':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0] });
};
break;
case 'renderLine':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], line: args[1], element: args[2] });
};
break;
case 'overwriteToggle':
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], overwrite: args[1] });
};
break;
default:
handler = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return subscriber.next({ instance: args[0], event: args[1] });
};
}
if (cm) {
cm.on(eventName, handler);
return function () { return cm.off(eventName, handler); };
}
subscriber.error(new Error('CodeMirror instance is undefined'));
return;
});
}
var StatusbarService = /** @class */ (function () {
function StatusbarService() {
/**
* The default statusbar setup.
*/
this.DEFAULT_STATUSBAR = ['wordCount', 'characterCount', '|', 'cursorPosition'];
}
Object.defineProperty(StatusbarService.prototype, "DEFAULT_ITEMS", {
/**
* The default configurations of all items.
*/
get: function () {
return this._defaultItems;
},
enumerable: false,
configurable: true
});
/**
* Returns the default configuration of the item with the specified name.
* Returns `undefined`, if no item with the specified name can be found.
*/
StatusbarService.prototype.getDefaultItem = function (itemName) {
return this.DEFAULT_ITEMS.find(function (i) { return i.name === itemName; });
};
/**
* Defines the default statusbar items.
* Cannot be done statically as the values depend on the `MarkdownEditor` instance.
*/
StatusbarService.prototype.defineDefaultItems = function (mde) {
var defaultItems = [
{
name: 'wordCount',
value: fromCmEvent(mde.cm, 'changes').pipe(operators.startWith(true), operators.map(function () { return 'Words: ' + mde.getWordCount().toString(); })),
},
{
name: 'characterCount',
value: fromCmEvent(mde.cm, 'changes').pipe(operators.startWith(true), operators.map(function () { return 'Characters: ' + mde.getCharacterCount().toString(); })),
},
{
name: 'cursorPosition',
value: fromCmEvent(mde.cm, 'cursorActivity').pipe(operators.startWith(true), operators.map(function () {
var pos = mde.getCursorPos();
return pos.line + ":" + pos.ch;
})),
},
// Normalize separator item to reduce type complexity in template.
// Effectively, only the `name` property is needed.
{
name: '|',
value: new rxjs.Observable(),
},
];
this._defaultItems = defaultItems;
};
return StatusbarService;
}());
StatusbarService.decorators = [
{ type: i0.Injectable }
];
var ToolbarService = /** @class */ (function () {
function ToolbarService() {
/**
* The default toolbar setup.
*/
this.DEFAULT_TOOLBAR = [
'setHeadingLevel',
'toggleHeadingLevel',
'increaseHeadingLevel',
'decreaseHeadingLevel',
'toggleBold',
'toggleItalic',
'toggleStrikethrough',
'|',
'toggleUnorderedList',
'toggleOrderedList',
'toggleCheckList',
'|',
'toggleQuote',
'toggleInlineCode',
'insertCodeBlock',
'|',
'insertLink',
'insertImageLink',
'insertTable',
'insertHorizontalRule',
'|',
'toggleRichTextMode',
'formatContent',
'|',
'downloadAsFile',
'importFromFile',
'|',
'togglePreview',
'toggleSideBySidePreview',
'|',
'undo',
'redo',
'|',
'openMarkdownGuide',
];
}
Object.defineProperty(ToolbarService.prototype, "DEFAULT_ITEMS", {
/**
* The default configurations of all items
*/
get: function () {
return this._defaultItems;
},
enumerable: false,
configurable: true
});
/**
* Returns the default configuration of the item with the specified name.
* Returns `undefined`, if no item with the specified name can be found.
*/
ToolbarService.prototype.getDefaultItem = function (itemName) {
return this.DEFAULT_ITEMS.find(function (i) { return i.name === itemName; });
};
/**
* Defines the default toolbar items.
* Cannot be done statically as the actions depend on the `MarkdownEditorComponent` instance.
*/
ToolbarService.prototype.defineDefaultItems = function (ngxMde) {
var _this = this;
var defaultItems = [
{
name: 'setHeadingLevel',
action: function (level) { return ngxMde.mde.setHeadingLevel(level); },
shortcut: 'Shift-Ctrl-Alt-H',
isActive: function () {
if (!ngxMde.mde.hasTokenAtCursorPos('header'))
return 0;
var token = ngxMde.mde.cm.getTokenAt(ngxMde.mde.getCursorPos());
return token.state.base.header;
},
tooltip: 'Set Heading Level',
icon: {
format: 'svgString',
iconName: 'format_heading',
svgHtmlString: FORMAT_HEADING,
},
disableOnPreview: true,
},
{
name: 'toggleHeadingLevel',
action: function () { return ngxMde.mde.increaseHeadingLevel(); },
tooltip: 'Heading',
shortcut: 'Alt-H',
icon: {
format: 'svgString',
iconName: 'format_heading',
svgHtmlString: FORMAT_HEADING,
},
disableOnPreview: true,
},
{
name: 'increaseHeadingLevel',
action: function () { return ngxMde.mde.increaseHeadingLevel(); },
tooltip: 'Smaller Heading',
icon: {
format: 'svgString',
iconName: 'format_heading_decrease',
svgHtmlString: FORMAT_HEADING_SMALLER,
},
disableOnPreview: true,
},
{
name: 'decreaseHeadingLevel',
action: function () { return ngxMde.mde.decreaseHeadingLevel(); },
tooltip: 'Bigger Heading',
icon: {
format: 'svgString',
iconName: 'format_heading_increase',
svgHtmlString: FORMAT_HEADING_BIGGER,
},
disableOnPreview: true,
},
{
name: 'toggleBold',
action: function () { return ngxMde.mde.toggleBold(); },
isActive: function () { return ngxMde.mde.hasTokenAtCursorPos('strong'); },
tooltip: 'Toggle Bold',
icon: {
format: 'material',
iconName: 'format_bold',
},
disableOnPreview: true,
},
{
name: 'toggleItalic',
action: function () { return ngxMde.mde.toggleItalic(); },
isActive: function () { return ngxMde.mde.hasTokenAtCursorPos('em'); },
tooltip: 'Toggle Italic',
icon: {
format: 'material',
iconName: 'format_italic',
},
disableOnPreview: true,
},
{
name: 'toggleStrikethrough',
action: function () { return ngxMde.mde.toggleStrikethrough(); },
isActive: function () { return ngxMde.mde.hasTokenAtCursorPos('strikethrough'); },
tooltip: 'Toggle Strikethrough',
icon: {
format: 'material',
iconName: 'format_strikethrough',
},
disableOnPreview: true,
},
{
name: 'toggleUnorderedList',
action: function () { return ngxMde.mde.toggleUnorderedList(); },
isActive: function () { return _this.isListTypeActive(ngxMde, 'unordered'); },
tooltip: 'Toggle Unordered List',
icon: {
format: 'material',
iconName: 'format_list_bulleted',
},
disableOnPreview: true,
},
{
name: 'toggleOrderedList',
action: function () { return ngxMde.mde.toggleOrderedList(); },
isActive: function () { return _this.isListTypeActive(ngxMde, 'ordered'); },
tooltip: 'Toggle Ordered List',
icon: {
format: 'material',
iconName: 'format_list_numbered',
},
disableOnPreview: true,
},
{
name: 'toggleCheckList',
action: function () { return ngxMde.mde.toggleCheckList(); },
isActive: function () { return _this.isListTypeActive(ngxMde, 'check'); },
tooltip: 'Toggle Checklist',
icon: {
format: 'material',
iconName: 'check_box',
},
disableOnPreview: true,
},
{
name: 'toggleQuote',
action: function () { return ngxMde.mde.toggleQuote(); },
isActive: function () { return ngxMde.mde.hasTokenAtCursorPos('quote'); },
tooltip: 'Toggle Quotation',
icon: {
format: 'material',
iconName: 'format_quote',
},
disableOnPreview: true,
},
{
name: 'toggleInlineCode',
action: function () { return ngxMde.mde.toggleInlineCode(); },
isActive: function () { return _this.isCodeTypeActive(ngxMde, 'inline'); },
tooltip: 'Toggle Inline Code',
icon: {
format: 'material',
iconName: 'code',
},
disableOnPreview: true,
},
{
name: 'insertCodeBlock',
action: function () { return ngxMde.mde.insertCodeBlock(); },
isActive: function () { return _this.isCodeTypeActive(ngxMde, 'block'); },
tooltip: 'Insert Code Block',
icon: {
format: 'svgString',
iconName: 'file_code',
svgHtmlString: FILE_CODE,
},
disableOnPreview: true,
},
{
name: 'insertLink',
action: function () { return ngxMde.mde.insertLink(); },
isActive: function () { return (ngxMde.mde.hasTokenAtCursorPos('link-text') || ngxMde.mde.hasTokenAtCursorPos('link')) &&
!ngxMde.mde.hasTokenAtCursorPos('image'); },
tooltip: 'Insert Link',
icon: {
format: 'material',
iconName: 'insert_link',
},
disableOnPreview: true,
},
{
name: 'insertImageLink',
action: function () { return ngxMde.mde.insertImageLink(); },
isActive: function () { return ngxMde.mde.hasTokenAtCursorPos('image'); },
tooltip: 'Insert Image Link',
icon: {
format: 'material',
iconName: 'image',
},
disableOnPreview: true,
},
{
name: 'insertTable',
action: function () { return ngxMde.mde.insertTable(); },
tooltip: 'Insert Table',
icon: {
format: 'material',
iconName: 'table_chart',
},
disableOnPreview: true,
},
{
name: 'insertHorizontalRule',
action: function () { return ngxMde.mde.insertHorizontalRule(); },
isActive: function () { return ngxMde.mde.hasTokenAtCursorPos('hr'); },
tooltip: 'Insert Horizontal Rule',
icon: {
format: 'material',
iconName: 'horizontal_rule',
},
disableOnPreview: true,
},
{
name: 'toggleRichTextMode',
action: function () { return ngxMde.mde.toggleRichTextMode(); },
isActive: function () {
var mode = ngxMde.mde.cm.getOption('mode');
return mode === 'gfm' || mode.name === 'gfm';
},
tooltip: 'Toggle Rich-Text Mode',
icon: {
format: 'material',
iconName: 'highlight',
},
disableOnPreview: true,
},
{
name: 'formatContent',
action: function () { return ngxMde.mde.formatContent(); },
tooltip: 'Format Content',
icon: {
format: 'material',
iconName: 'format_paint',
},
disableOnPreview: true,
},
{
name: 'downloadAsFile',
action: function () { return ngxMde.mde.downloadAsFile(); },
tooltip: 'Download As File',
icon: {
format: 'material',
iconName: 'get_app',
},
disableOnPreview: true,
},
{
name: 'importFromFile',
action: function () { return ngxMde.mde.importFromFile(); },
tooltip: 'Import From File',
icon: {
format: 'svgString',
iconName: 'upload',
svgHtmlString: UPLOAD,
},
disableOnPreview: true,
},
{
name: 'togglePreview',
action: function () { return ngxMde.togglePreview(); },
shortcut: 'Alt-P',
isActive: function () { return ngxMde.showPreview; },
tooltip: 'Toggle Preview',
icon: {
format: 'material',
iconName: 'preview',
},
disableOnPreview: false,
},
{
name: 'toggleSideBySidePreview',
action: function () { return ngxMde.toggleSideBySidePreview(); },
shortcut: 'Shift-Alt-P',
isActive: function () { return ngxMde.showSideBySidePreview; },
tooltip: 'Toggle Side-by-Side Preview',
icon: {
format: 'svgString',
iconName: 'column',
svgHtmlString: COLUMN,
},
disableOnPreview: false,
},
{
name: 'undo',
action: function () { return ngxMde.mde.undo(); },
tooltip: 'Undo',
icon: {
format: 'material',
iconName: 'undo',
},
disableOnPreview: true,
},
{
name: 'redo',
action: function () { return ngxMde.mde.redo(); },
shortcut: 'Ctrl-S',
tooltip: 'Redo',
icon: {
format: 'material',
iconName: 'redo',
},
disableOnPreview: true,
},
{
name: 'openMarkdownGuide',
action: function () { return ngxMde.mde.openMarkdownGuide(); },
tooltip: 'Open Markdown Guide',
icon: {
format: 'material',
iconName: 'help',
},
disableOnPreview: false,
},
// Normalize separator item to reduce type complexity in template.
// Effectively, only the `name` property is needed.
{
name: '|',
action: function () { },
tooltip: '',
icon: { format: 'material', iconName: '' },
disableOnPreview: false,
},
];
this._defaultItems = defaultItems;
};
ToolbarService.prototype.isListTypeActive = function (ngxMde, listType) {
var isList = ngxMde.mde.hasTokenAtCursorPos('list');
if (!isList)
return false;
var selections = ngxMde.mde.cm.listSelections();
var isListType = false;
if (selections === null || selections === void 0 ? void 0 : selections.length) {
var lineNumber = selections[selections.length - 1].from().line;
isListType = ngxMde.mde.getListTypeOfLine(lineNumber) === listType;
}
return isListType;
};
ToolbarService.prototype.isCodeTypeActive = function (ngxMde, codeType) {
var isCode = ngxMde.mde.hasTokenAtCursorPos('code');
if (!isCode)
return false;
var token = ngxMde.mde.cm.getTokenAt(ngxMde.mde.getCursorPos());
if (codeType === 'block') {
return token.state.overlay.codeBlock;
}
else {
return token.state.overlay.code;
}
};
return ToolbarService;
}());
ToolbarService.decorators = [
{ type: i0.Injectable }
];
/* eslint-disable max-len */
var COLUMN = "\n <!-- Icon from Font Awesome: https://fontawesome.com/icons/columns?style=solid; License: https://fontawesome.com/license -->\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"columns\"\n class=\"svg-inline--fa fa-columns fa-w-16\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 512 512\"\n licenseUrl=\"https://fontawesome.com/license\"\n >\n <path\n fill=\"currentColor\"\n d=\"M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z\"\n ></path>\n </svg>\n";
var FILE_CODE = "\n <!-- Icon from Font Awesome: https://fontawesome.com/icons/file-code?style=solid; License: https://fontawesome.com/license -->\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"file-code\"\n class=\"svg-inline--fa fa-file-code fa-w-12\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 384 512\"\n licenseUrl=\"https://fontawesome.com/license\"\n >\n <path\n fill=\"currentColor\"\n d=\"M384 121.941V128H256V0h6.059c6.365 0 12.47 2.529 16.971 7.029l97.941 97.941A24.005 24.005 0 0 1 384 121.941zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zM123.206 400.505a5.4 5.4 0 0 1-7.633.246l-64.866-60.812a5.4 5.4 0 0 1 0-7.879l64.866-60.812a5.4 5.4 0 0 1 7.633.246l19.579 20.885a5.4 5.4 0 0 1-.372 7.747L101.65 336l40.763 35.874a5.4 5.4 0 0 1 .372 7.747l-19.579 20.884zm51.295 50.479l-27.453-7.97a5.402 5.402 0 0 1-3.681-6.692l61.44-211.626a5.402 5.402 0 0 1 6.692-3.681l27.452 7.97a5.4 5.4 0 0 1 3.68 6.692l-61.44 211.626a5.397 5.397 0 0 1-6.69 3.681zm160.792-111.045l-64.866 60.812a5.4 5.4 0 0 1-7.633-.246l-19.58-20.885a5.4 5.4 0 0 1 .372-7.747L284.35 336l-40.763-35.874a5.4 5.4 0 0 1-.372-7.747l19.58-20.885a5.4 5.4 0 0 1 7.633-.246l64.866 60.812a5.4 5.4 0 0 1-.001 7.879z\"\n ></path>\n </svg>\n";
var FORMAT_HEADING = "\n <!-- Icon from Font Awesome: https://fontawesome.com/icons/heading?style=solid; License: https://fontawesome.com/license -->\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"heading\"\n class=\"svg-inline--fa fa-heading fa-w-16\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 512 512\"\n licenseUrl=\"https://fontawesome.com/license\"\n >\n <path\n fill=\"currentColor\"\n d=\"M448 96v320h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H320a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V288H160v128h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H32a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V96H32a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-32v128h192V96h-32a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16z\"\n ></path>\n </svg>\n";
var FORMAT_HEADING_BIGGER = "\n <!-- Icon from Font Awesome: https://fontawesome.com/icons/heading?style=solid; License: https://fontawesome.com/license -->\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"heading\"\n class=\"svg-inline--fa fa-heading fa-w-16\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 720 720\"\n licenseUrl=\"https://fontawesome.com/license\"\n >\n <path\n fill=\"currentColor\"\n d=\"M448 200v320h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H320a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V392H160v128h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H32a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V200H32a16 16 0 0 1-16-16V152a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-32v128h192V200h-32a16 16 0 0 1-16-16V152a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16z\"\n ></path>\n <path\n fill=\"currentColor\"\n d=\"M620 285 l87 150 h-174 z\"\n ></path>\n </svg>\n";
var FORMAT_HEADING_SMALLER = "\n <!-- Icon from Font Awesome: https://fontawesome.com/icons/heading?style=solid; License: https://fontawesome.com/license -->\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n data-prefix=\"fas\"\n data-icon=\"heading\"\n class=\"svg-inline--fa fa-heading fa-w-16\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n height=\"100%\"\n viewBox=\"0 0 720 720\"\n licenseUrl=\"https://fontawesome.com/license\"\n >\n <path\n fill=\"currentColor\"\n d=\"M448 200v320h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H320a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V392H160v128h32a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H32a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h32V200H32a16 16 0 0 1-16-16V152a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-32v128h192V200h-32a16 16 0 0 1-16-16V152a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16z\"\n ></path>\n <path\n fill=\"currentColor\"\n d=\"M620 435 l87 -150 h-174 z\"\n ></path>\n </svg>\n";
var UPLOAD = "\n <svg\n focusable=\"false\"\n data-icon=\"upload\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n height=\"100%\"\n viewBox=\"2 2 20 20\"\n >\n <path d=\"M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z\" />\n </svg>\n";
/**
* An event emitter that is able to transform an RxJS observable
* into an Angular event.
*/
var ObservableEmitter = /** @class */ (function (_super) {
__extends(ObservableEmitter, _super);
function ObservableEmitter() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Subscribes to the specified RxJS observable and emits an event
* containing the observed value. Unsubscribes the passed observable
* when the event is unsubscribed.
*/
ObservableEmitter.prototype.emitObservable = function (o) {
var _this = this;
var subscription = o.subscribe(function (x) { return _this.emit(x); });
this.subscribe(function () { }, undefined, function () { return subscription.unsubscribe(); });
};
return ObservableEmitter;
}(i0.EventEmitter));
var markdownEditorTooltipDefaults = {
showDelay: 1000,
hideDelay: 0,
touchendHideDelay: 1000,
};
var ɵ0 = markdownEditorTooltipDefaults;
var MarkdownEditorComponent = /** @class */ (function () {
function MarkdownEditorComponent(iconRegistry, domSanitizer, hotkeys, hostElement, markdownService, toolbarService, statusbarService) {
this.iconRegistry = iconRegistry;
this.domSanitizer = domSanitizer;
this.hotkeys = hotkeys;
this.hostElement = hostElement;
this.markdownService = markdownService;
this.toolbarService = toolbarService;
this.statusbarService = statusbarService;
/**
* Data string to set as content of the editor.
*/
this.data = '';
/**
* Options to configure _Ngx Markdown Editor_.
*
* Basically `MarkdownEditorOptions` from _Markdown Editor Core_ are forwarded,
* including some adjustments and extensions.
*/
this.options = {};
/**
* Custom set of toolbar items.
*/
this.toolbar = [];
/**
* Custom set of statusbar items.
*/
this.statusbar = [];
/**
* The current language applied to internationalized items.
*/
this.language = 'en';
/**
* Specifies whether the editor is a required form field. An asterisk will be appended to the label.
*/
this.required = false;
/**
* Specifies whether and which Angular Material style is used.
*/
this.materialStyle = false;
/**
* Specifies whether the editor is disabled.
*/
this.disabled = false;
/**
* Specifies whether the toolbar is rendered.
*/
this.showToolbar = true;
/**
* Specifies whether the statusbar is rendered.
*/
this.showStatusbar = true;
/**
* Specifies whether tooltips are shown for toolbar items.
*/
this.showTooltips = true;
/**
* Specifies whether the key combination is included in the tooltip.
*/
this.shortcutsInTooltips = true;
/**
* Emits when the editor's content changes.
*/
this.contentChange = new ObservableEmitter();
/**
* Emits when the editor's cursor is moved.
*/
this.cursorActivity = new ObservableEmitter();
/**
* Emits when the editor receives focus.
*/
this.editorFocus = new ObservableEmitter();
/**
* Emits when the editor loses focus.
*/
this.editorBlur = new ObservableEmitter();
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.normalizedToolbarItems = [];
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.activeToolbarItems = [];
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.toolbarItemTooltips = [];
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.normalizedStatusbarItems = [];
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.showPreview = false;
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.showSideBySidePreview = false;
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.blockBlur = false;
/**
* _Not intended to be used outside the component. Only made public for access inside template._
*/
this.focused = false;
this.shortcutResetter = new rxjs.Subject();
// Render checkbox dummies which can be replaced by an `<input type="checkbox"> later,
// because the checkboxes rendered by marked.js inside ngx-markdown are removed by Angular sanitizer.
this.markdownService.renderer.checkbox = function (checked) { return (checked ? '[x] ' : '[ ] '); };
}
Object.defineProperty(MarkdownEditorComponent.prototype, "disabledStyle", {
get: function () {
return this.disabled;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MarkdownEditorComponent.prototype, "default", {
get: function () {
return !this.options.editorThemes && !this.materialStyle;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MarkdownEditorComponent.prototype, "material", {
get: function () {
return this.materialStyle;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MarkdownEditorComponent.prototype, "class", {
get: function () {
return this.options.editorThemes;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MarkdownEditorComponent.prototype, "appearanceStandard", {
get: function () {
return this.materialStyle === true || this.materialStyle === 'standard';
},
enumerable: false,
configurable: true
});
Object.defineProperty(MarkdownEditorComponent.prototype, "appearanceFill", {
get: function () {
return this.materialStyle === 'fill';
},
enumerable: false,
configurable: true
});
Object.defineProperty(MarkdownEditorComponent.prototype, "appearanceLegacy", {
get: function () {
return this.materialStyle === 'legacy';
},
enumerable: false,
configurable: true
});
Object.defineProperty(MarkdownEditorComponent.prototype, "focusedStyle", {
get: function () {
return this.focused;
},
enumerable: false,
configurable: true
});
/**
* @inheritdoc
*/
MarkdownEditorComponent.prototype.ngOnInit = function () {
var _this = this;
var wrapper = this.hostElement.nativeElement.querySelector('.ngx-markdown-editor-text-editor');
this.mde = new markdownEditorCore.MarkdownEditor(wrapper, this.mapOptions(this.options));
this.contentChange.emitObservable(fromCmEvent(this.mde.cm, 'changes'));
this.cursorActivity.emitObservable(fromCmEvent(this.mde.cm, 'cursorActivity'));
this.editorFocus.emitObservable(fromCmEvent(this.mde.cm, 'focus'));
this.editorBlur.emitObservable(fromCmEvent(this.mde.cm, 'blur'));
this.toolbarService.defineDefaultItems(this);
this.statusbarService.defineDefaultItems(this.mde);
// Necessary to apply `this.mde` instance to default toolbar items
// as `ngOnChanges()` is executed before `ngOnInit()`.
this.ngOnChanges({ data: new i0.SimpleChange(undefined, this.data, true) });
this.mde.cm.clearHistory();
fromCmEvent(this.mde.cm, 'focus').subscribe(function () {
_this.focused = true;
});
fromCmEvent(this.mde.cm, 'blur').subscribe(function () {
if (!_this.blockBlur)
_this.focused = false;
});
fromCmEvent(this.mde.cm, 'cursorActivity').subscribe(function () {
_this.determineActiveButtons();
});
};
/**
* @inheritdoc
*/
MarkdownEditorComponent.prototype.ngOnChanges = function (changes) {
if (this.mde) {
if (this.showToolbar) {
this.applyToolbarItems();
}
if (this.showStatusbar) {
this.applyStatusbarItems();
}
this.applyDisabled();
this.mde.setOptions(this.mapOptions(this.options));
if (changes.data) {
this.mde.setContent(changes.data.currentValue);
}
this.createTooltips();
this.determineActiveButtons();
this.setCodeMirrorClasses();
this.applyMaterialStyle();
}
};
/**
* @inheritdoc
*/
MarkdownEditorComponent.prototype.ngOnDestroy = function () {
this.shortcutResetter.next();
this.shortcutResetter.complete();
};
/**
* Toggles the full-size preview.
*/
MarkdownEditorComponent.prototype.togglePreview = function () {
var _this = this;
this.showPreview = !this.showPreview;
this.showSideBySidePreview = false;
if (this.showPreview) {
// Necessary to wait until Angular change detector has finished
setTimeout(function () { var _a; return (_a = _this.hostElement.nativeElement.querySelector('.ngx-markdown-editor-wrapper')) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
}
else {
// Necessary to wait until Angular change detector has finished
setTimeout(function () { return _this.mde.focus(); }, 100);
}
};
/**
* Toggles the side-by-side preview.
*/
MarkdownEditorComponent.prototype.toggleSideBySidePreview = function () {
var _this = this;
this.showSideBySidePreview = !this.showSideBySidePreview;
this.showPreview = false;
// Timeout necessary until Angular change detector has finished
setTimeout(function () { return _this.mde.focus(); }, 100);
};
/**
* Triggered when a toolbar button is clicked.
*
* _Not intended to be used outside the component. Only made public for access inside template._
*/
MarkdownEditorComponent.prototype.onButtonClick = function (item) {
item.action();
this.mde.focus();
this.determineActiveButtons();
};
/**
* Resolves the shortcut for the specified item and appends it to the item's tooltip text,
* if `shortcutsInTooltips` is enabled.
*
* _Not intended to be used outside the component. Only made public for access inside template._
*/
MarkdownEditorComponent.prototype.createTooltip = function (item) {
var shortcut = this.mde.getShortcuts()[item.name] || item.shortcut;
if (item.name === 'undo')
shortcut = 'Ctrl-Z';
else if (item.name === 'redo')
shortcut = 'Shift-Ctrl-Z';
if (/Mac/.test(navigator.platform))
shortcut = shortcut === null || shortcut === void 0 ? void 0 : shortcut.replace(/Ctrl/gi, 'Cmd');
var shortcutString = this.shortcutsInTooltips && shortcut ? ' (' + shortcut + ')' : '';
return item.tooltip + shortcutString;
};
/**
* Replaces the checkbox dummies rendered inside the preview with actual checkboxes (also see constructor).
*
* _Not intended to be used outside the component. Only made public for access inside template._
*/
MarkdownEditorComponent.prototype.replaceCheckboxDummies = function () {
var _a;
(_a = this.markdown) === null || _a === void 0 ? void 0 : _a.element.nativeElement.querySelectorAll('li').forEach(function (el) { return el.childNodes.forEach(function (node) {
var _a, _b;
if (node.nodeType === 3) {
if (/^\[ \] /.test(node.nodeValue || '')) {
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('disabled', '');
el.insertBefore(input, node);
node.nodeValue = ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.replace(/^\[ \]/, '')) || null;
}
else if (/^\[x\] /.test(node.nodeValue || '')) {
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('disabled', '');
input.setAttribute('checked', '');
el.insertBefore(input, node);
node.nodeValue = ((_b = node.nodeValue) === null || _b === void 0 ? void 0 : _b.replace(/^\[x\]/, '')) || null;
}
}
}); });
};
/**
* Maps `NgxMdeOptions` to `MarkdownEditorOptions`.
*/
MarkdownEditorComponent.prototype.mapOptions = function (options) {
var _this = this;
if (!options) {
return undefined;
}
var getMarkdownGuideUrl = function (url) {
if (!url)
return undefined;
if (typeof url === 'string') {
return url;
}
else {
return url[_this.language] || url.default;
}
};
var markupTheme = options.markupThemes || [];
var editorThemes = options.editorThemes || [];
if (this.materialStyle) {
editorThemes = editorThemes ? editorThemes.concat('mde-material') : ['mde-material'];
}
else {
if (editorThemes) {
var index = editorThemes.findIndex(function (t) { return t === 'mde-material'; });
if (index > -1)
editorThemes.splice(index, 1);
}
}
var shortcuts = {};
for (var actionName in markdownEditorCore.DEFAULT_OPTIONS.shortcuts) {
if (options.shortcuts) {
shortcuts[actionName] = options.shortcuts[actionName];
}
}
return Object.assign(Object.assign({}, options), { shortcuts: shortcuts, disabled: this.disabled, themes: editorThemes.concat(markupTheme), markdownGuideUrl: getMarkdownGuideUrl(options.markdownGuideUrl) });
};
/**
* Applies the custom toolbar or the default toolbar as fallback.
*/
MarkdownEditorComponent.prototype.applyToolbarItems = function () {
var e_1, _e;
var items;
if (this.toolbar.length) {
items = this.toolbar;
}
else {
items = this.toolbarService.DEFAULT_TOOLBAR;
}
this.normalizedToolbarItems = [];
try {
for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
var toolbarItem = items_1_1.value;
var item = this.getNormalizedItem(toolbarItem);
if (!item) {
console.warn("No default item defined for name \"" + toolbarItem + "\"");
continue;
}
this.addSvgIcon(item);
this.normalizedToolbarItems.push(item);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (items_1_1 && !items_1_1.done && (_e = items_1.return)) _e.call(items_1);
}
finally { if (e_1) throw e_1.error; }
}
this.applyShortcuts(this.normalizedToolbarItems);
};
/**
* Returns a complete item for all combinations of how a toolbar item can be specified and
* resolves the current value of internationalized properties. Only returns `undefined` for
* items specified by name and no such item can be found.
*
* In detail, item normalization means (in addition to i18n resolution):
* - For built-in items specified by name string, resolves the default item.
* - For built-in items specified partly, completes the object with default values for the missing properties.
* - For custom items specified partly, completes the object with empty values for the missing properties.
* - For custom items specified fully, returns as is.
* - For unknown items specified by name string, returns `undefined`.
*/
MarkdownEditorComponent.prototype.getNormalizedItem = function (toolbarItem) {
var _this = this;
var getTooltip = function (tooltip) {
if (typeof tooltip === 'string') {
return tooltip;
}
else {
return tooltip[_this.language] || tooltip.default;
}
};
var getIcon = function (icon) {
if ('format' in icon) {
return icon;
}
else {
return icon[_this.language] || icon.default;
}
};
if (typeof toolbarItem === 'string') {
return this.toolbarService.getDefaultItem(toolbarItem);
}
else {
var defaultItem = this.toolbarService.getDefaultItem(toolbarItem.name);
if (!defaultItem) {
defaultItem = {
name: '',
action: function () { },
tooltip: '',
icon: { format: 'material', iconName: '' },
disableOnPreview: false,
};
}
return {
name: toolbarItem.name,
action: toolbarItem.action || defaultItem.action,
shortcut: toolbarItem.shortcut || defaultItem.shortcut,
isActive: toolbarItem.isActive || defaultItem.isActive,
tooltip: (toolbarItem.tooltip && getTooltip(toolbarItem.tooltip)) || defaultItem.tooltip,
icon: (toolbarItem.icon && getIcon(toolbarItem.icon)) || defaultItem.icon,
disableOnPreview: toolbarItem.disableOnPreview || (defaultItem === null || defaultItem === void 0 ? void 0 : defaultItem.disableOnPreview),
};
}
};
/**
* Creates tooltips for all configured toolbar items and stores them in `this.toolbarItemTooltips`.
*/
MarkdownEditorComponent.prototype.createTooltips = function () {
this.toolbarItemTooltips = new Array(this.normalizedToolbarItems.length);
for (var i = 0; i < this.normalizedToolbarItems.length; i++) {
var item = this.normalizedToolbarItems[i];
this.toolbarItemTooltips[i] = this.showTooltips ? this.createTooltip(item) : '';
}
};
/**
* Applies custom shortcuts.
*
* For items, whose actions originate in _Markdown Editor Core_, `options.shortcuts` is
* modified. For items that are specific to _Ngx Markdown Editor_ keybindings are applied to
* the `<ngx-markdown-editor>` element.
*/
MarkdownEditorComponent.prototype.applyShortcuts = function (items) {
var e_2, _e;
var _this = this;
var _a, _b, _c, _d;
if (this.options.shortcutsEnabled === 'none') {
return;
}
var applySetHeadingLevelShortcut = function (shortcut) {
var s = shortcut.replace(/(\w)-/gi, '$1.').replace(/Ctrl/gi, 'Control').replace(/Cmd/gi, 'Meta');
return _this.hotkeys
.addKeybinding(_this.hostElement.nativeElement, s)
.pipe(operators.takeUntil(_this.shortcutResetter))
.subscribe(function () {
_this.blockBlur = true;
_this.setHeadingLevelDropdown.open();
_this.setHeadingLevelDropdown.focus();
});
};
var applyShortcut = function (shortcut, action) {
var s = shortcut.replace(/(\w)-/gi, '$1.').replace(/Ctrl/gi, 'Control').replace(/Cmd/gi, 'Meta');
return _this.hotkeys
.addKeybinding(_this.hostElement.nativeElement, s)
.pipe(operators.takeUntil(_this.shortcutResetter))
.subscribe(function () {
action();
_this.determineActiveButtons();
});
};
this.shortcutResetter.next();
var shortcuts = {};
var appliedNgxMdeShortcuts = {};
if (this.options.shortcutsEnabled !== 'customOnly') {
var previewItem = this.toolbarService.getDefaultItem('togglePreview');
if (previewItem === null || previewItem === void 0 ? void 0 : previewItem.shortcut) {
var subscription = applyShortcut(previewItem.shortcut, previewItem.action);
appliedNgxMdeShortcuts[previewItem.name] = subscription;
}
var sideBySidePreviewItem = this.toolbarService.getDefaultItem('toggleSideBySidePreview');
if (sideBySidePreviewItem === null || sideBySidePreviewItem === void 0 ? void 0 : sideBySidePreviewItem.shortcut) {
var subscription = applyShortcut(sideBySidePreviewItem.shortcut, sideBySidePreviewItem.action);
appliedNgxMdeShortcuts[sideBySidePreviewItem.name] = subscription;
}
}
try {
for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
var item = items_2_1.value;
if (item.name === 'setHeadingLevel' && item.shortcut) {
var subscription = applySetHeadingLevelShortcut(item.shortcut);
appliedNgxMdeShortcuts[item.name] = subscription;
}
else if (item.name in markdownEditorCore.DEFAULT_OPTIONS.shortcuts) {
shortcuts[item.name] = item.shortcut;
}
else if (item.shortcut) {
(_a = appliedNgxMdeShortcuts[item.name]) === null || _a === void 0 ? void 0 : _a.unsubscribe();
var subscription = applyShortcut(item.shortcut, item.action);
appliedNgxMdeShortcuts[item.name] = subscription;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (items_2_1 && !items_2_1.done && (_e = items_2.return)) _e.call(items_2);
}
finally { if (e_2) throw e_2.error; }
}
var _loop_1 = function (actionName) {
if (this_1.options.shortcuts[actionName]) {
var shortcut = this_1.options.shortcuts[actionName];
if (actionName === 'setHeadingLevel') {
var item = items.find(function (i) { return i.name === actionName; });
if (item) {
(_b = appliedNgxMdeShortcuts[actionName]) === null || _b === void 0 ? void 0 : _b.unsubscribe();
applySetHeadingLevelShortcut(shortcut);
item.shortcut = shortcut;
}
}
else if (actionName in markdownEditorCore.DEFAULT_OPTIONS.shortcuts) {
shortcuts[actionName] = shortcut;
}
else {
var item = items.find(function (i) { return i.name === actionName; });
var defaultItem = this_1.toolbarService.getDefaultItem(actionName);
if (item) {
(_c = appliedNgxMdeShortcuts[actionName]) === null || _c === void 0 ? void 0 : _c.unsubscribe();
applyShortcut(shortcut, item.action);
item.shortcut = shortcut;
}
else if (defaultItem) {
(_d = appliedNgxMdeShortcuts[actionName]) === null || _d === void 0 ? void 0 : _d.unsubscribe();
applyShortcut(shortcut, defaultItem.action);
}
}
}
};
var this_1 = this;
for (var actionName in this.options.shortcuts) {
_loop_1(actionName);
}
this.options.shortcuts = shortcuts;
};
/**
* Adds the SVG specified inside `item.icon` to the injected `MatIconRegistry` instance.
*/
MarkdownEditorComponent.prototype.addSvgIcon = function (item) {
switch (item.icon.format) {
case 'svgString':
this.iconRegistry.addSvgIconLiteral(item.icon.iconName, this.domSanitizer.bypassSecurityTrustHtml(item.icon.svgHtmlString));
break;
case 'svgFile':
this.iconRegistry.addSvgIcon(item.icon.iconName, this.domSanitizer.bypassSecurityTrustResourceUrl(item.icon.runtimePath));
break;
}
};
/**
* Applies the custom statusbar or the default statusbar as fallback.
*/
MarkdownEditorComponent.prototype.applyStatusbarItems = function () {
var e_3, _e;
var items;
if (this.statusbar.length) {
items = this.statusbar;
}
else {
items = this.statusbarService.DEFAULT_STATUSBAR;
}
this.normalizedStatusbarItems = [];
try {
for (var items_3 = __values(items), items_3_1 = items_3.next(); !items_3_1.done; items_3_1 = items_3.next()) {
var toolbarItem = items_3_1.value;
var item = this.getNormalizedStatusbarItem(toolbarItem);
if (!item) {
console.warn("No default item defined for name \"" + toolbarItem + "\"");
continue;
}
this.normalizedStatusbarItems.push(item);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (items_3_1 && !items_3_1.done && (_e = items_3.return)) _e.call(items_3);
}
finally { if (e_3) throw e_3.error; }
}
};
/**
* Returns a complete item for all combinations of how a status item can be specified and
* resolves the current value of internationalized properties. Only returns `undefined` for
* items specified by name and no such item can be found.
*
* In detail, item normalization means (in addition to i18n resolution):
* - For built-in items specified by name string, resolves the default item.
* - For custom items, returns as is.
* - For unknown items specified by name string, returns `undefined`.
*/
MarkdownEditorComponent.prototype.getNormalizedStatusbarItem = function (statusbarItem) {
var _this = this;
var getValue = function (value) {
if (value instanceof rxjs.Observable) {
return value;
}
else {
return value[_this.language] || value.default;
}
};
if (typeof statusbarItem === 'string') {
return this.statusbarService.getDefaultItem(statusbarItem);
}
else {
return {
name: statusbarItem.name,
value: getValue(statusbarItem.value),
};
}
};
/**
* Executes the `item.isActive()` function for all toolbar items and saves the state in `activeItems`.
*/
MarkdownEditorComponent.prototype.determineActiveButtons = function () {
this.activeToolbarItems = new Array(this.normalizedToolbarItems.length);
for (var i = 0; i < this.normalizedToolbarItems.length; i++) {
var item = this.normalizedToolbarItems[i];
if (item.isActive) {
this.activeToolbarItems[i] = item.isActive();
}
else {
this.activeToolbarItems[i] = false;
}
}
};
/**
* Applies the disabled state. If disabled, the full-size preview activated.
*/
MarkdownEditorComponent.prototype.applyDisabled = function () {
if (this.disabled) {
this.showPreview = true;
this.showSideBySidePreview = false;
this.shortcutResetter.next();
}
else {
this.showPreview = false;
this.showSideBySidePreview = false;
}
};
/**
* Applies the material theme to both the editor and the preview. Particularly adds / removes
* an underline element known from Angular Material `mat-input` form fields.
*/
MarkdownEditorComponent.prototype.applyMaterialStyle = function () {
var codemirror = this.hostElement.nativeElement.querySelector('.CodeMirror');
if (codemirror) {
var underline = codemirror.querySelector('.underline');
if (this.materialStyle) {
if (!underline) {
var newUnderline = document.createElement('div');
newUnderline.setAttribute('class', 'underline');
var newRipple = document.createElement('div');
newRipple.setAttribute('class', 'ripple');
newUnderline.append(newRipple);
codemirror.append(newUnderline);
}
}
else {
underline === null || underline === void 0 ? void 0 : underline.remove();
}
}
var preview = this.hostElement.nativeElement.querySelector('.ngx-markdown-editor-preview');
if (preview) {
var underline = preview.querySelector('.underline');
if (this.materialStyle) {
if (!underline) {
var newUnderline = document.createElement('div');
newUnderline.setAttribute('class', 'underline');
preview.append(newUnderline);
}
}
else {
underline === null || underline === void 0 ? void 0 : underline.remove();
}
}
};
/**
* Adds and removes classes to/from the CodeMirror element according to configuration.
*/
MarkdownEditorComponent.prototype.setCodeMirrorClasses = function () {
var codemirror = this.hostElement.nativeElement.querySelector('.CodeMirror');
if (this.options.lineNumbers) {
codemirror === null || codemirror === void 0 ? void 0 : codemirror.classList.add('CodeMirror-lineNumbers');
}
else {
codemirror === null || codemirror === void 0 ? void 0 : codemirror.classList.remove('CodeMirror-lineNumbers');
}
};
return MarkdownEditorComponent;
}());
MarkdownEditorComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-markdown-editor',
template: "<div *ngIf=\"label\" class=\"ngx-markdown-editor-label\">\n {{ label }} <span class=\"required-marker\">{{ required ? '*' : '' }}</span>\n</div>\n<div *ngIf=\"showToolbar\" class=\"ngx-markdown-editor-toolbar\">\n <ng-container *ngFor=\"let item of normalizedToolbarItems; index as i\" [ngSwitch]=\"item.name\">\n <ng-template [ngSwitchCase]=\"'|'\">\n <div class=\"mde-toolbar-separator\"></div>\n </ng-template>\n\n <ng-template [ngSwitchCase]=\"'setHeadingLevel'\">\n <mat-form-field floatLabel=\"never\" [matTooltip]=\"toolbarItemTooltips[i]\">\n <mat-label>\n <mat-icon *ngIf=\"item.icon.format === 'material'\">\n {{ item.icon.iconName }}\n </mat-icon>\n <mat-icon *ngIf=\"item.icon.format !== 'material'\" [svgIcon]=\"item.icon.iconName\"> </mat-icon>\n </mat-label>\n <div (mousedown)=\"blockBlur = true\">\n <mat-select\n [value]=\"activeToolbarItems[i]\"\n [disabled]=\"disabled || (showPreview && item.disableOnPreview)\"\n (selectionChange)=\"item.action($event.value)\"\n (closed)=\"mde.cm.focus(); blockBlur = false\"\n #setHeadingLevel\n >\n <mat-option value=\"0\">---</mat-option>\n <mat-option *ngFor=\"let j of [1, 2, 3, 4, 5, 6]\" [value]=\"j\">H{{ j }}</mat-option>\n </mat-select>\n </div>\n </mat-form-field>\n </ng-template>\n\n <ng-template ngSwitchDefault>\n <button\n mat-button\n (mousedown)=\"blockBlur = true\"\n (mouseup)=\"blockBlur = false\"\n (click)=\"onButtonClick(item)\"\n [matTooltip]=\"toolbarItemTooltips[i]\"\n [class.active]=\"activeToolbarItems[i]\"\n [disabled]=\"disabled || (showPreview && item.disableOnPreview)\"\n >\n <mat-icon *ngIf=\"item.icon.format === 'material'\">\n {{ item.icon.iconName }}\n </mat-icon>\n <mat-icon *ngIf=\"item.icon.format !== 'material'\" [svgIcon]=\"item.icon.iconName\"> </mat-icon>\n </button>\n </ng-template>\n </ng-container>\n</div>\n<div class=\"ngx-markdown-editor-wrapper\" tabindex=\"-1\">\n <div [ngStyle]=\"{ display: showPreview ? 'none' : '' }\" class=\"ngx-markdown-editor-text-editor\"></div>\n <div [ngStyle]=\"{ display: showPreview || showSideBySidePreview ? '' : 'none' }\" class=\"ngx-markdown-editor-preview\">\n <div class=\"preview-wrapper\">\n <markdown [data]=\"mde.getContent()\" (ready)=\"replaceCheckboxDummies()\" #markdown></markdown>\n </div>\n </div>\n</div>\n<div *ngIf=\"showStatusbar\" class=\"ngx-markdown-editor-statusbar\">\n <ng-container *ngFor=\"let item of normalizedStatusbarItems\" [ngSwitch]=\"item.name\">\n <div *ngSwitchCase=\"'|'\" class=\"mde-statusbar-separator\"></div>\n <div *ngSwitchDefault class=\"mde-statusbar-item\">{{ item.value | async }}</div>\n </ng-container>\n</div>\n",
providers: [
{ provide: tooltip.MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: ɵ0 },
ToolbarService,
StatusbarService,
],
encapsulation: i0.ViewEncapsulation.None,
styles: [".CodeMirror{color:#000;direction:ltr;font-family:monospace;height:300px}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:transparent}.CodeMirror-gutters{background-color:#f7f7f7;border-right:1px solid #ddd;white-space:nowrap}.CodeMirror-linenumber{color:#999;min-width:20px;padding:0 3px 0 5px;text-align:right;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{background:#7e7;border:0!important;width:auto}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor-mark{background-color:rgba(20,255,20,.5)}.cm-animate-fat-cursor,.cm-fat-cursor-mark{-webkit-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite}.cm-animate-fat-cursor{background-color:#7e7;border:0;width:auto}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:-50px}.CodeMirror-ruler{border-left:1px solid #ccc;bottom:0;position:absolute;top:0}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{background:#fff;overflow:hidden;position:relative}.CodeMirror-scroll{height:100%;margin-bottom:-50px;margin-right:-50px;outline:none;overflow:scroll!important;padding-bottom:50px;position:relative}.CodeMirror-sizer{border-right:50px solid transparent;position:relative}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{display:none;outline:none;position:absolute;z-index:6}.CodeMirror-vscrollbar{overflow-x:hidden;overflow-y:scroll;right:0;top:0}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-x:scroll;overflow-y:hidden}.CodeMirror-scrollbar-filler{bottom:0;right:0}.CodeMirror-gutter-filler{bottom:0;left:0}.CodeMirror-gutters{left:0;min-height:100%;position:absolute;top:0;z-index:3}.CodeMirror-gutter{display:inline-block;height:100%;margin-bottom:-50px;vertical-align:top;white-space:normal}.CodeMirror-gutter-wrapper{background:none!important;border:none!important;position:absolute;z-index:4}.CodeMirror-gutter-background{bottom:0;position:absolute;top:0;z-index:4}.CodeMirror-gutter-elt{cursor:default;position:absolute;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{-webkit-tap-highlight-color:transparent;background:transparent;border-radius:0;border-width:0;color:inherit;font-family:inherit;font-size:inherit;font-variant-ligatures:contextual;line-height:inherit;margin:0;overflow:visible;position:relative;white-space:pre;word-wrap:normal;z-index:2}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{white-space:pre-wrap;word-break:normal;word-wrap:break-word}.CodeMirror-linebackground{bottom:0;left:0;position:absolute;right:0;top:0;z-index:0}.CodeMirror-linewidget{padding:.1px;position:relative;z-index:2}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{box-sizing:content-box}.CodeMirror-measure{height:0;overflow:hidden;position:absolute;visibility:hidden;width:100%}.CodeMirror-cursor{pointer-events:none;position:absolute}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{position:relative;visibility:hidden;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:\"\"}span.CodeMirror-selectedtext{background:none}ngx-markdown-editor{box-sizing:border-box;display:flex;flex-direction:column}.ngx-markdown-editor-toolbar .mat-button{border:1px solid transparent;line-height:28px;margin:3px 2px;min-width:30px;padding:0}.ngx-markdown-editor-toolbar .mat-button.active{background-color:rgba(0,0,0,.05);border-color:#a9a9a9}.ngx-markdown-editor-toolbar .mat-form-field{font-size:12px;margin:-10px 3px -15px;min-width:3em;text-align:center;width:3em}.ngx-markdown-editor-toolbar .mat-form-field:first-child{margin-left:10px}.ngx-markdown-editor-toolbar .mat-form-field.mat-form-field-disabled .mat-icon{color:rgba(0,0,0,.26)}.ngx-markdown-editor-toolbar .mde-toolbar-separator{border-left:1px solid #a9a9a9;display:inline-block;height:24px;vertical-align:middle}.ngx-markdown-editor-toolbar .mat-button .mat-icon{font-size:20px;height:20px;width:20px}.ngx-markdown-editor-toolbar .mat-button .mat-icon[data-mat-icon-name=column],.ngx-markdown-editor-toolbar .mat-button .mat-icon[data-mat-icon-name=file_code],.ngx-markdown-editor-toolbar .mat-button .mat-icon[data-mat-icon-name=upload]{height:16px}.ngx-markdown-editor-toolbar .mat-button .mat-icon[data-mat-icon-name=format_heading]{height:13px;margin-top:-2px}.ngx-markdown-editor-toolbar .mat-button .mat-icon[data-mat-icon-name=format_heading_decrease],.ngx-markdown-editor-toolbar .mat-button .mat-icon[data-mat-icon-name=format_heading_increase]{height:18px;margin-top:-2px}.ngx-markdown-editor-toolbar .mat-form-field .mat-icon[data-mat-icon-name=format_heading]{height:13px}.ngx-markdown-editor-toolbar svg{vertical-align:top}.ngx-markdown-editor-wrapper{box-sizing:border-box;display:flex;flex:1 1 100%;flex-direction:row;overflow:hidden}.ngx-markdown-editor-wrapper:focus{outline:none}.ngx-markdown-editor-text-editor{box-sizing:border-box;display:flex;flex:1 1 100%;flex-direction:column}.ngx-markdown-editor-text-editor .CodeMirror{height:100%;word-wrap:break-word}.ngx-markdown-editor-text-editor .CodeMirror .CodeMirror-placeholder{color:rgba(0,0,0,.6)}.ngx-markdown-editor-preview{background-color:#f0f0f0;box-sizing:border-box;flex:1 1 100%;overflow-y:auto;word-wrap:break-word}.ngx-markdown-editor-preview>.preview-wrapper{height:100%;overflow:auto;padding:0 10px}.ngx-markdown-editor-statusbar{color:rgba(0,0,0,.6);font-size:.75em;margin-top:5px;text-align:right}.ngx-markdown-editor-statusbar *{display:inline-block;margin:0 7px}.ngx-markdown-editor-statusbar .mde-statusbar-separator{border-left:1px solid #a9a9a9;height:14px;margin:0 4px;vertical-align:middle}ngx-markdown-editor.default .ngx-markdown-editor-label{font-weight:700;padding-left:8px;text-decoration:underline}ngx-markdown-editor.default .ngx-markdown-editor-wrapper>*{border:1px solid #ddd}ngx-markdown-editor.default .ngx-markdown-editor-wrapper :first-child[style=\"display: none;\"]+*,ngx-markdown-editor.default .ngx-markdown-editor-wrapper>:first-child{border-bottom-left-radius:5px;border-top-left-radius:5px}ngx-markdown-editor.default .ngx-markdown-editor-wrapper>:last-child{border-bottom-right-radius:5px;border-top-right-radius:5px}ngx-markdown-editor.default .ngx-markdown-editor-wrapper .CodeMirror{border-radius:5px}ngx-markdown-editor.default .ngx-markdown-editor-wrapper .CodeMirror .CodeMirror-scroll{padding-left:8px;padding-top:8px}ngx-markdown-editor.default .ngx-markdown-editor-wrapper .CodeMirror.CodeMirror-lineNumbers .CodeMirror-scroll{padding-left:0}.CodeMirror.cm-s-preview-like-markup{font-family:Roboto,Helvetica Neue,sans-serif}.CodeMirror.cm-s-preview-like-markup .cm-header{color:#000;font-weight:700}.CodeMirror.cm-s-preview-like-markup .cm-header.cm-header-1{font-size:2em}.CodeMirror.cm-s-preview-like-markup .cm-header.cm-header-2{font-size:1.5em}.CodeMirror.cm-s-preview-like-markup .cm-header.cm-header-3{font-size:1.17em}.CodeMirror.cm-s-preview-like-markup .cm-header.cm-header-4{font-size:1em}.CodeMirror.cm-s-preview-like-markup .cm-header.cm-header-5{font-size:.83em}.CodeMirror.cm-s-preview-like-markup .cm-header.cm-header-6{font-size:.67em}.CodeMirror.cm-s-preview-like-markup .cm-code{font-family:monospace}.CodeMirror.cm-s-preview-like-markup .cm-link-text{color:#0366d6;text-decoration:underline}.CodeMirror.cm-s-preview-like-markup .cm-link-href{color:#afafaf;font-size:.8em;text-decoration:none}"]
},] }
];
MarkdownEditorComponent.ctorParameters = function () { return [
{ type: icon.MatIconRegistry },
{ type: i1.DomSanitizer },
{ type: Keybindings },
{ type: i0.ElementRef },
{ type: ngxMarkdown.MarkdownService },
{ type: ToolbarService, decorators: [{ type: i0.Host }] },
{ type: StatusbarService, decorators: [{ type: i0.Host }] }
]; };
MarkdownEditorComponent.propDecorators = {
data: [{ type: i0.Input }],
options: [{ type: i0.Input }],
toolbar: [{ type: i0.Input }],
statusbar: [{ type: i0.Input }],
language: [{ type: i0.Input }],
label: [{ type: i0.Input }],
required: [{ type: i0.Input }],
materialStyle: [{ type: i0.Input }],
disabled: [{ type: i0.Input }],
showToolbar: [{ type: i0.Input }],
showStatusbar: [{ type: i0.Input }],
showTooltips: [{ type: i0.Input }],
shortcutsInTooltips: [{ type: i0.Input }],
contentChange: [{ type: i0.Output }],
cursorActivity: [{ type: i0.Output }],
editorFocus: [{ type: i0.Output }],
editorBlur: [{ type: i0.Output }],
setHeadingLevelDropdown: [{ type: i0.ViewChild, args: ['setHeadingLevel',] }],
markdown: [{ type: i0.ViewChild, args: ['markdown',] }],
disabledStyle: [{ type: i0.HostBinding, args: ['class.disabled',] }],
default: [{ type: i0.HostBinding, args: ['class.default',] }],
material: [{ type: i0.HostBinding, args: ['class.material',] }],
class: [{ type: i0.HostBinding, args: ['class',] }],
appearanceStandard: [{ type: i0.HostBinding, args: ['class.appearance-standard',] }],
appearanceFill: [{ type: i0.HostBinding, args: ['class.appearance-fill',] }],
appearanceLegacy: [{ type: i0.HostBinding, args: ['class.appearance-legacy',] }],
focusedStyle: [{ type: i0.HostBinding, args: ['class.focused',] }]
};
var MarkdownEditorModule = /** @class */ (function () {
function MarkdownEditorModule() {
}
MarkdownEditorModule.forRoot = function (config) {
var _a, _b, _c;
return {
ngModule: MarkdownEditorModule,
providers: [
((_a = config === null || config === void 0 ? void 0 : config.previewConfig) === null || _a === void 0 ? void 0 : _a.markedOptions) || [],
{
provide: ngxMarkdown.SECURITY_CONTEXT,
useValue: (_c = (_b = config === null || config === void 0 ? void 0 : config.previewConfig) === null || _b === void 0 ? void 0 : _b.sanitize) !== null && _c !== void 0 ? _c : i0.SecurityContext.HTML,
},
],
};
};
MarkdownEditorModule.forChild = function () {
return {
ngModule: MarkdownEditorModule,
};
};
return MarkdownEditorModule;
}());
MarkdownEditorModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [MarkdownEditorComponent],
imports: [
common.CommonModule,
i1.BrowserModule,
animations.BrowserAnimationsModule,
http.HttpClientModule,
icon.MatIconModule,
button.MatButtonModule,
formField.MatFormFieldModule,
select.MatSelectModule,
tooltip.MatTooltipModule,
ngxMarkdown.MarkdownModule.forRoot(),
],
exports: [MarkdownEditorComponent],
},] }
];
/*
* Public API Surface of ngx-markdown-editor
*/
/**
* Generated bundle index. Do not edit.
*/
exports.MarkdownEditorComponent = MarkdownEditorComponent;
exports.MarkdownEditorModule = MarkdownEditorModule;
exports.fromCmEvent = fromCmEvent;
exports.ɵa = ToolbarService;
exports.ɵb = StatusbarService;
exports.ɵc = Keybindings;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=mdefy-ngx-markdown-editor.umd.js.map