apostrophe 4.1.1 → 4.2.0

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

@@ -0,0 +1,226 @@
+<template>
+  <div class="apos-marks-control">
+    <AposButton
+      type="rich-text"
+      class="apos-marks-control__button"
+      :label="buttonLabel"
+      :icon="tool.icon"
+      :icon-size="16"
+      :modifiers="['no-border', 'no-motion']"
+      :tooltip="{
+        content: $t(tool.label),
+        placement: 'top',
+        delay: 650
+      }"
+      @click="click"
+    />
+    <div
+      v-if="open"
+      v-click-outside-element="close"
+      class="apos-popover apos-marks-control__dialog"
+      x-placement="bottom"
+    >
+      <AposContextMenuDialog
+        menu-placement="bottom-start"
+        class-list="apos-context-menu__dialog--unpadded"
+      >
+        <div class="apos-marks-control__content-wrapper">
+          <ul class="apos-marks-control__items">
+            <li
+              v-for="mark in options.marks"
+              :key="mark.class"
+              class="apos-marks-control__item"
+              :class="{ 'apos-marks-control__item--is-active': activeClasses.includes(mark.class) }"
+            >
+              <button class="apos-marks-control__button" @click="toggleStyle(mark)">
+                <span class="apos-marks-control__label" :class="mark.class">
+                  {{ $t(mark.label) }}
+                </span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </AposContextMenuDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
+
+export default {
+  name: 'AposTiptapMarks',
+  mixins: [ AposEditorMixin ],
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    tool: {
+      type: Object,
+      required: true
+    },
+    editor: {
+      type: Object,
+      required: true
+    },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      active: false,
+      open: false,
+      classes: this.options.marks.map(m => m.class)
+    };
+  },
+  computed: {
+    activeClasses() {
+      let activeClasses = [];
+      const { selection } = this.editor.state;
+      const content = selection.content();
+
+      traverseContent(content.content);
+
+      function traverseContent(content) {
+        content.forEach(item => {
+          if (item.attrs.class) {
+            activeClasses = activeClasses.concat(item.attrs.class.split(' '));
+          }
+          if (item?.marks?.length) {
+            traverseContent(item.marks);
+          }
+          if (item?.content?.content) {
+            traverseContent(item.content.content);
+          }
+        });
+      }
+      // Filter out classes that are not in the list of available classes
+      return activeClasses.filter(value => this.classes.includes(value));
+    },
+    buttonLabel() {
+      let label;
+      if (this.activeClasses.length > 1) {
+        label = this.$t('apostrophe:richTextMarkMultipleStyles');
+      }
+      if (this.activeClasses.length === 1) {
+        label = this.options.marks.find(m => m.class === this.activeClasses[0])?.label;
+      }
+      return label || this.$t('apostrophe:richTextMarkApplyStyles');
+    },
+    hasSelection() {
+      const { state } = this.editor;
+      const { selection } = this.editor.state;
+      const { from, to } = selection;
+      const text = state.doc.textBetween(from, to, '');
+      return text !== '';
+    }
+  },
+  watch: {
+    hasSelection(newVal) {
+      if (!newVal) {
+        this.close();
+      }
+    }
+  },
+  methods: {
+    toggleStyle(mark) {
+      this.editor.commands.focus();
+      this.editor.commands[mark.command](mark.type, mark.options || {});
+      this.close();
+    },
+    click() {
+      this.toggleOpen();
+    },
+    toggleOpen() {
+      this.open = !this.open;
+    },
+    close() {
+      this.open = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .apos-marks-control {
+    position: relative;
+  }
+
+  .apos-marks-control__button:deep(.apos-button--rich-text) {
+    &:active:after, &:focus:after {
+      background-color: var(--a-base-8);
+    }
+
+    .apos-button__label {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .apos-marks-control__content-wrapper {
+    max-height: 200px;
+    overflow-y: scroll;
+  }
+
+  .apos-marks-control__dialog {
+    position: absolute;
+    top: calc(100% + $spacing-base);
+    left: 0;
+  }
+
+  .apos-marks-control__items {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin: 0;
+    padding: $spacing-base;
+    list-style: none;
+  }
+
+  .apos-marks-control__item {
+    white-space: nowrap;
+    max-width: 230px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    border-radius: var(--a-border-radius);
+
+    // We are adding dev-defined styles into the Apostrophe admin UI,
+    // attempt clamp down the dimensions of the label to prevent broken UI
+    // stylelint-disable declaration-no-important
+    .apos-marks-control__label {
+      position: static !important;
+      height: auto !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      font-size: var(--a-type-large) !important;
+    }
+    // stylelint-enable declaration-no-important
+
+    &:hover {
+      background-color: var(--a-base-10);
+      cursor: pointer;
+    }
+
+    &--is-active {
+      background-color: var(--a-base-10);
+      &:hover {
+        background-color: var(--a-base-9);
+      }
+    }
+
+    .apos-marks-control__button {
+      @include apos-button-reset();
+      display: block;
+      width: 100%;
+      padding: $spacing-base;
+    }
+  }
+
+</style>

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

@@ -1,27 +1,29 @@
 <template>
   <div class="apos-tiptap-select">
-    <format-text-icon
+    <component
+      :is="tool.icon"
       :size="16"
       class="apos-tiptap-select__type-icon"
       fill-color="currentColor"
     />
     <select
       v-apos-tooltip="{
-        content: 'apostrophe:richTextStyles',
+        content: $t(tool.label),
         placement: 'top',
         delay: 650
       }"
-      :model-value="active"
+      :value="active"
       class="apos-tiptap-control apos-tiptap-control--select"
-      :style="`width:${options.styles[active].label.length * 6.5}px`"
+      :style="`width:${$t(nodeOptions[active].label).length * 6.5}px`"
       @change="setStyle"
     >
       <option
-        v-for="(style, i) in options.styles"
+        v-for="(style, i) in nodeOptions"
         :key="style.label"
         :value="i"
+        :hidden="style.attr === 'hidden'"
       >
-        {{ style.label }}
+        {{ $t(style.label) }}
       </option>
     </select>
     <chevron-down-icon
@@ -56,27 +58,92 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      multipleSelected: false
+    };
+  },
   computed: {
+    nodeOptions() {
+      return [ {
+        label: 'apostrophe:richTextNodeMultipleStyles',
+        attr: this.multipleSelected ? '' : 'hidden'
+      },
+      ...this.options.nodes ];
+    },
     active() {
-      const styles = this.options.styles || [];
-      for (let i = 0; (i < styles.length); i++) {
-        const style = styles[i];
-        if (this.editor.isActive(style.type, (style.options || {}))) {
-          return i;
-        } else if (this.editor.state.selection.$head.parent.type.name === 'defaultNode' && style.def) {
-          // Look deeper to see if custom defaultNode is active
-          return i;
+      const { selection } = this.editor.state;
+      const content = selection.content();
+      let activeEls = [];
+      const nodes = this.options.nodes.map(n => {
+        return {
+          type: n.type,
+          class: n.options.class || null,
+          level: n.options.level || null
+        };
+      });
+
+      if (content?.content?.content?.length) {
+        activeEls = content.content.content.map(n => {
+          return {
+            name: n.type.name,
+            class: n.attrs.class || null,
+            level: n.attrs.level || null
+          };
+        });
+      }
+
+      // Remove duplicates
+      activeEls = activeEls.filter((item, index, self) => {
+        // Find the index of the first occurrence of the current item
+        const firstIndex = self.findIndex(t =>
+          t.name === item.name &&
+          t.class === item.class &&
+          t.level === item.level
+        );
+        // If the index of the current item is the same as the first index, keep it
+        return index === firstIndex;
+      });
+
+      if (activeEls.length) {
+        if (activeEls.length > 1) {
+          // More than one node, show 'multiple styles' label
+          return 0;
+        } else {
+          // Only one node, show the style label
+          // the default style will look different, detect it specifically
+          if (activeEls[0].name === 'defaultNode') {
+            return 1;
+          } else {
+            const match = nodes.findIndex(node =>
+              node.class === activeEls[0].class &&
+              node.type === activeEls[0].name &&
+              node.level === activeEls[0].level
+            );
+            return match + 1;
+          }
         }
+      } else {
+        // No nodes, show the default label
+        return 1;
       }
-      return 0;
     },
     moduleOptions() {
       return window.apos.modules['@apostrophecms/rich-text-widget'];
     }
   },
+  watch: {
+    active(newValue) {
+      if (newValue === 0) {
+        this.multipleSelected = true;
+      } else {
+        this.multipleSelected = false;
+      }
+    }
+  },
   methods: {
     setStyle($event) {
-      const style = this.options.styles[$event.target.value];
+      const style = this.nodeOptions[$event.target.value];
       this.editor.commands.focus();
       this.editor.commands[style.command](style.type, style.options || {});
     }
@@ -90,7 +157,7 @@ export default {
     @include apos-button-reset();
     @include apos-transition();
     height: 100%;
-    padding: 0 10px;
+    padding: 0 $spacing-half;
     font-size: var(--a-type-smaller);
 
     &:focus, &:active {
@@ -102,7 +169,7 @@ export default {
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 4px;
+    padding: 0 $spacing-half;
     color: var(--a-base-1);
     border-radius: var(--a-border-radius);
     transition: all 0.5s ease;
@@ -112,6 +179,11 @@ export default {
     }
   }
 
+  .apos-tiptap-select__icon {
+    position: absolute;
+    right: 0;
+  }
+
   .apos-tiptap-select__type-icon {
     padding-top: 2px;
   }

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Classes.js

@@ -1,14 +1,74 @@
 // Enhances common node/mark types to accept a class parameter
 // and filter out classes that don't match the list on paste/parse
 import { Extension } from '@tiptap/core';
+
 export default (options) => {
   // Create a class allowlist map for each element
   const allow = {};
-  options.styles.forEach(style => {
-    const tag = style.tag.toLowerCase();
-    allow[tag] = (allow[tag] || []).concat(...(style.class ? style.class.split(' ') : [ null ]));
+  const styles = [ ...options.nodes || [], ...options.marks || [] ];
+  styles.forEach((style) => {
+    const tag = style.tag?.toLowerCase();
+    if (tag) {
+      allow[tag] = (allow[tag] || []).concat(
+        ...(style.class ? style.class.split(' ') : [])
+      );
+    }
   });
+
   return Extension.create({
+    addCommands() {
+      return {
+        toggleClassOrToggleMark:
+          (type, options) =>
+            ({ editor, commands }) => {
+
+              // If we're in a span we need to toggle the class
+              if (editor.isActive('textStyle')) {
+                let finalClasses;
+                let currentClasses = editor.getAttributes('textStyle').class;
+
+                // // Classes can come back as null, string, or array
+                // // normalize them to an array
+
+                if (typeof currentClasses === 'string') {
+                  currentClasses = currentClasses.split(' ');
+                }
+
+                if (Array.isArray(currentClasses)) {
+                  currentClasses = currentClasses.filter((c) => {
+                    return typeof c === 'string' && c.length > 0;
+                  });
+                } else {
+                  currentClasses = [];
+                }
+
+                // If this el already has this class, remove it
+                if (currentClasses.includes(options.class)) {
+                  finalClasses = currentClasses.filter(
+                    (c) => c !== options.class
+                  );
+                  // If not, add it
+                } else {
+                  finalClasses = currentClasses.concat(options.class);
+                }
+
+                // If we're removing the last class, remove the span
+                if (finalClasses.length === 0) {
+                  commands.toggleMark('textStyle', { class: options.class });
+                } else {
+                  // Update the el we found with the final classes
+                  commands.updateAttributes('textStyle', {
+                    class: finalClasses.length
+                      ? finalClasses.join(' ')
+                      : null
+                  });
+                }
+              } else {
+                commands.toggleMark('textStyle', { class: options.class });
+              }
+            }
+      };
+    },
     addGlobalAttributes() {
       return [
         {
@@ -27,18 +87,22 @@ export default (options) => {
                 if (!allow[tag]) {
                   return null;
                 }
+
                 const classes = (element.getAttribute('class') || '')
                   .split(' ')
                   .filter(c => allow[tag].includes(c));
+
                 // If we have valid classes, join and return them.
                 // If no valid classes for this parse, default to the
                 // the first setting for this tag (including null for tags defined without classes).
                 // else, remove classes.
+                const defaultOrNull =
+                  options.nodes.find(s => s.tag === tag)?.class ||
+                  options.marks.find(s => s.tag === tag)?.class ||
+                  null;
                 return classes.length
                   ? classes.join(' ')
-                  : (
-                    allow[tag].length ? allow[tag][0] : null
-                  );
+                  : defaultOrNull;
               }
             }
           }

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Default.js

@@ -22,7 +22,8 @@ const nodeMap = {
 };
 
 export default (options) => {
-  const [ def ] = options.styles.filter(style => style.def);
+  const styles = [ ...options.nodes, ...options.marks ];
+  const [ def ] = styles.filter(style => style.def);
 
   if (!def) {
     return;

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Document.js

@@ -1,7 +1,7 @@
 // Acts as a custom Document extension
 import { Node } from '@tiptap/core';
 export default (options) => {
-  const def = options.styles.filter(style => style.def)[0];
+  const def = options.nodes.filter(style => style.def)[0];
   let content = 'block+'; // one or more block nodes (default Document setting)
   if (def) {
     // one/more defaultNodes (created in ./Default) or one/more other block nodes

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Heading.js

@@ -2,7 +2,7 @@
 import Heading from '@tiptap/extension-heading';
 
 export default (options) => {
-  const headings = options.styles.filter(style => style.type === 'heading');
+  const headings = options.nodes.filter(style => style.type === 'heading');
   const levels = headings.map(heading => heading.options.level);
   const defaultLevel = headings.filter(heading => heading.def).length
     ? headings.filter(heading => heading.def)[0].options.level

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

@@ -20,7 +20,7 @@
           >
             <Picker
               v-bind="pickerOptions"
-              :model-value="next"
+              :model-value="pickerValue"
               @update:model-value="update"
             />
           </AposContextMenu>

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

@@ -58,9 +58,9 @@
           </span>
           <span data-apos-test="field-meta-wrapper" class="apos-field__label-meta">
             <component
+              :is="name"
               v-for="{name, namespace, data} in metaComponents"
               :key="name"
-              :is="name"
               :field="field"
               :items="items"
               :namespace="namespace"

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

@@ -27,6 +27,10 @@ export default {
     };
   },
   computed: {
+    // Color picker doesn't allow null or undefined values
+    pickerValue() {
+      return this.next || '';
+    },
     buttonOptions() {
       return {
         label: this.field.label,

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

@@ -67,7 +67,10 @@ export default {
         delete oldClone.archived;
 
         oldValue = Object.values(oldClone).join(' ');
+        oldValue = oldValue.replace(/\//g, ' ');
+
         newValue = Object.values(newClone).join(' ');
+        newValue = newValue.replace(/\//g, ' ');
 
         if (this.compatible(oldValue, this.next) && !newValue.archived) {
           // If this is a page slug, we only replace the last section of the slug.

package/modules/@apostrophecms/ui/ui/apos/components/AposButtonSplit.vue

@@ -65,7 +65,7 @@ const {
   elementsToFocus,
   cycleElementsToFocus,
   focusElement,
-  focuslastmodalfocusedelement
+  focusLastModalFocusedElement
 } = useAposFocus();
 
 const props = defineProps({
@@ -164,7 +164,7 @@ function menuOpen() {
 }
 
 function menuClose() {
-  focuslastmodalfocusedelement();
+  focusLastModalFocusedElement();
 }
 </script>
 <style lang="scss" scoped>

package/modules/@apostrophecms/ui/ui/apos/lib/i18next.js

@@ -62,15 +62,11 @@ export default {
       }
     }
 
-    // Like standard i18next $t, but also with support
-    // for just one object argument with at least a `key`
-    // property, which makes it easier to pass both
-    // a label and its interpolation values through
-    // multiple layers of code, as a single `label`
-    // property for instance. You may also specify
-    // `localize: false` to pass a string through without
-    // invoking i18next.
+    // Makes available the $t function in all components through `this`.
     app.config.globalProperties.$t = $t;
+
+    // This is for the composition API, allowing to inject $t in any component.
+    app.provide('i18n', $t);
   }
 };