1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-29 23:22:34 +01:00

Lexical: Fixed a range of issues in RTL mode

This commit is contained in:
Dan Brown 2024-09-15 16:10:46 +01:00
parent 6872eb802c
commit 5f46d71af0
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 17 additions and 5 deletions

View File

@ -15,6 +15,8 @@ export class WysiwygEditor extends Component {
this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent, { this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent, {
drawioUrl: this.getDrawIoUrl(), drawioUrl: this.getDrawIoUrl(),
pageId: Number(this.$opts.pageId), pageId: Number(this.$opts.pageId),
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.$opts.textDirection,
translations: { translations: {
imageUploadErrorText: this.$opts.imageUploadErrorText, imageUploadErrorText: this.$opts.imageUploadErrorText,
serverUploadLimitText: this.$opts.serverUploadLimitText, serverUploadLimitText: this.$opts.serverUploadLimitText,

View File

@ -42,8 +42,13 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
const editWrap = el('div', { const editWrap = el('div', {
class: 'editor-content-wrap', class: 'editor-content-wrap',
}, [editArea]); }, [editArea]);
container.append(editWrap); container.append(editWrap);
container.classList.add('editor-container'); container.classList.add('editor-container');
container.setAttribute('dir', options.textDirection);
if (options.darkMode) {
container.classList.add('editor-dark');
}
const editor = createEditor(config); const editor = createEditor(config);
editor.setRootElement(editArea); editor.setRootElement(editArea);

View File

@ -2,12 +2,12 @@
## In progress ## In progress
// - RTL/LTR support
## Main Todo ## Main Todo
- Mac: Shortcut support via command. - Mac: Shortcut support via command.
- RTL/LTR support - Translations
## Secondary Todo ## Secondary Todo

View File

@ -96,6 +96,9 @@ body.editor-is-fullscreen {
fill: #888; fill: #888;
} }
} }
.editor-container[dir="rtl"] .editor-menu-button-icon {
rotate: 180deg;
}
.editor-button-with-menu-container { .editor-button-with-menu-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -171,6 +174,9 @@ body.editor-is-fullscreen {
background-position: 98% 50%; background-position: 98% 50%;
background-size: 28px; background-size: 28px;
} }
.editor-container[dir="rtl"] .editor-format-menu-toggle {
background-position: 2% 50%;
}
.editor-format-menu .editor-dropdown-menu { .editor-format-menu .editor-dropdown-menu {
min-width: 300px; min-width: 300px;
.editor-dropdown-menu { .editor-dropdown-menu {
@ -324,9 +330,10 @@ body.editor-is-fullscreen {
.editor-node-resizer { .editor-node-resizer {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: auto;
display: inline-block; display: inline-block;
outline: 2px dashed var(--editor-color-primary); outline: 2px dashed var(--editor-color-primary);
direction: ltr;
} }
.editor-node-resizer-handle { .editor-node-resizer-handle {
position: absolute; position: absolute;

View File

@ -2,13 +2,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
overflow: hidden;
.edit-area { .edit-area {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
z-index: 10; z-index: 10;
overflow: hidden;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
} }