Added base RTL support

For #939

- Adds way to check if current language is RTL via config system.
- Made TinyMCE default direction be based on current language text
direction.
- Fixed bullet points to be RTL compatible.
- Set page content body to have direction based on content.

diff --git a/app/Http/Middleware/Localization.php b/app/Http/Middleware/Localization.php
index bdbf6ccbd9c57832cb29c560770900683e5c7938..528ff40478dbeb92f436ee747b0cb9f07b9071d8 100644 (file)
--- a/app/Http/Middleware/Localization.php
+++ b/app/Http/Middleware/Localization.php
@@ -6,6 +6,9 @@ use Illuminate\Http\Request;
 
 class Localization
 {
+
+    protected $rtlLocales = ['ar'];
+
     /**
      * Handle an incoming request.
      *
@@ -23,6 +26,11 @@ class Localization
             $locale = setting()->getUser(user(), 'language', $defaultLang);
         }
 
+        // Set text direction
+        if (in_array($locale, $this->rtlLocales)) {
+            config()->set('app.rtl', true);
+        }
+
         app()->setLocale($locale);
         Carbon::setLocale($locale);
         return $next($request);

diff --git a/config/app.php b/config/app.php
index 79c73df4aff4a62408adedfc584a17cdb86cf08a..21ac6441b625ded577e03bcb83d1b9328428cc9a 100755 (executable)
--- a/config/app.php
+++ b/config/app.php
@@ -79,6 +79,19 @@ return [
     'locale' => env('APP_LANG', 'en'),
     'locales' => ['en', 'ar', 'de', 'es', 'es_AR', 'fr', 'nl', 'pt_BR', 'sk', 'sv', 'ja', 'pl', 'it', 'ru', 'zh_CN', 'zh_TW'],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Right-to-left text control
+    |--------------------------------------------------------------------------
+    |
+    | Right-to-left text control is set to false by default since English
+    | is the primary supported application but this may be dynamically
+    | altered by the applications localization system.
+    |
+    */
+
+    'rtl' => false,
+
     /*
     |--------------------------------------------------------------------------
     | Auto-detect the locale for public users

diff --git a/resources/assets/js/components/markdown-editor.js b/resources/assets/js/components/markdown-editor.js
index 9e2bb3915e4dc3a985b8a2e88da58cc7aa047847..a555376e8eaca5094620b3c3fe03a68824c8acca 100644 (file)
--- a/resources/assets/js/components/markdown-editor.js
+++ b/resources/assets/js/components/markdown-editor.js
@@ -8,6 +8,7 @@ class MarkdownEditor {
 
     constructor(elem) {
         this.elem = elem;
+        this.textDirection = document.getElementById('page-editor').getAttribute('text-direction');
         this.markdown = new MarkdownIt({html: true});
         this.markdown.use(mdTasksLists, {label: true});
 
@@ -98,6 +99,9 @@ class MarkdownEditor {
 
     codeMirrorSetup() {
         let cm = this.cm;
+        // Text direction
+        // cm.setOption('direction', this.textDirection);
+        cm.setOption('direction', 'ltr'); // Will force to remain as ltr for now due to issues when HTML is in editor.
         // Custom key commands
         let metaKey = code.getMetaKey();
         const extraKeys = {};

diff --git a/resources/assets/js/components/wysiwyg-editor.js b/resources/assets/js/components/wysiwyg-editor.js
index a8a2ff175ed0c732b38cbe06be3fa394031c4694..04886563024f59be5f0777bbd1fbdcc407e146fa 100644 (file)
--- 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"},

diff --git a/resources/assets/js/services/code.js b/resources/assets/js/services/code.js
index ae63a8ce869a766f66abdf8d9357936351c27006..de863e09fee8ae692895e6f34a0990d161b76285 100644 (file)
--- a/resources/assets/js/services/code.js
+++ b/resources/assets/js/services/code.js
@@ -157,6 +157,7 @@ function wysiwygView(elem) {
 
     newWrap.className = 'CodeMirrorContainer';
     newWrap.setAttribute('data-lang', lang);
+    newWrap.setAttribute('dir', 'ltr');
     newTextArea.style.display = 'none';
     elem.parentNode.replaceChild(newWrap, elem);
 

diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 63a91c968b10c1112a38785dfe76964f43b9274a..0063c4672cca2c9d257c28e57c449b483c74f499 100644 (file)
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -351,6 +351,7 @@ ul, ol {
 }
 ul {
   padding-left: $-m * 1.3;
+  padding-right: $-m * 1.3;
   list-style: disc;
   ul {
     list-style: circle;
@@ -365,6 +366,7 @@ ul {
 ol {
   list-style: decimal;
   padding-left: $-m * 2;
+  padding-right: $-m * 2;
 }
 
 li.checkbox-item, li.task-list-item {

diff --git a/resources/views/pages/form.blade.php b/resources/views/pages/form.blade.php
index 58afdfca7260e53569d92f845b4986cb43123f81..38e2eae39a4ea7d9eea7bed8a167d44313754fbc 100644 (file)
--- a/resources/views/pages/form.blade.php
+++ b/resources/views/pages/form.blade.php
@@ -4,6 +4,7 @@
      drawio-enabled="{{ config('services.drawio') ? 'true' : 'false' }}"
      editor-type="{{ setting('app-editor') }}"
      page-id="{{ $model->id or 0 }}"
+     text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"
      page-new-draft="{{ $model->draft or 0 }}"
      page-update-draft="{{ $model->isDraft or 0 }}">
 

diff --git a/resources/views/pages/page-display.blade.php b/resources/views/pages/page-display.blade.php
index b3fdf11ece5c2df60f89ba9c08e1054b017f6e75..e13632c1ec86a41b3c1818be59add6b46682679f 100644 (file)
--- a/resources/views/pages/page-display.blade.php
+++ b/resources/views/pages/page-display.blade.php
@@ -1,4 +1,4 @@
-<div>
+<div dir="auto">
 
     <h1 class="break-text" v-pre id="bkmrk-page-title">{{$page->name}}</h1>
 

diff --git a/tests/LanguageTest.php b/tests/LanguageTest.php
index bf0ebbeaea37f06a1700eca7f58d00b0674d4b4c..2b3b00ac098360d34a2691323b47487ff6d9e824 100644 (file)
--- a/tests/LanguageTest.php
+++ b/tests/LanguageTest.php
@@ -72,4 +72,13 @@ class LanguageTest extends TestCase
         }
     }
 
+    public function test_rtl_config_set_if_lang_is_rtl()
+    {
+        $this->asEditor();
+        $this->assertFalse(config('app.rtl'), "App RTL config should be false by default");
+        setting()->putUser($this->getEditor(), 'language', 'ar');
+        $this->get('/');
+        $this->assertTrue(config('app.rtl'), "App RTL config should have been set to true by middleware");
+    }
+
 }
\ No newline at end of file