Tests: Updated comment test to account for new editor usage

[bookstack] / resources / js / components / pointer.ts

diff --git a/resources/js/components/pointer.ts b/resources/js/components/pointer.ts
index c3883b7b55411109484e9b689ff794f69449f02f..4b927045aaedc4980101a30b1864d28c00f19037 100644 (file)
--- a/resources/js/components/pointer.ts
+++ b/resources/js/components/pointer.ts
@@ -1,8 +1,7 @@
-import * as DOM from '../services/dom.ts';
+import * as DOM from '../services/dom';

 import {Component} from './component';
 import {Component} from './component';

-import {copyTextToClipboard} from '../services/clipboard.ts';
-import {cyrb53} from "../services/util";
-import {normalizeNodeTextOffsetToParent} from "../services/dom.ts";
+import {copyTextToClipboard} from '../services/clipboard';
+import {hashElement, normalizeNodeTextOffsetToParent} from "../services/dom";

 import {PageComments} from "./page-comments";
 
 export class Pointer extends Component {
 import {PageComments} from "./page-comments";
 
 export class Pointer extends Component {


@@ -12,16 +11,16 @@ export class Pointer extends Component {
     protected targetElement: HTMLElement|null = null;
     protected targetSelectionRange: Range|null = null;
 
     protected targetElement: HTMLElement|null = null;
     protected targetSelectionRange: Range|null = null;
 

-    protected pointer: HTMLElement;
-    protected linkInput: HTMLInputElement;
-    protected linkButton: HTMLElement;
-    protected includeInput: HTMLInputElement;
-    protected includeButton: HTMLElement;
-    protected sectionModeButton: HTMLElement;
-    protected commentButton: HTMLElement;
-    protected modeToggles: HTMLElement[];
-    protected modeSections: HTMLElement[];
-    protected pageId: string;
+    protected pointer!: HTMLElement;
+    protected linkInput!: HTMLInputElement;
+    protected linkButton!: HTMLElement;
+    protected includeInput!: HTMLInputElement;
+    protected includeButton!: HTMLElement;
+    protected sectionModeButton!: HTMLElement;
+    protected commentButton!: HTMLElement;
+    protected modeToggles!: HTMLElement[];
+    protected modeSections!: HTMLElement[];
+    protected pageId!: string;

 
     setup() {
         this.pointer = this.$refs.pointer;
 
     setup() {
         this.pointer = this.$refs.pointer;


@@ -68,7 +67,7 @@ export class Pointer extends Component {
         DOM.onEvents(pageContent, ['mouseup', 'keyup'], event => {
             event.stopPropagation();
             const targetEl = (event.target as HTMLElement).closest('[id^="bkmrk"]');
         DOM.onEvents(pageContent, ['mouseup', 'keyup'], event => {
             event.stopPropagation();
             const targetEl = (event.target as HTMLElement).closest('[id^="bkmrk"]');

-            if (targetEl && window.getSelection().toString().length > 0) {
+            if (targetEl instanceof HTMLElement && (window.getSelection() || '').toString().length > 0) {

                 const xPos = (event instanceof MouseEvent) ? event.pageX : 0;
                 this.showPointerAtTarget(targetEl, xPos, false);
             }
                 const xPos = (event instanceof MouseEvent) ? event.pageX : 0;
                 this.showPointerAtTarget(targetEl, xPos, false);
             }


@@ -103,11 +102,8 @@ export class Pointer extends Component {
 
     /**
      * Move and display the pointer at the given element, targeting the given screen x-position if possible.
 
     /**
      * Move and display the pointer at the given element, targeting the given screen x-position if possible.

-     * @param {Element} element
-     * @param {Number} xPosition
-     * @param {Boolean} keyboardMode

      */
      */

-    showPointerAtTarget(element, xPosition, keyboardMode) {
+    showPointerAtTarget(element: HTMLElement, xPosition: number, keyboardMode: boolean) {

         this.targetElement = element;
         this.targetSelectionRange = window.getSelection()?.getRangeAt(0) || null;
         this.updateDomForTarget(element);
         this.targetElement = element;
         this.targetSelectionRange = window.getSelection()?.getRangeAt(0) || null;
         this.updateDomForTarget(element);


@@ -135,7 +131,7 @@ export class Pointer extends Component {
             window.removeEventListener('scroll', scrollListener);
         };
 
             window.removeEventListener('scroll', scrollListener);
         };
 

-        element.parentElement.insertBefore(this.pointer, element);
+        element.parentElement?.insertBefore(this.pointer, element);

         if (!keyboardMode) {
             window.addEventListener('scroll', scrollListener, {passive: true});
         }
         if (!keyboardMode) {
             window.addEventListener('scroll', scrollListener, {passive: true});
         }


@@ -143,9 +139,8 @@ export class Pointer extends Component {
 
     /**
      * Update the pointer inputs/content for the given target element.
 
     /**
      * Update the pointer inputs/content for the given target element.

-     * @param {?Element} element

      */
      */

-    updateDomForTarget(element) {
+    updateDomForTarget(element: HTMLElement) {

         const permaLink = window.baseUrl(`/link/${this.pageId}#${element.id}`);
         const includeTag = `{{@${this.pageId}#${element.id}}}`;
 
         const permaLink = window.baseUrl(`/link/${this.pageId}#${element.id}`);
         const includeTag = `{{@${this.pageId}#${element.id}}}`;
 


@@ -159,13 +154,13 @@ export class Pointer extends Component {
             const elementId = element.id;
 
             // Get the first 50 characters.
             const elementId = element.id;
 
             // Get the first 50 characters.

-            const queryContent = element.textContent && element.textContent.substring(0, 50);
+            const queryContent = (element.textContent || '').substring(0, 50);

             editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
         }
     }
 
     enterSectionSelectMode() {
             editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
         }
     }
 
     enterSectionSelectMode() {

-        const sections = Array.from(document.querySelectorAll('.page-content [id^="bkmrk"]'));
+        const sections = Array.from(document.querySelectorAll('.page-content [id^="bkmrk"]')) as HTMLElement[];

         for (const section of sections) {
             section.setAttribute('tabindex', '0');
         }
         for (const section of sections) {
             section.setAttribute('tabindex', '0');
         }


@@ -173,19 +168,18 @@ export class Pointer extends Component {
         sections[0].focus();
 
         DOM.onEnterPress(sections, event => {
         sections[0].focus();
 
         DOM.onEnterPress(sections, event => {

-            this.showPointerAtTarget(event.target, 0, true);
+            this.showPointerAtTarget(event.target as HTMLElement, 0, true);

             this.pointer.focus();
         });
     }
 
             this.pointer.focus();
         });
     }
 

-    createCommentAtPointer(event) {
+    createCommentAtPointer() {

         if (!this.targetElement) {
             return;
         }
 
         if (!this.targetElement) {
             return;
         }
 

-        const normalisedElemHtml = this.targetElement.outerHTML.replace(/\s{2,}/g, '');

         const refId = this.targetElement.id;
         const refId = this.targetElement.id;

-        const hash = cyrb53(normalisedElemHtml);
+        const hash = hashElement(this.targetElement);

         let range = '';
         if (this.targetSelectionRange) {
             const commonContainer = this.targetSelectionRange.commonAncestorContainer;
         let range = '';
         if (this.targetSelectionRange) {
             const commonContainer = this.targetSelectionRange.commonAncestorContainer;