@sme.up/ketchup 9.5.2 → 9.6.0

package/dist/collection/components/kup-editor/kup-editor.js

@@ -0,0 +1,774 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KupEditor_autosaveInterval, _KupEditor_hasChanges, _KupEditor_initialContent, _KupEditor_kupManager, _KupEditor_unsavedChangesIndex, _KupEditor_unsavedChangesItem;
+import { forceUpdate, h, Host, } from "@stencil/core";
+import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
+import { componentWrapperId } from "../../variables/GenericVariables";
+import Editor from "@toast-ui/editor";
+import { KupEditorProps, } from "./kup-editor-declarations";
+import Viewer from "@toast-ui/editor/dist/toastui-editor-viewer";
+import { getProps, setProps } from "../../utils/utils";
+export class KupEditor {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        _KupEditor_autosaveInterval.set(this, void 0);
+        _KupEditor_hasChanges.set(this, false);
+        _KupEditor_initialContent.set(this, '');
+        _KupEditor_kupManager.set(this, kupManagerInstance());
+        _KupEditor_unsavedChangesIndex.set(this, 0);
+        _KupEditor_unsavedChangesItem.set(this, {
+            options: {
+                className: 'kup-editor-unsaved-changes',
+                el: this.createUnsavedChanges(),
+                tooltip: 'There are unsaved changes.',
+            },
+            type: 'button',
+        });
+        this.editor = null;
+        this.editorRef = undefined;
+        this.viewer = null;
+        this.autosaveTimer = undefined;
+        this.editorHeight = 'auto';
+        this.initialEditType = 'markdown';
+        this.initialValue = '';
+        this.isReadOnly = false;
+        this.previewStyle = 'vertical';
+        this.showSaveButton = true;
+        this.showToolbar = true;
+    }
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    onEditorRefUpdated() {
+        if (this.editorRef && !this.editor) {
+            if (!this.isReadOnly) {
+                this.createEditor();
+            }
+            else {
+                this.createViewer();
+            }
+        }
+    }
+    onEditorUpdate() {
+        if (this.editor) {
+            // to give focus to editor
+            setTimeout(() => {
+                this.editor && this.editor.moveCursorToStart();
+            }, 100);
+        }
+    }
+    onInitialEditTypeChanged() {
+        if ((this.initialEditType != 'markdown' &&
+            this.initialEditType != 'wysiwyg') ||
+            !this.editor)
+            return;
+        this.editor.changeMode(this.initialEditType);
+        this.updateToolbarVisiblity();
+    }
+    onIsReadOnlyChanged() {
+        if (this.isReadOnly) {
+            this.editor.remove();
+            this.editor = null;
+            this.createViewer();
+        }
+        else {
+            this.viewer.remove();
+            this.viewer = null;
+            this.createEditor();
+        }
+    }
+    onPreviewStyleChanged() {
+        if ((this.previewStyle != 'tab' && this.previewStyle != 'vertical') ||
+            !this.editor)
+            return;
+        this.editor.changePreviewStyle(this.previewStyle);
+        /*
+        this is a fix to a bug in editor, when editor is in tab style and preview tab is selected
+        all toolbar buttons are disabled so at that point if we change the preview style to vertical
+        the toolbar buttons still remains disabled, so we call the enable all button function manually
+        */
+        if (this.previewStyle == 'vertical') {
+            this.editor.getUI().getToolbar().enableAllButton();
+        }
+        this.updateToolbarVisiblity();
+    }
+    onShowSaveButtonChanged() {
+        if (this.editor) {
+            const toolbar = this.editor.getUI().getToolbar();
+            if (this.showSaveButton) {
+                toolbar.insertItem(0, this.getToolBarWithSaveButton(false)[0]);
+            }
+            else {
+                toolbar.removeItem(0);
+            }
+        }
+    }
+    onShowToolBarChanged() {
+        if (this.editor) {
+            this.updateToolbarVisiblity();
+        }
+    }
+    onAutosaveTimerChanged() {
+        if (this.editor) {
+            __classPrivateFieldGet(this, _KupEditor_autosaveInterval, "f") && clearInterval(__classPrivateFieldGet(this, _KupEditor_autosaveInterval, "f"));
+            typeof this.autosaveTimer === 'number' &&
+                this.autosaveTimer > 0 &&
+                this.setAutosaveInterval();
+        }
+    }
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+    /**
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+     */
+    async getProps(descriptions) {
+        return getProps(this, KupEditorProps, descriptions);
+    }
+    /**
+     * Returns the component's internal value as html.
+     */
+    async getValueAsHTML() {
+        var _a, _b;
+        return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getHtml()) !== null && _b !== void 0 ? _b : '';
+    }
+    /**
+     * Returns the component's internal value as markdown.
+     */
+    async getValueAsMarkdown() {
+        var _a, _b;
+        return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getMarkdown()) !== null && _b !== void 0 ? _b : '';
+    }
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
+    }
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupEditorProps, props);
+    }
+    /*-------------------------------------------------*/
+    /*          P r i v a t e   M e t h o d s          */
+    /*-------------------------------------------------*/
+    createEditor() {
+        var _a;
+        const editorProps = {
+            el: this.editorRef,
+            events: {
+                change: () => {
+                    if (__classPrivateFieldGet(this, _KupEditor_initialContent, "f") !== this.editor.getMarkdown()) {
+                        if (!__classPrivateFieldGet(this, _KupEditor_hasChanges, "f")) {
+                            __classPrivateFieldSet(this, _KupEditor_unsavedChangesIndex, this.editor.getUI().getToolbar().getItems()
+                                .length - 1, "f");
+                            this.editor
+                                .getUI()
+                                .getToolbar()
+                                .insertItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"), __classPrivateFieldGet(this, _KupEditor_unsavedChangesItem, "f"));
+                        }
+                        __classPrivateFieldSet(this, _KupEditor_hasChanges, true, "f");
+                    }
+                    else {
+                        if (__classPrivateFieldGet(this, _KupEditor_hasChanges, "f")) {
+                            this.editor
+                                .getUI()
+                                .getToolbar()
+                                .removeItem(__classPrivateFieldGet(this, _KupEditor_unsavedChangesIndex, "f"));
+                        }
+                        __classPrivateFieldSet(this, _KupEditor_hasChanges, false, "f");
+                    }
+                },
+                focus: () => {
+                    if (!this.isReadOnly && !this.showToolbar) {
+                        this.showToolbar = true;
+                    }
+                },
+            },
+            height: (_a = this.editorHeight) !== null && _a !== void 0 ? _a : 'auto',
+            hideModeSwitch: true,
+            initialEditType: this.initialEditType,
+            initialValue: this.initialValue,
+            placeholder: 'Type your text here...',
+            previewStyle: this.previewStyle,
+            usageStatistics: false,
+        };
+        if (this.showSaveButton) {
+            editorProps.toolbarItems = this.getToolBarWithSaveButton();
+        }
+        this.editor = new Editor(editorProps);
+        __classPrivateFieldSet(this, _KupEditor_initialContent, this.editor.getMarkdown(), "f");
+        if (!this.showToolbar) {
+            this.updateToolbarVisiblity();
+        }
+        typeof this.autosaveTimer === 'number' &&
+            this.autosaveTimer > 0 &&
+            this.setAutosaveInterval();
+    }
+    createViewer() {
+        const viewerProps = {
+            el: this.editorRef,
+            initialValue: this.initialValue,
+        };
+        this.viewer = new Viewer(viewerProps);
+    }
+    createSaveButton() {
+        const button = document.createElement('button');
+        button.className = 'kup-editor-save-button';
+        button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#585858" version="1.1" id="Capa_1" width="12px" height="12px" viewBox="0 0 407.096 407.096" xml:space="preserve">
+        <g>
+            <g>
+                <path d="M402.115,84.008L323.088,4.981C319.899,1.792,315.574,0,311.063,0H17.005C7.613,0,0,7.614,0,17.005v373.086    c0,9.392,7.613,17.005,17.005,17.005h373.086c9.392,0,17.005-7.613,17.005-17.005V96.032    C407.096,91.523,405.305,87.197,402.115,84.008z M300.664,163.567H67.129V38.862h233.535V163.567z"/>
+                <path d="M214.051,148.16h43.08c3.131,0,5.668-2.538,5.668-5.669V59.584c0-3.13-2.537-5.668-5.668-5.668h-43.08    c-3.131,0-5.668,2.538-5.668,5.668v82.907C208.383,145.622,210.92,148.16,214.051,148.16z"/>
+            </g>
+        </g>
+        </svg>`;
+        button.addEventListener('click', this.onEditorSave.bind(this));
+        return button;
+    }
+    createDivider() {
+        const el = document.createElement('div');
+        el.className = 'kup-editor-divider';
+        const divider = {
+            options: {
+                className: 'kup-editor-divider',
+                el,
+            },
+            type: 'button',
+        };
+        return divider;
+    }
+    createUnsavedChanges() {
+        const el = document.createElement('span');
+        el.className = 'kup-editor-unsaved-changes';
+        el.innerText = 'Unsaved changes.';
+        return el;
+    }
+    updateToolbarVisiblity() {
+        const toolbarElement = this.editor.getUI().getToolbar().el;
+        const toolbarParentElement = toolbarElement.parentElement;
+        toolbarElement.style.display = '';
+        toolbarParentElement.style.display = '';
+        if (!this.showToolbar) {
+            toolbarElement.style.display = 'none';
+            if (this.initialEditType != 'markdown' ||
+                this.previewStyle != 'tab') {
+                toolbarParentElement.style.display = 'none';
+            }
+        }
+    }
+    setAutosaveInterval() {
+        __classPrivateFieldSet(this, _KupEditor_autosaveInterval, setInterval(() => {
+            this.onEditorAutoSave();
+        }, this.autosaveTimer), "f");
+    }
+    onEditorSave() {
+        this.kupSave.emit(this.getSaveAndAutoSaveProps());
+    }
+    onEditorAutoSave() {
+        this.kupAutoSave.emit(this.getSaveAndAutoSaveProps());
+    }
+    getToolBarWithSaveButton(includeDefaultItems = true) {
+        const options = {
+            toolbarItems: [
+                {
+                    options: {
+                        el: this.createSaveButton(),
+                        tooltip: 'Save',
+                    },
+                    type: 'button',
+                },
+                this.createDivider(),
+                ...(includeDefaultItems ? this.getDefaultToolBarItems() : []),
+            ],
+        };
+        return options.toolbarItems;
+    }
+    getDefaultToolBarItems() {
+        const toolBarItems = [
+            'heading',
+            'bold',
+            'italic',
+            'strike',
+            this.createDivider(),
+            'hr',
+            'quote',
+            this.createDivider(),
+            'ul',
+            'ol',
+            'task',
+            'indent',
+            'outdent',
+            this.createDivider(),
+            'table',
+            'image',
+            'link',
+            this.createDivider(),
+            'code',
+            'codeblock',
+        ];
+        if (this.initialEditType == 'markdown') {
+            toolBarItems.push('scrollSync');
+        }
+        return toolBarItems;
+    }
+    getSaveAndAutoSaveProps() {
+        var _a, _b;
+        return {
+            comp: this,
+            id: this.rootElement.id,
+            htmlValue: (_a = this.editor.getHtml()) !== null && _a !== void 0 ? _a : '',
+            markdownValue: (_b = this.editor.getMarkdown()) !== null && _b !== void 0 ? _b : '',
+        };
+    }
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _KupEditor_kupManager, "f").debug.logLoad(this, false);
+        __classPrivateFieldGet(this, _KupEditor_kupManager, "f").theme.register(this);
+    }
+    componentDidLoad() {
+        this.kupReady.emit({
+            comp: this,
+            id: this.rootElement.id,
+        });
+        __classPrivateFieldGet(this, _KupEditor_kupManager, "f").debug.logLoad(this, true);
+    }
+    componentWillRender() {
+        __classPrivateFieldGet(this, _KupEditor_kupManager, "f").debug.logRender(this, false);
+    }
+    componentDidRender() {
+        __classPrivateFieldGet(this, _KupEditor_kupManager, "f").debug.logRender(this, true);
+    }
+    render() {
+        return (h(Host, { key: 'f6f75a4c985b137f5a7a8069daabb9cd89ea1b42' }, h("div", { key: '58e262517c28a8f932a6887e26040fdcb9241831', id: componentWrapperId }, h("div", { key: this.rootElement.id, ref: (el) => (this.editorRef = el), class: "kup-editor" }))));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupEditor_kupManager, "f").theme.unregister(this);
+        __classPrivateFieldGet(this, _KupEditor_autosaveInterval, "f") && clearInterval(__classPrivateFieldGet(this, _KupEditor_autosaveInterval, "f"));
+    }
+    static get is() { return "kup-editor"; }
+    static get properties() {
+        return {
+            "autosaveTimer": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "When specified, the component will emit the kup-editor-autosave event at regular intervals."
+                },
+                "attribute": "autosave-timer",
+                "reflect": false
+            },
+            "editorHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"auto\""
+                        }],
+                    "text": "Sets the height of the component."
+                },
+                "attribute": "editor-height",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "initialEditType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupEditorType",
+                    "resolved": "\"markdown\" | \"wysiwyg\"",
+                    "references": {
+                        "KupEditorType": {
+                            "location": "import",
+                            "path": "./kup-editor-declarations",
+                            "id": "src/components/kup-editor/kup-editor-declarations.ts::KupEditorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'markdown'"
+                        }],
+                    "text": "The editor type."
+                },
+                "attribute": "initial-edit-type",
+                "reflect": false,
+                "defaultValue": "'markdown'"
+            },
+            "initialValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "The initial editor value."
+                },
+                "attribute": "initial-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "isReadOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether the editor is disabled or not."
+                },
+                "attribute": "is-read-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "previewStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupEditorPreview",
+                    "resolved": "\"tab\" | \"vertical\"",
+                    "references": {
+                        "KupEditorPreview": {
+                            "location": "import",
+                            "path": "./kup-editor-declarations",
+                            "id": "src/components/kup-editor/kup-editor-declarations.ts::KupEditorPreview"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'vertical'"
+                        }],
+                    "text": "The editor preview style."
+                },
+                "attribute": "preview-style",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "showSaveButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Defines whether to show the save button in editor's toolbar or not."
+                },
+                "attribute": "show-save-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showToolbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Defines whether to show the editor's toolbar or not."
+                },
+                "attribute": "show-toolbar",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "editor": {},
+            "editorRef": {},
+            "viewer": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupAutoSave",
+                "name": "kup-editor-autosave",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered at regular intervals if autosaveTimer prop is initialised."
+                },
+                "complexType": {
+                    "original": "KupEditorEventPayload",
+                    "resolved": "KupEditorEventPayload",
+                    "references": {
+                        "KupEditorEventPayload": {
+                            "location": "import",
+                            "path": "./kup-editor-declarations",
+                            "id": "src/components/kup-editor/kup-editor-declarations.ts::KupEditorEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupReady",
+                "name": "kup-editor-ready",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the component is ready."
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupSave",
+                "name": "kup-editor-save",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when save button is clicked."
+                },
+                "complexType": {
+                    "original": "KupEditorEventPayload",
+                    "resolved": "KupEditorEventPayload",
+                    "references": {
+                        "KupEditorEventPayload": {
+                            "location": "import",
+                            "path": "./kup-editor-declarations",
+                            "id": "src/components/kup-editor/kup-editor-declarations.ts::KupEditorEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getProps": {
+                "complexType": {
+                    "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+                    "parameters": [{
+                            "name": "descriptions",
+                            "type": "boolean",
+                            "docs": "- When provided and true, the result will be the list of props with their description."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<GenericObject>"
+                },
+                "docs": {
+                    "text": "Used to retrieve component's props values.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                        }, {
+                            "name": "returns",
+                            "text": "List of props as object, each key will be a prop."
+                        }]
+                }
+            },
+            "getValueAsHTML": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the component's internal value as html.",
+                    "tags": []
+                }
+            },
+            "getValueAsMarkdown": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the component's internal value as markdown.",
+                    "tags": []
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
+            },
+            "setProps": {
+                "complexType": {
+                    "signature": "(props: GenericObject) => Promise<void>",
+                    "parameters": [{
+                            "name": "props",
+                            "type": "GenericObject",
+                            "docs": "- Object containing props that will be set to the component."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the props to the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "props - Object containing props that will be set to the component."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "editorRef",
+                "methodName": "onEditorRefUpdated"
+            }, {
+                "propName": "editor",
+                "methodName": "onEditorUpdate"
+            }, {
+                "propName": "initialEditType",
+                "methodName": "onInitialEditTypeChanged"
+            }, {
+                "propName": "isReadOnly",
+                "methodName": "onIsReadOnlyChanged"
+            }, {
+                "propName": "previewStyle",
+                "methodName": "onPreviewStyleChanged"
+            }, {
+                "propName": "showSaveButton",
+                "methodName": "onShowSaveButtonChanged"
+            }, {
+                "propName": "showToolbar",
+                "methodName": "onShowToolBarChanged"
+            }, {
+                "propName": "autosaveTimer",
+                "methodName": "onAutosaveTimerChanged"
+            }];
+    }
+}
+_KupEditor_autosaveInterval = new WeakMap(), _KupEditor_hasChanges = new WeakMap(), _KupEditor_initialContent = new WeakMap(), _KupEditor_kupManager = new WeakMap(), _KupEditor_unsavedChangesIndex = new WeakMap(), _KupEditor_unsavedChangesItem = new WeakMap();