Pro 7371 link pages (#4901)

ValJed · web-flow · commit d29ced2d3db2 · 2025-04-03T16:13:19.000+02:00
* fixes chrome bug: cannot check box when text is selected when in sortablejs item
* fixes rich text insert menu popover not being properly closed
* workarounds to avoid tiptap toolbat staying stuck (no blur close)
diff --git a/.eslintrc b/.eslintrc
@@ -1 +1 @@
-{ "extends": ["apostrophe"] }
+{ "extends": "apostrophe" }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,10 +9,14 @@
 * Change user's email field type to `email`.
 * Improve media manager experience after uploading images. No additional server requests are made, no broken UI on error.
 * Change reset password form button label to `Reset Password`.
+* Bumps eslint-config-apostrophe, fix errors and a bunch of warnings.
 
 ### Fixes
 
 * Fixes an edge case where reordering a page in the Page Manager might affect another locale.
+* Fixes chrome bug when pages manager checkboxes need a double click when coming from the rich text editor (because some text is selected).
+* Fixes the rich text insert menu image menu not being properly closed.
+* Fixes the rich text toolbar not closing sometimes when unfocusing the editor.
 
 ## 4.14.2 (2025-04-02)
 
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue
@@ -23,7 +23,10 @@
         class-list="apos-rich-text-toolbar"
         :has-tip="false"
       >
-        <div class="apos-rich-text-toolbar__inner">
+        <div
+          ref="toolbar"
+          class="apos-rich-text-toolbar__inner"
+        >
           <component
             :is="(tools[item] && tools[item].component) || 'AposTiptapUndefined'"
             v-for="(item, index) in toolbar"
@@ -32,6 +35,9 @@
             :tool="tools[item]"
             :options="editorOptions"
             :editor="editor"
+            @open-popover="openPopover"
+            @close="closeToolbar"
+            @focusout="onBtnBlur"
           />
         </div>
       </AposContextMenuDialog>
@@ -186,7 +192,8 @@ export default {
       showPlaceholder: null,
       activeInsertMenuComponent: false,
       suppressInsertMenu: false,
-      insertMenuKey: null
+      insertMenuKey: null,
+      openedPopover: false
     };
   },
   computed: {
@@ -405,6 +412,18 @@ export default {
     apos.bus.$off('apos-refreshing', this.onAposRefreshing);
   },
   methods: {
+    openPopover() {
+      this.openedPopover = true;
+    },
+    onBtnBlur(e) {
+      if (this.openedPopover) {
+        return;
+      }
+      if (this.$refs.toolbar?.contains(e.relatedTarget)) {
+        return;
+      }
+      this.closeToolbar();
+    },
     onBubbleHide() {
       apos.bus.$emit('close-context-menus', 'richText');
     },
@@ -651,6 +670,10 @@ export default {
     },
     setActiveInsertMenu(isActive = true) {
       this.activeInsertMenuComponent = isActive;
+    },
+    closeToolbar() {
+      this.openedPopover = false;
+      this.editor.chain().focus().run();
     }
   }
 };
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapAnchor.vue
@@ -72,6 +72,7 @@ export default {
       required: true
     }
   },
+  emits: [ 'close' ],
   data () {
     return {
       generation: 1,
@@ -144,11 +145,11 @@ export default {
     removeAnchor() {
       this.docFields.data = {};
       this.editor.commands.unsetAnchor();
+      this.editor.chain().focus().blur().run();
       this.close();
     },
     close() {
       this.$refs.contextMenu.hide();
-      this.editor.chain().focus();
     },
     async save() {
       this.triggerValidation = true;
@@ -160,6 +161,7 @@ export default {
       this.editor.commands.setAnchor({
         id: this.docFields.data.anchor
       });
+      this.editor.chain().focus().blur().run();
       this.close();
     },
     keyboardHandler(e) {
@@ -195,6 +197,7 @@ export default {
     },
     closePopover() {
       window.removeEventListener('keydown', this.keyboardHandler);
+      this.$emit('close');
     }
   }
 };
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
@@ -80,6 +80,7 @@ const props = defineProps({
     default: () => ({})
   }
 });
+const emit = defineEmits([ 'open-popover', 'close' ]);
 
 const moduleOptions = window.apos.modules['@apostrophecms/rich-text-widget'];
 
@@ -117,9 +118,11 @@ watch(
 
 function openPopover() {
   addEventListener('keydown', keyboardHandler);
+  emit('open-popover');
 }
 function closePopover() {
   removeEventListener('keydown', keyboardHandler);
+  emit('close');
 }
 function keyboardHandler(e) {
   if ([ 'Escape', 'Enter' ].includes(e.key)) {
@@ -129,6 +132,7 @@ function keyboardHandler(e) {
 
 function close() {
   if (contextMenu.value) {
+    props.editor.chain().focus().blur().run();
     contextMenu.value.hide();
   }
 };
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapImage.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapImage.vue
@@ -5,6 +5,8 @@
       menu-placement="bottom-end"
       :button="button"
       :rich-text-menu="true"
+      @open="$emit('open-popover')"
+      @close="$emit('close')"
     >
       <AposImageControlDialog
         :editor="editor"
@@ -28,6 +30,7 @@ export default {
       required: true
     }
   },
+  emits: [ 'open-popover', 'close' ],
   computed: {
     button() {
       return {
@@ -69,7 +72,6 @@ export default {
   methods: {
     close() {
       this.$refs.contextMenu.hide();
-      this.editor.chain().focus();
     }
   }
 };
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapInsertItem.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapInsertItem.vue
@@ -1,6 +1,7 @@
 <template>
   <AposContextMenu
     v-if="menuItem.component && !menuItem.noPopover"
+    ref="contextMenu"
     menu-placement="bottom-end"
     :rich-text-menu="true"
     @open="openPopover"
@@ -65,6 +66,7 @@ const props = defineProps({
 const emit = defineEmits([ 'set-active-insert-menu', 'done' ]);
 
 const isInlineComponentActive = ref(false);
+const contextMenu = ref(null);
 const isInlineComponentShowed = computed(() => {
   return Boolean(props.menuItem.noPopover &&
     props.menuItem.component &&
@@ -105,6 +107,9 @@ function closeInsertMenuItem() {
   removeSlash();
   emit('set-active-insert-menu', false);
   isInlineComponentActive.value = false;
+  if (contextMenu.value) {
+    contextMenu.value.hide();
+  }
 }
 
 function openPopover() {
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapLink.vue
@@ -73,6 +73,7 @@ export default {
       required: true
     }
   },
+  emits: [ 'open-popover', 'close' ],
   data() {
     const moduleOptions = apos.modules['@apostrophecms/rich-text-widget'];
     return {
@@ -151,11 +152,11 @@ export default {
     removeLink() {
       this.docFields.data = {};
       this.editor.commands.unsetLink();
+      this.editor.chain().focus().blur().run();
       this.close();
     },
     close() {
       this.$refs.contextMenu.hide();
-      this.editor.chain().focus();
     },
     async save() {
       this.triggerValidation = true;
@@ -188,6 +189,7 @@ export default {
       attrs.href = this.docFields.data.href;
       this.editor.commands.setLink(attrs);
 
+      this.editor.chain().focus().blur().run();
       this.close();
     },
     keyboardHandler(e) {
@@ -208,7 +210,9 @@ export default {
         this.docFields.data = {};
         this.schema.forEach((item) => {
           if (item.htmlAttribute && item.type === 'checkboxes') {
-            this.docFields.data[item.name] = attrs[item.htmlAttribute] ? [ attrs[item.htmlAttribute] ] : [];
+            this.docFields.data[item.name] = attrs[item.htmlAttribute]
+              ? [ attrs[item.htmlAttribute] ]
+              : [];
             return;
           }
           if (item.htmlAttribute && item.type === 'boolean') {
@@ -258,9 +262,11 @@ export default {
       window.addEventListener('keydown', this.keyboardHandler);
       await this.populateFields();
       this.evaluateConditions();
+      this.$emit('open-popover');
     },
     closePopover() {
       window.removeEventListener('keydown', this.keyboardHandler);
+      this.$emit('close');
     }
   }
 };
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapMarks.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapMarks.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="apos-marks-control">
     <AposContextMenu
+      ref="contextMenu"
       menu-placement="bottom-start"
       :button="button"
       :rich-text-menu="true"
       :center-on-icon="true"
+      @open="openPopover"
+      @close="closePopover"
     >
       <div class="apos-popover apos-marks-control__dialog">
         <div class="apos-marks-control__content-wrapper">
@@ -62,6 +65,7 @@ export default {
       }
     }
   },
+  emits: [ 'open-popover', 'close' ],
   data() {
     return {
       classes: this.options.marks.map(m => m.class)
@@ -132,17 +136,21 @@ export default {
   },
   methods: {
     toggleStyle(mark) {
-      this.editor.commands.focus();
       this.editor.commands[mark.command](mark.type, mark.options || {});
+      this.editor.chain().focus().blur().run();
       this.close();
     },
     click() {
       this.toggleOpen();
     },
-    toggleOpen() {
-    },
     close() {
-      this.editor.chain().focus();
+      this.$refs.contextMenu.hide();
+    },
+    openPopover() {
+      this.$emit('open-popover');
+    },
+    closePopover() {
+      this.$emit('close');
     }
   }
 };
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapStyles.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapStyles.vue
@@ -59,6 +59,7 @@ export default {
       }
     }
   },
+  emits: [ 'close' ],
   data() {
     return {
       multipleSelected: false
@@ -145,15 +146,17 @@ export default {
   methods: {
     setStyle($event) {
       const style = this.nodeOptions[$event.target.value];
-      this.editor.commands.focus();
       this.editor.commands[style.command](style.type, style.options || {});
+      this.editor.chain().focus().blur().run();
+      this.$emit('close');
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-  // If another select el is needed for the rich-text toolbar these styles should be made global
+  // If another select el is needed for the rich-text toolbar
+  // these styles should be made global
   .apos-tiptap-control--select {
     @include apos-button-reset();
     @include apos-transition();
diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapTable.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapTable.vue
@@ -46,6 +46,7 @@ export default {
       }
     }
   },
+  emits: [ 'close' ],
   data() {
     return {
       current: ''
@@ -124,26 +125,26 @@ export default {
   methods: {
     takeAction() {
       const action = this.current;
-      this.editor.commands.focus();
       if (action === 'insertTable') {
         // Reach into prosemirror for current selection,
         // then turn it into a cursor position only so we don't
         // delete the existing selection which would mean
         // you can only create a table by deleting some work
-        this.editor.commands.setTextSelection(this.editor.view.state.selection.$anchor.pos);
+        this.editor.commands.setTextSelection(
+          this.editor.view.state.selection.$anchor.pos
+        );
       }
       this.editor.commands[action]();
-      // We are using the select as a menu of one-time actions, it's not really a persisted value
+      // We are using the select as a menu of one-time actions,
+      // it's not really a persisted value
       this.current = '';
+      this.$emit('close');
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-  // "If another select el is needed for the rich-text toolbar these styles should be made global."
-  // ... And here we are, but first let's see if we decide to rebuild this UI without the menu. -Tom
-
   .apos-tiptap-control--select {
     @include apos-button-reset();
     @include type-small;
diff --git a/modules/@apostrophecms/ui/ui/apos/components/AposTreeRows.vue b/modules/@apostrophecms/ui/ui/apos/components/AposTreeRows.vue
@@ -81,6 +81,7 @@
                 readOnly: maxReached && !checked.includes(row._id)
               }"
               :choice="{ value: row._id }"
+              @pointerdown="pointerEvent"
             />
             <span class="apos-tree__cell__value">
               <AposIndicator
@@ -255,6 +256,11 @@ export default {
     });
   },
   methods: {
+    // Fix for chrome when some text is selected (needed double click to check the box)
+    // Comes from sortablejs, so we avoid the event to propagate to sortablejs listener
+    pointerEvent(event) {
+      event.stopPropagation();
+    },
     setHeights() {
       this.treeBranches.forEach(branch => {
         // Add padding to the max-height to avoid needing a `resize`
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{ "extends": ["apostrophe"] }`
	`1`	`+{ "extends": "apostrophe" }`
Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,7 @@ const props = defineProps({`
`80`	`80`	`default: () => ({})`
`81`	`81`	`}`
`82`	`82`	`});`
	`83`	`+const emit = defineEmits([ 'open-popover', 'close' ]);`
`83`	`84`
`84`	`85`	`const moduleOptions = window.apos.modules['@apostrophecms/rich-text-widget'];`
`85`	`86`
`@@ -117,9 +118,11 @@ watch(`
`117`	`118`
`118`	`119`	`function openPopover() {`
`119`	`120`	`addEventListener('keydown', keyboardHandler);`
	`121`	`+ emit('open-popover');`
`120`	`122`	`}`
`121`	`123`	`function closePopover() {`
`122`	`124`	`removeEventListener('keydown', keyboardHandler);`
	`125`	`+ emit('close');`
`123`	`126`	`}`
`124`	`127`	`function keyboardHandler(e) {`
`125`	`128`	`if ([ 'Escape', 'Enter' ].includes(e.key)) {`
`@@ -129,6 +132,7 @@ function keyboardHandler(e) {`
`129`	`132`
`130`	`133`	`function close() {`
`131`	`134`	`if (contextMenu.value) {`
	`135`	`+ props.editor.chain().focus().blur().run();`
`132`	`136`	`contextMenu.value.hide();`
`133`	`137`	`}`
`134`	`138`	`};`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,8 @@`
`5`	`5`	`menu-placement="bottom-end"`
`6`	`6`	`:button="button"`
`7`	`7`	`:rich-text-menu="true"`
	`8`	`+ @open="$emit('open-popover')"`
	`9`	`+ @close="$emit('close')"`
`8`	`10`	`>`
`9`	`11`	`<AposImageControlDialog`
`10`	`12`	`:editor="editor"`
`@@ -28,6 +30,7 @@ export default {`
`28`	`30`	`required: true`
`29`	`31`	`}`
`30`	`32`	`},`
	`33`	`+ emits: [ 'open-popover', 'close' ],`
`31`	`34`	`computed: {`
`32`	`35`	`button() {`
`33`	`36`	`return {`
`@@ -69,7 +72,6 @@ export default {`
`69`	`72`	`methods: {`
`70`	`73`	`close() {`
`71`	`74`	`this.$refs.contextMenu.hide();`
`72`		`- this.editor.chain().focus();`
`73`	`75`	`}`
`74`	`76`	`}`
`75`	`77`	`};`