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:
parent
6872eb802c
commit
5f46d71af0
@ -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,
|
||||||
|
@ -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);
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user