apostrophe 4.26.0 → 4.27.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 4.27.0-alpha.1
+
+### Adds
+
+- In `@apostrophecms/i18n` add `direction` property to locale configuration to support RTL languages (e.g., `he`, `ar`), `slugDirection` option to control default direction of slug fields. Add `direction` property in the schema field definitions to override and validate text direction (supports `ltr` and `rtl`) of input fields. Note that the admin UI layout and labels overall are still LTR only for now, but these changes accommodate editing RTL locale content within that. For best results the feature should be combined with `adminLocales` and `defaultAdminLocale` module options, e.g. the admin UI itself should remain in English or another LTR language for now.
+
+## 4.26.1-alpha.1
+
+### Fixes
+
+- Fix a bug where rich text images and permalinks are not properly rendered in public external front (e.g. Astro) views.
+
 ## 4.26.0
 
 ### Adds

package/lib/locales.js

@@ -10,6 +10,16 @@ module.exports = {
       const hostname = options.hostname || '__none';
       const prefix = options.prefix || '__none';
       const key = `${hostname}:${prefix}`;
+      const direction = options.direction;
+
+      // Note that default `ltr` directions should have been set
+      // already by the `getLocales` method in the i18n module.
+      if ([ 'ltr', 'rtl' ].indexOf(direction) === -1) {
+        throw new Error(stripIndent`
+          The locale "${name}" has an invalid direction option "${direction || 'undefined'}".
+          The direction option must be either "ltr" (left to right) or "rtl" (right to left).
+        `);
+      }
 
       hostnamesCount += options.hostname ? 1 : 0;
 

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue

@@ -10,7 +10,7 @@
     />
     <nav
       ref="adminBar"
-      class="apos-admin-bar"
+      :class="classes"
       role="menubar"
       aria-label="Apostrophe Admin Bar"
     >
@@ -36,7 +36,9 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
 
 export default {
   name: 'TheAposAdminBar',
@@ -48,6 +50,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(useModalStore, [ 'getAdminDirectionClass' ]),
     menuItems() {
       return this.items.filter(item => !item.options?.user);
     },
@@ -59,6 +62,13 @@ export default {
     },
     bars() {
       return this.moduleOptions.bars;
+    },
+    classes() {
+      const directionClass = this.getAdminDirectionClass();
+      return {
+        'apos-admin-bar': true,
+        [directionClass]: !!directionClass
+      };
     }
   },
   mounted() {

package/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -149,6 +149,7 @@
         :is="widgetEditorComponent(widget.type)"
         v-if="isContextual && !foreign"
         :key="generation"
+        :class="adminContentDirectionClass"
         :options="widgetOptions"
         :type="widget.type"
         :model-value="widget"
@@ -163,6 +164,7 @@
         v-else
         :id="widget._id"
         :key="`${generation}-preview`"
+        :class="adminContentDirectionClass"
         :options="widgetOptions"
         :type="widget.type"
         :area-field-id="fieldId"
@@ -209,6 +211,8 @@
 import { mapState, mapActions } from 'pinia';
 import { useWidgetStore } from 'Modules/@apostrophecms/ui/stores/widget';
 import { useBreakpointPreviewStore } from 'Modules/@apostrophecms/ui/stores/breakpointPreview.js';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal.js';
+
 export default {
   name: 'AposAreaWidget',
   props: {
@@ -356,6 +360,9 @@ export default {
       'emphasizedWidgets'
     ]),
     ...mapState(useBreakpointPreviewStore, { breakpointPreviewMode: 'mode' }),
+    adminContentDirectionClass() {
+      return this.getAdminContentDirectionClass();
+    },
     // Passed only to the preview layer (custom preview components).
     followingValuesWithParent() {
       return Object.entries(this.followingValues || {})
@@ -440,7 +447,10 @@ export default {
     },
     labelsClasses() {
       return {
-        [this.classes.show]: this.isHovered || this.isFocused || this.isEmphasized
+        [this.classes.show]: this.isHovered || this.isFocused || this.isEmphasized,
+        // Force LTR for breadcrumbs for now so that nested AreaWidgets
+        // behave properly.
+        'apos-ltr': true
       };
     },
     addClasses() {
@@ -544,6 +554,7 @@ export default {
   },
   methods: {
     ...mapActions(useWidgetStore, [ 'setFocusedWidget', 'setHoveredWidget' ]),
+    ...mapActions(useModalStore, [ 'getAdminContentDirectionClass' ]),
     // Emits same actions as the native operations,
     // e.g ('edit', { index }), ('remove', { index }), etc.
     onOperation({ name, payload }) {

package/modules/@apostrophecms/box-field/index.js

@@ -64,6 +64,10 @@ module.exports = {
             const defProps = [ 'top', 'right', 'bottom', 'left' ];
             let defMin = 0;
 
+            if (field.direction && ![ 'ltr', 'rtl' ].includes(field.direction)) {
+              fail('The direction property must be "ltr" or "rtl" if specified');
+            }
+
             if (field.max && typeof field.max !== 'number') {
               fail('Property "max" must be a number');
             }

package/modules/@apostrophecms/box-field/ui/apos/components/AposInputBox.vue

@@ -16,7 +16,7 @@
             v-model="shorthand"
             type="number"
             placeholder="--"
-            class="apos-input-box__shorthand-input apos-input apos-input--number"
+            :class="classesShorthand"
             data-apos-test="box-input-all"
             :aria-label="`${$t(field.label)} ${$t('apostrophe:boxFieldAriaLabelAll')}`"
             :disabled="field.readOnly || field.disabled || mode === 'individual'"
@@ -96,7 +96,7 @@
               class="apos-input-box__individual-input apos-input apos-input--number"
               :data-apos-test="`box-input-side-${side}`"
               :aria-label="`${$t(field.label)} ${$t('apostrophe:boxFieldAriaLabelIndividual', { side })}`"
-              :class="`apos-input-box__individual-input--${side}`"
+              :class="[ `apos-input-box__individual-input--${side}`, ...classesIndividual ]"
               :disabled="field.readOnly || field.disabled"
               :min="field.min"
               :max="field.max ? field.max : null"

package/modules/@apostrophecms/box-field/ui/apos/logic/AposInputBox.js

@@ -1,8 +1,9 @@
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import AposFieldDirectionMixin from 'Modules/@apostrophecms/schema/mixins/AposFieldDirection.js';
 
 export default {
   name: 'AposInputBox',
-  mixins: [ AposInputMixin ],
+  mixins: [ AposInputMixin, AposFieldDirectionMixin ],
   emits: [ 'return' ],
   props: {
   },
@@ -38,11 +39,18 @@ export default {
     tabindex () {
       return this.field.disableFocus ? '-1' : '0';
     },
-    classes() {
+    classesShorthand() {
       return [
+        'apos-input-box__shorthand-input',
         'apos-input',
-        'apos-input--box'
-      ];
+        'apos-input--number',
+        this.directionClass
+      ].filter(Boolean);
+    },
+    classesIndividual() {
+      return [
+        this.directionClass
+      ].filter(Boolean);
     }
   },
   mounted() {

package/modules/@apostrophecms/command-menu/ui/apos/components/TheAposCommandMenu.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    class="apos-command-menu"
-    :class="themeClass"
+    :class="classes"
   >
     <!-- nothing for the moment -->
   </div>
@@ -30,7 +29,16 @@ export default {
     };
   },
   computed: {
-    ...mapState(useModalStore, [ 'stack' ]),
+    ...mapState(useModalStore, [ 'stack', 'getAdminDirectionClass' ]),
+    classes() {
+      const directionClass = this.getAdminDirectionClass();
+      const classes = this.themeClass;
+      classes.push('apos-command-menu');
+      if (directionClass) {
+        classes.push(directionClass);
+      }
+      return classes;
+    },
     shortcuts() {
       const modals = Object.values(this.modals[this.modal] || {});
 

package/modules/@apostrophecms/i18n/index.js

@@ -32,6 +32,11 @@
 // ### `encoding`
 //
 // Defaults to `'utf-8'`. You almost certainly do not want to change this.
+//
+// ### `slugDirection`
+//
+// Controls the default `direction` value of slug schema. Can be `ltr`, `rtl` or
+// `undefined|null` to not set a default. Defaults to `ltr`.
 
 const i18next = require('i18next');
 const fs = require('fs');
@@ -77,7 +82,8 @@ module.exports = {
     // If true, slugifying will strip accents from Latin characters
     stripUrlAccents: false,
     // You almost certainly do not want to change this
-    encoding: 'utf-8'
+    encoding: 'utf-8',
+    slugDirection: 'ltr'
   },
   async init(self) {
     self.defaultNamespace = 'default';
@@ -93,6 +99,12 @@ module.exports = {
     // If adminLocales are configured, it should be one of them. Otherwise,
     // it can be any valid locale string identifier.
     self.defaultAdminLocale = self.options.defaultAdminLocale || null;
+    if (self.options.slugDirection && ![ 'ltr', 'rtl' ].includes(self.options.slugDirection)) {
+      throw self.apos.error(
+        'invalid',
+        `The "slugDirection" option of "${self.__meta.name}" module must be "ltr", "rtl" or "null".`
+      );
+    }
     // Lint the locale configurations
     for (const [ key, options ] of Object.entries(self.locales)) {
       if (!options) {
@@ -175,6 +187,12 @@ module.exports = {
         // The array is provided in the order in which locales are configured.
         // The current locale is included and has the property `current: true`.
         async addLocalizations(req) {
+          const locale = req.locale || self.defaultLocale;
+          req.data.i18n = {
+            locale,
+            direction: self.locales[locale]?.direction || 'ltr',
+            label: self.locales[locale]?.label || locale
+          };
           const context = req.data.piece || req.data.page;
           if (!context) {
             return;
@@ -212,6 +230,7 @@ module.exports = {
             const info = doc || {};
             info.locale = name;
             info.label = self.locales[name].label;
+            info.direction = self.locales[name].direction;
             info.homePageUrl = `${localeReq.prefix}/`;
             req.data.localizations.push(info);
           }
@@ -686,7 +705,8 @@ module.exports = {
           show: self.show,
           action: self.action,
           crossDomainClipboard: req.session && req.session.aposCrossDomainClipboard,
-          stripUrlAccents: self.options.stripUrlAccents
+          stripUrlAccents: self.options.stripUrlAccents,
+          slugDirection: self.options.slugDirection
         };
         if (req.session && req.session.aposCrossDomainClipboard) {
           req.session.aposCrossDomainClipboard = null;
@@ -715,11 +735,13 @@ module.exports = {
       getLocales() {
         const locales = self.options.locales || {
           en: {
-            label: 'English'
+            label: 'English',
+            direction: 'ltr'
           }
         };
         for (const locale in locales) {
           locales[locale]._edit = true;
+          locales[locale].direction ??= 'ltr';
         }
         verifyLocales(locales, self.apos.options.baseUrl);
         return locales;

package/modules/@apostrophecms/modal/ui/apos/apps/AposModals.js

@@ -18,6 +18,7 @@ export default function() {
   apos.modal.getProperties = modalStore.getProperties;
   apos.modal.onTopOf = modalStore.onTopOf;
   apos.modal.getActiveLocale = modalStore.getActiveLocale;
+  apos.modal.getAdminDirectionClass = modalStore.getAdminDirectionClass;
   apos.confirm = modalStore.confirm;
   apos.alert = modalStore.alert;
   apos.report = modalStore.report;

package/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

@@ -211,6 +211,7 @@ function hasSlot(slotName) {
 }
 
 const classes = computed(() => {
+  const directionClass = store.getAdminDirectionClass();
   const classes = [ 'apos-modal' ];
   classes.push(`apos-modal--${props.modal.type}`);
   if (props.modal.type === 'slide') {
@@ -224,7 +225,11 @@ const classes = computed(() => {
   if (props.modal.busy) {
     classes.push('apos-modal--busy');
   }
-  return classes.join(' ');
+  if (directionClass) {
+    classes.push(directionClass);
+  }
+
+  return classes;
 });
 
 const innerClasses = computed(() => {

package/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue

@@ -66,6 +66,7 @@ import {
 } from 'vue';
 import Close from '@apostrophecms/vue-material-design-icons/Close.vue';
 import { useNotificationStore } from 'Modules/@apostrophecms/ui/stores/notification.js';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal.js';
 
 const props = defineProps({
   notification: {
@@ -77,6 +78,7 @@ const props = defineProps({
 const $t = inject('i18n');
 const emit = defineEmits([ 'close' ]);
 const store = useNotificationStore();
+const modalStore = useModalStore();
 
 const hasJob = props.notification.job && props.notification.job._id;
 const job = ref(
@@ -96,6 +98,7 @@ const process = computed(() => {
 
 const classList = computed(() => {
   const classes = [ 'apos-notification' ];
+  const directionClass = modalStore.getAdminDirectionClass();
 
   if (Array.isArray(props.notification.classes) && props.notification.classes.length) {
     classes.push(...props.notification.classes);
@@ -119,7 +122,11 @@ const classList = computed(() => {
     classes.push('apos-notification--long');
   }
 
-  return classes.join(' ');
+  if (directionClass) {
+    classes.push(directionClass);
+  }
+
+  return classes;
 });
 
 const iconComponent = computed(() => {

package/modules/@apostrophecms/rich-text-widget/index.js

@@ -1152,6 +1152,18 @@ module.exports = {
         };
         return _super(req, _widget, options, _with);
       },
+      annotateWidgetForExternalFront(_super, widget, { scene } = {}) {
+        if (scene !== 'apos') {
+          let content = widget.content || '';
+          content = self.linkPermalinks(widget, content);
+          content = self.linkImages(widget, content);
+          // It should be safe to modify the widget data here because
+          // the external front-end data is read-only. The Admin UI
+          // and actual data is not affected.
+          widget.content = content;
+        }
+        return _super(widget, { scene });
+      },
       // Add on the core default options to use, if needed.
       getBrowserData(_super, req) {
         const initialData = _super(req);

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -24,7 +24,7 @@
     >
       <AposContextMenuDialog
         menu-placement="top"
-        class-list="apos-rich-text-toolbar"
+        :class-list="contextMenuClasses"
         :has-tip="false"
       >
         <div
@@ -51,7 +51,7 @@
       :id="`insert-menu-${modelValue._id}`"
       ref="insertMenu"
       plugin-key="insertMenu"
-      class="apos-rich-text-insert-menu"
+      :class="insertMenuClasses"
       :tippy-options="{ duration: 100, zIndex: 999, placement: 'bottom-start' }"
       :should-show="showFloatingMenu"
       :editor="editor"
@@ -115,6 +115,7 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import {
   Editor,
   EditorContent,
@@ -153,6 +154,7 @@ import { klona } from 'klona';
 import newInstance from 'apostrophe/modules/@apostrophecms/schema/lib/newInstance.js';
 import merge from 'lodash/merge';
 import { useAposStyles } from 'Modules/@apostrophecms/styles/composables/AposStyles.js';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
 
 export default {
   name: 'AposRichTextWidgetEditor',
@@ -222,6 +224,23 @@ export default {
     };
   },
   computed: {
+    ...mapState(useModalStore, [ 'getAdminDirectionClass' ]),
+    // Note that context menu class-list expects a string
+    contextMenuClasses() {
+      const directionClass = this.getAdminDirectionClass();
+      const classes = [ 'apos-rich-text-toolbar' ];
+      if (directionClass) {
+        classes.push(directionClass);
+      }
+      return classes.join(' ');
+    },
+    insertMenuClasses() {
+      const directionClass = this.getAdminDirectionClass();
+      return {
+        'apos-rich-text-insert-menu': true,
+        [directionClass]: !!directionClass
+      };
+    },
     tableOptions() {
       const options = this.moduleOptions.tableOptions || {};
 

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -147,6 +147,10 @@ module.exports = (self) => {
       return !value.length;
     },
     validate(field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
+
       if (!field.pattern) {
         return;
       }
@@ -455,6 +459,11 @@ module.exports = (self) => {
         destination[field.name] = null;
       }
     },
+    validate(field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
+    },
     addQueryBuilder(field, query) {
       return query.addBuilder(field.name, {
         finalize: function () {
@@ -514,6 +523,11 @@ module.exports = (self) => {
         destination[field.name] = null;
       }
     },
+    validate(field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
+    },
     addQueryBuilder(field, query) {
       return query.addBuilder(field.name, {
         finalize: function () {
@@ -567,6 +581,11 @@ module.exports = (self) => {
         }
       }
       destination[field.name] = data[field.name];
+    },
+    validate(field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
     }
   });
 
@@ -600,6 +619,10 @@ module.exports = (self) => {
       return '';
     },
     validate(field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
+
       if (!field.pattern) {
         return;
       }
@@ -659,6 +682,9 @@ module.exports = (self) => {
       destination[field.name] = self.apos.launder.date(newDateVal);
     },
     validate: function (field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
       if (field.max && !field.max.match(dateRegex)) {
         fail('Property "max" must be in the date format, YYYY-MM-DD');
       }
@@ -723,6 +749,11 @@ module.exports = (self) => {
       destination[field.name] = data[field.name]
         ? self.apos.launder.date(data[field.name])
         : null;
+    },
+    validate: function (field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
     }
   });
 
@@ -741,6 +772,11 @@ module.exports = (self) => {
         );
       }
     },
+    validate: function (field, options, warn, fail) {
+      if (field.direction && !_.includes([ 'ltr', 'rtl' ], field.direction)) {
+        fail('The direction property must be "ltr" or "rtl" if specified');
+      }
+    },
     def: ''
   });
 

package/modules/@apostrophecms/schema/ui/apos/components/AposInputDateAndTime.vue

@@ -17,7 +17,7 @@
         <input
           v-model="date"
           class="apos-input apos-input--date"
-          :class="{'apos-input--disabled': disabled}"
+          :class="classes"
           type="date"
           @change="setDateAndTime"
         >
@@ -27,7 +27,7 @@
         <input
           v-model="time"
           class="apos-input apos-input--time"
-          :class="{'apos-input--disabled': disabled}"
+          :class="classes"
           type="time"
           @change="setDateAndTime"
         >

package/modules/@apostrophecms/schema/ui/apos/components/AposInputPassword.vue

@@ -13,6 +13,7 @@
           v-model="next"
           type="password"
           class="apos-input apos-input--password"
+          :class="classes"
           :placeholder="$t(field.placeholder)"
           :disabled="field.readOnly"
           :required="field.required"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue

@@ -41,7 +41,7 @@
             :min="field.min"
             :max="field.max"
             :step="field.step"
-            class="apos-range__input"
+            :class="classes"
             :disabled="field.readOnly"
           >
           <div

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputDateAndTime.js

@@ -1,8 +1,9 @@
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
 import dayjs from 'dayjs';
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+import AposFieldDirectionMixin from 'Modules/@apostrophecms/schema/mixins/AposFieldDirection.js';
 
 export default {
-  mixins: [ AposInputMixin ],
+  mixins: [ AposInputMixin, AposFieldDirectionMixin ],
   emits: [ 'return' ],
   data() {
     return {
@@ -12,7 +13,7 @@ export default {
       disabled: !this.field.required
     };
   },
-  mounted () {
+  mounted() {
     this.initDateAndTime();
   },
   watch: {
@@ -25,6 +26,14 @@ export default {
       }
     }
   },
+  computed: {
+    classes() {
+      return [
+        { 'apos-input--disabled': this.disabled },
+        this.directionClass
+      ].filter(Boolean);
+    }
+  },
   methods: {
     toggle() {
       this.disabled = !this.disabled;

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputPassword.js

@@ -1,13 +1,16 @@
-
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+import AposFieldDirectionMixin from 'Modules/@apostrophecms/schema/mixins/AposFieldDirection.js';
 
 export default {
   name: 'AposInputPassword',
-  mixins: [ AposInputMixin ],
+  mixins: [ AposInputMixin, AposFieldDirectionMixin ],
   emits: [ 'return' ],
   computed: {
-    tabindex () {
+    tabindex() {
       return this.field.disableFocus ? '-1' : '0';
+    },
+    classes() {
+      return [ this.directionClass ].filter(Boolean);
     }
   },
   methods: {

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js

@@ -1,4 +1,4 @@
-import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
 
 export default {
   name: 'AposInputRange',
@@ -34,6 +34,9 @@ export default {
       } else {
         return false;
       }
+    },
+    classes() {
+      return [ 'apos-range__input' ];
     }
   },
   methods: {
@@ -57,7 +60,8 @@ export default {
       const min = this.$refs.range.min;
       const max = this.$refs.range.max;
       const val = this.next < min ? min : this.next;
-      this.$refs.range.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%';
+      this.$refs.range.style.backgroundSize =
+        ((val - min) * 100) / (max - min) + '% 100%';
     },
     validate(value) {
       if (this.field.required) {