Hide rich text controls on interaction (#5008)

* suppress widget controls for rt in some scenarios

* cleanup

* more cleanup

* lint

* remove unneeded method

* clear suppresswidgetcontrol flag on breadcrumb click, changelog

* whitespace

---------

Co-authored-by: Miro Yovchev <2827783+myovchev@users.noreply.github.com>

Author: stuartromanek

CHANGELOG.md

@@ -9,7 +9,8 @@
 
 ### Changes
 
-- Changes handling of `order` and `groups` in the `admin-bar` module to respect, rather that reverse, the order of items
+* Changes handling of `order` and `groups` in the `admin-bar` module to respect, rather that reverse, the order of items
+* Interacting with the text inside a rich text widget will hide the widget controls to prevent awkawrd text selection.
 
 ### Fixes
 

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

@@ -25,7 +25,10 @@
         class="apos-area-widget-controls apos-area-widget__label"
         :class="labelsClasses"
       >
-        <ol class="apos-area-widget__breadcrumbs">
+        <ol
+          @click="isSuppressingWidgetControls = false"
+          class="apos-area-widget__breadcrumbs"
+        >
           <li
             class="
               apos-area-widget__breadcrumb
@@ -135,6 +138,7 @@
         :doc-id="docId"
         :focused="isFocused"
         @update="$emit('update', $event)"
+        @suppress-widget-controls="isSuppressingWidgetControls = true"
       />
       <component
         :is="widgetComponent(widget.type)"
@@ -285,12 +289,14 @@ export default {
       mounted: false, // hack around needing DOM to be rendered for computed classes
       isSuppressed: false,
       menuOpen: null,
+      isSuppressingWidgetControls: false,
       classes: {
         show: 'apos-is-visible',
         open: 'apos-is-open',
         focus: 'apos-is-focused',
         highlight: 'apos-is-highlighted',
-        adjust: 'apos-is-ui-adjusted'
+        adjust: 'apos-is-ui-adjusted',
+        suppressWidgetControls: 'apos-is-suppressing-widget-controls'
       },
       breadcrumbs: {
         $lastEl: null,
@@ -362,7 +368,8 @@ export default {
     },
     controlsClasses() {
       return {
-        [this.classes.show]: this.isFocused
+        [this.classes.show]: this.isFocused,
+        [this.classes.suppressWidgetControls]: this.isSuppressingWidgetControls
       };
     },
     containerClasses() {
@@ -398,6 +405,7 @@ export default {
       } else {
         this.menuOpen = null;
         this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardUnfocus);
+        this.isSuppressingWidgetControls = false;
       }
     }
   },
@@ -881,7 +889,7 @@ export default {
     }
   }
 
-  .apos-is-visible,
+  .apos-is-visible:not(.apos-is-suppressing-widget-controls),
   .apos-is-focused {
     opacity: 1;
     pointer-events: auto;

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

@@ -193,7 +193,7 @@ export default {
       default: false
     }
   },
-  emits: [ 'update' ],
+  emits: [ 'update', 'suppressWidgetControls' ],
   data() {
     return {
       editor: null,
@@ -209,6 +209,8 @@ export default {
       showPlaceholder: null,
       activeInsertMenuComponent: false,
       suppressInsertMenu: false,
+      suppressWidgetControls: false,
+      hasSelection: false,
       insertMenuKey: null,
       openedPopover: false
     };
@@ -377,8 +379,14 @@ export default {
     }
   },
   watch: {
+    suppressWidgetControls(newVal) {
+      if (newVal) {
+        this.$emit('suppressWidgetControls');
+      }
+    },
     isFocused(newVal) {
       if (!newVal) {
+        this.suppressWidgetControls = false;
         if (this.pending) {
           this.emitWidgetUpdate();
         }
@@ -463,6 +471,13 @@ export default {
         this.$nextTick(() => {
           this.showPlaceholder = true;
         });
+      },
+      onSelectionUpdate: ({ editor }) => {
+        this.$nextTick(() => {
+          if (!editor.view.state.selection.empty) {
+            this.suppressWidgetControls = true;
+          }
+        });
       }
     });
     apos.bus.$on('apos-refreshing', this.onAposRefreshing);
@@ -501,6 +516,7 @@ export default {
       } else {
         this.suppressInsertMenu = false;
       }
+      this.suppressWidgetControls = true;
     },
     doSuppressInsertMenu() {
       this.suppressInsertMenu = true;