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, '
', {
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.wysiwygTextDirection,
translations: (window as unknown as Record).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;