diff --git a/app/Http/Middleware/Localization.php b/app/Http/Middleware/Localization.php
index bdbf6ccbd..528ff4047 100644
--- 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 79c73df4a..21ac6441b 100755
--- 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 9e2bb3915..a555376e8 100644
--- 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 a8a2ff175..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"},
diff --git a/resources/assets/js/services/code.js b/resources/assets/js/services/code.js
index ae63a8ce8..de863e09f 100644
--- 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 63a91c968..0063c4672 100644
--- 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 58afdfca7..38e2eae39 100644
--- 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 b3fdf11ec..e13632c1e 100644
--- 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 bf0ebbeae..2b3b00ac0 100644
--- 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