@silexlabs/silex 3.0.0-alpha.151 → 3.0.0-alpha.153

package/dist/client/client/grapesjs/index.d.ts

@@ -1,5 +1,9 @@
 import { Editor, EditorConfig } from 'grapesjs';
 import { ClientConfig } from '../config';
+export declare const cmdToggleLayers = "open-layers";
+export declare const cmdToggleBlocks = "open-blocks";
+export declare const cmdToggleSymbols = "open-symbols";
+export declare const cmdToggleNotifications = "open-notifications";
 export declare function getEditorConfig(config: ClientConfig): EditorConfig;
 export declare function initEditor(config: EditorConfig): Promise<Editor>;
 export declare function getEditor(): Editor;

package/dist/client/client/grapesjs/keymaps.d.ts

@@ -0,0 +1,71 @@
+import { Editor, PluginOptions } from 'grapesjs';
+/**
+ * Escapes the current context in this order : modal, Publish dialog, left panel.
+ * If none of these are open, it selects the body.
+ * @param editor The editor.
+ */
+declare function escapeContext(editor: Editor): void;
+export declare const cmdSelectBody = "select-body";
+export declare let prefixKey: string;
+export declare const defaultKms: {
+    kmOpenSettings: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmOpenPublish: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmOpenFonts: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmPreviewMode: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+        options: {
+            prevent: boolean;
+        };
+    };
+    kmLayers: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmBlocks: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmNotifications: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmPages: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmSymbols: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmClosePanel: {
+        id: string;
+        keys: string;
+        handler: typeof escapeContext;
+    };
+    kmSelectBody: {
+        id: string;
+        keys: string;
+        handler: string;
+    };
+};
+export declare function keymapsPlugin(editor: Editor, opts: PluginOptions): void;
+export {};

package/dist/client/client/grapesjs/project-bar.d.ts

@@ -1,8 +1,11 @@
 import { Editor } from 'grapesjs';
+export declare const PROJECT_BAR_PANEL_ID = "project-bar-panel";
+export declare const containerPanelId = "project-bar-container";
 export interface PanelObject {
     command: string | ((editor: Editor) => void);
     text: string;
     className: string;
+    name?: string;
     attributes: {
         title?: string;
         containerClassName?: string;
@@ -12,6 +15,7 @@ export interface PanelObject {
         text: string;
         className: string;
     }[];
+    onClick?: (editor: Editor) => void;
 }
 export declare const projectBarPlugin: (editor: any, opts: any) => void;
 export declare function addButton(editor: Editor, panel: PanelObject): void;

package/dist/client/client/utils.d.ts

@@ -4,3 +4,10 @@ export declare function onAll(editor: Editor, cbk: (c: Component) => void): void
  * SHA256 hash a string
  */
 export declare function hashString(str: string): Promise<string>;
+/**
+ * Select the <body> element in the editor.
+ * @param editor The GrapesJS editor.
+ */
+export declare function selectBody(editor: Editor): void;
+export declare function isTextOrInputField(element: HTMLElement): boolean;
+export declare function titleCase(str: string, sep?: string): string;

package/dist/client/css/admin.css

@@ -4286,6 +4286,10 @@ form.silex-form .silex-form__group.col2 {
   width: 35px;
   box-shadow: none;
 }
+.gjs-pn-project-bar-panel .gjs-pn-buttons .gjs-pn-btn.project-bar__dirty {
+  background-color: #A291FF;
+  color: white;
+}
 .gjs-pn-project-bar-panel .logo {
   background-image: url("../assets/logo-silex-small.png");
   background-repeat: no-repeat;
@@ -4338,14 +4342,8 @@ form.silex-form .silex-form__group.col2 {
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button {
   cursor: pointer;
-  font-size: large;
-  font-weight: 400;
 }
 .gjs-pn-project-bar-container .project-bar__panel-header .project-bar__panel-header-button span {
-  position: relative;
-  left: -2px;
-  top: -11px;
-  font-weight: bolder;
   background-color: #444;
   border-radius: 100%;
   display: inline-block;
@@ -4551,6 +4549,142 @@ form.silex-form .silex-form__group.col2 {
   border-right-color: #ddd;
 }
 
+.gjs-editor .gjs-notification {
+  max-height: initial;
+  text-align: left;
+}
+
+.gjs-editor .gjs-notification,
+.gjs-editor .gjs-notification .gjs-sm-header,
+.gjs-editor .gjs-notification .gjs-notification__item,
+.gjs-editor .gjs-notification .gjs-notification__group > details,
+.gjs-editor .gjs-notification .gjs-notification__group > details > ul,
+.gjs-editor .gjs-notification .gjs-notification__group > details > summary,
+.gjs-editor .gjs-notification .gjs-notification__group {
+  padding: 0;
+  margin: 0;
+}
+
+.gjs-editor .gjs-notification .gjs-notification__group,
+.gjs-editor .gjs-notification .gjs-notification__item {
+  margin: 10px 0;
+  padding: 10px 0;
+}
+
+.gjs-editor .gjs-notification .gjs-notification__group .gjs-notification__item {
+  margin-left: 10px;
+}
+
+#publish-dialog header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 0.95rem;
+  transition: 200ms;
+}
+#publish-dialog header svg {
+  width: 1.4rem;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+#publish-dialog header button {
+  border: solid 2px #484848;
+  border-radius: 50px;
+  padding: 4px 9px;
+  background-color: #444;
+  color: #ddd;
+}
+#publish-dialog header .connector {
+  color: #A291FF;
+}
+#publish-dialog main {
+  max-height: none;
+}
+#publish-dialog main .buttons {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-row-gap: 0.5rem;
+  transition: 200ms;
+}
+#publish-dialog main svg {
+  height: 0.9rem;
+  margin-left: 5px;
+}
+#publish-dialog main h3 {
+  margin: 0;
+}
+#publish-dialog main p {
+  margin-top: 0;
+}
+#publish-dialog main details {
+  border-radius: 5px;
+  border: solid #222 2px;
+  background-color: #222;
+  margin: 10px 0;
+  padding: 10px;
+  word-break: break-word;
+  overflow-y: auto;
+  max-height: 200px;
+  position: relative;
+}
+#publish-dialog main details pre {
+  word-break: break-word;
+}
+#publish-dialog main details summary {
+  font-size: 0.95rem;
+  opacity: 0.7;
+}
+#publish-dialog main details .logs {
+  font-family: monospace;
+}
+#publish-dialog main details .logs * {
+  margin: 0;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-radius: 5px;
+  list-style: "-";
+}
+#publish-dialog main details .logs *:hover {
+  transition: 200ms;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+#publish-dialog main details:hover {
+  transition: 200ms;
+  border-color: #575757;
+  background-color: #292929;
+}
+#publish-dialog main details * {
+  transition: 200ms;
+}
+#publish-dialog main details[open] summary {
+  margin-bottom: 10px;
+}
+#publish-dialog main .silex-button {
+  padding: 10px;
+  width: 100%;
+  transition: 200ms;
+}
+#publish-dialog main .silex-button:hover {
+  filter: brightness(1.2);
+}
+#publish-dialog main .silex-button:active {
+  filter: brightness(0.8);
+}
+#publish-dialog main .silex-button--primary {
+  background-color: #8873FE;
+}
+
+.gjs-suggest {
+  max-height: 30vh;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-top: 7px;
+  border-bottom: solid #333333 7px;
+}
+
 #gjs {
   flex: 1 1 auto;
 }
@@ -4659,6 +4793,42 @@ form.silex-form .silex-form__group.col2 {
   right: var(--viewsPanelWidth);
 }
 
+.top-style-section {
+  position: sticky;
+  top: -1px; /* Fixes a visual gap on the top */
+  border-bottom: solid #575757 1px;
+  background-color: #333333;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3764705882);
+  z-index: 999;
+}
+
+.gjs-clm-label-sel {
+  opacity: 0.5;
+}
+
+.gjs-clm-sels-info {
+  padding: 7px 0;
+  margin: 0;
+  overflow-x: scroll;
+}
+
+.gjs-clm-sel-rule {
+  word-break: break-all;
+}
+
+#gjs-clm-tags-field.gjs-field {
+  margin: 0;
+}
+
+.gjs-clm-tags {
+  padding-top: 7px;
+  padding-bottom: 0;
+}
+
+#gjs-clm-up {
+  margin-top: 0;
+}
+
 /*
 */
 .gjs-editor-cont .fa {