lightview 1.7.3-b → 1.8.1-b

package/examples/xor.html

@@ -7,26 +7,27 @@
         <p>
             Play: <input type="checkbox" value="${run}">
         </p>
-        <script type="lightview/module">
-      self.variables({
-        run: "boolean"
-      },{reactive});
-      self.variables({
-        name: "string"
-      }, {
-        imported
-      });
-      addEventListener("change", ({
-        variableName,
-        value
-      }) => {
-      debugger;
-        if (variableName === "run" && value === true) {
-          self.siblings.forEach((sibling) => {
-            sibling.setVariableValue(variableName, false);
-          })
-        }
-      })
+        <script id="lightview">
+            (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+                self.variables({
+                    run: "boolean"
+                }, {reactive});
+                self.variables({
+                    name: "string"
+                }, {
+                    imported
+                });
+                addEventListener("change", ({
+                        variableName,
+                        value
+                    }) => {
+                    if (variableName === "run" && value === true) {
+                        self.siblings.forEach((sibling) => {
+                            sibling.setVariableValue(variableName, false);
+                        })
+                    }
+                });
+            }
     </script>
     </template>
     <title>Lightview:Examples:XOR</title>

package/lightview.js

@@ -28,6 +28,8 @@ SOFTWARE.
     imported(x) => exported(x) => reactive(x) => remote(x,{path:".
  */
 
+if(document.body) document.currentComponent = document.body;
+
 const Lightview = {};
 
 const {observe} = (() => {
@@ -147,13 +149,6 @@ const {observe} = (() => {
                         } else {
                             Object.assign(instance, JSON.parse(value));
                         }
-                        /*if (toType !== Date) {
-                            Object.defineProperty(instance, "constructor", {
-                                configurable: true,
-                                writable: true,
-                                value: toType.prototype.constructor || toType
-                            });
-                        }*/
                         return instance;
                     }
                     return JSON.parse(value);
@@ -236,6 +231,7 @@ const {observe} = (() => {
     const createVarsProxy = (vars, component, constructor) => {
         return new Proxy(vars, {
             get(target, property) {
+                if(property==="self") return component;
                 if(target instanceof Date) return Reflect.get(target,property);
                 let {value,get} = target[property] || {};
                 if(get) return target[property].value = get.call(target[property]);
@@ -402,7 +398,7 @@ const {observe} = (() => {
             nameparts = variableName.split(".");
         let type = input.tagName === "SELECT" && input.hasAttribute("multiple") ? Array : inputTypeToType(inputtype);
         const variable = walk(component.vars,nameparts) || {type};
-        if(type==="any") type = variable.type;
+        if(type==="any") type = variable?.type.type || variable?.type;
         if(value==null) {
             const avalue = input.getAttribute("value");
             if(avalue) value = avalue;
@@ -413,14 +409,16 @@ const {observe} = (() => {
             const key = path[path.length-1];
             object[key] =  coerce(value,type);
         } else {
-            if (type !== variable.type) {
-                if (variable.type === "any" || variable.type === "unknown") variable.type = type;
-                else throw new TypeError(`Attempt to bind <input name="${variableName}" type="${type}"> to variable ${variableName}:${variable.type}`)
-            }
             const existing = component.vars[variableName];
-            if(!existing || existing.type!==type || !existing.reactive) component.variables({[variableName]: type},{reactive});
+            if(existing) {
+                existingtype = existing?.type.type || existing?.type;
+                if(existingtype!==type) throw new TypeError(`Attempt to bind <input name="${variableName}" type="${type}"> to variable ${variableName}:${existing.type}`)
+                existing.reactive = true;
+            } else {
+                component.variables({[variableName]: type},{reactive});
+            }
             if(inputtype!=="radio") {
-                if(typeof(value)==="string" && value.includes("${")) input.attributes.value.value = "";
+                if(typeof(value)==="string" && value.includes("${")) input.setAttribute("value","");
                 else component.setVariableValue(variableName, coerce(value,type));
             }
         }
@@ -537,22 +535,43 @@ const {observe} = (() => {
             value: imported
         }
     };
-    const createClass = (domElementNode, {observer, framed, href}) => {
+    const createClass = (domElementNode, {observer, framed, href=window.location.href}) => {
         const instances = new Set(),
-            dom = domElementNode.tagName === "TEMPLATE"
-                ? domElementNode.content.cloneNode(true)
-                : domElementNode.cloneNode(true),
             observedAttributes = [];
+        /*let dom = domElementNode.tagName === "TEMPLATE"
+            ? domElementNode.content.cloneNode(true)
+            : domElementNode.cloneNode(true);*/
+        let dom;
         observedAttributes.add = function(name) { observedAttributes.includes(name) || observedAttributes.push(name); }
-        if (domElementNode.tagName === "TEMPLATE") domElementNode = domElementNode.cloneNode(true);
-        return class CustomElement extends HTMLElement {
+        const cls = class CustomElement extends HTMLElement {
             static get instances() {
                 return instances;
             }
+            static setTemplateNode(node) {
+                dom = node.tagName === "TEMPLATE"
+                    ? document.createElement("div")
+                    : node.cloneNode(true);
+                if(node.tagName === "TEMPLATE") {
+                    dom.innerHTML = node.innerHTML;
+                    [...node.attributes].forEach((attr) => dom.setAttribute(attr.name,attr.value));
+                    document.currentComponent = node;
+                    document.currentComponent.componentBaseURI = window.location.href;
+                    const lvscript = dom.querySelector("#lightview");
+                    if(lvscript) {
+                        const script = document.createElement("script");
+                        script.innerHTML = lvscript.innerHTML;
+                        document.head.appendChild(script);
+                        script.remove();
+                    }
+                    document.currentComponent = null;
+                }
+                dom.mount = node.mount;
+            }
             constructor() {
                 super();
+                this.componentBaseURI = href;
                 instances.add(this);
-                const currentComponent = this,
+                const currentComponent =  document.currentComponent =this,
                     shadow = this.attachShadow({mode: "open"}),
                     eventlisteners = {};
                 this.vars = {
@@ -585,7 +604,6 @@ const {observe} = (() => {
                     },
                     self: {value: currentComponent, type: CustomElement, constant: true}
                 };
-                this.defaultAttributes = domElementNode.tagName === "TEMPLATE" ? domElementNode.attributes : dom.attributes;
                 this.varsProxy = createVarsProxy(this.vars, this, CustomElement);
                 if (framed || CustomElement.lightviewFramed) this.variables({message: Object}, {exported});
                 ["getElementById", "querySelector", "querySelectorAll"]
@@ -596,7 +614,17 @@ const {observe} = (() => {
                             value: (...args) => this.shadowRoot[fname](...args)
                         })
                     });
-                [...dom.childNodes].forEach((child) => shadow.appendChild(child.cloneNode(true)));
+                [...dom.childNodes].forEach((child) => {
+                    if(child.tagName && customElements.get(child.tagName.toLowerCase())) {
+                        const node = document.createElement(child.tagName);
+                        [...child.attributes].forEach((attr) => node.setAttribute(attr.name,attr.value));
+                        document.currentComponent = node;
+                        shadow.appendChild(node);
+                    } else {
+                        const node = child.cloneNode(true);
+                        shadow.appendChild(node);
+                    }
+                });
                 importAnchors(shadow, this);
             }
 
@@ -612,57 +640,44 @@ const {observe} = (() => {
                 instances.delete(this);
             }
 
-            async connectedCallback() {
-                const ctx = this,
-                    shadow = ctx.shadowRoot;
-                for (const attr of this.defaultAttributes) this.hasAttribute(attr.name) || this.setAttribute(attr.name, attr.value);
-                const scripts = shadow.querySelectorAll("script"),
-                    promises = [];
-                for (const script of [...scripts]) {
-                    if (script.attributes.src?.value?.includes("/lightview.js")) continue;
-                    const text = script.innerHTML
-                        .replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "$1") // remove comments;
-                        .replaceAll(/import\s*\((\s*["'][\.\/].*["'])\)(.*$)/gm,`import(new URL($1,"${href ? href : window.location.href}").href)$2`) // handle relative paths
-                        .replaceAll(/'(([^'\\]|\\.)*)'/g,"\\'$1\\'") // handle quotes
-                        .replaceAll(/\r?\n/g, ""); // remove \n
-                    const currentScript = document.createElement("script");
-                    if (script.className !== "lightview" && !((script.attributes.type?.value || "").includes("lightview/"))) {
-                        for (const attr of script.attributes) currentScript.setAttribute(attr.name,attr.value);
-                        currentScript.innerHTML = text;
-                        shadow.appendChild(currentScript);
-                        await new Promise((resolve) => {
-                            const timeout = setTimeout(() => resolve(),500);
-                            currentScript.onload = () => {
-                                clearTimeout(timeout);
-                                currentScript.remove();
-                                resolve();
-                            }
-                        })
-                        continue;
-                    };
-                    const scriptid = Math.random() + "";
-                    for (const attr of script.attributes) {
-                        currentScript.setAttribute(attr.name, attr.name === "type" ? attr.value.replace("lightview/", "") : attr.value);
-                    }
-                    currentScript.classList.remove("lightview");
-                    currentScript.innerHTML = `Object.getPrototypeOf(async function(){}).constructor('if(window["${scriptid}"]?.ctx) { const ctx = window["${scriptid}"].ctx; { with(ctx) { ${text}; } } }')().then(() => window["${scriptid}"]()); `;
-                    await new Promise((resolve) => {
-                        window[scriptid] = () => {
-                            delete window[scriptid];
-                            currentScript.remove();
-                            script.remove();
-                            resolve();
-                        }
-                        window[scriptid].ctx = ctx.varsProxy;
-                        shadow.appendChild(currentScript);
-                    })
+            connectedCallback() {
+                [...dom.attributes].forEach((attr) => {
+                    if(!this.hasAttribute(attr.name)) this.setAttribute(attr.name,attr.value);
+                })
+                if(dom.mount) {
+                    const script = document.createElement("script");
+                    document.currentComponent = this;
+                    script.innerHTML = `with(document.currentComponent.varsProxy) { 
+                        const component = document.currentComponent; 
+                        (async () => { await (${dom.mount}).call(self,self); 
+                        component.compile();  })(); 
+                    };`;
+                    this.appendChild(script);
+                    script.remove();
+                    document.currentComponent = null;
                 }
+            }
+            compile() {
                 // Promise.all(promises).then(() => {
+                const ctx = this,
+                    shadow = this.shadowRoot;
                 const nodes = getNodes(ctx),
                     processNodes = (nodes,object) => {
                         nodes.forEach((node) => {
                             if (node.nodeType === Node.TEXT_NODE && node.template.includes("${")) {
                                 observe(() => resolveNodeOrText(node, this,true,node.extras));
+                                if(node.parentElement?.tagName==="TEXTAREA") {
+                                    const name = getTemplateVariableName(node.template);
+                                    if (name) {
+                                        const nameparts = name.split(".");
+                                        if(node.extras && node.extras[nameparts[0]]) {
+                                            object = node.extras[nameparts[0]];
+                                        }
+                                        if(!this.vars[nameparts[0]] || this.vars[nameparts[0]].reactive || object) {
+                                            bindInput(node.parentElement, name, this, resolveNodeOrText(node.template, this,true,node.extras), object);
+                                        }
+                                    }
+                                }
                             } else if (node.nodeType === Node.ELEMENT_NODE) {
                                 // resolve the value before all else;
                                 const attr = node.attributes.value,
@@ -774,7 +789,7 @@ const {observe} = (() => {
                                     } else if (type === "l-if") {
                                         observe(() => {
                                             const value = resolveNodeOrText(attr, this,true,node.extras);
-                                            node.style.setProperty("display", value == true ? "revert" : "none");
+                                            node.style.setProperty("display", value == true || value === "true" ? "revert" : "none");
                                         })
                                     } else if (type === "l-for") {
                                         node.template ||= node.innerHTML;
@@ -845,7 +860,7 @@ const {observe} = (() => {
                 observer.observe(ctx, {attributeOldValue: true, subtree:true, characterData:true, characterDataOldValue:true});
                 if(this.hasAttribute("l-unhide")) this.removeAttribute("hidden");
                 //ctx.vars.postEvent.value("connected");
-                this.dispatchEvent(new Event("connected"));
+                this.dispatchEvent(new Event("mounted"));
                 // })
             }
             adoptedCallback(callback) {
@@ -941,6 +956,8 @@ const {observe} = (() => {
                     }, {});
             }
         }
+        cls.setTemplateNode(domElementNode);
+        return cls;
     }
 
     const createComponent = (name, node, {framed, observer, href} = {}) => {
@@ -967,16 +984,34 @@ const {observe} = (() => {
             const html = await (await fetch(url.href)).text(),
                 dom = parser.parseFromString(html, "text/html"),
                 unhide = !!dom.head.querySelector('meta[name="l-unhide"]'),
-                links = dom.head.querySelectorAll('link[href$=".html"][rel=module]');
-            for (const childlink of links) {
+                modulelinks = dom.head.querySelectorAll('link[href$=".html"][rel=module]');
+            for (const childlink of modulelinks) {
                 const href = childlink.getAttribute("href"),
                     childurl = new URL(href, url.href);
                 childlink.setAttribute("href", childurl.href);
                 if (link.hasAttribute("crossorigin")) childlink.setAttribute("crossorigin", link.getAttribute("crossorigin"))
                 await importLink(childlink, observer);
             }
-            if (unhide) dom.body.removeAttribute("hidden");
+            const links =  dom.head.querySelectorAll('link:not([href$=".html"][rel=module])');
+            for(const childlink of links) {
+                const href = childlink.getAttribute("href"),
+                    childurl = new URL(href, url.href);
+                childlink.setAttribute("href", childurl.href);
+                if (link.hasAttribute("crossorigin")) childlink.setAttribute("crossorigin", link.getAttribute("crossorigin"));
+                dom.body.insertBefore(childlink,dom.body.firstChild);
+            }
+            document.currentComponent = dom.body;
+            document.currentComponent.componentBaseURI = url.href;
+            const lvscript = dom.getElementById("lightview");
+            if(lvscript) {
+                const script = document.createElement("script");
+                script.innerHTML = lvscript.innerHTML;
+                document.body.appendChild(script);
+                script.remove();
+            }
+            document.currentComponent = null;
             createComponent(as, dom.body, {observer,href:url.href});
+            if (unhide) dom.body.removeAttribute("hidden");
         }
         return {as};
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightview",
-  "version": "1.7.3b",
+  "version": "1.8.1b",
   "description": "Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.",
   "main": "lightview.js",
   "scripts": {
@@ -28,9 +28,14 @@
   "bugs": {
     "url": "https://github.com/anywhichway/lightview/issues"
   },
-  "homepage": "https://github.com/anywhichway/lightview#readme",
+  "homepage": "https://lightview.dev",
   "devDependencies": {
+    "@editorjs/editorjs": "^2.16.0",
+    "editorjs-inline-tool": "^0.4.0",
     "jest": "^27.5.1",
     "jest-puppeteer": "^6.1.0"
+  },
+  "dependencies": {
+    "froala-editor": "^4.0.11"
   }
 }

package/sites/client.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Sites:Client</title>
+    <template id="template"></template>
+    <script src="../lightview.js"></script>
+    <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
+    <script>
+        const template = document.getElementById("template"),
+            client = new Peer("anywhichway3",{debug:3});
+        client.on("open",(id) => {
+            console.log(id);
+            setTimeout(()=> document.body.innerHTML+=id);
+            const server = client.connect("anywhichway1");
+            server.on("open",() => {
+                server.send("Hi from " + id);
+                setTimeout(() => {
+                    server.send("Hi from " + id);
+                },5000);
+            });
+        });
+        client.on("connection",(conn) => {
+            //conn.on("open",() => {
+            //  conn.send("Client does not accept inbound connections")
+            // });
+            conn.on("data",(data) => {
+                console.log(data);
+                template.innerHTML = data;
+                setTimeout(()=> document.body.innerHTML=data);
+                const component = window.customElements.get("x-body");
+                if(component) component.setTemplateNode(template)
+                else Lightview.createComponent("x-body",template);
+                const body = document.createElement("x-body");
+                document.body.parentElement.replaceChild(body, document.body);
+                Object.defineProperty(document, "body", {
+                    enumerable: true, configurable: true, get() {
+                        return body;
+                    }
+                });
+            })
+        });
+    </script>
+</head>
+<body>
+
+</body>
+</html>

package/sites/index.html

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Sites</title>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
+    <script src="https://cdn.tiny.cloud/1/y2ts772rioh7s7bmlcosnef03zs6kpedu5ovw1sdfzslurej/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
+    <script src="https://unpkg.com/isomorphic-git"></script>
+    <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
+    <script type="module">
+        const fs = new LightningFS('my-app');
+        const files = await git.listFiles({ fs, dir: '/' });
+        console.log(files);
+        window.fs = fs.promises;
+    </script>
+    <script>
+        var server = new Peer("anywhichway1");
+        // on open will be launch when you successfully connect to PeerServer
+        server.on('open', (id) => {
+            console.log(id);
+        });
+        server.on("connection",(conn) => {
+            conn.on('data', async (data) => {
+                console.log('Received', data);
+                let content = await fs.readFile("/test.html",{encoding:"utf8"});
+                const client = server.connect(conn.peer);
+                client.on("open",() => {
+                    content += `<p>${new Date().toISOString()}</p>`
+                    client.send(content);
+                });
+            });
+            //const client = server.connect(conn.peer);
+        })
+    </script>
+    <script src="../lightview.js?as=x-body"></script>
+</head>
+<body style="display:flex;flex-direction:row;min-height:98vh;margin: 10px">
+<div style="width:200px;min-height:100%;border:1px solid;padding-left:10px;padding-bottom:10px">
+    <div style="width:100%;"><label for="hamburger" style="float:left" l-on:click="${onTabClick}">hamburger</label><br></br>Files</div>
+    <div id="files"></div>
+</div>
+<div id="content" style="flex:auto;min-height:100%;border:1px solid;padding:10px">
+    <div style="display:flex;flex-direction:column;min-height:100%">
+        <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;display:none">
+            <label for="markdown" l-on:click="${onTabClick}">Markdown</label>
+            <label for="html" l-on:click="${onTabClick}">HTML</label>
+            <label for="css" l-on:click="${onTabClick}">Style</label>
+            <label for="script" l-on:click="${onTabClick}">Script</label>
+            <label for="head" l-on:click="${onTabClick}">Head</label>
+            <label for="preview" l-on:click="${onTabClick}">Preview</label>
+        </div>
+        <textarea id="markdown" style="flex-grow:1;padding-right:2px;;display:none">${bodyMarkdown}</textarea>
+        <textarea id="html" style="flex-grow:1;padding-right:2px;display:none">${bodyHTML}</textarea>
+        <textarea id="css" style="flex-grow:1;display:none">${cssText}</textarea>
+        <textarea id="script" style="flex-grow:1;display:none">${scriptText}</textarea>
+        <textarea id="head" style="flex-grow:1;display:none">${headText}</textarea>
+        <div id="preview" style="flex-grow:1;display:none"></div>
+        <div id="hamburger"  style="flex-grow:1;display:none">options</div>
+        <div id="wysiwyg" style="flex-grow:1;width:100%;border:1px solid">
+        </div>
+    </div>
+</div>
+<style id="style"></style>
+<script type="lightview/module">
+    const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"}),
+        fs = new LightningFS('my-app').promises;
+    turndownService.keep(() => true);
+
+    const {html,css,script} = await import("../types.js");
+    self.variables({
+        onTabClick:"function"
+    });
+    self.variables({
+        bodyMarkdown:html,
+        bodyHTML:html,
+        cssText:css,
+        scriptText:script,
+        headHTML:html
+    },{reactive});
+
+    let fragment;
+    try {
+        const fullHTML = await fs.readFile("/test.html",{encoding:"utf8"}),
+          parser = new DOMParser();
+        fragment = parser.parseFromString(fullHTML||"","text/html");
+    } catch(e) {
+
+    };
+
+    const body_el = fragment?.body,
+        style_el = fragment?.querySelector("style"),
+        script_el = fragment?.querySelector("script");
+    if(style_el) style_el.remove();
+    if(script_el) script_el.remove();
+
+    bodyHTML = body_el?.innerHTML || "";
+    bodyMarkdown = "";
+    cssText = style_el?.innerHTML || "";
+    scriptText = script_el?.innerHTML || "",
+    headHTML = fragment?.head.innerHTML || "";
+
+    const tabs = [...self.querySelectorAll("label[for]")]
+        .map((label) => {
+            const id = label.getAttribute("for");
+            return [id,self.getElementById(id),label];
+        });
+
+    onTabClick = (event) => {
+        const targetid = event.target.getAttribute("for");
+        tabs.forEach(([id,el,label]) => {
+            if(id===targetid) {
+                el.style.display = "unset";
+                label.style.borderBottom = "solid";
+            } else {
+                el.style.display = "none";
+                label.style.borderBottom = "none";
+            }
+        });
+        if(targetid==="preview") doPreview();
+    };
+
+    const doPreview = () => {
+        const template = document.createElement("template");
+        template.innerHTML = "<style>" + cssText + "</style>" + htmlEl.value + '<script type="lightview/module">' + scriptText + "<" + "/script>";
+        const component = window.customElements.get("x-preview");
+        if(component) { component.setTemplateNode(template); }
+        else { Lightview.createComponent("x-preview",template); }
+        previewEl.innerHTML = "<x-preview></x-preview>";
+        fs.writeFile("/test.html",template.innerHTML,{encoding:"utf8"},()=>{});
+    };
+
+    const wysywigEl = self.getElementById("wysiwyg"),
+        markdownEl = self.getElementById("markdown"),
+        htmlEl = self.getElementById("html"),
+        tabsEl = self.getElementById("tabs"),
+        styleEl = self.getElementById("style"),
+        previewEl = self.getElementById("preview");
+
+    let prevtext; // prevents indirect recursion
+    observe(() => {
+        const text = turndownService.turndown(bodyHTML).trim();
+        if(text && text!==prevtext) {
+            bodyMarkdown = markdownEl.innerHTML = prevtext = text;
+        }
+    });
+
+    let prevhtml; // prevents indirect recursion
+    observe(() => {
+        const html = marked.parse(bodyMarkdown).trim();
+        if(html && html!==prevhtml) {
+            bodyHTML =  htmlEl.innerText  = prevhtml = html;
+        }
+    });
+
+    observe(() => {
+        const dummy = cssText;
+        if(tinymce.activeEditor) {
+            tinymce.activeEditor.destroy();
+            initMCE();
+        }
+    });
+
+    let advEdit = false;
+    const toggleAdvEdit = () => {
+        advEdit = !advEdit;
+        if(advEdit) {
+            tabsEl.style.display = "unset";
+        } else {
+            tabsEl.style.display = "none";
+        }
+        tabs.forEach(([_,el,label]) => {
+            if(advEdit && el===markdownEl) {
+                el.style.display = "unset";
+                label.style.borderBottom = "solid";
+                return;
+            }
+            el.style.display = "none";
+            label.style.borderBottom = "none";
+        });
+        initMCE();
+    };
+
+    const initMCE = () => {
+        tinymce.init({
+            target: wysywigEl,
+            content_style: cssText,
+            setup: (editor) => {
+                editor.ui.registry.addButton('advancedEdit', {
+                  text: 'AdvEdit',
+                  onAction: () => {
+                    editor.destroy();
+                    toggleAdvEdit();
+                  }
+                });
+                editor.on("init",() => {
+                    observe(()=> {
+                        const html = editor.getContent();
+                        if(html !== bodyHTML) {
+                            editor.setContent(bodyHTML);
+                        }
+                    });
+                });
+                ["input","FormatApply","FormatRemove"]
+                    .forEach((event) => {
+                        editor.on(event,() => {
+                            const html = editor.getContent();
+                            if(!bodyHTML || (bodyHTML !== html)) {
+                                bodyHTML = htmlEl.innerText =  html;
+                            }
+                        });
+                    });
+            },
+            plugins: "a11ychecker advcode casechange export formatpainter image editimage linkchecker autolink lists checklist media mediaembed pageembed powerpaste searchreplace table advtable tableofcontents tinycomments tinymcespellchecker",
+            toolbar: "undo redo | addcomment showcomments | h1 h2 h3 h4 formatselect casechange bullist numlist checklist | advancedEdit",
+            toolbar_mode: "floating",
+            tinycomments_mode: "embedded",
+            tinycomments_author: "Author name",
+            removed_menuitems: 'fontsizes, fontformats, forecolor, backcolor, lineheight, inline, inserttable code undo redo',
+            style_formats: [
+              { title: 'Headings', items: [
+                    { title: 'Heading 1', format: 'h1' },
+                    { title: 'Heading 2', format: 'h2' },
+                    { title: 'Heading 3', format: 'h3' },
+                    { title: 'Heading 4', format: 'h4' },
+                    { title: 'Heading 5', format: 'h5' },
+                    { title: 'Heading 6', format: 'h6' }
+                  ]
+              }
+           ],
+           statusbar: false,
+           menu: {
+            format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | codeformat blockformats align | removeformat'}
+           }
+        });
+    };
+
+    self.addEventListener("connected",() => {
+        initMCE();
+    });
+
+// format: remove fonts, line height, text color, background color formats.inline, formats.block.div and formats.blocks.pre, block.pre
+// view: remove source code
+</script>
+</body>
+</html>