Lexical: Added initial form/modal styles

resources/icons/close.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>

resources/js/wysiwyg/index.ts

@@ -49,6 +49,9 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
     setEditorContentFromHtml(editor, htmlContent);
 
     const debugView = document.getElementById('lexical-debug');
+    if (debugView) {
+        debugView.hidden = true;
+    }
     editor.registerUpdateListener(({editorState}) => {
         console.log('editorState', editorState.toJSON());
         if (debugView) {

resources/js/wysiwyg/ui/framework/modals.ts

@@ -1,7 +1,7 @@
 import {EditorForm, EditorFormDefinition} from "./forms";
 import {el} from "../../helpers";
 import {EditorContainerUiElement} from "./core";
-
+import closeIcon from "@icons/close.svg";
 
 export interface EditorModalDefinition {
     title: string;
@@ -37,7 +37,12 @@ export class EditorFormModal extends EditorContainerUiElement {
     }
 
     protected buildDOM(): HTMLElement {
-        const closeButton = el('button', {class: 'editor-modal-close', type: 'button', title: this.trans('Close')}, ['x']);
+        const closeButton = el('button', {
+            class: 'editor-modal-close',
+            type: 'button',
+            title: this.trans('Close'),
+        });
+        closeButton.innerHTML = closeIcon;
         closeButton.addEventListener('click', this.hide.bind(this));
 
         const modal = el('div', {class: 'editor-modal editor-form-modal'}, [

resources/js/wysiwyg/ui/toolbars.ts

@@ -87,17 +87,17 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
             new EditorButton(fullscreen),
 
             // Test
-            new EditorButton({
+            // new EditorButton({
-                label: 'Test button',
+            //     label: 'Test button',
-                action(context: EditorUiContext) {
+            //     action(context: EditorUiContext) {
-                    context.editor.update(() => {
+            //         context.editor.update(() => {
-                        // Do stuff
+            //             // Do stuff
-                    });
+            //         });
-                },
+            //     },
-                isActive() {
+            //     isActive() {
-                    return false;
+            //         return false;
-                }
+            //     }
-            })
+            // })
         ]),
     ]);
 }

resources/sass/_editor.scss

@@ -176,17 +176,38 @@ body.editor-is-fullscreen {
 }
 .editor-modal {
   background-color: #FFF;
-  border: 1px solid #DDD;
-  padding: 1rem;
   border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
 }
 .editor-modal-header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 1rem;
+  align-items: stretch;
+  background-color: var(--color-primary);
+  color: #FFF;
 }
 .editor-modal-title {
-  font-weight: 700;
+  padding: 8px $-m;
+}
+.editor-modal-close {
+  color: #FFF;
+  padding: 8px $-m;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  }
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: currentColor;
+    display: block;
+  }
+}
+.editor-modal-body {
+  padding: $-m;
 }
 
 // Specific UI elements
@@ -293,6 +314,81 @@ body.editor-is-fullscreen {
   }
 }
 
+// Editor form elements
+.editor-form-field-wrapper {
+  margin-bottom: .5rem;
+}
+.editor-form-field-input {
+  display: block;
+  width: 100%;
+  min-width: 250px;
+  border: 1px solid #DDD;
+  padding: .5rem;
+  border-radius: 4px;
+  color: #444;
+}
+textarea.editor-form-field-input {
+  font-family: var(--font-code);
+  width: 350px;
+  height: 250px;
+  font-size: 12px;
+}
+.editor-form-field-label {
+  color: #444;
+  font-weight: 700;
+  font-size: 12px;
+}
+.editor-form-actions {
+  display: flex;
+  justify-content: end;
+  gap: $-s;
+  margin-top: $-m;
+}
+.editor-form-actions > button {
+  display: block;
+  font-size: 0.85rem;
+  line-height: 1.4em;
+  padding: $-xs*1.3 $-m;
+  font-weight: 400;
+  border-radius: 4px;
+  cursor: pointer;
+  box-shadow: none;
+  &:focus {
+    outline: 1px dotted currentColor;
+    outline-offset: -$-xs;
+    box-shadow: none;
+    filter: brightness(90%);
+  }
+}
+.editor-form-action-primary {
+  background-color: var(--color-primary);
+  color: #FFF;
+  border: 1px solid var(--color-primary);
+  &:hover {
+    @include lightDark(box-shadow, $bs-light, $bs-dark);
+    filter: brightness(110%);
+  }
+}
+.editor-form-action-secondary {
+  border: 1px solid;
+  @include lightDark(border-color, #CCC, #666);
+  @include lightDark(color, #666, #AAA);
+  &:hover, &:focus, &:active {
+    @include lightDark(color, #444, #BBB);
+    border: 1px solid #CCC;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+    background-color: #F2F2F2;
+    @include lightDark(background-color, #f8f8f8, #444);
+    filter: none;
+  }
+  &:active {
+    border-color: #BBB;
+    background-color: #DDD;
+    color: #666;
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
+  }
+}
+
 // Editor theme styles
 .editor-theme-bold {
   font-weight: bold;