apostrophe 3.33.0 → 3.35.0

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

@@ -2,6 +2,7 @@
 // editor does not use a modal; instead you edit in context on the page.
 
 const sanitizeHtml = require('sanitize-html');
+const cheerio = require('cheerio');
 
 module.exports = {
   extend: '@apostrophecms/widget-type',
@@ -13,6 +14,13 @@ module.exports = {
     placeholderText: 'apostrophe:richTextPlaceholder',
     defaultData: { content: '' },
     className: false,
+    linkWithType: [ '@apostrophecms/any-page-type' ],
+    // For permalinks
+    project: {
+      title: 1,
+      _url: 1,
+      aposDocId: 1
+    },
     minimumDefaultOptions: {
       toolbar: [
         'styles',
@@ -20,6 +28,7 @@ module.exports = {
         'italic',
         'strike',
         'link',
+        'anchor',
         'bulletList',
         'orderedList',
         'blockquote'
@@ -83,6 +92,11 @@ module.exports = {
         label: 'apostrophe:richTextLink',
         icon: 'link-icon'
       },
+      anchor: {
+        component: 'AposTiptapAnchor',
+        label: 'apostrophe:richTextAnchor',
+        icon: 'anchor-icon'
+      },
       bulletList: {
         component: 'AposTiptapButton',
         label: 'apostrophe:richTextBulletedList',
@@ -168,20 +182,20 @@ module.exports = {
       setNode: [ 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre' ],
       toggleMark: [
         'b', 'strong', 'code', 'mark', 'em', 'i',
-        'a', 's', 'del', 'strike', 'span', 'u'
+        'a', 's', 'del', 'strike', 'span', 'u', 'anchor'
       ],
       wrapIn: [ 'blockquote' ]
     },
     tiptapTypes: {
       heading: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
       paragraph: [ 'p' ],
-      textStyle: [ 'span' ],
       code: [ 'code' ],
       bold: [ 'strong', 'b' ],
       strike: [ 's', 'del', 'strike' ],
       italic: [ 'i', 'em' ],
       highlight: [ 'mark' ],
       link: [ 'a' ],
+      anchor: [ 'span' ],
       underline: [ 'u' ],
       codeBlock: [ 'pre' ],
       blockquote: [ 'blockquote' ]
@@ -205,7 +219,37 @@ module.exports = {
         return widget.content;
       },
 
+      // Handle permalinks
       async load(req, widgets) {
+        const widgetsByDocId = new Map();
+        let ids = [];
+        for (const widget of widgets) {
+          if (!widget.permalinkIds) {
+            continue;
+          }
+          for (const id of widget.permalinkIds) {
+            const docWidgets = widgetsByDocId.get(id) || [];
+            docWidgets.push(widget);
+            widgetsByDocId.set(id, docWidgets);
+            ids.push(id);
+          }
+        }
+        ids = [ ...new Set(ids) ];
+        if (!ids.length) {
+          return;
+        }
+        const docs = await self.apos.doc.find(req, {
+          aposDocId: {
+            $in: ids
+          }
+        }).project(self.options.project).toArray();
+        for (const doc of docs) {
+          const widgets = widgetsByDocId.get(doc.aposDocId) || [];
+          for (const widget of widgets) {
+            widget._permalinkDocs = widget._permalinkDocs || [];
+            widget._permalinkDocs.push(doc);
+          }
+        }
       },
 
       // Convert area rich text options into a valid sanitize-html
@@ -252,7 +296,8 @@ module.exports = {
             'pre',
             'code'
           ],
-          underline: [ 'u' ]
+          underline: [ 'u' ],
+          anchor: [ 'span' ]
         };
         for (const item of options.toolbar || []) {
           if (simple[item]) {
@@ -296,6 +341,10 @@ module.exports = {
           alignJustify: {
             tag: '*',
             attributes: [ 'style' ]
+          },
+          anchor: {
+            tag: 'span',
+            attributes: [ 'id' ]
           }
         };
         for (const item of options.toolbar || []) {
@@ -393,6 +442,47 @@ module.exports = {
       isEmpty(widget) {
         const text = self.apos.util.htmlToPlaintext(widget.content || '');
         return !text.trim().length;
+      },
+
+      sanitizeHtml(html, options) {
+        html = sanitizeHtml(html, options);
+        html = self.sanitizeAnchors(html);
+        return html;
+      },
+
+      sanitizeAnchors(html) {
+        const $ = cheerio.load(html);
+        const seen = new Set();
+        $('[data-anchor]').each(function() {
+          const $el = $(this);
+          const anchor = $el.attr('data-anchor');
+          if (!self.validateAnchor(anchor)) {
+            return;
+          }
+          // tiptap will apply data-anchor to every tag involved in the selection
+          // at any depth. For ids and anchors this doesn't really make sense.
+          // Save the id to the first, rootmost tag involved
+          if (!seen.has(anchor)) {
+            $el.attr('id', anchor);
+            seen.add(anchor);
+          }
+        });
+        const result = $('body').html();
+        return result;
+      },
+
+      validateAnchor(anchor) {
+        if ((typeof anchor) !== 'string') {
+          return false;
+        }
+        if (!anchor.length) {
+          return false;
+        }
+        // Don't let them break the editor
+        if (anchor.startsWith('apos-')) {
+          return false;
+        }
+        return true;
       }
     };
   },
@@ -407,9 +497,66 @@ module.exports = {
         const output = await _super(req, input, rteOptions);
         const finalOptions = self.optionsToSanitizeHtml(rteOptions);
 
-        output.content = sanitizeHtml(input.content, finalOptions);
+        output.content = self.sanitizeHtml(input.content, finalOptions);
+
+        const anchors = output.content.match(/"#apostrophe-permalink-[^"?]*?\?/g);
+        output.permalinkIds = (anchors && anchors.map(anchor => {
+          const matches = anchor.match(/apostrophe-permalink-(.*)\?/);
+          return matches[1];
+        })) || [];
+
         return output;
       },
+      async output(_super, req, widget, options, _with) {
+        let i;
+        let content = widget.content || '';
+        // "Why no regexps?" We need to do this as quickly as we can.
+        // indexOf and lastIndexOf are much faster.
+        for (const doc of (widget._permalinkDocs || [])) {
+          let offset = 0;
+          while (true) {
+            i = content.indexOf('apostrophe-permalink-' + doc.aposDocId, offset);
+            if (i === -1) {
+              break;
+            }
+            offset = i + ('apostrophe-permalink-' + doc.aposDocId).length;
+            let updateTitle = content.indexOf('?updateTitle=1', i);
+            if (updateTitle === i + ('apostrophe-permalink-' + doc.aposDocId).length) {
+              updateTitle = true;
+            } else {
+              updateTitle = false;
+            }
+            // If you can edit the widget, you don't want the link replaced,
+            // as that would lose the permalink if you edit the widget
+            const left = content.lastIndexOf('<', i);
+            const href = content.indexOf(' href="', left);
+            const close = content.indexOf('"', href + 7);
+            if (!widget._edit) {
+              if ((left !== -1) && (href !== -1) && (close !== -1)) {
+                content = content.substr(0, href + 6) + doc._url + content.substr(close + 1);
+              } else {
+                // So we don't get stuck in an infinite loop
+                break;
+              }
+            }
+            if (!updateTitle) {
+              continue;
+            }
+            const right = content.indexOf('>', left);
+            const nextLeft = content.indexOf('<', right);
+            if ((right !== -1) && (nextLeft !== -1)) {
+              content = content.substr(0, right + 1) + self.apos.util.escapeHtml(doc.title) + content.substr(nextLeft);
+            }
+          }
+        }
+        // We never modify the original widget.content because we do not want
+        // it to lose its permalinks in the database
+        const _widget = {
+          ...widget,
+          content
+        };
+        return _super(req, _widget, options, _with);
+      },
       // Add on the core default options to use, if needed.
       getBrowserData(_super, req) {
         const initialData = _super(req);
@@ -420,7 +567,8 @@ module.exports = {
           defaultOptions: self.options.defaultOptions,
           tiptapTextCommands: self.options.tiptapTextCommands,
           tiptapTypes: self.options.tiptapTypes,
-          placeholderText: self.options.placeholder && self.options.placeholderText
+          placeholderText: self.options.placeholder && self.options.placeholderText,
+          linkWithType: Array.isArray(self.options.linkWithType) ? self.options.linkWithType : [ self.options.linkWithType ]
         };
         return finalData;
       }

package/modules/@apostrophecms/rich-text-widget/ui/apos/apps/AposRichTextPermalinkResolver.js

@@ -0,0 +1,28 @@
+// This code is for EDITORS, to allow them to follow the permalinks
+// even though they are not replaced with the actual page URLs in
+// the markup on the server side. We do not do that for editors
+// because otherwise the permalink would be lost on the next edit.
+
+export default function() {
+  window.addEventListener('hashchange', e => {
+    // Typical case: hash link followed after page load
+    if (followPermalink()) {
+      e.stopPropagation();
+    }
+  });
+  // Or, the URL could already contain a permalink
+  followPermalink();
+  async function followPermalink() {
+    const hash = location.hash || '';
+    const matches = hash.match(/#apostrophe-permalink-(.*)$/);
+    if (matches) {
+      const aposDocId = matches[1].replace(/\?.*$/, '');
+      const doc = await apos.http.get(`${apos.doc.action}/${aposDocId}`, {});
+      if (doc._url) {
+        // This way the hashed version does not enter the history
+        location.replace(doc._url);
+        return true;
+      }
+    }
+  }
+};

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

@@ -107,16 +107,20 @@ export default {
     editorOptions() {
       const activeOptions = Object.assign({}, this.options);
 
-      // Allow toolbar option to pass through if `false`
-      activeOptions.toolbar = (activeOptions.toolbar !== undefined)
-        ? activeOptions.toolbar : this.defaultOptions.toolbar;
-
       activeOptions.styles = this.enhanceStyles(
         activeOptions.styles?.length
           ? activeOptions.styles
           : this.defaultOptions.styles
       );
 
+      // Allow default options to pass through if `false`
+      Object.keys(this.defaultOptions).forEach((option) => {
+        if (option !== 'styles') {
+          activeOptions[option] = (activeOptions[option] !== undefined)
+            ? activeOptions[option] : this.defaultOptions[option];
+        }
+      });
+
       activeOptions.className = (activeOptions.className !== undefined)
         ? activeOptions.className : this.moduleOptions.className;
 
@@ -127,7 +131,7 @@ export default {
       return !this.stripPlaceholderBrs(this.value.content).length;
     },
     initialContent() {
-      const content = this.stripPlaceholderBrs(this.value.content);
+      const content = this.transformNamedAnchors(this.stripPlaceholderBrs(this.value.content));
       if (!content.length) {
         // If we don't supply a valid instance of the first style, then
         // the text align control will not work until the user manually
@@ -166,13 +170,6 @@ export default {
     },
     placeholderText() {
       return this.moduleOptions.placeholderText;
-    },
-    aposTiptapExtensions() {
-      return (apos.tiptapExtensions || [])
-        .map(extension => extension({
-          styles: this.editorOptions.styles.map(this.localizeStyle),
-          types: this.tiptapTypes
-        }));
     }
   },
   watch: {
@@ -188,7 +185,8 @@ export default {
     const extensions = [
       StarterKit.configure({
         document: false,
-        heading: false
+        heading: false,
+        listItem: false
       }),
       TextAlign.configure({
         types: [ 'heading', 'paragraph' ]
@@ -215,7 +213,7 @@ export default {
       })
     ]
       .filter(Boolean)
-      .concat(this.aposTiptapExtensions);
+      .concat(this.aposTiptapExtensions());
 
     this.editor = new Editor({
       content: this.initialContent,
@@ -294,6 +292,59 @@ export default {
     stripPlaceholderBrs(html) {
       return html.replace(/<(p[^>]*)>\s*<br \/>\s*<\/p>/gi, '<$1></p>');
     },
+    // Legacy content may have `id` and `name` attributes on anchor tags
+    // but our tiptap anchor extension needs them on a separate `span`, so nest
+    // a span to migrate this content for each relevant anchor tag encountered
+    transformNamedAnchors(html) {
+      const el = document.createElement('div');
+      el.innerHTML = html;
+      const anchors = el.querySelectorAll('a[name]');
+      for (const anchor of anchors) {
+        const name = anchor.getAttribute('id') || anchor.getAttribute('name');
+        if (typeof name !== 'string' || !name.length) {
+          continue;
+        }
+        const span = document.createElement('span');
+        span.setAttribute('id', name);
+        anchor.removeAttribute('id');
+        anchor.removeAttribute('name');
+        if (anchor.children.length) {
+          // Migrate children of the anchor to the span
+          while (anchor.firstElementChild) {
+            span.append(anchor.firstElementChild);
+          }
+          if (anchor.attributes.length) {
+            anchor.prepend(span);
+          } else {
+            anchor.replaceWith(span);
+          }
+          if (!span.innerText.length) {
+            span.innerText = '⚓︎';
+          }
+        } else {
+          // Empty anchors result in empty spans, which
+          // disappear in tiptap. Wrap the anchor around
+          // the next text node encountered
+          let el = anchor;
+          while (true) {
+            if ((el.nodeType === Node.TEXT_NODE) && (el.textContent.length > 0)) {
+              break;
+            }
+            el = traverseNextNode(el);
+          }
+          if (el) {
+            el.parentNode.insertBefore(span, el);
+            span.append(el);
+          } else {
+            // Still no text discovered, supply something the
+            // editor can lock on to
+            span.innerText = '⚓︎';
+            anchor.prepend(span);
+          }
+        }
+      }
+      return el.innerHTML;
+    },
     // Enhances the dev-defined styles list with tiptap
     // commands and parameters used internally.
     enhanceStyles(styles) {
@@ -355,10 +406,29 @@ export default {
         ...style,
         label: this.$t(style.label)
       };
+    },
+    aposTiptapExtensions() {
+      return (apos.tiptapExtensions || [])
+        .map(extension => extension({
+          styles: this.editorOptions.styles.map(this.localizeStyle),
+          types: this.tiptapTypes
+        }));
     }
   }
 };
 
+function traverseNextNode(node) {
+  if (node.firstChild) {
+    return node.firstChild;
+  }
+  while (node) {
+    if (node.nextSibling) {
+      return node.nextSibling;
+    }
+    node = node.parentNode;
+  }
+  return null;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -440,4 +510,8 @@ export default {
     margin: 0;
   }
 
+  // So editors can find anchors again
+  .apos-rich-text-editor__editor ::v-deep span[id] {
+    text-decoration: underline dotted;
+  }
 </style>

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

@@ -0,0 +1,253 @@
+<template>
+  <div class="apos-anchor-control">
+    <AposButton
+      type="rich-text"
+      @click="click"
+      :class="{ 'apos-is-active': buttonActive }"
+      :label="tool.label"
+      :icon-only="!!tool.icon"
+      :icon="tool.icon ? tool.icon : false"
+      :modifiers="['no-border', 'no-motion']"
+    />
+    <div
+      v-if="active"
+      v-click-outside-element="close"
+      class="apos-popover apos-anchor-control__dialog"
+      x-placement="bottom"
+      :class="{
+        'apos-is-triggered': active,
+        'apos-has-selection': hasSelection
+      }"
+    >
+      <AposContextMenuDialog
+        menu-placement="bottom-start"
+      >
+        <div v-if="hasAnchorOnOpen" class="apos-anchor-control__remove">
+          <AposButton
+            type="quiet"
+            @click="removeAnchor"
+            label="apostrophe:removeRichTextAnchor"
+          />
+        </div>
+        <AposSchema
+          :schema="schema"
+          :trigger-validation="triggerValidation"
+          v-model="docFields"
+          :utility-rail="false"
+          :modifiers="formModifiers"
+          :key="lastSelectionTime"
+          :generation="generation"
+          :following-values="followingValues()"
+          :conditional-fields="conditionalFields()"
+        />
+        <footer class="apos-anchor-control__footer">
+          <AposButton
+            type="default" label="apostrophe:cancel"
+            @click="close"
+            :modifiers="formModifiers"
+          />
+          <AposButton
+            type="primary" label="apostrophe:save"
+            @click="save"
+            :modifiers="formModifiers"
+          />
+        </footer>
+      </AposContextMenuDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
+
+export default {
+  name: 'AposTiptapAnchor',
+  mixins: [ AposEditorMixin ],
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    tool: {
+      type: Object,
+      required: true
+    },
+    editor: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      generation: 1,
+      keepInBounds: true,
+      hasAnchorOnOpen: false,
+      triggerValidation: false,
+      docFields: {
+        data: {}
+      },
+      formModifiers: [ 'small', 'margin-micro' ],
+      originalSchema: [
+        {
+          name: 'anchor',
+          label: this.$t('apostrophe:anchorId'),
+          type: 'string',
+          required: true
+        }
+      ],
+      active: false
+    };
+  },
+  computed: {
+    buttonActive() {
+      return this.editor.isActive('anchor') || this.active;
+    },
+    lastSelectionTime() {
+      return this.editor.view.lastSelectionTime;
+    },
+    hasSelection() {
+      const { state } = this.editor;
+      const { selection } = this.editor.state;
+      const { from, to } = selection;
+      const text = state.doc.textBetween(from, to, '');
+      return text !== '';
+    },
+    offset() {
+      const selection = window.getSelection();
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      return (rect.height + 15) + 'px';
+    },
+    schema() {
+      return this.originalSchema;
+    }
+  },
+  watch: {
+    active(newVal) {
+      if (newVal) {
+        this.hasAnchorOnOpen = !!(this.docFields.data.anchor);
+        window.addEventListener('keydown', this.keyboardHandler);
+      } else {
+        window.removeEventListener('keydown', this.keyboardHandler);
+      }
+    },
+    'editor.view.lastSelectionTime': {
+      handler(newVal, oldVal) {
+        this.populateFields();
+      }
+    },
+    hasSelection(newVal, oldVal) {
+      if (!newVal) {
+        this.close();
+      }
+    }
+  },
+  methods: {
+    removeAnchor() {
+      this.docFields.data = {};
+      this.editor.commands.unsetAnchor();
+      this.close();
+    },
+    click() {
+      if (this.hasSelection) {
+        this.active = !this.active;
+        this.populateFields();
+      }
+    },
+    close() {
+      if (this.active) {
+        this.active = false;
+        this.editor.chain().focus();
+      }
+    },
+    save() {
+      this.triggerValidation = true;
+      this.$nextTick(() => {
+        if (this.docFields.hasErrors) {
+          return;
+        }
+        this.editor.commands.setAnchor({
+          id: this.docFields.data.anchor
+        });
+        this.close();
+      });
+    },
+    keyboardHandler(e) {
+      if (e.keyCode === 27) {
+        this.close();
+      }
+      if (e.keyCode === 13) {
+        if (this.docFields.data.anchor) {
+          this.save();
+          this.close();
+          e.preventDefault();
+        } else {
+          e.preventDefault();
+        }
+      }
+    },
+    async populateFields() {
+      try {
+        const attrs = {
+          anchor: this.editor.getAttributes('anchor').id
+        };
+        this.docFields.data = {};
+        this.schema.forEach((item) => {
+          this.docFields.data[item.name] = attrs[item.name] || '';
+        });
+      } finally {
+        this.generation++;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .apos-anchor-control {
+    position: relative;
+    display: inline-block;
+  }
+
+  .apos-anchor-control__dialog {
+    z-index: $z-index-modal;
+    position: absolute;
+    top: calc(100% + 5px);
+    left: -15px;
+    width: 250px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .apos-anchor-control__dialog.apos-is-triggered.apos-has-selection {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .apos-is-active {
+    background-color: var(--a-base-7);
+  }
+
+  .apos-anchor-control__footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+  }
+
+  .apos-anchor-control__footer .apos-button__wrapper {
+    margin-left: 7.5px;
+  }
+
+  .apos-anchor-control__remove {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  // special schema style for this use
+  .apos-anchor-control ::v-deep .apos-field--target {
+    .apos-field__label {
+      display: none;
+    }
+  }
+
+</style>