@web-atoms/web-controls 2.2.0 → 2.2.2

package/dist/html-editor/AtomHtmlEditor.js

@@ -1,424 +1,336 @@
-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);
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@web-atoms/core/dist/core/AtomBinder", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/styles/CSS", "../basic/AtomRepeater", "./commands/AddImage", "./commands/AddLink", "./commands/Align", "./commands/AttachFile", "./commands/Bold", "./commands/ChangeColor", "./commands/ChangeFont", "./commands/ChangeFontSize", "./commands/Headings", "./commands/HorizontalRule", "./commands/IndentLess", "./commands/IndentMore", "./commands/Italic", "./commands/NumberedList", "./commands/RemoveFormat", "./commands/Separator", "./commands/Source", "./commands/StrikeThrough", "./commands/Underline", "./commands/Unlink", "./commands/UnorderedList"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Toolbar = void 0;
-    const AtomBinder_1 = require("@web-atoms/core/dist/core/AtomBinder");
-    const Bind_1 = require("@web-atoms/core/dist/core/Bind");
-    const BindableProperty_1 = require("@web-atoms/core/dist/core/BindableProperty");
-    const Colors_1 = require("@web-atoms/core/dist/core/Colors");
-    const XNode_1 = require("@web-atoms/core/dist/core/XNode");
-    const StyleRule_1 = require("@web-atoms/core/dist/style/StyleRule");
-    const AtomControl_1 = require("@web-atoms/core/dist/web/controls/AtomControl");
-    const CSS_1 = require("@web-atoms/core/dist/web/styles/CSS");
-    const AtomRepeater_1 = require("../basic/AtomRepeater");
-    const AddImage_1 = require("./commands/AddImage");
-    const AddLink_1 = require("./commands/AddLink");
-    const Align_1 = require("./commands/Align");
-    const AttachFile_1 = require("./commands/AttachFile");
-    const Bold_1 = require("./commands/Bold");
-    const ChangeColor_1 = require("./commands/ChangeColor");
-    const ChangeFont_1 = require("./commands/ChangeFont");
-    const ChangeFontSize_1 = require("./commands/ChangeFontSize");
-    const Headings_1 = require("./commands/Headings");
-    const HorizontalRule_1 = require("./commands/HorizontalRule");
-    const IndentLess_1 = require("./commands/IndentLess");
-    const IndentMore_1 = require("./commands/IndentMore");
-    const Italic_1 = require("./commands/Italic");
-    const NumberedList_1 = require("./commands/NumberedList");
-    const RemoveFormat_1 = require("./commands/RemoveFormat");
-    const Separator_1 = require("./commands/Separator");
-    const Source_1 = require("./commands/Source");
-    const StrikeThrough_1 = require("./commands/StrikeThrough");
-    const Underline_1 = require("./commands/Underline");
-    const Unlink_1 = require("./commands/Unlink");
-    const UnorderedList_1 = require("./commands/UnorderedList");
-    const link = document.createElement("link");
-    link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
-    link.rel = "stylesheet";
-    document.head.appendChild(link);
-    const css = (0, CSS_1.default)((0, StyleRule_1.default)()
-        .display("flex")
-        .flexDirection("column")
-        .minHeight(500)
-        .child((0, StyleRule_1.default)("iframe")
-        .flexStretch())
-        .child((0, StyleRule_1.default)(".files")
-        .child((0, StyleRule_1.default)(".file")
-        .flexLayout({ inline: true })
-        .borderColor(Colors_1.default.lightGray.withAlphaPercent(0.5))
-        .borderWidth(1)
-        .borderStyle("solid")
-        .borderRadius(15)
-        .paddingLeft(10)
-        .paddingRight(10)
-        .child((0, StyleRule_1.default)("label")
-        .maxWidth(100)
-        .textEllipsis())))
-        .nested((0, StyleRule_1.default)(".toolbar")
-        .display("flex")
-        .flexWrap("wrap")
-        .alignItems("center")
-        .child((0, StyleRule_1.default)(".command")
-        .display("inline-flex")
-        .alignItems("center")
-        .justifyContent("space-evenly")
-        .border("none")
-        .cursor("pointer")
-        .backgroundColor(Colors_1.default.transparent)
-        .hoverBackgroundColor(Colors_1.default.lightGreen)
-        .minWidth(28)
-        .height(28)
-        .and((0, StyleRule_1.default)(".pressed")
-        .backgroundColor(Colors_1.default.lightGray)
-        .hoverBackgroundColor(Colors_1.default.lightGreen))
-        .nested((0, StyleRule_1.default)(".ri-bold")
-        .fontWeight("bold")))));
-    function Toolbar(a, ...nodes) {
-        return XNode_1.default.create("div", { class: "toolbar" }, ...nodes);
-    }
-    exports.Toolbar = Toolbar;
-    function preventLinkClick(e, editor, doc) {
-        let target = e.target;
-        const body = doc.body;
-        while (target) {
-            if (target === body) {
-                break;
-            }
-            if (target.isContentEditable) {
-                editor.dispatchEvent(new MouseEvent("click", {
-                    bubbles: true,
-                    cancelable: true
-                }));
-                return;
-            }
-            if (target.tagName === "A") {
-                e.preventDefault();
-            }
-            target = target.parentElement;
-        }
-        target = e.target;
-        const originalTarget = target;
-        const data = new Proxy(originalTarget, {
-            get(target, p) {
-                if (typeof p !== "string") {
-                    return;
-                }
-                while (target) {
-                    const value = target.dataset[p];
-                    if (value !== void 0) {
-                        return value;
-                    }
-                    target = target.parentElement;
-                }
-            }
-        });
-        editor.dispatchEvent(new CustomEvent("editorClick", {
-            detail: {
-                target,
-                data
-            },
-            bubbles: true,
-            cancelable: true
-        }));
+System.register(["@web-atoms/core/dist/core/AtomBinder", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/Colors", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/style/StyleRule", "@web-atoms/core/dist/web/controls/AtomControl", "@web-atoms/core/dist/web/styles/CSS", "../basic/AtomRepeater", "./commands/AddImage", "./commands/AddLink", "./commands/Align", "./commands/AttachFile", "./commands/Bold", "./commands/ChangeColor", "./commands/ChangeFont", "./commands/ChangeFontSize", "./commands/Headings", "./commands/HorizontalRule", "./commands/IndentLess", "./commands/IndentMore", "./commands/Italic", "./commands/NumberedList", "./commands/RemoveFormat", "./commands/Separator", "./commands/Source", "./commands/StrikeThrough", "./commands/Underline", "./commands/Unlink", "./commands/UnorderedList"], function (_export, _context) {
+  "use strict";
+
+  var AtomBinder, Bind, BindableProperty, Colors, XNode, StyleRule, AtomControl, CSS, AtomRepeater, AddImage, showImageDialog, AddLink, Align, AttachFile, Bold, ChangeColor, ChangeFont, ChangeFontSize, Headings, HorizontalRule, IndentLess, IndentMore, Italic, NumberedList, RemoveFormat, Separator, Source, StrikeThrough, Underline, Unlink, UnorderedList, AtomHtmlEditor, __decorate, __metadata, link, css;
+  function Toolbar(a, ...nodes) {
+    return XNode.create("div", {
+      class: "toolbar"
+    }, ...nodes);
+  }
+  function preventLinkClick(e, editor, doc) {
+    let target = e.target;
+    const body = doc.body;
+    while (target) {
+      if (target === body) {
+        break;
+      }
+      if (target.isContentEditable) {
         editor.dispatchEvent(new MouseEvent("click", {
-            bubbles: true,
-            cancelable: true
+          bubbles: true,
+          cancelable: true
         }));
-        // while (target && target !== body) {
-        //     const ds = target.dataset;
-        //     const command = ds.command;
-        //     if (command) {
-        //         let commandParameter = ds.commandParameter;
-        //         if (!commandParameter) {
-        //             commandParameter = ds.commandParameters;
-        //             if (commandParameter) {
-        //                 commandParameter = JSON.parse(commandParameter);
-        //             }
-        //         }
-        //         // this will force currentTarget/lastTarget to be updated
-        //         // in navigation and popup service
-        //         editor.dispatchEvent(new CustomEvent("click", {
-        //             bubbles: true
-        //         }));
-        //         editor.dispatchEvent(new CustomEvent<IEditorCommand>("command", {
-        //             bubbles: true,
-        //             detail: {
-        //                 target,
-        //                 command,
-        //                 commandParameter
-        //             }
-        //         }));
-        //         e.preventDefault();
-        //         return;
-        //     }
-        //     const click = ds.click;
-        //     if (click) {
-        //         editor.dispatchEvent(new CustomEvent("click", {
-        //             bubbles: true
-        //         }));
-        //         editor.dispatchEvent(new CustomEvent("htmlEditorClick", {
-        //             detail: {
-        //                 target,
-        //                 command: click
-        //             }
-        //         }));
-        //     }
-        //     if (target.isContentEditable) {
-        //         break;
-        //     }
-        //     if (target.tagName === "A") {
-        //         editor.dispatchEvent(new CustomEvent("click", {
-        //             bubbles: true
-        //         }));
-        //         e.preventDefault();
-        //         return false;
-        //     }
-        //     target = target.parentElement;
-        // }
+        return;
+      }
+      if (target.tagName === "A") {
+        e.preventDefault();
+      }
+      target = target.parentElement;
     }
-    class AtomHtmlEditor extends AtomControl_1.AtomControl {
+    target = e.target;
+    const originalTarget = target;
+    const data = new Proxy(originalTarget, {
+      get(target, p) {
+        if (typeof p !== "string") {
+          return;
+        }
+        while (target) {
+          const value = target.dataset[p];
+          if (value !== void 0) {
+            return value;
+          }
+          target = target.parentElement;
+        }
+      }
+    });
+    editor.dispatchEvent(new CustomEvent("editorClick", {
+      detail: {
+        target,
+        data
+      },
+      bubbles: true,
+      cancelable: true
+    }));
+    editor.dispatchEvent(new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true
+    }));
+  }
+  _export({
+    Toolbar: Toolbar,
+    default: void 0
+  });
+  return {
+    setters: [function (_webAtomsCoreDistCoreAtomBinder) {
+      AtomBinder = _webAtomsCoreDistCoreAtomBinder.AtomBinder;
+    }, function (_webAtomsCoreDistCoreBind) {
+      Bind = _webAtomsCoreDistCoreBind.default;
+    }, function (_webAtomsCoreDistCoreBindableProperty) {
+      BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
+    }, function (_webAtomsCoreDistCoreColors) {
+      Colors = _webAtomsCoreDistCoreColors.default;
+    }, function (_webAtomsCoreDistCoreXNode) {
+      XNode = _webAtomsCoreDistCoreXNode.default;
+    }, function (_webAtomsCoreDistStyleStyleRule) {
+      StyleRule = _webAtomsCoreDistStyleStyleRule.default;
+    }, function (_webAtomsCoreDistWebControlsAtomControl) {
+      AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
+    }, function (_webAtomsCoreDistWebStylesCSS) {
+      CSS = _webAtomsCoreDistWebStylesCSS.default;
+    }, function (_basicAtomRepeater) {
+      AtomRepeater = _basicAtomRepeater.default;
+    }, function (_commandsAddImage) {
+      AddImage = _commandsAddImage.default;
+      showImageDialog = _commandsAddImage.showImageDialog;
+    }, function (_commandsAddLink) {
+      AddLink = _commandsAddLink.default;
+    }, function (_commandsAlign) {
+      Align = _commandsAlign.default;
+    }, function (_commandsAttachFile) {
+      AttachFile = _commandsAttachFile.default;
+    }, function (_commandsBold) {
+      Bold = _commandsBold.default;
+    }, function (_commandsChangeColor) {
+      ChangeColor = _commandsChangeColor.default;
+    }, function (_commandsChangeFont) {
+      ChangeFont = _commandsChangeFont.default;
+    }, function (_commandsChangeFontSize) {
+      ChangeFontSize = _commandsChangeFontSize.default;
+    }, function (_commandsHeadings) {
+      Headings = _commandsHeadings.default;
+    }, function (_commandsHorizontalRule) {
+      HorizontalRule = _commandsHorizontalRule.default;
+    }, function (_commandsIndentLess) {
+      IndentLess = _commandsIndentLess.default;
+    }, function (_commandsIndentMore) {
+      IndentMore = _commandsIndentMore.default;
+    }, function (_commandsItalic) {
+      Italic = _commandsItalic.default;
+    }, function (_commandsNumberedList) {
+      NumberedList = _commandsNumberedList.default;
+    }, function (_commandsRemoveFormat) {
+      RemoveFormat = _commandsRemoveFormat.default;
+    }, function (_commandsSeparator) {
+      Separator = _commandsSeparator.default;
+    }, function (_commandsSource) {
+      Source = _commandsSource.default;
+    }, function (_commandsStrikeThrough) {
+      StrikeThrough = _commandsStrikeThrough.default;
+    }, function (_commandsUnderline) {
+      Underline = _commandsUnderline.default;
+    }, function (_commandsUnlink) {
+      Unlink = _commandsUnlink.default;
+    }, function (_commandsUnorderedList) {
+      UnorderedList = _commandsUnorderedList.default;
+    }],
+    execute: function () {
+      __decorate = void 0 && (void 0).__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;
+      };
+      __metadata = void 0 && (void 0).__metadata || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+      };
+      link = document.createElement("link");
+      link.href = "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+      css = CSS(StyleRule().display("flex").flexDirection("column").minHeight(500).child(StyleRule("iframe").flexStretch()).child(StyleRule(".files").child(StyleRule(".file").flexLayout({
+        inline: true
+      }).borderColor(Colors.lightGray.withAlphaPercent(0.5)).borderWidth(1).borderStyle("solid").borderRadius(15).paddingLeft(10).paddingRight(10).child(StyleRule("label").maxWidth(100).textEllipsis()))).nested(StyleRule(".toolbar").display("flex").flexWrap("wrap").alignItems("center").child(StyleRule(".command").display("inline-flex").alignItems("center").justifyContent("space-evenly").border("none").cursor("pointer").backgroundColor(Colors.transparent).hoverBackgroundColor(Colors.lightGreen).minWidth(28).height(28).and(StyleRule(".pressed").backgroundColor(Colors.lightGray).hoverBackgroundColor(Colors.lightGreen)).nested(StyleRule(".ri-bold").fontWeight("bold")))));
+      _export("default", AtomHtmlEditor = class AtomHtmlEditor extends AtomControl {
         get htmlContent() {
-            var _a, _b;
-            try {
-                return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : this.initialContent;
-            }
-            catch (ex) {
-                // tslint:disable-next-line: no-console
-                console.warn(ex);
-            }
+          var _a, _b;
+          try {
+            return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.innerHTML) !== null && _b !== void 0 ? _b : this.initialContent;
+          } catch (ex) {
+            console.warn(ex);
+          }
         }
         set htmlContent(v) {
-            if (this.editor) {
-                this.editor.innerHTML = v;
-            }
-            else {
-                this.initialContent = v;
-            }
-            AtomBinder_1.AtomBinder.refreshValue(this, "htmlContent");
+          if (this.editor) {
+            this.editor.innerHTML = v;
+          } else {
+            this.initialContent = v;
+          }
+          AtomBinder.refreshValue(this, "htmlContent");
         }
         insertImage(s, e) {
-            return (0, AddImage_1.showImageDialog)(s, e);
+          return showImageDialog(s, e);
         }
         executeCommand(cmd, showUI, value) {
-            const r = this.editorDocument.execCommand(cmd, showUI, value);
-            setTimeout(() => this.version++, 1);
-            return r;
+          const r = this.editorDocument.execCommand(cmd, showUI, value);
+          setTimeout(() => this.version++, 1);
+          return r;
         }
         queryCommandState(cmd, ...a) {
-            return this.editorDocument.queryCommandState(cmd);
+          return this.editorDocument.queryCommandState(cmd);
         }
         getStyle(name, v) {
-            try {
-                const node = this.editorWindow.getSelection().getRangeAt(0);
-                const e = node.startContainer.parentElement;
-                return this.editorWindow.getComputedStyle(e)[name];
-            }
-            catch (ex) {
-                return null;
-            }
+          try {
+            const node = this.editorWindow.getSelection().getRangeAt(0);
+            const e = node.startContainer.parentElement;
+            return this.editorWindow.getComputedStyle(e)[name];
+          } catch (ex) {
+            return null;
+          }
         }
         onPropertyChanged(name) {
-            super.onPropertyChanged(name);
-            if (name === "tags") {
-                this.setupTags();
-            }
+          super.onPropertyChanged(name);
+          if (name === "tags") {
+            this.setupTags();
+          }
         }
         setupTags() {
-            const doc = this.editorDocument;
-            if (!doc) {
-                return;
-            }
-            if (Array.isArray(this.tags)) {
-                for (const { name, style } of this.tags) {
-                    if (style) {
-                        const styleElement = doc.createElement("style");
-                        styleElement.textContent = `*[data-command=${name}] {
+          const doc = this.editorDocument;
+          if (!doc) {
+            return;
+          }
+          if (Array.isArray(this.tags)) {
+            for (const {
+              name,
+              style
+            } of this.tags) {
+              if (style) {
+                const styleElement = doc.createElement("style");
+                styleElement.textContent = `*[data-command=${name}] {
                         ${style.toStyleSheet()}
                     }`;
-                        doc.head.appendChild(styleElement);
-                    }
-                }
+                doc.head.appendChild(styleElement);
+              }
             }
+          }
         }
         preCreate() {
-            this.version = 1;
-            this.files = [];
-            this.runAfterInit(() => {
-                this.setup();
-            });
-            this.element.classList.add(css);
-            this.element.classList.add("html-editor");
+          this.version = 1;
+          this.files = [];
+          this.runAfterInit(() => {
+            this.setup();
+          });
+          this.element.classList.add(css);
+          this.element.classList.add("html-editor");
         }
         onPasteEvent(e) {
-            // tslint:disable-next-line: no-console
-            if (!e.clipboardData.types.find((x) => x === "text/html")) {
-                return;
-            }
-            const d = e.clipboardData.getData("text/plain");
-            if (d) {
-                // we need to sanitize this one...
-                const s = window.getSelection();
-                const r = s.getRangeAt(0);
-                const p = document.createElement("p");
-                const span = document.createElement("span");
-                span.textContent = d;
-                p.appendChild(span);
-                r.insertNode(p);
-                r.setStartAfter(p);
-            }
-            e.preventDefault();
+          if (!e.clipboardData.types.find(x => x === "text/html")) {
+            return;
+          }
+          const d = e.clipboardData.getData("text/plain");
+          if (d) {
+            const s = window.getSelection();
+            const r = s.getRangeAt(0);
+            const p = document.createElement("p");
+            const span = document.createElement("span");
+            span.textContent = d;
+            p.appendChild(span);
+            r.insertNode(p);
+            r.setStartAfter(p);
+          }
+          e.preventDefault();
         }
         onInputEvent(e) {
-            // tslint:disable-next-line: no-console
-            console.log(e);
+          console.log(e);
         }
         setup() {
-            var _a;
-            const frame = this.element.getElementsByTagName("iframe")[0];
-            const doc = frame.contentWindow.document;
-            doc.open();
-            const baseUrl = `${location.protocol}//${location.host}`;
-            doc.writeln(`<base href="${baseUrl}"></base><div id="editor"><p>&nbsp;</p></div>`);
-            doc.close();
-            const style = doc.createElement("style");
-            style.textContent = `body {
+          var _a;
+          const frame = this.element.getElementsByTagName("iframe")[0];
+          const doc = frame.contentWindow.document;
+          doc.open();
+          const baseUrl = `${location.protocol}//${location.host}`;
+          doc.writeln(`<base href="${baseUrl}"></base><div id="editor"><p>&nbsp;</p></div>`);
+          doc.close();
+          const style = doc.createElement("style");
+          style.textContent = `body {
             font-family: arial,sans-serif
         }
         #editor {
             min-height: 500px;
         }
         `;
-            doc.head.appendChild(style);
-            // const script = doc.createElement("script");
-            // script.textContent = `document.body.addEventListener("click", ${preventLinkClick.toString()});`;
-            // doc.body.appendChild(script);
-            doc.body.addEventListener("click", (e) => preventLinkClick(e, this.element, doc));
-            this.editor = doc.getElementById("editor");
-            this.editor.contentEditable = "true";
-            this.editor.innerHTML = (_a = this.initialContent) !== null && _a !== void 0 ? _a : "";
-            doc.execCommand("styleWithCSS");
-            doc.execCommand("insertBrOnReturn");
-            const updateVersion = () => setTimeout(() => {
-                this.version++;
-                AtomBinder_1.AtomBinder.refreshValue(this, "htmlContent");
-                this.element.dispatchEvent(new CustomEvent("documentUpdated", {
-                    detail: this.editor
-                }));
-                this.documentUpdated(this.editor);
-            }, 1);
-            this.editor.addEventListener("click", updateVersion);
-            this.editor.addEventListener("keydown", updateVersion);
-            this.editor.addEventListener("keypress", updateVersion);
-            this.editor.addEventListener("input", updateVersion);
-            this.editorWindow = frame.contentWindow;
-            this.editorDocument = doc;
-            updateVersion();
-            this.documentCreated(this.editor);
-            this.element.dispatchEvent(new CustomEvent("documentCreated", {
-                detail: this.editor
+          doc.head.appendChild(style);
+          doc.body.addEventListener("click", e => preventLinkClick(e, this.element, doc));
+          this.editor = doc.getElementById("editor");
+          this.editor.contentEditable = "true";
+          this.editor.innerHTML = (_a = this.initialContent) !== null && _a !== void 0 ? _a : "";
+          doc.execCommand("styleWithCSS");
+          doc.execCommand("insertBrOnReturn");
+          const updateVersion = () => setTimeout(() => {
+            this.version++;
+            AtomBinder.refreshValue(this, "htmlContent");
+            this.element.dispatchEvent(new CustomEvent("documentUpdated", {
+              detail: this.editor
             }));
-            this.registerDisposable({
-                dispose: () => {
-                    this.editor.removeEventListener("click", updateVersion);
-                    this.editor.removeEventListener("keydown", updateVersion);
-                    this.editor.removeEventListener("keypress", updateVersion);
-                    this.editor.removeEventListener("input", updateVersion);
-                }
-            });
-            this.bindEvent(this.element, "editorClick", (ce) => {
-                const { detail: { data } } = ce;
-                for (const { name, handler } of this.tags) {
-                    if (name === data.command || name === data.clickEvent) {
-                        handler(ce);
-                    }
-                }
-            });
-            this.setupTags();
-        }
-        documentCreated(e) {
-            // nothing...
-        }
-        documentUpdated(e) {
-            // nothing...
+            this.documentUpdated(this.editor);
+          }, 1);
+          this.editor.addEventListener("click", updateVersion);
+          this.editor.addEventListener("keydown", updateVersion);
+          this.editor.addEventListener("keypress", updateVersion);
+          this.editor.addEventListener("input", updateVersion);
+          this.editorWindow = frame.contentWindow;
+          this.editorDocument = doc;
+          updateVersion();
+          this.documentCreated(this.editor);
+          this.element.dispatchEvent(new CustomEvent("documentCreated", {
+            detail: this.editor
+          }));
+          this.registerDisposable({
+            dispose: () => {
+              this.editor.removeEventListener("click", updateVersion);
+              this.editor.removeEventListener("keydown", updateVersion);
+              this.editor.removeEventListener("keypress", updateVersion);
+              this.editor.removeEventListener("input", updateVersion);
+            }
+          });
+          this.bindEvent(this.element, "editorClick", ce => {
+            const {
+              detail: {
+                data
+              }
+            } = ce;
+            for (const {
+              name,
+              handler
+            } of this.tags) {
+              if (name === data.command || name === data.clickEvent) {
+                handler(ce);
+              }
+            }
+          });
+          this.setupTags();
         }
+        documentCreated(e) {}
+        documentUpdated(e) {}
         render(node, e, creator) {
-            // following line will prevent stack overflow
-            this.render = super.render;
-            if (!node.children || node.children.length === 0) {
-                node.children[0] = XNode_1.default.create(Toolbar, null,
-                    XNode_1.default.create(Bold_1.default, null),
-                    XNode_1.default.create(Italic_1.default, null),
-                    XNode_1.default.create(Underline_1.default, null),
-                    XNode_1.default.create(StrikeThrough_1.default, null),
-                    XNode_1.default.create(Align_1.default, null),
-                    XNode_1.default.create(Separator_1.default, null),
-                    XNode_1.default.create(Headings_1.default, null),
-                    XNode_1.default.create(ChangeColor_1.default, null),
-                    XNode_1.default.create(HorizontalRule_1.default, null),
-                    XNode_1.default.create(Separator_1.default, null),
-                    XNode_1.default.create(ChangeFont_1.default, null),
-                    XNode_1.default.create(ChangeFontSize_1.default, null),
-                    XNode_1.default.create(Separator_1.default, null),
-                    XNode_1.default.create(NumberedList_1.default, null),
-                    XNode_1.default.create(UnorderedList_1.default, null),
-                    XNode_1.default.create(IndentLess_1.default, null),
-                    XNode_1.default.create(IndentMore_1.default, null),
-                    XNode_1.default.create(Separator_1.default, null),
-                    XNode_1.default.create(AddImage_1.default, null),
-                    XNode_1.default.create(AttachFile_1.default, null),
-                    XNode_1.default.create(Separator_1.default, null),
-                    XNode_1.default.create(AddLink_1.default, null),
-                    XNode_1.default.create(Unlink_1.default, null),
-                    XNode_1.default.create(RemoveFormat_1.default, null),
-                    XNode_1.default.create(Separator_1.default, null),
-                    XNode_1.default.create(Source_1.default, null));
-            }
-            super.render(XNode_1.default.create("div", Object.assign({}, node.attributes),
-                ...node.children,
-                XNode_1.default.create(AtomRepeater_1.default, { class: "files", "event-item-delete": (ce) => this.files.remove(ce.detail), items: Bind_1.default.oneWay(() => this.files), itemRenderer: (file) => XNode_1.default.create("div", { class: "file" },
-                        XNode_1.default.create("i", { class: "ri-attachment-2" }),
-                        XNode_1.default.create("label", { text: file.name }),
-                        XNode_1.default.create("i", { "data-click-event": "item-delete", class: "ri-close-circle-fill" })) }),
-                XNode_1.default.create("iframe", { class: "editor-frame" })));
+          this.render = super.render;
+          if (!node.children || node.children.length === 0) {
+            node.children[0] = XNode.create(Toolbar, null, XNode.create(Bold, null), XNode.create(Italic, null), XNode.create(Underline, null), XNode.create(StrikeThrough, null), XNode.create(Align, null), XNode.create(Separator, null), XNode.create(Headings, null), XNode.create(ChangeColor, null), XNode.create(HorizontalRule, null), XNode.create(Separator, null), XNode.create(ChangeFont, null), XNode.create(ChangeFontSize, null), XNode.create(Separator, null), XNode.create(NumberedList, null), XNode.create(UnorderedList, null), XNode.create(IndentLess, null), XNode.create(IndentMore, null), XNode.create(Separator, null), XNode.create(AddImage, null), XNode.create(AttachFile, null), XNode.create(Separator, null), XNode.create(AddLink, null), XNode.create(Unlink, null), XNode.create(RemoveFormat, null), XNode.create(Separator, null), XNode.create(Source, null));
+          }
+          super.render(XNode.create("div", Object.assign({}, node.attributes), ...node.children, XNode.create(AtomRepeater, {
+            class: "files",
+            "event-item-delete": ce => this.files.remove(ce.detail),
+            items: Bind.oneWay(() => this.files),
+            itemRenderer: file => XNode.create("div", {
+              class: "file"
+            }, XNode.create("i", {
+              class: "ri-attachment-2"
+            }), XNode.create("label", {
+              text: file.name
+            }), XNode.create("i", {
+              "data-click-event": "item-delete",
+              class: "ri-close-circle-fill"
+            }))
+          }), XNode.create("iframe", {
+            class: "editor-frame"
+          })));
         }
+      });
+      __decorate([BindableProperty, __metadata("design:type", String)], AtomHtmlEditor.prototype, "content", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Array)], AtomHtmlEditor.prototype, "header", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Number)], AtomHtmlEditor.prototype, "version", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Array)], AtomHtmlEditor.prototype, "files", void 0);
+      __decorate([BindableProperty, __metadata("design:type", Array)], AtomHtmlEditor.prototype, "tags", void 0);
     }
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", String)
-    ], AtomHtmlEditor.prototype, "content", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], AtomHtmlEditor.prototype, "header", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Number)
-    ], AtomHtmlEditor.prototype, "version", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], AtomHtmlEditor.prototype, "files", void 0);
-    __decorate([
-        BindableProperty_1.BindableProperty,
-        __metadata("design:type", Array)
-    ], AtomHtmlEditor.prototype, "tags", void 0);
-    exports.default = AtomHtmlEditor;
-});
+  };
+});
 //# sourceMappingURL=AtomHtmlEditor.js.map