Lexical: Added some styling and tweaks for basic editors

diff --git a/resources/js/components/page-comments.ts b/resources/js/components/page-comments.ts
index e988343cabbfa08c06bd75c6b9dfe8cccac16f69..a1eeda1f9d9c28ec7e5f0cf00553b3ff5300cde8 100644 (file)
--- a/resources/js/components/page-comments.ts
+++ b/resources/js/components/page-comments.ts
@@ -200,7 +200,7 @@ export class PageComments extends Component {
         this.formInput.parentElement?.appendChild(container);
         this.formInput.hidden = true;
 
         this.formInput.parentElement?.appendChild(container);
         this.formInput.hidden = true;
 

-        this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, '', {
+        this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, '<p></p>', {

             darkMode: document.documentElement.classList.contains('dark-mode'),
             textDirection: this.wysiwygTextDirection,
             translations: (window as unknown as Record<string, Object>).editor_translations,
             darkMode: document.documentElement.classList.contains('dark-mode'),
             textDirection: this.wysiwygTextDirection,
             translations: (window as unknown as Record<string, Object>).editor_translations,

diff --git a/resources/js/components/wysiwyg-input.ts b/resources/js/components/wysiwyg-input.ts
index 85ebceab9945efa2eb4d9188eacbcb501733f4a8..1d914adb9666c122bef7040bc427c3ba52aa5d75 100644 (file)
--- a/resources/js/components/wysiwyg-input.ts
+++ b/resources/js/components/wysiwyg-input.ts
@@ -13,7 +13,7 @@ export class WysiwygInput extends Component {
 
         type WysiwygModule = typeof import('../wysiwyg');
         const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
 
         type WysiwygModule = typeof import('../wysiwyg');
         const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;

-        const container = el('div', {class: 'comment-editor-container'});
+        const container = el('div', {class: 'basic-editor-container'});

         this.elem.parentElement?.appendChild(container);
         this.elem.hidden = true;
 
         this.elem.parentElement?.appendChild(container);
         this.elem.hidden = true;
 

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index b9770219de9b103ee53a3a12b676ef03797926a2..f572f9de5ec9da58fc890b93b8efced42de8ab7d 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -144,8 +144,8 @@ export class SimpleWysiwygEditorInterface {
     }
 
     remove() {
     }
 
     remove() {

-        this.context.editorDOM.remove();

         this.context.manager.teardown();
         this.context.manager.teardown();

+        this.context.containerDOM.remove();

         if (this.editorListenerTeardown) {
             this.editorListenerTeardown();
         }
         if (this.editorListenerTeardown) {
             this.editorListenerTeardown();
         }

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 633fa78a6b19e0050bb00ea6183c07e14292cc9e..de43540a31d80b5a9d5cc3ee2ba1f99db270c227 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -52,6 +52,25 @@ body.editor-is-fullscreen {
   flex: 1;
 }
 
   flex: 1;
 }
 

+// Variation specific styles
+.comment-editor-container,
+.basic-editor-container {
+  border-left: 1px solid #DDD;
+  border-right: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  border-radius: 3px;
+  @include mixins.lightDark(border-color, #DDD, #000);
+
+  .editor-toolbar-main {
+    border-radius: 3px 3px 0 0;
+    justify-content: end;
+  }
+}
+
+.basic-editor-container .editor-content-area {
+  padding-bottom: 0;
+}
+

 // Buttons
 .editor-button {
   font-size: 12px;
 // Buttons
 .editor-button {
   font-size: 12px;