pkp/pkp-lib#9527 Same source of the truth for dir rtl/ltr

.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: {

.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'],
 			},
 		},
 	},

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;
 }

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: {

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: {

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>