@social-mail/social-mail-client 1.2.18 → 1.2.19

package/package.json

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

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

@@ -58,6 +58,7 @@ import { List } from "../blocks/List";
             grid-column: 3;
             border-left: solid 1px lightgray;
             border-radius: 0;
+            overflow: auto;
         }
 
         & > [data-element=editor] {
@@ -221,6 +222,25 @@ export default class HtmlPageEditor extends AtomControl {
                 this.hover.update(target);
             }, { capture: true });
 
+            this.htmlDocument.addEventListener("keydown", (e) => {
+                if(e.ctrlKey || e.metaKey) {
+                    switch(e.key) {
+                        case "s":
+                            this.contentEditor.dispatchEvent(new CustomEvent("savePage", { bubbles: true }));
+                            e.preventDefault();
+                            break;
+                        case "z":
+                            this.contentEditor.dispatchEvent(new CustomEvent("undo", { bubbles: true }));
+                            e.preventDefault();
+                            break;
+                        case "y":
+                            this.contentEditor.dispatchEvent(new CustomEvent("redo", { bubbles: true }));
+                            e.preventDefault();
+                            break;
+                    }
+                }
+            });
+
             InstallDragDropHelper(this);
 
             this.htmlDocument.close();
@@ -405,6 +425,22 @@ export default class HtmlPageEditor extends AtomControl {
         return this.insertImage(prompt("Image Src", ""));
     }
 
+    @Action({ onEvent: "keyup"})
+    onKeyUp(d, ke: KeyboardEvent) {
+        if (ke.ctrlKey) {
+            switch(ke.key) {
+                case "z":
+                    ke.preventDefault();
+                    this.undo();
+                    break;
+                case "y":
+                    ke.preventDefault();
+                    this.redo();
+                    break;
+            }
+        }
+    }
+
     async insertImage(src: string, style?: { [key: string]: string}) {
         let img: HTMLImageElement;
         if(this.selection.isImage) {
@@ -486,6 +522,18 @@ export default class HtmlPageEditor extends AtomControl {
         }, 100);
     }
 
+    @Action({ onEvent: "undo"})
+    undo() {
+        this.redoList.insert(this.redoList.length, this.htmlDocument.documentElement.innerHTML);
+        this.htmlDocument.documentElement.innerHTML = this.undoList.removeAt(this.undoList.length-1);
+    }
+
+    @Action({ onEvent: "redo"})
+    redo() {
+        this.undoList.insert(this.undoList.length, this.htmlDocument.documentElement.innerHTML);
+        this.htmlDocument.documentElement.innerHTML = this.redoList.removeAt(this.redoList.length-1);
+    }
+
     protected async setStylerSheet() {
         const document = this.htmlDocument;
         let style = document.querySelector(`[styler-style-sheet]`);

package/src/site-editor/properties/controls/PropertyEditor.tsx

@@ -26,26 +26,56 @@ export const BindStyleCustom = AtomControl.registerProperty("data-style-property
     styled.css `
 
     display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    justify-items: stretch;
+    align-items: center;
     column-gap: 5px;
+    max-width: 200px;
+    & > * {
+        width: 100%;
+    }
     & > label {
         grid-row: 1;
         grid-column: 1;
     }
 
     & > [data-element=editor] {
-        grid-row: 1;
-        grid-column: 2;
+        grid-row: 2;
+        grid-column: 1;
     }
 
     & > [data-element=custom] {
-        grid-row: 2;
-        grid-column: 1 / span 2;
+        grid-row: 3;
+        grid-column: 1;
+    }
+
+    & select {
+        outline: none;
+        border: none;
+        background-color: #e7e7e775;
+        border-radius: 9999px;
+        padding-left: 10px;
+        padding-right: 10px;
     }
 
     `.installGlobal("[data-element=property-editor]");
 
+
+    styled.css `
+    
+        & select {
+            outline: none;
+            border: none;
+            background-color: #e7e7e775;
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+
+    `.installGlobal("[data-element=expander-property-editor]")
+
 function PropertyEditor({ label = void 0, custom = void 0, ... a }, ... nodes: XNode[]) {
     if (!label && nodes.length === 1) {
         return nodes[0];
@@ -70,7 +100,9 @@ export function ExpanderPropertyEditor({
     const child = nodes.length > 1
         ? <div data-layout="vertical-flex-stretch-items">{ ... nodes }</div>
         : nodes[0];
-    return <Expander isExpanded={isExpanded}
+    return <Expander
+        data-element="expander-property-editor"
+        isExpanded={isExpanded}
         { ... a}>
         { label && <label>{label}</label>}
         { child }

package/src/site-editor/styler/Styler.ts

@@ -112,16 +112,16 @@ export const stylerVars = prepareVariables({
 
     secondaryBackground: "#00808050",
     secondaryColor: "gray",
-    secondaryAccent: "blue",
+    secondaryAccent: "#318984a8",
     secondaryAccentText: "white",
-    secondarySurface: "#00A0A080",
+    secondarySurface: "#FFFFFFA0",
     secondarySurfaceText: "gray",
 
-    tertiaryBackground: "#7b4fc596",
+    tertiaryBackground: "#cfa55c87",
     tertiaryColor: "gray",
-    tertiaryAccent: "blue",
+    tertiaryAccent: "#e17b42cf",
     tertiaryAccentText: "white",
-    tertiarySurface: "#0000A080",
+    tertiarySurface: "#FFFFFFA0",
     tertiarySurfaceText: "gray",
 });
 

package/src/site-editor/toolbars/UndoRedoToolbar.tsx

@@ -8,18 +8,12 @@ export default function UndoRedoToolbar() {
     return <EditorToolbar
         data-element="undo">
         <i
-            event-click={EditorCommand.onClick((editor) => {
-                editor.redoList.insert(editor.redoList.length, editor.htmlDocument.documentElement.innerHTML);
-                editor.htmlDocument.documentElement.innerHTML = editor.undoList.removeAt(editor.undoList.length-1);
-            })}
+            data-click-event="undo"
             title="Undo"
             data-disabled={Bind.oneWay((editor: HtmlPageEditor) => editor.undoList.length === 0)}
             class="fas fa-undo" />
         <i
-            event-click={EditorCommand.onClick((editor) => {
-                editor.undoList.insert(editor.undoList.length, editor.htmlDocument.documentElement.innerHTML);
-                editor.htmlDocument.documentElement.innerHTML = editor.redoList.removeAt(editor.redoList.length-1);
-            })}
+            data-click-event="redo"
             title="Redo"
             data-disabled={Bind.oneWay((editor: HtmlPageEditor) => editor.redoList.length === 0)}
             class="fas fa-redo" />