RTL direction support via properties panel (revised)

package.json

@@ -69,7 +69,7 @@
     "@playwright/test": "^1.43.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@svgr/rollup": "^8.1.0",

packages/form-js-editor/src/features/properties-panel/entries/DirectionEntry.js

@@ -0,0 +1,61 @@
+import { get } from 'min-dash';
+import { useService } from '../hooks';
+import { SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+import { useDirection } from '../../../../../form-js-viewer/src/render/context/DirectionContext';
+
+export function DirectionEntry(props) {
+  const { editField, field } = props;
+
+  const entries = [
+    {
+      id: 'direction',
+      component: Direction,
+      editField,
+      field,
+      isEdited: isSelectEntryEdited,
+      isDefaultVisible: (field) => field.type === 'default',
+    },
+  ];
+
+  return entries;
+}
+
+function Direction(props) {
+  const { editField, field, id } = props;
+  const { setDirection } = useDirection(); // Get the context
+
+  const debounce = useService('debounce');
+
+  const path = ['direction'];
+
+  const getValue = () => {
+    const value = get(field, path, 'ltr');
+    return value;
+  };
+
+  const setValue = (value) => {
+    setDirection(value); // Update context
+    return editField(field, path, value || 'ltr');
+  };
+
+  const getOptions = () => [
+    {
+      label: 'Left to Right',
+      value: 'ltr',
+    },
+    {
+      label: 'Right to Left',
+      value: 'rtl',
+    },
+  ];
+
+  return SelectEntry({
+    debounce,
+    element: field,
+    getValue,
+    id: 'direction',
+    label: 'Direction',
+    setValue,
+    getOptions,
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -39,3 +39,5 @@ export { RowCountEntry } from './RowCountEntry';
 export { HeadersSourceSelectEntry } from './HeadersSourceSelectEntry';
 export { ColumnsExpressionEntry } from './ColumnsExpressionEntry';
 export { StaticColumnsSourceEntry } from './StaticColumnsSourceEntry';
+export { DirectionEntry } from './DirectionEntry';
+

packages/form-js-editor/src/features/properties-panel/groups/AppearanceGroup.js

@@ -1,10 +1,13 @@
-import { AdornerEntry, GroupAppearanceEntry, LayouterAppearanceEntry } from '../entries';
+import { AdornerEntry, GroupAppearanceEntry, LayouterAppearanceEntry, DirectionEntry } from '../entries';
 
 export function AppearanceGroup(field, editField, getService) {
   const entries = [
     ...AdornerEntry({ field, editField }),
     ...GroupAppearanceEntry({ field, editField }),
     ...LayouterAppearanceEntry({ field, editField }),
+    ...LayouterAppearanceEntry({ field, editField }),
+    ...DirectionEntry({ field, editField, getService }),
+
   ];
 
   if (!entries.length) {

packages/form-js-viewer/src/render/components/form-fields/Button.js

@@ -1,17 +1,25 @@
 import { formFieldClasses } from '../Util';
-import { useSingleLineTemplateEvaluation } from '../../hooks';
+import { useSingleLineTemplateEvaluation, useService } from '../../hooks';
 
 const type = 'button';
 
 export function Button(props) {
   const { disabled, onFocus, onBlur, field } = props;
-
   const { action = 'submit' } = field;
-
   const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', { debug: true });
 
+  const form = useService('form');
+  const { schema } = form._getState();
+
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
+
   return (
-    <div class={formFieldClasses(type)}>
+    <div
+      class={formFieldClasses(type)}
+      style={{
+        direction: direction,
+        fontFamily: 'Vazirmatn, sans-serif',
+      }}>
       <button
         class="fjs-button"
         type={action}

packages/form-js-viewer/src/render/components/form-fields/Checkbox.js

@@ -1,6 +1,7 @@
 import { Description } from '../Description';
 import { Errors } from '../Errors';
 import { Label } from '../Label';
+import { useService } from '../../hooks';
 
 import { formFieldClasses } from '../Util';
 
@@ -23,9 +24,17 @@ export function Checkbox(props) {
 
   const descriptionId = `${domId}-description`;
   const errorMessageId = `${domId}-error-message`;
+  const form = useService('form');
+  const { schema } = form._getState();
+  const direction = schema?.direction || 'ltr'; // Fetch the direction value from the form schema
 
   return (
-    <div class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}>
+    <div
+      class={classNames(formFieldClasses(type, { errors, disabled, readonly }), { 'fjs-checked': value })}
+      style={{
+        direction: direction,
+        fontFamily: 'Vazirmatn, sans-serif',
+      }}>
       <Label htmlFor={domId} label={label} required={required}>
         <input
           checked={value}
@@ -40,6 +49,11 @@ export function Checkbox(props) {
           required={required}
           aria-invalid={errors.length > 0}
           aria-describedby={[descriptionId, errorMessageId].join(' ')}
+          style={{
+            display: 'flex',
+            justifyContent: direction === 'rtl' ? 'flex-end' : 'flex-start',
+            fontFamily: 'Vazirmatn, sans-serif',
+          }}
         />
       </Label>
       <Description id={descriptionId} description={description} />