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,60 @@
+import { get } from 'min-dash';
+import { useService, useDirection } from '../hooks';
+import { SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
+
+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 } = props;
+  const { setDirection } = useDirection();
+
+  const debounce = useService('debounce');
+
+  const path = ['direction'];
+
+  const getValue = () => {
+    const value = get(field, path, 'ltr');
+    return value;
+  };
+
+  const setValue = (value) => {
+    setDirection(value);
+    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,4 @@ 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,11 @@
-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 }),
+    ...DirectionEntry({ field, editField, getService }),
   ];
 
   if (!entries.length) {

packages/form-js-editor/src/features/properties-panel/hooks/DirectionContext.js

@@ -0,0 +1,26 @@
+import { useContext } from 'preact/hooks';
+import { createContext } from 'preact';
+
+const DirectionContext = createContext({
+  direction: 'ltr',
+  setDirection: (direction) => {},
+});
+
+export function useDirection() {
+  const context = useContext(DirectionContext);
+  if (!context) {
+    throw new Error('useDirection must be used within a DirectionProvider');
+  }
+  return context;
+}
+
+// // hooks/useDirection.js
+// import { useContext } from 'preact/hooks';
+// import { FormContext } from '../context/FormContext'; // Adjust the path as necessary
+
+// export function useDirection() {
+//   const form = useContext(FormContext);
+//   const { schema } = form._getState();
+//   const direction = schema?.direction || 'ltr';
+//   return direction;
+// }

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

@@ -1,2 +1,3 @@
 export { useVariables } from './useVariables';
 export { useService } from './usePropertiesPanelService';
+export { useDirection } from './DirectionContext';

packages/form-js-editor/src/features/repeat-render/EditorRepeatRenderManager.js

@@ -1,3 +1,40 @@
+// import RepeatSvg from '../../render/components/icons/Repeat.svg';
+
+// export class EditorRepeatRenderManager {
+//   constructor(formFields, formFieldRegistry) {
+//     this._formFields = formFields;
+//     this._formFieldRegistry = formFieldRegistry;
+//     this.RepeatFooter = this.RepeatFooter.bind(this);
+//   }
+
+//   /**
+//    * Checks whether a field should be repeatable.
+//    *
+//    * @param {string} id - The id of the field to check
+//    * @returns {boolean} - True if repeatable, false otherwise
+//    */
+//   isFieldRepeating(id) {
+//     if (!id) {
+//       return false;
+//     }
+
+//     const formField = this._formFieldRegistry.get(id);
+//     const formFieldDefinition = this._formFields.get(formField.type);
+//     return formFieldDefinition.config.repeatable && formField.isRepeating;
+//   }
+
+//   RepeatFooter() {
+//     return (
+//       <div className="fjs-repeat-render-footer">
+//         <RepeatSvg />
+//         <span>Repeatable</span>
+//       </div>
+//     );
+//   }
+// }
+
+// EditorRepeatRenderManager.$inject = ['formFields', 'formFieldRegistry'];
+
 import RepeatSvg from '../../render/components/icons/Repeat.svg';
 
 export class EditorRepeatRenderManager {
@@ -23,10 +60,12 @@ export class EditorRepeatRenderManager {
     return formFieldDefinition.config.repeatable && formField.isRepeating;
   }
 
-  RepeatFooter() {
+  RepeatFooter({ direction }) {
     return (
-      <div className="fjs-repeat-render-footer">
-        <RepeatSvg />
+      <div className="fjs-repeat-render-footer" style={{ direction: direction }}>
+        <RepeatSvg
+          style={{ marginRight: direction === 'ltr' ? '8px' : '8px', marginLeft: direction === 'rtl' ? '8px' : '8px' }}
+        />
         <span>Repeatable</span>
       </div>
     );