webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-24 07:42:07 +03:00
Code Activity

Lexical: Added some styling and tweaks for basic editors

Browse Source
This commit is contained in:
Dan Brown
2025-06-27 10:19:45 +01:00
parent 02a35b6db4
commit 054475135a
4 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/page-comments.ts
View File

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

2
resources/js/components/wysiwyg-input.ts
View File

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

2
resources/js/wysiwyg/index.ts
View File

@ -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();
}

19
resources/sass/_editor.scss
View File

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