Content Pointer: Change insert location based on selection dir

Updates the content pointer behaviour so it's inserted before/after the
target, instead of just before, depending on selection direction, so it
can stay out of the selection range.
Positioning is absolute relative to a parent content so visually should
be the same result as before.

For #6214

resources/js/components/pointer.ts

@@ -105,7 +105,9 @@ export class Pointer extends Component {
      */
     showPointerAtTarget(element: HTMLElement, xPosition: number, keyboardMode: boolean) {
         this.targetElement = element;
-        this.targetSelectionRange = window.getSelection()?.getRangeAt(0) || null;
+        const selectionMade = window.getSelection();
+        const selectionDirection = selectionMade?.direction || '';
+        this.targetSelectionRange = selectionMade?.getRangeAt(0) || null;
         this.updateDomForTarget(element);
 
         this.pointer.style.display = 'block';
@@ -131,7 +133,12 @@ export class Pointer extends Component {
             window.removeEventListener('scroll', scrollListener);
         };
 
-        element.parentElement?.insertBefore(this.pointer, element);
+        if (selectionDirection === 'forward') {
+            element.after(this.pointer);
+        } else {
+            element.before(this.pointer);
+        }
+
         if (!keyboardMode) {
             window.addEventListener('scroll', scrollListener, {passive: true});
         }

resources/sass/_pages.scss

@@ -158,7 +158,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   border-radius: 4px;
   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
   @include mixins.lightDark(background-color, #fff, #333);
-  width: 328px;
+  width: 344px;
 
   &:before {
     position: absolute;