From: Dan Brown <redacted>
Date: Fri, 27 Jun 2025 09:19:45 +0000 (+0100)
Subject: Lexical: Added some styling and tweaks for basic editors
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/054475135aa6e35f7f50549c34815b190bf93b17

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 e988343ca..a1eeda1f9 100644
--- 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.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,
diff --git a/resources/js/components/wysiwyg-input.ts b/resources/js/components/wysiwyg-input.ts
index 85ebceab9..1d914adb9 100644
--- 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;
-        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;
 
diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index b9770219d..f572f9de5 100644
--- a/resources/js/wysiwyg/index.ts
+++ b/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();
         }
diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 633fa78a6..de43540a3 100644
--- a/resources/sass/_editor.scss
+++ b/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;