Lexical: Added some styling and tweaks for basic editors

Author: ssddanbrown

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.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,

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;
-        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;
 

resources/js/wysiwyg/index.ts

@@ -144,8 +144,8 @@ export class SimpleWysiwygEditorInterface {
     }
 
     remove() {
-        this.context.editorDOM.remove();
         this.context.manager.teardown();
+        this.context.containerDOM.remove();
         if (this.editorListenerTeardown) {
             this.editorListenerTeardown();
         }

resources/sass/_editor.scss

@@ -52,6 +52,25 @@ body.editor-is-fullscreen {
   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;