X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/134a96fa32d6e5efff8a912864c9a2a2862ddb39..be4f3d62cd37c7b83eb86bbf5fffa00d20acf2ec:/resources/assets/js/components/wysiwyg-editor.js

diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index 69286abff..048865630 100644
--- a/resources/assets/js/components/wysiwyg-editor.js
+++ b/resources/assets/js/components/wysiwyg-editor.js
@@ -370,6 +370,7 @@ class WysiwygEditor {
 
     constructor(elem) {
         this.elem = elem;
+        this.textDirection = document.getElementById('page-editor').getAttribute('text-direction');
 
         this.plugins = "image table textcolor paste link autolink fullscreen imagetools code customhr autosave lists codeeditor media";
         this.loadPlugins();
@@ -385,6 +386,14 @@ class WysiwygEditor {
             drawIoPlugin();
             this.plugins += ' drawio';
         }
+        if (this.textDirection === 'rtl') {
+            this.plugins += ' directionality'
+        }
+    }
+
+    getToolBar() {
+        const textDirPlugins = this.textDirection === 'rtl' ? 'ltr rtl' : '';
+        return `undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr drawio media | removeformat code ${textDirPlugins} fullscreen`
     }
 
     getTinyMceConfig() {
@@ -397,6 +406,7 @@ class WysiwygEditor {
             body_class: 'page-content',
             browser_spellcheck: true,
             relative_urls: false,
+            directionality : this.textDirection,
             remove_script_host: false,
             document_base_url: window.baseUrl('/'),
             statusbar: false,
@@ -407,7 +417,7 @@ class WysiwygEditor {
             valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]",
             plugins: this.plugins,
             imagetools_toolbar: 'imageoptions',
-            toolbar: "undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr drawio media | removeformat code fullscreen",
+            toolbar: this.getToolBar(),
             content_style: "body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}",
             style_formats: [
                 {title: "Header Large", format: "h2"},
@@ -483,22 +493,25 @@ class WysiwygEditor {
             },
             setup: function (editor) {
 
-                editor.on('init ExecCommand change input NodeChange ObjectResized', editorChange);
+                editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
+
+                editor.on('init', () => {
+                    editorChange();
+                    // Scroll to the content if needed.
+                    const queryParams = (new URL(window.location)).searchParams;
+                    const scrollId = queryParams.get('content-id');
+                    if (scrollId) {
+                        scrollToText(scrollId);
+                    }
+                });
 
                 function editorChange() {
                     let content = editor.getContent();
                     window.$events.emit('editor-html-change', content);
                 }
 
-                window.$events.listen('editor-html-update', html => {
-                    editor.setContent(html);
-                    editor.selection.select(editor.getBody(), true);
-                    editor.selection.collapse(false);
-                    editorChange(html);
-                });
-
-                window.$events.listen('editor-scroll-to-text', textId => {
-                    const element = editor.dom.get(textId)
+                function scrollToText(scrollId) {
+                    const element = editor.dom.get(encodeURIComponent(scrollId).replace(/!/g, '%21'));
                     if (!element) {
                         return;
                     }
@@ -508,6 +521,13 @@ class WysiwygEditor {
                     editor.selection.select(element, true);
                     editor.selection.collapse(false);
                     editor.focus();
+                }
+
+                window.$events.listen('editor-html-update', html => {
+                    editor.setContent(html);
+                    editor.selection.select(editor.getBody(), true);
+                    editor.selection.collapse(false);
+                    editorChange(html);
                 });
 
                 registerEditorShortcuts(editor);