seatable-html-page-sdk 0.0.13-beta.4 → 0.0.13-beta.5

package/dist/index.js

@@ -4547,6 +4547,7 @@
     HTML_PAGE_DISABLE_COMMENT_MODE: 'HTML_PAGE_DISABLE_COMMENT_MODE',
     HTML_PAGE_COMMENT_MODE_ELEMENT_HOVER: 'HTML_PAGE_COMMENT_MODE_ELEMENT_HOVER',
     HTML_PAGE_COMMENT_MODE_ELEMENT_SELECTED: 'HTML_PAGE_COMMENT_MODE_ELEMENT_SELECTED',
+    HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE: 'HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE',
     WINDOW_EVENT: 'WINDOW_EVENT'
   };
 
@@ -4614,7 +4615,10 @@
     constructor() {
       this.isActive = false;
       this._handleEvent = this._handleEvent.bind(this);
+      this._handleScroll = this._handleScroll.bind(this);
       this.mouseEvents = ['click', 'dblclick', 'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'contextmenu'];
+      this.hoverTarget = null;
+      this.selectedTarget = null;
     }
     enable() {
       if (this.isActive) return;
@@ -4622,6 +4626,7 @@
       this.mouseEvents.forEach(eventType => {
         window.addEventListener(eventType, this._handleEvent, true);
       });
+      window.addEventListener('scroll', this._handleScroll, true);
       this.addCommentModeStyle();
     }
     disable() {
@@ -4630,8 +4635,30 @@
       this.mouseEvents.forEach(eventType => {
         window.removeEventListener(eventType, this._handleEvent, true);
       });
+      window.removeEventListener('scroll', this._handleScroll, true);
+      this.hoverTarget = null;
+      this.selectedTarget = null;
       this.removeCommentStyle();
     }
+    _handleScroll() {
+      if (!this.isActive) return;
+      if (this.selectedTarget && document.body.contains(this.selectedTarget)) {
+        const data = this.buildElementData(this.selectedTarget);
+        window.parent.postMessage({
+          type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE,
+          data,
+          targetType: 'selected'
+        }, '*');
+      }
+      if (this.hoverTarget && document.body.contains(this.hoverTarget)) {
+        const data = this.buildElementData(this.hoverTarget);
+        window.parent.postMessage({
+          type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_POSITION_UPDATE,
+          data,
+          targetType: 'hover'
+        }, '*');
+      }
+    }
     addCommentModeStyle() {
       let style = document.getElementById('ai-comment-cursor-style');
       if (!style) {
@@ -4653,12 +4680,14 @@
       const target = event.target;
       const isBodyOrHtml = target === document.body || target === document.documentElement;
       if (event.type === 'mouseover') {
+        this.hoverTarget = isBodyOrHtml ? null : target;
         const data = isBodyOrHtml ? null : this.buildElementData(target);
         window.parent.postMessage({
           type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_HOVER,
           data
         }, '*');
       } else if (event.type === 'click') {
+        this.selectedTarget = isBodyOrHtml ? null : target;
         const data = isBodyOrHtml ? null : this.buildElementData(target);
         window.parent.postMessage({
           type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_SELECTED,