@stratusjs/angular 0.5.0 → 0.5.2

package/src/editor/editor.component.js

@@ -1,948 +1,926 @@
-System.register(["@angular/core", "@angular/forms", "@angular/material/dialog", "rxjs", "rxjs/operators", "@angular/platform-browser", "@stratusjs/runtime/stratus", "lodash", "../core/root.component", "./citation-dialog.component", "./link-dialog.component", "./media-dialog.component", "@stratusjs/angularjs/services/registry", "@stratusjs/core/environment", "@stratusjs/core/events/eventManager", "./code-view-dialog.component", "html2pdf", "font-awesome", "froala-plugins", "froala-embedly", "froala-font-awesome", "froala-image-tui", "../froala/plugins/citationManager", "../froala/plugins/linkManager", "../froala/plugins/mediaManager"], function (exports_1, context_1) {
-    "use strict";
-    var __decorate = (this && this.__decorate) || function (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;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var core_1, forms_1, dialog_1, rxjs_1, operators_1, platform_browser_1, stratus_1, lodash_1, root_component_1, citation_dialog_component_1, link_dialog_component_1, media_dialog_component_1, registry_1, environment_1, eventManager_1, code_view_dialog_component_1, systemPackage, froalaPackage, moduleName, min, localDir, froalaDir, has, EditorComponent;
-    var __moduleName = context_1 && context_1.id;
-    return {
-        setters: [
-            function (core_1_1) {
-                core_1 = core_1_1;
+var __decorate = (this && this.__decorate) || function (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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { ChangeDetectorRef, Component, ElementRef, Input, } from '@angular/core';
+import { FormBuilder, FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable, Subject, timer } from 'rxjs';
+import { catchError, debounce } from 'rxjs/operators';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Stratus } from '@stratusjs/runtime/stratus';
+import _ from 'lodash';
+import { RootComponent } from '../core/root.component';
+import { CitationDialogComponent } from './citation-dialog.component';
+import { LinkDialogComponent } from './link-dialog.component';
+import { MediaDialogComponent } from './media-dialog.component';
+import { CodeViewDialogComponent } from './code-view-dialog.component';
+import { CodeMirrorBridge } from './code-mirror-bridge';
+import { Registry } from '@stratusjs/angularjs/services/registry';
+import { cookie } from '@stratusjs/core/environment';
+import { EventManager } from '@stratusjs/core/events/eventManager';
+import { EditorView, basicSetup } from 'codemirror';
+import { html } from '@codemirror/lang-html';
+import 'html2pdf';
+import 'font-awesome';
+import 'froala-plugins';
+import 'froala-embedly';
+import 'froala-font-awesome';
+import 'froala-image-tui';
+import '../froala/plugins/citationManager';
+import '../froala/plugins/linkManager';
+import '../froala/plugins/mediaManager';
+const systemPackage = '@stratusjs/angular';
+const froalaPackage = 'froala-editor';
+const moduleName = 'editor';
+const min = !cookie('env') ? '.min' : '';
+const localDir = `${Stratus.BaseUrl}${boot.configuration.paths[`${systemPackage}/*`].replace(/[^\/]*$/, '').replace(/\/dist\/$/, '/src/')}`;
+const froalaDir = `${Stratus.BaseUrl}${boot.configuration.paths[froalaPackage].replace(/js\/[^\/]*$/, '')}`;
+const has = (object, path) => _.has(object, path) && !_.isEmpty(_.get(object, path));
+let EditorComponent = class EditorComponent extends RootComponent {
+    constructor(sanitizer, ref, elementRef, fb, dialog) {
+        super();
+        this.sanitizer = sanitizer;
+        this.ref = ref;
+        this.elementRef = elementRef;
+        this.fb = fb;
+        this.dialog = dialog;
+        this.title = moduleName + '_component';
+        this.dev = !!cookie('env');
+        this.editor = 'froala';
+        this._ = _;
+        this.has = has;
+        this.log = console.log;
+        this.Stratus = Stratus;
+        this.registry = new Registry();
+        this.onChange = new Subject();
+        this.svgIcons = {};
+        this.initialized = false;
+        this.styled = false;
+        this.blurred = false;
+        this.focused = false;
+        this.form = this.fb.group({
+            dataString: new FormControl(),
+        });
+        this.dataChangeLog = [];
+        this.dataString = '';
+        this.debounceSave = true;
+        this.debounceTime = 5000;
+        this.forceSave = true;
+        this.froalaButtons = [
+            'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'formatBlock',
+            'blockStyle', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL',
+            'formatUL', 'outdent', 'indent', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertFile',
+            'insertTable', '|', 'undo', 'redo', 'removeFormat', 'wordPaste', 'help', 'html', 'fullscreen'
+        ];
+        this.froalaStandardButtons = {
+            moreText: [
+                'bold',
+                'italic',
+                'underline',
+                'strikeThrough',
+                'subscript',
+                'superscript',
+                'fontFamily',
+                'fontSize',
+                'textColor',
+                'backgroundColor',
+                'inlineClass',
+                'inlineStyle',
+                'clearFormatting'
+            ],
+            moreParagraph: [
+                'linkManager',
+                'formatOL',
+                'formatUL',
+                'indent',
+                'outdent',
+                'quote',
+                'paragraphFormat',
+                'paragraphStyle',
+                'alignLeft',
+                'alignCenter',
+                'alignRight',
+                'alignJustify',
+            ],
+            moreRich: [
+                'mediaManager',
+                'insertTable',
+                'insertImage',
+                'insertVideo',
+                'insertFile',
+                'citationInsert',
+                'insertHR',
+                'specialCharacters',
+            ],
+            moreMisc: [
+                'html',
+                'undo',
+                'redo',
+                'fullscreen',
+                'print',
+                'selectAll',
+                'help'
+            ],
+        };
+        this.froalaConfig = {
+            attribution: false,
+            key: Stratus.Environment.get('froalaKey'),
+            zIndex: 9999,
+            events: {
+                initialized: (froalaEditorDirective) => {
+                    this.froalaEditorDirective = froalaEditorDirective;
+                },
             },
-            function (forms_1_1) {
-                forms_1 = forms_1_1;
+            codeBeautifierOptions: {
+                end_with_newline: true,
+                indent_inner_html: true,
+                extra_liners: '["p", "h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "pre", "ul", "ol", "table", "dl"]',
+                brace_style: 'expand',
+                indent_char: ' ',
+                indent_size: 4,
+                wrap_line_length: 0
             },
-            function (dialog_1_1) {
-                dialog_1 = dialog_1_1;
-            },
-            function (rxjs_1_1) {
-                rxjs_1 = rxjs_1_1;
-            },
-            function (operators_1_1) {
-                operators_1 = operators_1_1;
-            },
-            function (platform_browser_1_1) {
-                platform_browser_1 = platform_browser_1_1;
-            },
-            function (stratus_1_1) {
-                stratus_1 = stratus_1_1;
-            },
-            function (lodash_1_1) {
-                lodash_1 = lodash_1_1;
-            },
-            function (root_component_1_1) {
-                root_component_1 = root_component_1_1;
-            },
-            function (citation_dialog_component_1_1) {
-                citation_dialog_component_1 = citation_dialog_component_1_1;
-            },
-            function (link_dialog_component_1_1) {
-                link_dialog_component_1 = link_dialog_component_1_1;
-            },
-            function (media_dialog_component_1_1) {
-                media_dialog_component_1 = media_dialog_component_1_1;
-            },
-            function (registry_1_1) {
-                registry_1 = registry_1_1;
-            },
-            function (environment_1_1) {
-                environment_1 = environment_1_1;
-            },
-            function (eventManager_1_1) {
-                eventManager_1 = eventManager_1_1;
-            },
-            function (code_view_dialog_component_1_1) {
-                code_view_dialog_component_1 = code_view_dialog_component_1_1;
-            },
-            function (_1) {
-            },
-            function (_2) {
+            codeMirror: {
+                fromTextArea: (el, opts) => {
+                    return new CodeMirrorBridge({
+                        extensions: [
+                            basicSetup,
+                            html({}),
+                            EditorView.lineWrapping
+                        ]
+                    }).fromTextArea(el, opts);
+                }
             },
-            function (_3) {
+            codeMirrorOptions: {
+                indentWithTabs: false,
+                lineNumbers: true,
+                lineWrapping: true,
+                mode: 'text/html',
+                tabMode: 'space',
+                tabSize: 4
             },
-            function (_4) {
+            fileInsertButtons: [
+                'fileBack',
+            ],
+            fileUploadURL: 'https://app.sitetheory.io/?session=' + cookie('SITETHEORY'),
+            fontFamily: {
+                'Arial,Helvetica,sans-serif': 'Arial',
+                'Georgia,serif': 'Georgia',
+                'Impact,Charcoal,sans-serif': 'Impact',
+                'Tahoma,Geneva,sans-serif': 'Tahoma',
+                '"Times New Roman",Times,serif': 'Times New Roman',
+                'Verdana,Geneva,sans-serif': 'Verdana'
             },
-            function (_5) {
+            heightMax: window.innerHeight || document.documentElement.clientHeight || 500,
+            htmlAllowedAttrs: [
+                'aria-.+',
+                'data-.+',
+                'ng-.+',
+                'stratus-.+',
+                'sa-.+',
+                'accept', 'accept-charset', 'accesskey', 'action', 'align', 'allow', 'allowfullscreen',
+                'allowtransparency', 'alt', 'async', 'autocomplete', 'autofocus',
+                'autoplay', 'autosave',
+                'background', 'bgcolor', 'border',
+                'charset', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'color',
+                'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls',
+                'coords',
+                'data', 'datetime', 'default', 'defer', 'dir', 'dirname',
+                'disabled', 'download', 'draggable', 'dropzone',
+                'enctype',
+                'for', 'form', 'formaction', 'frameborder',
+                'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv',
+                'icon', 'id', 'ismap', 'itemprop',
+                'keytype', 'kind',
+                'label', 'lang', 'language', 'list', 'loop', 'low',
+                'max', 'maxlength', 'media', 'method', 'min', 'mozallowfullscreen', 'multiple',
+                'muted',
+                'name', 'novalidate',
+                'open', 'optimum',
+                'pattern', 'ping', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate',
+                'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan',
+                'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape',
+                'size', 'sizes', 'span', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step',
+                'summary', 'spellcheck', 'style',
+                'tabindex', 'target', 'title', 'type', 'translate',
+                'usemap',
+                'value', 'valign',
+                'webkitallowfullscreen', 'width', 'wrap',
+                'xmlns',
+                'xmlns:xlink',
+                'accent-height', 'accumulate', 'additive', 'alignment-baseline', 'alphabetic', 'amplitude', 'arabic-form', 'ascent',
+                'attributeName', 'attributeType', 'azimuth',
+                'baseFrequency', 'baseline-shift', 'baseProfile', 'bbox', 'begin', 'bias', 'by',
+                'calcMode', 'cap-height', 'clip', 'clipPathUnits', 'clip-path', 'clip-rule', 'color-interpolation',
+                'color-interpolation-filters', 'color-profile', 'color-rendering', 'contentScriptType', 'contentStyleType', 'crossorigin',
+                'cursor', 'cx', 'cy',
+                'd', 'decelerate', 'descent', 'diffuseConstant', 'direction', 'display', 'divisor', 'dominant-baseline', 'dur', 'dx', 'dy',
+                'edgeMode', 'elevation', 'enable-background', 'end', 'exponent', 'externalResourcesRequired',
+                'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterRes', 'filterUnits', 'flood-color', 'flood-opacity', 'font-family',
+                'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'format', 'from',
+                'fr', 'fx', 'fy',
+                'g1', 'g2', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'glyphRef', 'gradientTransform',
+                'gradientUnits',
+                'hanging', 'horiz-adv-x', 'horiz-origin-x',
+                'ideographic', 'image-rendering', 'in', 'in2', 'intercept',
+                'k', 'k1', 'k2', 'k3', 'k4', 'kernelMatrix', 'kernelUnitLength', 'kerning', 'keyPoints', 'keySplines', 'keyTimes',
+                'lengthAdjust', 'letter-spacing', 'lighting-color', 'limitingConeAngle', 'local',
+                'marker-end', 'marker-mid', 'marker-start', 'markerHeight', 'markerUnits', 'markerWidth', 'mask', 'maskContentUnits',
+                'maskUnits', 'mathematical', 'mode',
+                'numOctaves',
+                'offset', 'opacity', 'operator', 'order', 'orient', 'orientation', 'origin', 'overflow', 'overline-position',
+                'overline-thickness',
+                'panose-1', 'paint-order', 'path', 'pathLength', 'patternContentUnits', 'patternTransform', 'patternUnits', 'pointer-events',
+                'points', 'pointsAtX', 'pointsAtY', 'pointsAtZ', 'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits',
+                'r', 'radius', 'referrerPolicy', 'refX', 'refY', 'rendering-intent', 'repeatCount', 'repeatDur', 'requiredExtensions',
+                'requiredFeatures', 'restart', 'result', 'rotate', 'rx', 'ry',
+                'scale', 'seed', 'shape-rendering', 'slope', 'spacing', 'specularConstant', 'specularExponent', 'speed', 'spreadMethod',
+                'startOffset', 'stdDeviation', 'stemh', 'stemv', 'stitchTiles', 'stop-color', 'stop-opacity', 'strikethrough-position',
+                'strikethrough-thickness', 'string', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin',
+                'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'surfaceScale', 'systemLanguage',
+                'tableValues', 'targetX', 'targetY', 'text-anchor', 'text-decoration', 'text-rendering', 'textLength', 'to', 'transform',
+                'transform-origin',
+                'u1', 'u2', 'underline-position', 'underline-thickness', 'unicode', 'unicode-bidi', 'unicode-range', 'units-per-em',
+                'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'values', 'vector-effect', 'version', 'vert-adv-y',
+                'vert-origin-x', 'vert-origin-y', 'viewBox', 'viewTarget', 'visibility',
+                'widths', 'word-spacing', 'writing-mode',
+                'x', 'x-height', 'x1', 'x2', 'xChannelSelector',
+                'xlink:actuate', 'xlink:arcrole', 'xlink:href', 'xlink:role', 'xlink:show',
+                'xlink:title', 'xlink:type', 'xml:base', 'xml:lang', 'xml:space',
+                'y', 'y1', 'y2', 'yChannelSelector',
+                'z', 'zoomAndPan'
+            ],
+            htmlAllowedEmptyTags: [
+                'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script',
+                'hr', 'div',
+                'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'defs', 'desc', 'discard', 'ellipse',
+                'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
+                'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG',
+                'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset',
+                'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
+                'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'metadata', 'mpath',
+                'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'stop', 'svg', 'switch',
+                'symbol', 'text', 'textPath', 'tspan', 'unknown', 'use', 'view',
+                'ng-app', 'ng-bind', 'ng-bind-html', 'ng-bind-template', 'ng-blur', 'ng-change', 'ng-checked', 'ng-class', 'ng-class-even',
+                'ng-class-odd', 'ng-click', 'ng-cloak', 'ng-controller', 'ng-copy', 'ng-csp', 'ng-cut', 'ng-dblclick', 'ng-disabled',
+                'ng-focus', 'ng-form', 'ng-hide', 'ng-href', 'ng-if', 'ng-include', 'ng-init', 'ng-jq', 'ng-keydown', 'ng-keypress', 'ng-keyup',
+                'ng-list', 'ng-maxlength', 'ng-minlength', 'ng-model', 'ng-model-options', 'ng-mousedown', 'ng-mouseenter', 'ng-mouseleave',
+                'ng-mousemove', 'ng-mouseover', 'ng-mouseup', 'ng-non-bindable', 'ng-on', 'ng-open', 'ng-options', 'ng-paste', 'ng-pattern',
+                'ng-pluralize', 'ng-prop', 'ng-readonly', 'ng-ref', 'ng-repeat', 'ng-required', 'ng-selected', 'ng-show', 'ng-src', 'ng-srcset',
+                'ng-style', 'ng-submit', 'ng-switch', 'ng-transclude', 'ng-value', 'ng-animate-children', 'ng-animate-swap', 'ng-outlet',
+                'ng-message', 'ng-message-default', 'ng-message-exp', 'ng-messages', 'ng-messages-include', 'ng-view', 'ng-swipe-left',
+                'ng-swipe-right',
+                'md-autocomplete', 'md-autofocus', 'md-button', 'md-calendar', 'md-card', 'md-checkbox', 'md-chip', 'md-chip-remove',
+                'md-chips', 'md-colors', 'md-contact-chips', 'md-content', 'md-datepicker', 'md-dialog', 'md-divider', 'md-fab-actions',
+                'md-fab-speed-dial', 'md-fab-toolbar', 'md-force-height', 'md-grid-list', 'md-grid-tile', 'md-highlight-text', 'md-icon',
+                'md-ink-ripple', 'md-input', 'md-input-container', 'md-list', 'md-list-item', 'md-menu', 'md-menu-bar', 'md-nav-bar',
+                'md-nav-item', 'md-optgroup', 'md-option', 'md-progress-circular', 'md-progress-linear', 'md-radio-button', 'md-radio-group',
+                'md-select', 'md-select-on-focus', 'md-sidenav', 'md-slider', 'md-slider-container', 'md-subheader', 'md-swipe-down',
+                'md-swipe-left', 'md-swipe-right', 'md-swipe-up', 'md-switch', 'md-tab', 'md-tabs', 'md-toolbar', 'md-tooltip', 'md-truncate',
+                'md-virtual-repeat', 'md-virtual-repeat-container', 'md-whiteframe',
+                'md-svg-src',
+                'stratus-citation-notitle',
+                'sa-boot',
+                'sa-editor',
+                'sa-map',
+                'sa-media-selector',
+                'sa-selector',
+                'sa-stripe-payment-method-list',
+                'sa-stripe-payment-method-selector',
+                'sa-tree',
+            ],
+            htmlAllowedStyleProps: [
+                '.*'
+            ],
+            htmlAllowedTags: [
+                'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio',
+                'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button',
+                'canvas', 'caption', 'cite', 'code', 'col', 'colgroup',
+                'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt',
+                'em', 'embed',
+                'fieldset', 'figcaption', 'figure', 'footer', 'form',
+                'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr',
+                'i', 'iframe', 'img', 'input', 'ins',
+                'kbd', 'keygen',
+                'label', 'legend', 'li', 'link',
+                'main', 'map', 'mark', 'menu', 'menuitem', 'meter',
+                'nav', 'noscript',
+                'object', 'ol', 'optgroup', 'option', 'output',
+                'p', 'param', 'pre', 'progress',
+                'queue',
+                'rp', 'rt', 'ruby',
+                's', 'samp', 'script', 'style', 'section', 'select', 'small',
+                'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup',
+                'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track',
+                'u', 'ul',
+                'var', 'video',
+                'wbr',
+                'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'defs', 'desc', 'discard', 'ellipse',
+                'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
+                'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG',
+                'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset',
+                'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
+                'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'metadata', 'mpath',
+                'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'stop', 'svg', 'switch',
+                'symbol', 'text', 'textPath', 'tspan', 'unknown', 'use', 'view',
+                'ng-app', 'ng-bind', 'ng-bind-html', 'ng-bind-template', 'ng-blur', 'ng-change', 'ng-checked', 'ng-class', 'ng-class-even',
+                'ng-class-odd', 'ng-click', 'ng-cloak', 'ng-controller', 'ng-copy', 'ng-csp', 'ng-cut', 'ng-dblclick', 'ng-disabled',
+                'ng-focus', 'ng-form', 'ng-hide', 'ng-href', 'ng-if', 'ng-include', 'ng-init', 'ng-jq', 'ng-keydown', 'ng-keypress', 'ng-keyup',
+                'ng-list', 'ng-maxlength', 'ng-minlength', 'ng-model', 'ng-model-options', 'ng-mousedown', 'ng-mouseenter', 'ng-mouseleave',
+                'ng-mousemove', 'ng-mouseover', 'ng-mouseup', 'ng-non-bindable', 'ng-on', 'ng-open', 'ng-options', 'ng-paste', 'ng-pattern',
+                'ng-pluralize', 'ng-prop', 'ng-readonly', 'ng-ref', 'ng-repeat', 'ng-required', 'ng-selected', 'ng-show', 'ng-src', 'ng-srcset',
+                'ng-style', 'ng-submit', 'ng-switch', 'ng-transclude', 'ng-value', 'ng-animate-children', 'ng-animate-swap', 'ng-outlet',
+                'ng-message', 'ng-message-default', 'ng-message-exp', 'ng-messages', 'ng-messages-include', 'ng-view', 'ng-swipe-left',
+                'ng-swipe-right',
+                'md-autocomplete', 'md-autofocus', 'md-button', 'md-calendar', 'md-card', 'md-checkbox', 'md-chip', 'md-chip-remove',
+                'md-chips', 'md-colors', 'md-contact-chips', 'md-content', 'md-datepicker', 'md-dialog', 'md-divider', 'md-fab-actions',
+                'md-fab-speed-dial', 'md-fab-toolbar', 'md-force-height', 'md-grid-list', 'md-grid-tile', 'md-highlight-text', 'md-icon',
+                'md-ink-ripple', 'md-input', 'md-input-container', 'md-list', 'md-list-item', 'md-menu', 'md-menu-bar', 'md-nav-bar',
+                'md-nav-item', 'md-optgroup', 'md-option', 'md-progress-circular', 'md-progress-linear', 'md-radio-button', 'md-radio-group',
+                'md-select', 'md-select-on-focus', 'md-sidenav', 'md-slider', 'md-slider-container', 'md-subheader', 'md-swipe-down',
+                'md-swipe-left', 'md-swipe-right', 'md-swipe-up', 'md-switch', 'md-tab', 'md-tabs', 'md-toolbar', 'md-tooltip', 'md-truncate',
+                'md-virtual-repeat', 'md-virtual-repeat-container', 'md-whiteframe',
+                'md-svg-src',
+                'sa-boot',
+                'sa-editor',
+                'sa-map',
+                'sa-media-selector',
+                'sa-selector',
+                'sa-stripe-payment-method-list',
+                'sa-stripe-payment-method-selector',
+                'sa-tree',
+                'stratus-.+',
+            ],
+            htmlRemoveTags: [],
+            htmlSimpleAmpersand: false,
+            imageInsertButtons: [
+                'imageBack',
+                '|',
+                'imageUpload',
+                'imageByURL',
+            ],
+            imageUpload: true,
+            imageUploadRemoteUrls: true,
+            imageUploadURL: 'https://app.sitetheory.io/?session=' + cookie('SITETHEORY'),
+            imageManagerPageSize: 20,
+            imageManagerScrollOffset: 10,
+            imageManagerLoadMethod: 'GET',
+            imageManagerLoadURL: '/Api/Media?payload-only=true',
+            linkEditButtons: [
+                'linkOpen',
+                'linkManagerEdit',
+                'linkRemove',
+            ],
+            linkInsertButtons: [
+                'linkBack',
+            ],
+            multiLine: true,
+            paragraphStyles: {
+                btn: 'Button',
+                header: 'Header',
+                title: 'Title',
+                'alt-title': 'Alt Title (over)',
+                subtitle: 'Subtitle',
+                pullout: 'Pullout Quote',
             },
-            function (_6) {
+            pasteDeniedAttrs: [
+                'id',
+                'class',
+                'style',
+                'dir',
+                'data-.+',
+                'aria-.+',
+                'ng-.+',
+                'stratus-.+',
+                'sa-.+'
+            ],
+            pasteDeniedTags: [
+                'form', 'input', 'label',
+                'style'
+            ],
+            pastePlain: false,
+            pluginsEnabled: [
+                'align',
+                'charCounter',
+                'codeBeautifier',
+                'codeView',
+                'colors',
+                'draggable',
+                'embedly',
+                'entities',
+                'file',
+                'fontAwesome',
+                'fontFamily',
+                'fontSize',
+                'fullscreen',
+                'help',
+                'image',
+                'imageTUI',
+                'inlineStyle',
+                'inlineClass',
+                'lineBreaker',
+                'link',
+                'linkManager',
+                'citationManager',
+                'lists',
+                'mediaManager',
+                'paragraphFormat',
+                'paragraphStyle',
+                'print',
+                'quickInsert',
+                'quote',
+                'save',
+                'specialCharacters',
+                'table',
+                'url',
+                'video',
+                'wordPaste',
+            ],
+            quickInsertButtons: [
+                'media',
+                'link',
+                'video',
+                'embedly',
+                'table',
+                'ul',
+                'ol',
+                'hr'
+            ],
+            scrollableContainer: Stratus.Environment.get('viewPort') || 'body',
+            spellcheck: true,
+            toolbarSticky: true,
+            toolbarButtons: {
+                moreText: {
+                    buttons: this.froalaStandardButtons.moreText,
+                    buttonsVisible: 3
+                },
+                moreParagraph: {
+                    buttons: this.froalaStandardButtons.moreParagraph,
+                    buttonsVisible: 8
+                },
+                moreRich: {
+                    buttons: this.froalaStandardButtons.moreRich,
+                    buttonsVisible: 1
+                },
+                moreMisc: {
+                    buttons: this.froalaStandardButtons.moreMisc,
+                    align: 'right',
+                    buttonsVisible: 1
+                }
             },
-            function (_7) {
+            toolbarButtonsSM: {
+                moreText: {
+                    buttons: this.froalaStandardButtons.moreText,
+                    buttonsVisible: 3
+                },
+                moreParagraph: {
+                    buttons: this.froalaStandardButtons.moreParagraph,
+                    buttonsVisible: 0
+                },
+                moreRich: {
+                    buttons: this.froalaStandardButtons.moreRich,
+                    buttonsVisible: 3
+                },
+                moreMisc: {
+                    buttons: this.froalaStandardButtons.moreMisc,
+                    align: 'right',
+                    buttonsVisible: 0
+                }
             },
-            function (_8) {
+            toolbarButtonsXS: {
+                moreText: {
+                    buttons: this.froalaStandardButtons.moreText,
+                    buttonsVisible: 0
+                },
+                moreParagraph: {
+                    buttons: this.froalaStandardButtons.moreParagraph,
+                    buttonsVisible: 0
+                },
+                moreRich: {
+                    buttons: this.froalaStandardButtons.moreRich,
+                    buttonsVisible: 0
+                },
+                moreMisc: {
+                    buttons: this.froalaStandardButtons.moreMisc,
+                    align: 'right',
+                    buttonsVisible: 0
+                }
             },
-            function (_9) {
+            useClasses: true,
+            videoInsertButtons: [
+                'videoBack',
+                '|',
+                'videoByURL',
+                'videoEmbed',
+                'videoUpload',
+            ],
+            videoUpload: true,
+            videoUploadURL: 'https://app.sitetheory.io/?session=' + cookie('SITETHEORY')
+        };
+        this.uid = _.uniqueId(`sa_${_.snakeCase(moduleName)}_component_`);
+        Stratus.Instances[this.uid] = this;
+        Stratus.Internals.LoadCss([
+            `${localDir}${moduleName}/${moduleName}.component${min}.css`,
+            `${froalaDir}css/froala_editor.pkgd${min}.css`,
+            `${froalaDir}css/third_party/embedly${min}.css`,
+            `${froalaDir}css/third_party/font_awesome${min}.css`,
+            `${froalaDir}css/third_party/image_tui${min}.css`,
+        ]).then(() => {
+            this.styled = true;
+            this.refresh();
+        }).catch((e) => {
+            console.error(e);
+            console.warn('Issue detected in CSS Loader for Component:', this.uid);
+            this.styled = true;
+            this.refresh();
+        });
+        this.hydrate(elementRef, sanitizer, ["title", "uid", "dev", "debug", "editor", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "property", "_", "has", "log", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "initialized", "styled", "blurred", "focused", "codeViewIsOpen", "form", "dataChangeLog", "dataString", "debounceSave", "debounceTime", "forceSave", "froalaEditorDirective", "froalaButtons", "froalaStandardButtons", "froalaConfig", "sanitizer", "ref", "elementRef", "fb", "dialog", "ngOnInit", "modelSave", "listDuplicates", "normalizeIn", "normalizeOut", "changeImgSize", "handleError", "fetchData", "dataDefer", "dataRef", "onDataChange", "created", "changedEditor", "onChangeEvent", "onFocus", "onBlur", "bypassHTML", "trigger", "openCitationDialog", "openLinkDialog", "openMediaDialog", "openCodeViewDialog", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+        this.fetchData()
+            .then(data => {
+            if (!data || !(data instanceof EventManager)) {
+                console.warn('Unable to bind data from Registry!');
+                return;
             }
-        ],
-        execute: function () {
-            systemPackage = '@stratusjs/angular';
-            froalaPackage = 'froala-editor';
-            moduleName = 'editor';
-            min = !environment_1.cookie('env') ? '.min' : '';
-            localDir = `${stratus_1.Stratus.BaseUrl}${boot.configuration.paths[`${systemPackage}/*`].replace(/[^\/]*$/, '').replace(/\/dist\/$/, '/src/')}`;
-            froalaDir = `${stratus_1.Stratus.BaseUrl}${boot.configuration.paths[froalaPackage].replace(/js\/[^\/]*$/, '')}`;
-            has = (object, path) => lodash_1.default.has(object, path) && !lodash_1.default.isEmpty(lodash_1.default.get(object, path));
-            EditorComponent = class EditorComponent extends root_component_1.RootComponent {
-                constructor(sanitizer, ref, elementRef, fb, dialog) {
-                    super();
-                    this.sanitizer = sanitizer;
-                    this.ref = ref;
-                    this.elementRef = elementRef;
-                    this.fb = fb;
-                    this.dialog = dialog;
-                    this.title = moduleName + '_component';
-                    this.dev = !!environment_1.cookie('env');
-                    this.editor = 'froala';
-                    this._ = lodash_1.default;
-                    this.has = has;
-                    this.log = console.log;
-                    this.Stratus = stratus_1.Stratus;
-                    this.registry = new registry_1.Registry();
-                    this.onChange = new rxjs_1.Subject();
-                    this.svgIcons = {};
-                    this.initialized = false;
-                    this.styled = false;
-                    this.blurred = false;
-                    this.focused = false;
-                    this.form = this.fb.group({
-                        dataString: new forms_1.FormControl(),
-                    });
-                    this.dataChangeLog = [];
-                    this.dataString = '';
-                    this.debounceSave = true;
-                    this.debounceTime = 5000;
-                    this.forceSave = true;
-                    this.froalaButtons = [
-                        'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'formatBlock',
-                        'blockStyle', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL',
-                        'formatUL', 'outdent', 'indent', '|', 'insertLink', 'insertImage', 'insertVideo', 'insertFile',
-                        'insertTable', '|', 'undo', 'redo', 'removeFormat', 'wordPaste', 'help', 'html', 'fullscreen'
-                    ];
-                    this.froalaStandardButtons = {
-                        moreText: [
-                            'bold',
-                            'italic',
-                            'underline',
-                            'strikeThrough',
-                            'subscript',
-                            'superscript',
-                            'fontFamily',
-                            'fontSize',
-                            'textColor',
-                            'backgroundColor',
-                            'inlineClass',
-                            'inlineStyle',
-                            'clearFormatting'
-                        ],
-                        moreParagraph: [
-                            'linkManager',
-                            'formatOL',
-                            'formatUL',
-                            'indent',
-                            'outdent',
-                            'quote',
-                            'paragraphFormat',
-                            'paragraphStyle',
-                            'alignLeft',
-                            'alignCenter',
-                            'alignRight',
-                            'alignJustify',
-                        ],
-                        moreRich: [
-                            'mediaManager',
-                            'insertTable',
-                            'insertImage',
-                            'insertVideo',
-                            'insertFile',
-                            'citationInsert',
-                            'insertHR',
-                            'specialCharacters',
-                        ],
-                        moreMisc: [
-                            'html',
-                            'undo',
-                            'redo',
-                            'fullscreen',
-                            'print',
-                            'selectAll',
-                            'help'
-                        ],
-                    };
-                    this.froalaConfig = {
-                        attribution: false,
-                        key: stratus_1.Stratus.Environment.get('froalaKey'),
-                        zIndex: 9999,
-                        events: {
-                            initialized: (froalaEditorDirective) => {
-                                this.froalaEditorDirective = froalaEditorDirective;
-                            },
-                        },
-                        codeBeautifierOptions: {
-                            end_with_newline: true,
-                            indent_inner_html: true,
-                            extra_liners: '["p", "h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "pre", "ul", "ol", "table", "dl"]',
-                            brace_style: 'expand',
-                            indent_char: ' ',
-                            indent_size: 4,
-                            wrap_line_length: 0
-                        },
-                        fileInsertButtons: [
-                            'fileBack',
-                        ],
-                        fileUploadURL: 'https://app.sitetheory.io/?session=' + environment_1.cookie('SITETHEORY'),
-                        fontFamily: {
-                            'Arial,Helvetica,sans-serif': 'Arial',
-                            'Georgia,serif': 'Georgia',
-                            'Impact,Charcoal,sans-serif': 'Impact',
-                            'Tahoma,Geneva,sans-serif': 'Tahoma',
-                            '"Times New Roman",Times,serif': 'Times New Roman',
-                            'Verdana,Geneva,sans-serif': 'Verdana'
-                        },
-                        heightMax: window.innerHeight || document.documentElement.clientHeight || 500,
-                        htmlAllowedAttrs: [
-                            'aria-.+',
-                            'data-.+',
-                            'ng-.+',
-                            'stratus-.+',
-                            'sa-.+',
-                            'accept', 'accept-charset', 'accesskey', 'action', 'align', 'allow', 'allowfullscreen',
-                            'allowtransparency', 'alt', 'async', 'autocomplete', 'autofocus',
-                            'autoplay', 'autosave',
-                            'background', 'bgcolor', 'border',
-                            'charset', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'color',
-                            'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls',
-                            'coords',
-                            'data', 'datetime', 'default', 'defer', 'dir', 'dirname',
-                            'disabled', 'download', 'draggable', 'dropzone',
-                            'enctype',
-                            'for', 'form', 'formaction', 'frameborder',
-                            'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'http-equiv',
-                            'icon', 'id', 'ismap', 'itemprop',
-                            'keytype', 'kind',
-                            'label', 'lang', 'language', 'list', 'loop', 'low',
-                            'max', 'maxlength', 'media', 'method', 'min', 'mozallowfullscreen', 'multiple',
-                            'muted',
-                            'name', 'novalidate',
-                            'open', 'optimum',
-                            'pattern', 'ping', 'placeholder', 'playsinline', 'poster', 'preload', 'pubdate',
-                            'radiogroup', 'readonly', 'rel', 'required', 'reversed', 'rows', 'rowspan',
-                            'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape',
-                            'size', 'sizes', 'span', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step',
-                            'summary', 'spellcheck', 'style',
-                            'tabindex', 'target', 'title', 'type', 'translate',
-                            'usemap',
-                            'value', 'valign',
-                            'webkitallowfullscreen', 'width', 'wrap',
-                            'xmlns',
-                            'xmlns:xlink',
-                            'accent-height', 'accumulate', 'additive', 'alignment-baseline', 'alphabetic', 'amplitude', 'arabic-form', 'ascent',
-                            'attributeName', 'attributeType', 'azimuth',
-                            'baseFrequency', 'baseline-shift', 'baseProfile', 'bbox', 'begin', 'bias', 'by',
-                            'calcMode', 'cap-height', 'clip', 'clipPathUnits', 'clip-path', 'clip-rule', 'color-interpolation',
-                            'color-interpolation-filters', 'color-profile', 'color-rendering', 'contentScriptType', 'contentStyleType', 'crossorigin',
-                            'cursor', 'cx', 'cy',
-                            'd', 'decelerate', 'descent', 'diffuseConstant', 'direction', 'display', 'divisor', 'dominant-baseline', 'dur', 'dx', 'dy',
-                            'edgeMode', 'elevation', 'enable-background', 'end', 'exponent', 'externalResourcesRequired',
-                            'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterRes', 'filterUnits', 'flood-color', 'flood-opacity', 'font-family',
-                            'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'format', 'from',
-                            'fr', 'fx', 'fy',
-                            'g1', 'g2', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'glyphRef', 'gradientTransform',
-                            'gradientUnits',
-                            'hanging', 'horiz-adv-x', 'horiz-origin-x',
-                            'ideographic', 'image-rendering', 'in', 'in2', 'intercept',
-                            'k', 'k1', 'k2', 'k3', 'k4', 'kernelMatrix', 'kernelUnitLength', 'kerning', 'keyPoints', 'keySplines', 'keyTimes',
-                            'lengthAdjust', 'letter-spacing', 'lighting-color', 'limitingConeAngle', 'local',
-                            'marker-end', 'marker-mid', 'marker-start', 'markerHeight', 'markerUnits', 'markerWidth', 'mask', 'maskContentUnits',
-                            'maskUnits', 'mathematical', 'mode',
-                            'numOctaves',
-                            'offset', 'opacity', 'operator', 'order', 'orient', 'orientation', 'origin', 'overflow', 'overline-position',
-                            'overline-thickness',
-                            'panose-1', 'paint-order', 'path', 'pathLength', 'patternContentUnits', 'patternTransform', 'patternUnits', 'pointer-events',
-                            'points', 'pointsAtX', 'pointsAtY', 'pointsAtZ', 'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits',
-                            'r', 'radius', 'referrerPolicy', 'refX', 'refY', 'rendering-intent', 'repeatCount', 'repeatDur', 'requiredExtensions',
-                            'requiredFeatures', 'restart', 'result', 'rotate', 'rx', 'ry',
-                            'scale', 'seed', 'shape-rendering', 'slope', 'spacing', 'specularConstant', 'specularExponent', 'speed', 'spreadMethod',
-                            'startOffset', 'stdDeviation', 'stemh', 'stemv', 'stitchTiles', 'stop-color', 'stop-opacity', 'strikethrough-position',
-                            'strikethrough-thickness', 'string', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin',
-                            'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'surfaceScale', 'systemLanguage',
-                            'tableValues', 'targetX', 'targetY', 'text-anchor', 'text-decoration', 'text-rendering', 'textLength', 'to', 'transform',
-                            'transform-origin',
-                            'u1', 'u2', 'underline-position', 'underline-thickness', 'unicode', 'unicode-bidi', 'unicode-range', 'units-per-em',
-                            'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'values', 'vector-effect', 'version', 'vert-adv-y',
-                            'vert-origin-x', 'vert-origin-y', 'viewBox', 'viewTarget', 'visibility',
-                            'widths', 'word-spacing', 'writing-mode',
-                            'x', 'x-height', 'x1', 'x2', 'xChannelSelector',
-                            'xlink:actuate', 'xlink:arcrole', 'xlink:href', 'xlink:role', 'xlink:show',
-                            'xlink:title', 'xlink:type', 'xml:base', 'xml:lang', 'xml:space',
-                            'y', 'y1', 'y2', 'yChannelSelector',
-                            'z', 'zoomAndPan'
-                        ],
-                        htmlAllowedEmptyTags: [
-                            'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script',
-                            'hr', 'div',
-                            'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'defs', 'desc', 'discard', 'ellipse',
-                            'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
-                            'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG',
-                            'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset',
-                            'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
-                            'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'metadata', 'mpath',
-                            'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'stop', 'svg', 'switch',
-                            'symbol', 'text', 'textPath', 'tspan', 'unknown', 'use', 'view',
-                            'ng-app', 'ng-bind', 'ng-bind-html', 'ng-bind-template', 'ng-blur', 'ng-change', 'ng-checked', 'ng-class', 'ng-class-even',
-                            'ng-class-odd', 'ng-click', 'ng-cloak', 'ng-controller', 'ng-copy', 'ng-csp', 'ng-cut', 'ng-dblclick', 'ng-disabled',
-                            'ng-focus', 'ng-form', 'ng-hide', 'ng-href', 'ng-if', 'ng-include', 'ng-init', 'ng-jq', 'ng-keydown', 'ng-keypress', 'ng-keyup',
-                            'ng-list', 'ng-maxlength', 'ng-minlength', 'ng-model', 'ng-model-options', 'ng-mousedown', 'ng-mouseenter', 'ng-mouseleave',
-                            'ng-mousemove', 'ng-mouseover', 'ng-mouseup', 'ng-non-bindable', 'ng-on', 'ng-open', 'ng-options', 'ng-paste', 'ng-pattern',
-                            'ng-pluralize', 'ng-prop', 'ng-readonly', 'ng-ref', 'ng-repeat', 'ng-required', 'ng-selected', 'ng-show', 'ng-src', 'ng-srcset',
-                            'ng-style', 'ng-submit', 'ng-switch', 'ng-transclude', 'ng-value', 'ng-animate-children', 'ng-animate-swap', 'ng-outlet',
-                            'ng-message', 'ng-message-default', 'ng-message-exp', 'ng-messages', 'ng-messages-include', 'ng-view', 'ng-swipe-left',
-                            'ng-swipe-right',
-                            'md-autocomplete', 'md-autofocus', 'md-button', 'md-calendar', 'md-card', 'md-checkbox', 'md-chip', 'md-chip-remove',
-                            'md-chips', 'md-colors', 'md-contact-chips', 'md-content', 'md-datepicker', 'md-dialog', 'md-divider', 'md-fab-actions',
-                            'md-fab-speed-dial', 'md-fab-toolbar', 'md-force-height', 'md-grid-list', 'md-grid-tile', 'md-highlight-text', 'md-icon',
-                            'md-ink-ripple', 'md-input', 'md-input-container', 'md-list', 'md-list-item', 'md-menu', 'md-menu-bar', 'md-nav-bar',
-                            'md-nav-item', 'md-optgroup', 'md-option', 'md-progress-circular', 'md-progress-linear', 'md-radio-button', 'md-radio-group',
-                            'md-select', 'md-select-on-focus', 'md-sidenav', 'md-slider', 'md-slider-container', 'md-subheader', 'md-swipe-down',
-                            'md-swipe-left', 'md-swipe-right', 'md-swipe-up', 'md-switch', 'md-tab', 'md-tabs', 'md-toolbar', 'md-tooltip', 'md-truncate',
-                            'md-virtual-repeat', 'md-virtual-repeat-container', 'md-whiteframe',
-                            'md-svg-src',
-                            'stratus-citation-notitle',
-                            'sa-boot',
-                            'sa-editor',
-                            'sa-map',
-                            'sa-media-selector',
-                            'sa-selector',
-                            'sa-stripe-payment-method-list',
-                            'sa-stripe-payment-method-selector',
-                            'sa-tree',
-                        ],
-                        htmlAllowedStyleProps: [
-                            '.*'
-                        ],
-                        htmlAllowedTags: [
-                            'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio',
-                            'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button',
-                            'canvas', 'caption', 'cite', 'code', 'col', 'colgroup',
-                            'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt',
-                            'em', 'embed',
-                            'fieldset', 'figcaption', 'figure', 'footer', 'form',
-                            'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr',
-                            'i', 'iframe', 'img', 'input', 'ins',
-                            'kbd', 'keygen',
-                            'label', 'legend', 'li', 'link',
-                            'main', 'map', 'mark', 'menu', 'menuitem', 'meter',
-                            'nav', 'noscript',
-                            'object', 'ol', 'optgroup', 'option', 'output',
-                            'p', 'param', 'pre', 'progress',
-                            'queue',
-                            'rp', 'rt', 'ruby',
-                            's', 'samp', 'script', 'style', 'section', 'select', 'small',
-                            'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup',
-                            'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track',
-                            'u', 'ul',
-                            'var', 'video',
-                            'wbr',
-                            'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'defs', 'desc', 'discard', 'ellipse',
-                            'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
-                            'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG',
-                            'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset',
-                            'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
-                            'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'metadata', 'mpath',
-                            'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'stop', 'svg', 'switch',
-                            'symbol', 'text', 'textPath', 'tspan', 'unknown', 'use', 'view',
-                            'ng-app', 'ng-bind', 'ng-bind-html', 'ng-bind-template', 'ng-blur', 'ng-change', 'ng-checked', 'ng-class', 'ng-class-even',
-                            'ng-class-odd', 'ng-click', 'ng-cloak', 'ng-controller', 'ng-copy', 'ng-csp', 'ng-cut', 'ng-dblclick', 'ng-disabled',
-                            'ng-focus', 'ng-form', 'ng-hide', 'ng-href', 'ng-if', 'ng-include', 'ng-init', 'ng-jq', 'ng-keydown', 'ng-keypress', 'ng-keyup',
-                            'ng-list', 'ng-maxlength', 'ng-minlength', 'ng-model', 'ng-model-options', 'ng-mousedown', 'ng-mouseenter', 'ng-mouseleave',
-                            'ng-mousemove', 'ng-mouseover', 'ng-mouseup', 'ng-non-bindable', 'ng-on', 'ng-open', 'ng-options', 'ng-paste', 'ng-pattern',
-                            'ng-pluralize', 'ng-prop', 'ng-readonly', 'ng-ref', 'ng-repeat', 'ng-required', 'ng-selected', 'ng-show', 'ng-src', 'ng-srcset',
-                            'ng-style', 'ng-submit', 'ng-switch', 'ng-transclude', 'ng-value', 'ng-animate-children', 'ng-animate-swap', 'ng-outlet',
-                            'ng-message', 'ng-message-default', 'ng-message-exp', 'ng-messages', 'ng-messages-include', 'ng-view', 'ng-swipe-left',
-                            'ng-swipe-right',
-                            'md-autocomplete', 'md-autofocus', 'md-button', 'md-calendar', 'md-card', 'md-checkbox', 'md-chip', 'md-chip-remove',
-                            'md-chips', 'md-colors', 'md-contact-chips', 'md-content', 'md-datepicker', 'md-dialog', 'md-divider', 'md-fab-actions',
-                            'md-fab-speed-dial', 'md-fab-toolbar', 'md-force-height', 'md-grid-list', 'md-grid-tile', 'md-highlight-text', 'md-icon',
-                            'md-ink-ripple', 'md-input', 'md-input-container', 'md-list', 'md-list-item', 'md-menu', 'md-menu-bar', 'md-nav-bar',
-                            'md-nav-item', 'md-optgroup', 'md-option', 'md-progress-circular', 'md-progress-linear', 'md-radio-button', 'md-radio-group',
-                            'md-select', 'md-select-on-focus', 'md-sidenav', 'md-slider', 'md-slider-container', 'md-subheader', 'md-swipe-down',
-                            'md-swipe-left', 'md-swipe-right', 'md-swipe-up', 'md-switch', 'md-tab', 'md-tabs', 'md-toolbar', 'md-tooltip', 'md-truncate',
-                            'md-virtual-repeat', 'md-virtual-repeat-container', 'md-whiteframe',
-                            'md-svg-src',
-                            'sa-boot',
-                            'sa-editor',
-                            'sa-map',
-                            'sa-media-selector',
-                            'sa-selector',
-                            'sa-stripe-payment-method-list',
-                            'sa-stripe-payment-method-selector',
-                            'sa-tree',
-                            'stratus-.+',
-                        ],
-                        htmlRemoveTags: [],
-                        htmlSimpleAmpersand: false,
-                        imageInsertButtons: [
-                            'imageBack',
-                            '|',
-                            'imageUpload',
-                            'imageByURL',
-                        ],
-                        imageUpload: true,
-                        imageUploadRemoteUrls: true,
-                        imageUploadURL: 'https://app.sitetheory.io/?session=' + environment_1.cookie('SITETHEORY'),
-                        imageManagerPageSize: 20,
-                        imageManagerScrollOffset: 10,
-                        imageManagerLoadMethod: 'GET',
-                        imageManagerLoadURL: '/Api/Media?payload-only=true',
-                        linkEditButtons: [
-                            'linkOpen',
-                            'linkManagerEdit',
-                            'linkRemove',
-                        ],
-                        linkInsertButtons: [
-                            'linkBack',
-                        ],
-                        multiLine: true,
-                        paragraphStyles: {
-                            btn: 'Button',
-                            header: 'Header',
-                            title: 'Title',
-                            'alt-title': 'Alt Title (over)',
-                            subtitle: 'Subtitle',
-                            pullout: 'Pullout Quote',
-                        },
-                        pasteDeniedAttrs: [
-                            'id',
-                            'class',
-                            'style',
-                            'dir',
-                            'data-.+',
-                            'aria-.+',
-                            'ng-.+',
-                            'stratus-.+',
-                            'sa-.+'
-                        ],
-                        pasteDeniedTags: [
-                            'form', 'input', 'label',
-                            'style'
-                        ],
-                        pastePlain: false,
-                        pluginsEnabled: [
-                            'align',
-                            'charCounter',
-                            'codeBeautifier',
-                            'codeView',
-                            'colors',
-                            'draggable',
-                            'embedly',
-                            'entities',
-                            'file',
-                            'fontAwesome',
-                            'fontFamily',
-                            'fontSize',
-                            'fullscreen',
-                            'help',
-                            'image',
-                            'imageTUI',
-                            'inlineStyle',
-                            'inlineClass',
-                            'lineBreaker',
-                            'link',
-                            'linkManager',
-                            'citationManager',
-                            'lists',
-                            'mediaManager',
-                            'paragraphFormat',
-                            'paragraphStyle',
-                            'print',
-                            'quickInsert',
-                            'quote',
-                            'save',
-                            'specialCharacters',
-                            'table',
-                            'url',
-                            'video',
-                            'wordPaste',
-                        ],
-                        quickInsertButtons: [
-                            'media',
-                            'link',
-                            'video',
-                            'embedly',
-                            'table',
-                            'ul',
-                            'ol',
-                            'hr'
-                        ],
-                        scrollableContainer: stratus_1.Stratus.Environment.get('viewPort') || 'body',
-                        spellcheck: true,
-                        toolbarSticky: true,
-                        toolbarButtons: {
-                            moreText: {
-                                buttons: this.froalaStandardButtons.moreText,
-                                buttonsVisible: 3
-                            },
-                            moreParagraph: {
-                                buttons: this.froalaStandardButtons.moreParagraph,
-                                buttonsVisible: 8
-                            },
-                            moreRich: {
-                                buttons: this.froalaStandardButtons.moreRich,
-                                buttonsVisible: 1
-                            },
-                            moreMisc: {
-                                buttons: this.froalaStandardButtons.moreMisc,
-                                align: 'right',
-                                buttonsVisible: 1
-                            }
-                        },
-                        toolbarButtonsSM: {
-                            moreText: {
-                                buttons: this.froalaStandardButtons.moreText,
-                                buttonsVisible: 3
-                            },
-                            moreParagraph: {
-                                buttons: this.froalaStandardButtons.moreParagraph,
-                                buttonsVisible: 0
-                            },
-                            moreRich: {
-                                buttons: this.froalaStandardButtons.moreRich,
-                                buttonsVisible: 3
-                            },
-                            moreMisc: {
-                                buttons: this.froalaStandardButtons.moreMisc,
-                                align: 'right',
-                                buttonsVisible: 0
-                            }
-                        },
-                        toolbarButtonsXS: {
-                            moreText: {
-                                buttons: this.froalaStandardButtons.moreText,
-                                buttonsVisible: 0
-                            },
-                            moreParagraph: {
-                                buttons: this.froalaStandardButtons.moreParagraph,
-                                buttonsVisible: 0
-                            },
-                            moreRich: {
-                                buttons: this.froalaStandardButtons.moreRich,
-                                buttonsVisible: 0
-                            },
-                            moreMisc: {
-                                buttons: this.froalaStandardButtons.moreMisc,
-                                align: 'right',
-                                buttonsVisible: 0
-                            }
-                        },
-                        useClasses: true,
-                        videoInsertButtons: [
-                            'videoBack',
-                            '|',
-                            'videoByURL',
-                            'videoEmbed',
-                            'videoUpload',
-                        ],
-                        videoUpload: true,
-                        videoUploadURL: 'https://app.sitetheory.io/?session=' + environment_1.cookie('SITETHEORY')
-                    };
-                    this.uid = lodash_1.default.uniqueId(`sa_${lodash_1.default.snakeCase(moduleName)}_component_`);
-                    stratus_1.Stratus.Instances[this.uid] = this;
-                    stratus_1.Stratus.Internals.LoadCss([
-                        `${localDir}${moduleName}/${moduleName}.component${min}.css`,
-                        `${froalaDir}css/froala_editor.pkgd${min}.css`,
-                        `${froalaDir}css/third_party/embedly${min}.css`,
-                        `${froalaDir}css/third_party/font_awesome${min}.css`,
-                        `${froalaDir}css/third_party/image_tui${min}.css`,
-                    ]).then(() => {
-                        this.styled = true;
-                        this.refresh();
-                    }).catch((e) => {
-                        console.error(e);
-                        console.warn('Issue detected in CSS Loader for Component:', this.uid);
-                        this.styled = true;
-                        this.refresh();
-                    });
-                    this.hydrate(elementRef, sanitizer, ["title", "uid", "dev", "debug", "editor", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "property", "_", "has", "log", "Stratus", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "initialized", "styled", "blurred", "focused", "codeViewIsOpen", "form", "dataChangeLog", "dataString", "debounceSave", "debounceTime", "forceSave", "froalaEditorDirective", "froalaButtons", "froalaStandardButtons", "froalaConfig", "sanitizer", "ref", "elementRef", "fb", "dialog", "ngOnInit", "modelSave", "listDuplicates", "normalizeIn", "normalizeOut", "changeImgSize", "handleError", "fetchData", "dataDefer", "dataRef", "onDataChange", "created", "changedEditor", "onChangeEvent", "onFocus", "onBlur", "bypassHTML", "trigger", "openCitationDialog", "openLinkDialog", "openMediaDialog", "openCodeViewDialog", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
-                    this.fetchData()
-                        .then(data => {
-                        if (!data || !(data instanceof eventManager_1.EventManager)) {
-                            console.warn('Unable to bind data from Registry!');
-                            return;
-                        }
-                        const onDataChange = () => {
-                            if (!data.completed) {
-                                return;
-                            }
-                            this.dataDefer(this.subscriber);
-                            if (this.codeViewIsOpen) {
-                                return;
-                            }
-                        };
-                        data.on('change', onDataChange);
-                        onDataChange();
-                    });
-                    this.dataSub = new rxjs_1.Observable(subscriber => {
-                        if (this.dev) {
-                            console.warn(`[observable] creating subscriber on ${this.uid}`, subscriber);
-                        }
-                        return this.dataDefer(subscriber);
-                    });
-                    this.dataSub.pipe(operators_1.debounce(() => rxjs_1.timer(250)), operators_1.catchError(this.handleError)).subscribe(evt => {
-                        if (this.focused) {
-                            if (this.dev) {
-                                console.warn(`[subscriber] waiting on updates due to focus on ${this.uid}`);
-                            }
-                            return;
-                        }
-                        const dataControl = this.form.get('dataString');
-                        if (dataControl.value === evt) {
-                            if (this.initialized) {
-                                this.refresh();
-                            }
-                            return;
-                        }
-                        dataControl.patchValue(evt);
-                        this.refresh();
-                    });
-                }
-                ngOnInit() {
-                    this.initialized = true;
-                    const dataControl = this.form.get('dataString');
-                    if (this.debounceSave) {
-                        dataControl.valueChanges.pipe(operators_1.debounce(() => rxjs_1.timer(this.debounceTime)), operators_1.catchError(this.handleError)).subscribe((evt) => this.modelSave(evt));
-                    }
-                    else {
-                        dataControl.valueChanges.forEach((value) => this.modelSave(value));
-                    }
-                    if (this.dev) {
-                        this.listDuplicates(this.froalaConfig);
-                    }
-                }
-                modelSave(value) {
-                    if (!this.model.completed) {
-                        return;
-                    }
-                    let innerHTML = null;
-                    if (!this.froalaConfig.useClasses
-                        && this.froalaEditorDirective
-                        && this.froalaEditorDirective.getEditor()
-                        && this.froalaEditorDirective.getEditor().el
-                        && this.froalaEditorDirective.getEditor().el.innerHTML) {
-                        innerHTML = this.froalaEditorDirective.getEditor().el.innerHTML;
-                    }
-                    this.model.set(this.property, this.normalizeOut(innerHTML || value));
-                    if (this.forceSave) {
-                        this.model.save();
-                    }
+            const onDataChange = () => {
+                if (!data.completed) {
+                    return;
                 }
-                listDuplicates(data) {
-                    lodash_1.default.forEach(data, (value, key) => {
-                        if (!lodash_1.default.isArray(value)) {
-                            return;
-                        }
-                        const catalog = {};
-                        value.forEach((e) => catalog[e] = (catalog[e] || 0) + 1);
-                        const duplicates = lodash_1.default.filter(lodash_1.default.map(catalog, ((v, k) => v > 1 ? k : null)));
-                        if (!duplicates.length) {
-                            return;
-                        }
-                        console.warn('Froala Config:', key, 'has duplicates:', duplicates);
-                    });
-                    return data;
+                this.dataDefer(this.subscriber);
+                if (this.codeViewIsOpen) {
+                    return;
                 }
-                normalizeIn(data) {
-                    if (!data || !lodash_1.default.isString(data)) {
-                        return '';
-                    }
-                    return this.changeImgSize(data, 'hq');
-                }
-                normalizeOut(data) {
-                    if (data === null) {
-                        return '';
-                    }
-                    if (!lodash_1.default.isString(data)) {
-                        return data;
-                    }
-                    return this.changeImgSize(data, 'xs');
-                }
-                changeImgSize(data, size) {
-                    if (!data || !lodash_1.default.isString(data)) {
-                        return data;
-                    }
-                    if (!size || !lodash_1.default.isString(size)) {
-                        return data;
-                    }
-                    const imgRegex = /<img([\w\W]+?)>/gi;
-                    let imgMatch;
-                    while (imgMatch = imgRegex.exec(data)) {
-                        const el = imgMatch[0];
-                        if (el.includes('data:image')) {
-                            continue;
-                        }
-                        const srcRegex = /^<img\s(.+?)(-[A-Z]{2})?\.(?=[^.]*$)(.+)>/gi;
-                        const srcMatch = srcRegex.exec(el);
-                        if (srcMatch === null) {
-                            console.warn('Unable to find file name for image src:', el);
-                            continue;
-                        }
-                        if (!el.includes('data-stratus-src')) {
-                            if (!el.includes('cdn.sitetheory.io')) {
-                                continue;
-                            }
-                            if (lodash_1.default.isEmpty(srcMatch[2])) {
-                                continue;
-                            }
-                            data = data.replace(el, `<img data-stratus-src ${srcMatch[1]}-${size}.${srcMatch[3]}>`);
-                            continue;
-                        }
-                        data = data.replace(el, `<img ${srcMatch[1]}-${size}.${srcMatch[3]}>`);
-                    }
-                    return data;
-                }
-                handleError(err) {
-                    console.error(err);
-                    return err;
-                }
-                fetchData() {
-                    if (this.fetched) {
-                        return this.fetched;
-                    }
-                    return this.fetched = this.registry.fetch(stratus_1.Stratus.Select(this.elementRef.nativeElement), this);
-                }
-                dataDefer(subscriber) {
-                    this.subscriber = this.subscriber || subscriber;
-                    if (!this.subscriber) {
-                        if (this.dev) {
-                            console.warn(`[defer] debouncing due to empty subscriber on ${this.uid}`);
-                        }
-                        setTimeout(() => {
-                            if (this.dev) {
-                                console.warn(`[defer] debounced subscriber returned on ${this.uid}`);
-                            }
-                            this.dataDefer(subscriber);
-                        }, 250);
-                        return;
-                    }
-                    const prevString = lodash_1.default.clone(this.dataString);
-                    const dataString = this.dataRef();
-                    if (prevString === dataString) {
-                        return;
-                    }
-                    if (!dataString && (!this.data || !this.data.completed)) {
-                        if (this.dev) {
-                            console.warn(`[defer] debouncing subscriber due to unavailable data on ${this.uid}`, this.data);
-                        }
-                        setTimeout(() => {
-                            if (this.dev) {
-                                console.warn(`[defer] debounced subscriber returned on ${this.uid}`);
-                            }
-                            this.dataDefer(subscriber);
-                        }, 250);
-                        return;
-                    }
-                    if (!this.froalaConfig.useClasses) {
-                        if (prevString === dataString) {
-                            return;
-                        }
-                    }
-                    if (this.dev) {
-                        console.warn(`[subscriber] new value submitted on ${this.uid}:`, dataString);
-                    }
-                    this.subscriber.next(dataString);
-                }
-                dataRef() {
-                    if (!this.model) {
-                        return '';
-                    }
-                    return this.dataString = this.normalizeIn(this.model.get(this.property));
+            };
+            data.on('change', onDataChange);
+            onDataChange();
+        });
+        this.dataSub = new Observable(subscriber => {
+            if (this.dev) {
+                console.warn(`[observable] creating subscriber on ${this.uid}`, subscriber);
+            }
+            return this.dataDefer(subscriber);
+        });
+        this.dataSub.pipe(debounce(() => timer(250)), catchError(this.handleError)).subscribe(evt => {
+            if (this.focused) {
+                if (this.dev) {
+                    console.warn(`[subscriber] waiting on updates due to focus on ${this.uid}`);
                 }
-                onDataChange() {
-                    this.dataDefer(this.subscriber);
+                return;
+            }
+            const dataControl = this.form.get('dataString');
+            if (dataControl.value === evt) {
+                if (this.initialized) {
                     this.refresh();
                 }
-                created() {
-                }
-                changedEditor(event) {
-                    console.log('editor-change:', event);
-                }
-                onChangeEvent($event) {
-                    console.log('change:', $event);
-                }
-                onFocus($event) {
-                    this.focused = true;
-                    this.blurred = false;
-                }
-                onBlur($event) {
-                    this.focused = false;
-                    this.blurred = true;
-                }
-                bypassHTML(html) {
-                    return this.sanitizer.bypassSecurityTrustHtml(html);
-                }
-                trigger(name, data, callee) {
-                    if (this.dev && this.debug) {
-                        console.log('editor.trigger:', name, callee);
-                    }
-                    if (name === 'media-library') {
-                        this.openMediaDialog(callee);
-                    }
-                    else if (name === 'citation-input') {
-                        this.openCitationDialog(callee);
-                    }
-                    else if (name === 'link-library') {
-                        this.openLinkDialog(callee, data);
-                    }
-                    else if (name === 'code-view') {
-                        this.openCodeViewDialog();
-                    }
+                return;
+            }
+            dataControl.patchValue(evt);
+            this.refresh();
+        });
+    }
+    ngOnInit() {
+        this.initialized = true;
+        const dataControl = this.form.get('dataString');
+        if (this.debounceSave) {
+            dataControl.valueChanges.pipe(debounce(() => timer(this.debounceTime)), catchError(this.handleError)).subscribe((evt) => this.modelSave(evt));
+            dataControl.valueChanges.pipe(debounce(() => timer(250)), catchError(this.handleError)).subscribe((evt) => {
+                if (this.model.changedExternal) {
+                    return;
                 }
-                openCitationDialog(callee) {
-                    const dialogRef = this.dialog.open(citation_dialog_component_1.CitationDialogComponent, {
-                        width: '1000px',
-                        data: {
-                            editor: this,
-                            eventManager: callee,
-                            form: this.form,
-                            model: this.model,
-                            property: this.property,
-                        }
-                    });
-                    const that = this;
-                    dialogRef.afterClosed().subscribe((result) => {
-                        if (!result || lodash_1.default.isEmpty(result)) {
-                            return;
-                        }
-                        that.refresh();
-                        if (this.dev && result) {
-                            console.log('citation dialog result:', result);
-                        }
-                    });
+                this.model.changedExternal = true;
+                this.model.trigger('change');
+            });
+        }
+        else {
+            dataControl.valueChanges.forEach((value) => this.modelSave(value));
+        }
+        if (this.dev) {
+            this.listDuplicates(this.froalaConfig);
+        }
+    }
+    modelSave(value) {
+        if (!this.model.completed) {
+            return;
+        }
+        let innerHTML = null;
+        if (!this.froalaConfig.useClasses
+            && this.froalaEditorDirective
+            && this.froalaEditorDirective.getEditor()
+            && this.froalaEditorDirective.getEditor().el
+            && this.froalaEditorDirective.getEditor().el.innerHTML) {
+            innerHTML = this.froalaEditorDirective.getEditor().el.innerHTML;
+        }
+        this.model.set(this.property, this.normalizeOut(innerHTML || value));
+        this.model.changedExternal = false;
+        if (this.forceSave && !_.isEmpty(this.model.getIdentifier())) {
+            this.model.save();
+        }
+    }
+    listDuplicates(data) {
+        _.forEach(data, (value, key) => {
+            if (!_.isArray(value)) {
+                return;
+            }
+            const catalog = {};
+            value.forEach((e) => catalog[e] = (catalog[e] || 0) + 1);
+            const duplicates = _.filter(_.map(catalog, ((v, k) => v > 1 ? k : null)));
+            if (!duplicates.length) {
+                return;
+            }
+            console.warn('Froala Config:', key, 'has duplicates:', duplicates);
+        });
+        return data;
+    }
+    normalizeIn(data) {
+        if (!data || !_.isString(data)) {
+            return '';
+        }
+        return this.changeImgSize(data, 'hq');
+    }
+    normalizeOut(data) {
+        if (data === null) {
+            return '';
+        }
+        if (!_.isString(data)) {
+            return data;
+        }
+        return this.changeImgSize(data, 'xs');
+    }
+    changeImgSize(data, size) {
+        if (!data || !_.isString(data)) {
+            return data;
+        }
+        if (!size || !_.isString(size)) {
+            return data;
+        }
+        const imgRegex = /<img([\w\W]+?)>/gi;
+        let imgMatch;
+        while (imgMatch = imgRegex.exec(data)) {
+            const el = imgMatch[0];
+            if (el.includes('data:image')) {
+                continue;
+            }
+            const srcRegex = /^<img\s(.+?)(-[A-Z]{2})?\.(?=[^.]*$)(.+)>/gi;
+            const srcMatch = srcRegex.exec(el);
+            if (srcMatch === null) {
+                console.warn('Unable to find file name for image src:', el);
+                continue;
+            }
+            if (!el.includes('data-stratus-src')) {
+                if (!el.includes('cdn.sitetheory.io')) {
+                    continue;
                 }
-                openLinkDialog(callee, data) {
-                    const dialogRef = this.dialog.open(link_dialog_component_1.LinkDialogComponent, {
-                        width: '500px',
-                        data: {
-                            editor: this,
-                            eventManager: callee,
-                            element: data,
-                            form: this.form,
-                            model: this.model,
-                            property: this.property
-                        }
-                    });
-                    this.refresh();
-                    const that = this;
-                    dialogRef.afterClosed().subscribe((result) => {
-                        if (!result || lodash_1.default.isEmpty(result)) {
-                            return;
-                        }
-                        that.refresh();
-                        if (this.dev && result) {
-                            console.log('link dialog result:', result);
-                        }
-                    });
+                if (_.isEmpty(srcMatch[2])) {
+                    continue;
                 }
-                openMediaDialog(callee) {
-                    const dialogRef = this.dialog.open(media_dialog_component_1.MediaDialogComponent, {
-                        width: '1000px',
-                        data: {
-                            editor: this,
-                            eventManager: callee,
-                            form: this.form,
-                            model: this.model,
-                            property: this.property
-                        }
-                    });
-                    this.refresh();
-                    const that = this;
-                    dialogRef.afterClosed().subscribe((result) => {
-                        if (!result || lodash_1.default.isEmpty(result)) {
-                            return;
-                        }
-                        that.refresh();
-                        if (this.dev && result) {
-                            console.log('media dialog result:', result);
-                        }
-                    });
+                data = data.replace(el, `<img data-stratus-src ${srcMatch[1]}-${size}.${srcMatch[3]}>`);
+                continue;
+            }
+            data = data.replace(el, `<img ${srcMatch[1]}-${size}.${srcMatch[3]}>`);
+        }
+        return data;
+    }
+    handleError(err) {
+        console.error(err);
+        return err;
+    }
+    fetchData() {
+        if (this.fetched) {
+            return this.fetched;
+        }
+        return this.fetched = this.registry.fetch(Stratus.Select(this.elementRef.nativeElement), this);
+    }
+    dataDefer(subscriber) {
+        this.subscriber = this.subscriber || subscriber;
+        if (!this.subscriber) {
+            if (this.dev) {
+                console.warn(`[defer] debouncing due to empty subscriber on ${this.uid}`);
+            }
+            setTimeout(() => {
+                if (this.dev) {
+                    console.warn(`[defer] debounced subscriber returned on ${this.uid}`);
                 }
-                openCodeViewDialog() {
-                    this.codeViewIsOpen = true;
-                    const dialogRef = this.dialog.open(code_view_dialog_component_1.CodeViewDialogComponent, {
-                        width: '1000px',
-                        data: {
-                            form: this.form,
-                            model: this.model,
-                            property: this.property
-                        }
-                    });
-                    this.refresh();
-                    dialogRef.afterClosed().subscribe((result) => {
-                        this.codeViewIsOpen = false;
-                        if (!result || lodash_1.default.isEmpty(result)) {
-                            return;
-                        }
-                        this.refresh();
-                        if (this.dev && result) {
-                            console.log('code view dialog result:', result);
-                        }
-                    });
+                this.dataDefer(subscriber);
+            }, 250);
+            return;
+        }
+        const prevString = _.clone(this.dataString);
+        const dataString = this.dataRef();
+        if (prevString === dataString) {
+            return;
+        }
+        if (!dataString && (!this.data || !this.data.completed)) {
+            if (this.dev) {
+                console.warn(`[defer] debouncing subscriber due to unavailable data on ${this.uid}`, this.data);
+            }
+            setTimeout(() => {
+                if (this.dev) {
+                    console.warn(`[defer] debounced subscriber returned on ${this.uid}`);
                 }
-            };
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", String)
-            ], EditorComponent.prototype, "target", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", String)
-            ], EditorComponent.prototype, "targetSuffix", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", Number)
-            ], EditorComponent.prototype, "id", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", Boolean)
-            ], EditorComponent.prototype, "manifest", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", Boolean)
-            ], EditorComponent.prototype, "decouple", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", Boolean)
-            ], EditorComponent.prototype, "direct", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", Object)
-            ], EditorComponent.prototype, "api", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", String)
-            ], EditorComponent.prototype, "urlRoot", void 0);
-            __decorate([
-                core_1.Input(),
-                __metadata("design:type", String)
-            ], EditorComponent.prototype, "property", void 0);
-            EditorComponent = __decorate([
-                core_1.Component({
-                    selector: `sa-${moduleName}`,
-                    templateUrl: `${localDir}/${moduleName}/${moduleName}.component${min}.html`,
-                }),
-                __metadata("design:paramtypes", [platform_browser_1.DomSanitizer,
-                    core_1.ChangeDetectorRef,
-                    core_1.ElementRef,
-                    forms_1.FormBuilder,
-                    dialog_1.MatDialog])
-            ], EditorComponent);
-            exports_1("EditorComponent", EditorComponent);
+                this.dataDefer(subscriber);
+            }, 250);
+            return;
         }
-    };
-});
+        if (!this.froalaConfig.useClasses) {
+            if (prevString === dataString) {
+                return;
+            }
+        }
+        if (this.dev) {
+            console.warn(`[subscriber] new value submitted on ${this.uid}:`, dataString);
+        }
+        this.subscriber.next(dataString);
+    }
+    dataRef() {
+        if (!this.model) {
+            return '';
+        }
+        return this.dataString = this.normalizeIn(this.model.get(this.property));
+    }
+    onDataChange() {
+        this.dataDefer(this.subscriber);
+        this.refresh();
+    }
+    created() {
+    }
+    changedEditor(event) {
+        console.log('editor-change:', event);
+    }
+    onChangeEvent($event) {
+        console.log('change:', $event);
+    }
+    onFocus($event) {
+        this.focused = true;
+        this.blurred = false;
+    }
+    onBlur($event) {
+        this.focused = false;
+        this.blurred = true;
+    }
+    bypassHTML(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    trigger(name, data, callee) {
+        if (this.dev && this.debug) {
+            console.log('editor.trigger:', name, callee);
+        }
+        if (name === 'media-library') {
+            this.openMediaDialog(callee);
+        }
+        else if (name === 'citation-input') {
+            this.openCitationDialog(callee);
+        }
+        else if (name === 'link-library') {
+            this.openLinkDialog(callee, data);
+        }
+        else if (name === 'code-view') {
+            this.openCodeViewDialog();
+        }
+    }
+    openCitationDialog(callee) {
+        const dialogRef = this.dialog.open(CitationDialogComponent, {
+            width: '1000px',
+            data: {
+                editor: this,
+                eventManager: callee,
+                form: this.form,
+                model: this.model,
+                property: this.property,
+            }
+        });
+        const that = this;
+        dialogRef.afterClosed().subscribe((result) => {
+            if (!result || _.isEmpty(result)) {
+                return;
+            }
+            that.refresh();
+            if (this.dev && result) {
+                console.log('citation dialog result:', result);
+            }
+        });
+    }
+    openLinkDialog(callee, data) {
+        const dialogRef = this.dialog.open(LinkDialogComponent, {
+            width: '500px',
+            data: {
+                editor: this,
+                eventManager: callee,
+                element: data,
+                form: this.form,
+                model: this.model,
+                property: this.property
+            }
+        });
+        this.refresh();
+        const that = this;
+        dialogRef.afterClosed().subscribe((result) => {
+            if (!result || _.isEmpty(result)) {
+                return;
+            }
+            that.refresh();
+            if (this.dev && result) {
+                console.log('link dialog result:', result);
+            }
+        });
+    }
+    openMediaDialog(callee) {
+        const dialogRef = this.dialog.open(MediaDialogComponent, {
+            width: '1000px',
+            data: {
+                editor: this,
+                eventManager: callee,
+                form: this.form,
+                model: this.model,
+                property: this.property
+            }
+        });
+        this.refresh();
+        const that = this;
+        dialogRef.afterClosed().subscribe((result) => {
+            if (!result || _.isEmpty(result)) {
+                return;
+            }
+            that.refresh();
+            if (this.dev && result) {
+                console.log('media dialog result:', result);
+            }
+        });
+    }
+    openCodeViewDialog() {
+        this.codeViewIsOpen = true;
+        const dialogRef = this.dialog.open(CodeViewDialogComponent, {
+            width: '1000px',
+            data: {
+                form: this.form,
+                model: this.model,
+                property: this.property
+            }
+        });
+        this.refresh();
+        dialogRef.afterClosed().subscribe((result) => {
+            this.codeViewIsOpen = false;
+            if (!result || _.isEmpty(result)) {
+                return;
+            }
+            this.refresh();
+            if (this.dev && result) {
+                console.log('code view dialog result:', result);
+            }
+        });
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], EditorComponent.prototype, "target", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], EditorComponent.prototype, "targetSuffix", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], EditorComponent.prototype, "id", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], EditorComponent.prototype, "manifest", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], EditorComponent.prototype, "decouple", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], EditorComponent.prototype, "direct", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], EditorComponent.prototype, "api", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], EditorComponent.prototype, "urlRoot", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], EditorComponent.prototype, "property", void 0);
+EditorComponent = __decorate([
+    Component({
+        selector: `sa-${moduleName}`,
+        templateUrl: `${localDir}/${moduleName}/${moduleName}.component${min}.html`,
+    }),
+    __metadata("design:paramtypes", [DomSanitizer,
+        ChangeDetectorRef,
+        ElementRef,
+        FormBuilder,
+        MatDialog])
+], EditorComponent);
+export { EditorComponent };
 
 //# sourceMappingURL=editor.component.js.map