apostrophe 3.33.0 → 3.35.0

package/modules/@apostrophecms/command-menu/index.js

@@ -0,0 +1,375 @@
+const assert = require('assert').strict;
+
+module.exports = {
+  options: {
+    components: {},
+    alias: 'commandMenu'
+  },
+  commands(self) {
+    return {
+      add: {
+        [`${self.__meta.name}:show-shortcut-list`]: {
+          type: 'item',
+          label: 'apostrophe:commandMenuShowShortcutList',
+          action: {
+            type: 'open-modal',
+            payload: {
+              name: 'AposCommandMenuShortcut',
+              props: { moduleName: '@apostrophecms/command-menu' }
+            }
+          },
+          shortcut: '?'
+        }
+      },
+      modal: {
+        default: {
+          '@apostrophecms/command-menu:general': {
+            label: 'apostrophe:commandMenuGeneral',
+            commands: [
+              `${self.__meta.name}:show-shortcut-list`
+            ]
+          }
+        }
+      }
+    };
+  },
+  init(self) {
+    self.commands = {};
+    self.groups = {};
+    self.modals = {};
+
+    self.addShortcutModal();
+    self.enableBrowserData();
+  },
+  handlers(self) {
+    return {
+      'apostrophe:ready': {
+        composeCommands() {
+          const definitions = Object.fromEntries(
+            Object.values(self.apos.modules)
+              .map(self.composeCommandsForModule)
+              .filter(([ , commands = [] ]) => commands.length)
+          );
+
+          try {
+            const composed = self.apos.util.pipe(self.composeRemoves, self.composeCommands, self.composeGroups, self.composeModals)({ definitions });
+
+            const validationResult = [].concat(
+              Object.entries(composed.commands)
+                .map(([ name, command ]) => self.validateCommand({
+                  name,
+                  command
+                })),
+              Object.entries(composed.groups)
+                .map(([ name, group ]) => self.validateGroup({
+                  name,
+                  group
+                })),
+              Object.entries(composed.modals)
+                .flatMap(([ name, modal ]) => self.validateModal({
+                  name,
+                  modal
+                }))
+            );
+            self.compileErrors(validationResult);
+
+            const built = self.apos.util.pipe(self.buildCommands, self.buildGroups, self.buildModals)({ composed });
+            self.commands = built.commands;
+            self.groups = built.groups;
+            self.modals = built.modals;
+          } catch (error) {
+            self.apos.util.error(error, 'Command-Menu validation error');
+          }
+        }
+      }
+    };
+  },
+  methods(self) {
+    return {
+      composeCommandsForModule(aposModule) {
+        return [
+          aposModule.__meta.name,
+          aposModule.__meta.chain
+            .map(entry => {
+              const metadata = aposModule.__meta.commands[entry.name] || null;
+
+              return typeof metadata === 'function'
+                ? metadata(aposModule)
+                : metadata;
+            })
+            .filter(entry => entry !== null)
+        ];
+      },
+      composeRemoves(initialState) {
+        const formatRemove = (state, chain) => {
+          return chain
+            .reduce(
+              (removes, { add = {}, remove = [] }) => {
+                const existingCommands = Object.keys(add);
+
+                return removes
+                  .filter(key => !existingCommands.includes(key))
+                  .concat(remove);
+              },
+              state
+            );
+        };
+
+        const concatenate = Object.values(initialState.definitions).reduce(formatRemove, []);
+
+        return {
+          ...initialState,
+          removes: concatenate || []
+        };
+      },
+      composeCommands(initialState) {
+        const formatCommands = (state, chain) => {
+          return chain
+            .reduce(
+              (commands, { add = {} }) => self.apos.util.merge(commands, add),
+              state
+            );
+        };
+
+        const concatenate = Object.values(initialState.definitions).reduce(formatCommands, {});
+
+        return {
+          ...initialState,
+          commands: concatenate || {}
+        };
+      },
+      composeGroups(initialState) {
+        const removeDuplicates = (left, right) => {
+          const commands = Object.values(right).flatMap(group => group.commands);
+
+          return Object.fromEntries(
+            Object.entries(left)
+              .map(([ name, group ]) => {
+                return [
+                  name,
+                  {
+                    ...group,
+                    commands: (group.commands || []).filter(command => !commands.includes(command))
+                  }
+                ];
+              })
+          );
+        };
+
+        const formatGroups = (state, chain) => {
+          return chain
+            .reduce(
+              (groups, { group = {} }) => {
+                return self.apos.util.merge(removeDuplicates(groups, group), group);
+              },
+              state
+            );
+        };
+
+        const concatenate = Object.values(initialState.definitions).reduce(formatGroups, {});
+
+        return {
+          ...initialState,
+          groups: concatenate || {}
+        };
+      },
+      composeModals(initialState) {
+        const formatModals = (state, chain) => {
+          return chain
+            .reduce(
+              (modals, { modal = {} }) => self.apos.util.merge(modals, modal),
+              state
+            );
+        };
+
+        const concatenate = Object.values(initialState.definitions).reduce(formatModals, {});
+
+        return {
+          ...initialState,
+          modals: concatenate || {}
+        };
+      },
+      validateCommand({ name, command }) {
+        try {
+          assert.equal(command.type, 'item', `Invalid command type, must be "item", for ${name}`);
+          command.label && typeof command.label === 'object'
+            ? assert.equal(typeof command.label.key, 'string', `Invalid command label key for ${name}`)
+            : assert.equal(typeof command.label, 'string', `Invalid command label, must be a string, for ${name} "${typeof command.label}" provided`);
+          assert.equal(typeof command.action, 'object', `Invalid command action, must be an object for ${name}`) &&
+            assert.equal(typeof command.action.type, 'string', `Invalid command action type for ${name}`) &&
+            assert.equal(typeof command.action.payload, 'object', `Invalid command action payload for ${name}`);
+          command.permission && (
+            assert.equal(typeof command.permission, 'object', `Invalid command permission for ${name}`) &&
+            assert.equal(typeof command.permission.action, 'string', `Invalid command permission action for ${name}`) &&
+            assert.equal(typeof command.permission.type, 'string', `Invalid command permission type for ${name}`)
+          );
+          command.modal &&
+            assert.equal(typeof command.modal, 'string', `Invalid command modal for ${name}`);
+          assert.equal(typeof command.shortcut, 'string', `Invalid command shortcut, must be a string, for ${name}`);
+
+          return [ true, null ];
+        } catch (error) {
+          return [ false, error ];
+        }
+      },
+      validateGroup({ name, group }) {
+        try {
+          group.label && typeof group.label === 'object'
+            ? assert.equal(typeof group.label.key, 'string', `Invalid group label key for ${name}`)
+            : assert.equal(typeof group.label, 'string', `Invalid group label, must be a string, for ${name} "${typeof group.label}" provided`);
+          assert.equal(Array.isArray(group.commands), true, `Invalid group commands, must be an array for ${name}`);
+          assert.ok(group.commands.every(field => typeof field === 'string'), `Invalid group commands, must contains strings, for ${name}`);
+
+          return [ true, null ];
+        } catch (error) {
+          return [ false, error ];
+        }
+      },
+      validateModal({ name, modal }) {
+        return Object.entries(modal)
+          .map(([ groupName, group ]) => self.validateGroup({
+            name: `${name}:${groupName}`,
+            group
+          }));
+      },
+      compileErrors(result) {
+        const errors = result
+          .filter(([ success ]) => !success)
+          .map(([ , error ]) => error);
+        if (errors.length) {
+          const error = new Error('Invalid', { cause: errors });
+          // For bc with node 14 and below we need to check cause
+          if (!error.cause) {
+            error.cause = errors;
+          }
+          throw error;
+        }
+      },
+      buildCommands(initialState) {
+        const concatenate = self.apos.util.omit(
+          initialState.composed.commands,
+          initialState.composed.removes
+        );
+
+        return {
+          ...initialState,
+          commands: concatenate || {}
+        };
+      },
+      buildGroups(initialState) {
+        const filterGroups = (state, [ name, group ]) => {
+          const commands = group.commands
+            .map(field => [ field, initialState.commands[field] ])
+            .filter(([ , isNotEmpty ]) => isNotEmpty);
+
+          return commands.length
+            ? {
+              ...state,
+              [name]: {
+                ...group,
+                commands: Object.fromEntries(commands)
+              }
+            }
+            : state;
+        };
+
+        const concatenate = Object.entries(initialState.composed.groups).reduce(filterGroups, {});
+
+        return {
+          ...initialState,
+          groups: concatenate || {}
+        };
+      },
+      buildModals(initialState) {
+        const formatModals = (state, [ modal, groups ]) => {
+          const built = self.buildGroups({
+            commands: initialState.commands,
+            composed: { groups }
+          });
+
+          return {
+            ...state,
+            [modal]: built.groups
+          };
+        };
+
+        const concatenate = Object.entries(initialState.composed.modals).reduce(formatModals, {});
+
+        return {
+          ...initialState,
+          modals: concatenate || {}
+        };
+      },
+      isCommandVisible(req, command) {
+        return command.permission
+          ? self.apos.permission.can(req, command.permission.action, command.permission.type, command.permission.mode || 'draft')
+          : true;
+      },
+      getVisibleGroups(visibleCommands, groups = self.groups) {
+        const formatGroup = (state, [ name, field ]) =>
+          visibleCommands.includes(name)
+            ? {
+              ...state,
+              [name]: field
+            }
+            : state;
+
+        return Object.fromEntries(
+          Object.entries(groups)
+            .map(([ key, group ]) => {
+              const commands = Object.entries(group.commands).reduce(formatGroup, {});
+
+              return [
+                key,
+                {
+                  ...group,
+                  commands
+                }
+              ];
+            })
+            .filter(([ , { commands = {} } ]) => Object.keys(commands).length)
+        );
+      },
+      getVisibleModals(visibleCommands, modals = self.modals) {
+        return Object.fromEntries(
+          Object.entries(modals)
+            .map(([ key, groups ]) => [ key, self.getVisibleGroups(visibleCommands, groups) ])
+            .filter(([ , groups ]) => Object.keys(groups).length)
+        );
+      },
+      getVisible(req) {
+        const visibleCommands = Object.entries(self.commands)
+          .map(([ key, command ]) => self.isCommandVisible(req, command) ? key : null)
+          .filter(isNotEmpty => isNotEmpty);
+
+        const groups = self.getVisibleGroups(visibleCommands);
+        const modals = self.getVisibleModals(visibleCommands);
+
+        return {
+          groups,
+          modals
+        };
+      },
+      addShortcutModal() {
+        self.apos.modal.add(
+          `${self.__meta.name}:shortcut`,
+          self.getComponentName('shortcutModal', 'AposCommandMenuShortcut'),
+          { moduleName: self.__meta.name }
+        );
+      },
+      getBrowserData(req) {
+        if (!req.user) {
+          return false;
+        }
+
+        const { groups, modals } = self.getVisible(req);
+
+        return {
+          components: { the: self.options.components.the || 'TheAposCommandMenu' },
+          groups,
+          modals
+        };
+      }
+    };
+  }
+};

package/modules/@apostrophecms/command-menu/ui/apos/apps/AposCommandMenu.js

@@ -0,0 +1,34 @@
+import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+
+export default function() {
+  // Careful, login page is in user scene but has no command menu
+  if (apos.commandMenu) {
+    const theAposCommandMenu = new Vue({
+      el: '#apos-command-menu',
+      computed: {
+        apos () {
+          return window.apos;
+        }
+      },
+      methods: {
+        getModal() {
+          return this.$refs.commandMenu.modal;
+        }
+      },
+      render(h) {
+        return h(
+          apos.commandMenu.components.the,
+          {
+            ref: 'commandMenu',
+            props: {
+              groups: apos.commandMenu.groups,
+              modals: apos.commandMenu.modals
+            }
+          }
+        );
+      }
+    });
+
+    apos.commandMenu.getModal = theAposCommandMenu.getModal;
+  }
+}

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

@@ -0,0 +1,94 @@
+<template>
+  <span :class="classes">
+    <AposIndicator
+      v-if="icon"
+      :icon="icon"
+      :icon-size="iconSize"
+      class="apos-button__icon"
+      fill-color="color"
+    />
+    <slot name="label" v-if="label">
+      {{ $t(label ) }}
+    </slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'AposCommandMenuKey',
+  props: {
+    label: {
+      type: [ String, Object ],
+      default: null
+    },
+    color: {
+      type: String,
+      default: null
+    },
+    textColor: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    iconSize: {
+      type: Number,
+      default: 12
+    },
+    textOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    classes() {
+      return [
+        this.textOnly ? 'apos-command-menu-text' : 'apos-command-menu-key',
+        !this.icon && this.label.length > 1 ? 'apos-command-menu-key-auto' : ''
+      ];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.apos-command-menu-key {
+  @include type-small;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: $spacing-double;
+  height: $spacing-double;
+  padding: 3px $spacing-half;
+  margin-left: $spacing-half;
+  border: 1px solid var(--a-base-7);
+  border-radius: 3px;
+  border-color: var(--a-base-7);
+  border-bottom: 2px solid var(--a-base-7);
+  color: var(--a-base-1);
+  background: linear-gradient(180deg, var(--a-base-10) 0%, var(--a-base-9) 100%);
+  font-weight: 600;
+
+  &.apos-command-menu-key-auto {
+    width: auto;
+  }
+}
+
+.apos-command-menu-text {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: auto;
+  height: $spacing-double;
+  padding: 3px 2px;
+  margin-left: $spacing-half;
+  @include type-small;
+  color: var(--a-base-1);
+}
+
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="apos-command-menu-keys">
+    <AposCommandMenuKey
+      v-for="(key, index) in keys"
+      :key="index"
+      :label="key.label"
+      :icon="key.icon"
+      :text-only="key.textOnly"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AposCommandMenuKeyList',
+  props: {
+    shortcut: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    keys() {
+      const [ shortcut ] = this.shortcut.split(' ');
+      const iconMapping = {
+        ' ': 'keyboard-space',
+        alt: 'apple-keyboard-option',
+        arrowdown: 'arrow-down-icon',
+        arrowleft: 'arrow-left-icon',
+        arrowright: 'arrow-right-icon',
+        arrowup: 'arrow-up-icon',
+        backspace: 'keyboard-backspace',
+        caps: 'apple-keyboard-caps',
+        capslock: 'apple-keyboard-caps',
+        cmd: 'apple-keyboard-command',
+        command: 'apple-keyboard-command',
+        control: 'apple-keyboard-control',
+        ctrl: 'apple-keyboard-control',
+        enter: 'keyboard-return',
+        esc: 'keyboard-esc',
+        escape: 'keyboard-esc',
+        f10: 'keyboard-f10',
+        f11: 'keyboard-f11',
+        f12: 'keyboard-f12',
+        f1: 'keyboard-f1',
+        f2: 'keyboard-f2',
+        f3: 'keyboard-f3',
+        f4: 'keyboard-f4',
+        f5: 'keyboard-f5',
+        f6: 'keyboard-f6',
+        f7: 'keyboard-f7',
+        f8: 'keyboard-f8',
+        f9: 'keyboard-f9',
+        meta: 'apple-keyboard-command',
+        option: 'apple-keyboard-option',
+        return: 'keyboard-return',
+        shift: 'apple-keyboard-shift',
+        space: 'keyboard-space',
+        tab: 'keyboard-tab'
+      };
+      const keyMapping = {
+        delete: 'del',
+        pagedown: 'pgdn',
+        pageup: 'pgup'
+      };
+
+      return shortcut
+        .split('+')
+        .flatMap(this.then)
+        .map(key => {
+          if (key === 'then') {
+            return {
+              icon: null,
+              label: 'apostrophe:commandMenuKeyThen',
+              textOnly: true
+            };
+          }
+
+          const icon = iconMapping[key.toLowerCase()];
+
+          return {
+            icon,
+            label: icon
+              ? null
+              : (keyMapping[key.toLowerCase()] || key).toLowerCase()
+          };
+        });
+    }
+  },
+  methods: {
+    then(keys) {
+      return keys.includes(',')
+        ? keys.split(',').flatMap(key => [ key, 'then' ]).slice(0, -1)
+        : keys;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.apos-command-menu-keys {
+  display: inline-flex;
+}
+
+</style>