From e026f1bbb4837fb8bef79b358b023426f77b1a34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Tue, 19 Dec 2023 15:03:30 +0100
Subject: [PATCH] pkp/pkp-lib#9527 Same source of the truth for dir rtl/ltr

---
 .storybook/modes.js                           |  6 ++---
 .storybook/preview.js                         | 23 ++++++++++++-------
 src/components/Form/Form.vue                  |  4 ++--
 .../Form/fields/FieldBaseAutosuggest.vue      |  3 ++-
 .../Form/fields/FieldRichTextarea.vue         |  3 ++-
 src/components/Form/fields/FieldText.vue      |  6 ++++-
 6 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/.storybook/modes.js b/.storybook/modes.js
index 63d6dfc02..9b616bd10 100644
--- a/.storybook/modes.js
+++ b/.storybook/modes.js
@@ -1,11 +1,11 @@
 export const allModes = {
 	desktop: {
 		viewport: 'large',
-		theme: 'LTR',
+		theme: 'ltr',
 	},
-	'desktop RTL': {
+	'desktop rtl': {
 		viewport: 'large',
-		theme: 'RTL',
+		theme: 'rtl',
 	},
 	// for snapshotting scrollable areas with all content, like modals
 	desktopLargeHeight: {
diff --git a/.storybook/preview.js b/.storybook/preview.js
index f64691573..562ebfbd0 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,9 +1,10 @@
 /** @type { import('@storybook/vue3').Preview } */
 
 import {withThemeByDataAttribute} from '@storybook/addon-themes';
-
+import {DirectionProvider} from '../DirectionProvider';
 import {setup} from '@storybook/vue3';
-
+import {addons, useParameter} from '@storybook/preview-api';
+import {onUpdated, onMounted, ref, watch} from 'vue';
 import GlobalMixins from '@/mixins/global.js';
 import emitter from 'tiny-emitter/instance';
 
@@ -97,13 +98,19 @@ const preview = {
 	decorators: [
 		withThemeByDataAttribute({
 			themes: {
-				LTR: 'ltr',
-				RTL: 'RTL',
+				ltr: 'ltr',
+				rtl: 'rtl',
 			},
-			defaultTheme: 'LTR',
-			attributeName: 'dir',
-			parentSelector: 'body',
+			defaultTheme: 'ltr',
 		}),
+		(story, {globals}) => {
+			/** withThemebyDataAttribute decorator applies attribute after render, which
+			 * is too late fort tinyMCE which needs to detect it on first render correctly
+			 *
+			 */
+			document.body.setAttribute('dir', globals.theme);
+			return story();
+		},
 		(story) => ({
 			components: {story},
 			template: '<div style="padding: 10px;"><story /></div>',
@@ -162,7 +169,7 @@ const preview = {
 		chromatic: {
 			modes: {
 				desktop: allModes['desktop'],
-				'desktop RTL': allModes['desktop RTL'],
+				'desktop rtl': allModes['desktop rtl'],
 			},
 		},
 	},
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 1cb3b1bc1..52d5e0070 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -647,11 +647,11 @@ export default {
 }
 
 .pkpFormPage {
-	position: absolute;
-	left: -9999px;
+	display: none;
 }
 
 .pkpFormPage--current {
+	display: block;
 	position: relative;
 	left: auto;
 }
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index ecfe89882..2d21d0d8f 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -316,7 +316,8 @@ export default {
 		 * Is this field in a right-to-left language
 		 */
 		isRTL() {
-			return $.pkp.app.rtlLocales.includes(this.localeKey);
+			var direction = document.body.getAttribute('dir');
+			return direction === 'rtl';
 		},
 	},
 	methods: {
diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
index b063cb2fc..ff0c21ccc 100644
--- a/src/components/Form/fields/FieldRichTextarea.vue
+++ b/src/components/Form/fields/FieldRichTextarea.vue
@@ -251,7 +251,8 @@ export default {
 		 * Is this field for language in a RTL language?
 		 */
 		isRTL() {
-			return $.pkp.app.rtlLocales.includes(this.localeKey);
+			const direction = document.body.getAttribute('dir');
+			return direction === 'rtl';
 		},
 	},
 	watch: {
diff --git a/src/components/Form/fields/FieldText.vue b/src/components/Form/fields/FieldText.vue
index eb65194f6..4d6575258 100644
--- a/src/components/Form/fields/FieldText.vue
+++ b/src/components/Form/fields/FieldText.vue
@@ -122,7 +122,7 @@ export default {
 		 */
 		classes() {
 			let classes = ['pkpFormField--size' + this.size];
-			if ($.pkp.app.rtlLocales.includes(this.localeKey)) {
+			if (this.isRTL()) {
 				classes.push('pkpFormField--text--rtl');
 			}
 			return classes;
@@ -207,6 +207,10 @@ export default {
 		setFocus() {
 			this.$refs.input.focus();
 		},
+		isRTL() {
+			var direction = document.body.getAttribute('dir');
+			return direction === 'rtl';
+		},
 	},
 };
 </script>