@social-mail/social-mail-client 1.2.44 → 1.2.45

package/index.js

@@ -22,7 +22,9 @@
 
         const view = script.getAttribute("data-view");
 
-        const host = script.getAttribute("data-host");
+        let host = script.getAttribute("data-host");
+
+        const replace = script.getAttribute("data-replace");
 
         const packed = JSON.parse(script.getAttribute("data-packed") ?? "true");
         const min = JSON.parse(script.getAttribute("data-min") ?? "true");
@@ -61,11 +63,16 @@
             };
             UMD.setupRoot(package, packageRoot);
             UMD.lang = "en-US";
+            if (replace) {
+                host = document.createElement("section");
+                script.parentElement.replaceChild(section, script);
+            } 
+
             if (host) {
                 UMD.hostView(host, viewName, 0).then(done);
             } else {
                 UMD.loadView(viewName, 0).then(done);
-            }
+            }            
         });
 
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.44",
+  "version": "1.2.45",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/blocks/Components.tsx

@@ -0,0 +1,10 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Block } from "./Block";
+
+export const BlogComponent = Block({
+    className: "fad fa-blog",
+    title: "Add Blog Component",
+    factory: () => <section data-web-atoms-view="blog-view" style="margin: 10px; padding: 10px; background: gray; border-radius: 10px; color: white;">
+        Blog View
+    </section>
+});

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -24,6 +24,7 @@ import { ImageCard } from "../blocks/ImageCard";
 import { TextBox } from "../blocks/TextBox";
 import { Card } from "../blocks/Card";
 import { List } from "../blocks/List";
+import { BlogComponent } from "../blocks/Components";
 
     styled.css `
         display: grid;
@@ -206,11 +207,18 @@ export default class HtmlPageEditor extends AtomControl {
                 const target = e.target as Node;
                 e.preventDefault();
                 const element: HTMLElement = target.nodeType === Node.ELEMENT_NODE ? target as HTMLElement : target.parentElement;
-                element.setAttribute("contentEditable", "true");
-                this.setSelection(element as any);
                 if (element.tagName === "IMG") {
                     this.changeImage().catch(console.error);
+                    return;
+                }
+                if (element.getAttribute("data-editable") === "false") {
+                    return;
                 }
+                if (element.hasAttribute("data-web-atoms-view")) {
+                    return;
+                }
+                element.setAttribute("contentEditable", "true");
+                this.setSelection(element as any);
             });
 
             this.htmlDocument.addEventListener("scroll", (e) => {
@@ -313,6 +321,7 @@ export default class HtmlPageEditor extends AtomControl {
                 <Columns2/>
                 <Columns3/>
                 <List/>
+                <BlogComponent/>
             </EditorToolbar>
             <div data-element="editor"
                 style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>
@@ -513,6 +522,17 @@ export default class HtmlPageEditor extends AtomControl {
             const element = all[index];
             element.removeAttribute("draggable");
         }
+        // replace script tags...
+        const blogView = clone.querySelector(`section[data-web-atoms-view="blog-view"]`);
+        if (blogView) {
+            const blogScript = this.htmlDocument.createElement("script");
+            blogScript.src = "https://cdn.jsdelivr.net/npm/@social-mail/social-mail-client@1.2.45/component.js";
+            blogScript.setAttribute("data-package", "@social-mail/social-mail-client");
+            blogScript.setAttribute("data-package-root", "https://cdn.jsdelivr.net/npm/@social-mail/social-mail-client@1.2.45/");
+            blogScript.setAttribute("data-replace", "true");
+            blogScript.setAttribute("data-view", "dist/public/channel/ChannelView");
+            blogView.parentElement.replaceChild(blogScript, blogView);
+        }
         const currentHtml = clone.innerHTML;
         if (!lastHtml) {
             this.lastHtml = currentHtml;