seatable-html-page-sdk 0.0.12 → 0.0.13-beta.1

package/dist/index.js

@@ -272,16 +272,16 @@
   const FormDataCtor = typeof G.FormData !== 'undefined' ? G.FormData : undefined;
 
   const isFormData = (thing) => {
-    let kind;
-    return thing && (
-      (FormDataCtor && thing instanceof FormDataCtor) || (
-        isFunction$1(thing.append) && (
-          (kind = kindOf(thing)) === 'formdata' ||
-          // detect form-data instance
-          (kind === 'object' && isFunction$1(thing.toString) && thing.toString() === '[object FormData]')
-        )
-      )
-    );
+    if (!thing) return false;
+    if (FormDataCtor && thing instanceof FormDataCtor) return true;
+    // Reject plain objects inheriting directly from Object.prototype so prototype-pollution gadgets can't spoof FormData (GHSA-6chq-wfr3-2hj9).
+    const proto = getPrototypeOf(thing);
+    if (!proto || proto === Object.prototype) return false;
+    if (!isFunction$1(thing.append)) return false;
+    const kind = kindOf(thing);
+    return kind === 'formdata' ||
+      // detect form-data instance
+      (kind === 'object' && isFunction$1(thing.toString) && thing.toString() === '[object FormData]');
   };
 
   /**
@@ -948,40 +948,40 @@
       return axiosError;
     }
 
-      /**
-       * Create an Error with the specified message, config, error code, request and response.
-       *
-       * @param {string} message The error message.
-       * @param {string} [code] The error code (for example, 'ECONNABORTED').
-       * @param {Object} [config] The config.
-       * @param {Object} [request] The request.
-       * @param {Object} [response] The response.
-       *
-       * @returns {Error} The created error.
-       */
-      constructor(message, code, config, request, response) {
-        super(message);
-        
-        // Make message enumerable to maintain backward compatibility
-        // The native Error constructor sets message as non-enumerable,
-        // but axios < v1.13.3 had it as enumerable
-        Object.defineProperty(this, 'message', {
-            value: message,
-            enumerable: true,
-            writable: true,
-            configurable: true
-        });
-        
-        this.name = 'AxiosError';
-        this.isAxiosError = true;
-        code && (this.code = code);
-        config && (this.config = config);
-        request && (this.request = request);
-        if (response) {
-            this.response = response;
-            this.status = response.status;
-        }
+    /**
+     * Create an Error with the specified message, config, error code, request and response.
+     *
+     * @param {string} message The error message.
+     * @param {string} [code] The error code (for example, 'ECONNABORTED').
+     * @param {Object} [config] The config.
+     * @param {Object} [request] The request.
+     * @param {Object} [response] The response.
+     *
+     * @returns {Error} The created error.
+     */
+    constructor(message, code, config, request, response) {
+      super(message);
+
+      // Make message enumerable to maintain backward compatibility
+      // The native Error constructor sets message as non-enumerable,
+      // but axios < v1.13.3 had it as enumerable
+      Object.defineProperty(this, 'message', {
+        value: message,
+        enumerable: true,
+        writable: true,
+        configurable: true,
+      });
+
+      this.name = 'AxiosError';
+      this.isAxiosError = true;
+      code && (this.code = code);
+      config && (this.config = config);
+      request && (this.request = request);
+      if (response) {
+        this.response = response;
+        this.status = response.status;
       }
+    }
 
     toJSON() {
       return {
@@ -1017,6 +1017,7 @@
   AxiosError.ERR_CANCELED = 'ERR_CANCELED';
   AxiosError.ERR_NOT_SUPPORT = 'ERR_NOT_SUPPORT';
   AxiosError.ERR_INVALID_URL = 'ERR_INVALID_URL';
+  AxiosError.ERR_FORM_DATA_DEPTH_EXCEEDED = 'ERR_FORM_DATA_DEPTH_EXCEEDED';
 
   var AxiosError$1 = AxiosError;
 
@@ -1133,6 +1134,7 @@
     const dots = options.dots;
     const indexes = options.indexes;
     const _Blob = options.Blob || (typeof Blob !== 'undefined' && Blob);
+    const maxDepth = options.maxDepth === undefined ? 100 : options.maxDepth;
     const useBlob = _Blob && utils$1.isSpecCompliantForm(formData);
 
     if (!utils$1.isFunction(visitor)) {
@@ -1225,9 +1227,16 @@
       isVisitable,
     });
 
-    function build(value, path) {
+    function build(value, path, depth = 0) {
       if (utils$1.isUndefined(value)) return;
 
+      if (depth > maxDepth) {
+        throw new AxiosError$1(
+          'Object is too deeply nested (' + depth + ' levels). Max depth: ' + maxDepth,
+          AxiosError$1.ERR_FORM_DATA_DEPTH_EXCEEDED
+        );
+      }
+
       if (stack.indexOf(value) !== -1) {
         throw Error('Circular reference detected in ' + path.join('.'));
       }
@@ -1240,7 +1249,7 @@
           visitor.call(formData, el, utils$1.isString(key) ? key.trim() : key, path, exposedHelpers);
 
         if (result === true) {
-          build(el, path ? path.concat(key) : [key]);
+          build(el, path ? path.concat(key) : [key], depth + 1);
         }
       });
 
@@ -1272,9 +1281,8 @@
       ')': '%29',
       '~': '%7E',
       '%20': '+',
-      '%00': '\x00',
     };
-    return encodeURIComponent(str).replace(/[!'()~]|%20|%00/g, function replacer(match) {
+    return encodeURIComponent(str).replace(/[!'()~]|%20/g, function replacer(match) {
       return charMap[match];
     });
   }
@@ -1596,7 +1604,9 @@
 
       if (isLast) {
         if (utils$1.hasOwnProp(target, name)) {
-          target[name] = [target[name], value];
+          target[name] = utils$1.isArray(target[name])
+            ? target[name].concat(value)
+            : [target[name], value];
         } else {
           target[name] = value;
         }
@@ -1630,6 +1640,8 @@
     return null;
   }
 
+  const own = (obj, key) => (obj != null && utils$1.hasOwnProp(obj, key) ? obj[key] : undefined);
+
   /**
    * It takes a string, tries to parse it, and if it fails, it returns the stringified version
    * of the input
@@ -1697,20 +1709,22 @@
         let isFileList;
 
         if (isObjectPayload) {
+          const formSerializer = own(this, 'formSerializer');
           if (contentType.indexOf('application/x-www-form-urlencoded') > -1) {
-            return toURLEncodedForm(data, this.formSerializer).toString();
+            return toURLEncodedForm(data, formSerializer).toString();
           }
 
           if (
             (isFileList = utils$1.isFileList(data)) ||
             contentType.indexOf('multipart/form-data') > -1
           ) {
-            const _FormData = this.env && this.env.FormData;
+            const env = own(this, 'env');
+            const _FormData = env && env.FormData;
 
             return toFormData(
               isFileList ? { 'files[]': data } : data,
               _FormData && new _FormData(),
-              this.formSerializer
+              formSerializer
             );
           }
         }
@@ -1726,9 +1740,10 @@
 
     transformResponse: [
       function transformResponse(data) {
-        const transitional = this.transitional || defaults.transitional;
+        const transitional = own(this, 'transitional') || defaults.transitional;
         const forcedJSONParsing = transitional && transitional.forcedJSONParsing;
-        const JSONRequested = this.responseType === 'json';
+        const responseType = own(this, 'responseType');
+        const JSONRequested = responseType === 'json';
 
         if (utils$1.isResponse(data) || utils$1.isReadableStream(data)) {
           return data;
@@ -1737,17 +1752,17 @@
         if (
           data &&
           utils$1.isString(data) &&
-          ((forcedJSONParsing && !this.responseType) || JSONRequested)
+          ((forcedJSONParsing && !responseType) || JSONRequested)
         ) {
           const silentJSONParsing = transitional && transitional.silentJSONParsing;
           const strictJSONParsing = !silentJSONParsing && JSONRequested;
 
           try {
-            return JSON.parse(data, this.parseReviver);
+            return JSON.parse(data, own(this, 'parseReviver'));
           } catch (e) {
             if (strictJSONParsing) {
               if (e.name === 'SyntaxError') {
-                throw AxiosError$1.from(e, AxiosError$1.ERR_BAD_RESPONSE, this, null, this.response);
+                throw AxiosError$1.from(e, AxiosError$1.ERR_BAD_RESPONSE, this, null, own(this, 'response'));
               }
               throw e;
             }
@@ -1861,41 +1876,41 @@
 
   const $internals = Symbol('internals');
 
-  const isValidHeaderValue = (value) => !/[\r\n]/.test(value);
+  const INVALID_HEADER_VALUE_CHARS_RE = /[^\x09\x20-\x7E\x80-\xFF]/g;
 
-  function assertValidHeaderValue(value, header) {
-    if (value === false || value == null) {
-      return;
-    }
+  function trimSPorHTAB(str) {
+    let start = 0;
+    let end = str.length;
 
-    if (utils$1.isArray(value)) {
-      value.forEach((v) => assertValidHeaderValue(v, header));
-      return;
-    }
+    while (start < end) {
+      const code = str.charCodeAt(start);
 
-    if (!isValidHeaderValue(String(value))) {
-      throw new Error(`Invalid character in header content ["${header}"]`);
-    }
-  }
-
-  function normalizeHeader(header) {
-    return header && String(header).trim().toLowerCase();
-  }
+      if (code !== 0x09 && code !== 0x20) {
+        break;
+      }
 
-  function stripTrailingCRLF(str) {
-    let end = str.length;
+      start += 1;
+    }
 
-    while (end > 0) {
-      const charCode = str.charCodeAt(end - 1);
+    while (end > start) {
+      const code = str.charCodeAt(end - 1);
 
-      if (charCode !== 10 && charCode !== 13) {
+      if (code !== 0x09 && code !== 0x20) {
         break;
       }
 
       end -= 1;
     }
 
-    return end === str.length ? str : str.slice(0, end);
+    return start === 0 && end === str.length ? str : str.slice(start, end);
+  }
+
+  function normalizeHeader(header) {
+    return header && String(header).trim().toLowerCase();
+  }
+
+  function sanitizeHeaderValue(str) {
+    return trimSPorHTAB(str.replace(INVALID_HEADER_VALUE_CHARS_RE, ''));
   }
 
   function normalizeValue(value) {
@@ -1903,7 +1918,7 @@
       return value;
     }
 
-    return utils$1.isArray(value) ? value.map(normalizeValue) : stripTrailingCRLF(String(value));
+    return utils$1.isArray(value) ? value.map(normalizeValue) : sanitizeHeaderValue(String(value));
   }
 
   function parseTokens(str) {
@@ -1985,7 +2000,6 @@
           _rewrite === true ||
           (_rewrite === undefined && self[key] !== false)
         ) {
-          assertValidHeaderValue(_value, _header);
           self[key || _header] = normalizeValue(_value);
         }
       }
@@ -2412,13 +2426,13 @@
     const _speedometer = speedometer(50, 250);
 
     return throttle((e) => {
-      const loaded = e.loaded;
+      const rawLoaded = e.loaded;
       const total = e.lengthComputable ? e.total : undefined;
-      const progressBytes = loaded - bytesNotified;
+      const loaded = total != null ? Math.min(rawLoaded, total) : rawLoaded;
+      const progressBytes = Math.max(0, loaded - bytesNotified);
       const rate = _speedometer(progressBytes);
-      const inRange = loaded <= total;
 
-      bytesNotified = loaded;
+      bytesNotified = Math.max(bytesNotified, loaded);
 
       const data = {
         loaded,
@@ -2426,7 +2440,7 @@
         progress: total ? loaded / total : undefined,
         bytes: progressBytes,
         rate: rate ? rate : undefined,
-        estimated: rate && total && inRange ? (total - loaded) / rate : undefined,
+        estimated: rate && total ? (total - loaded) / rate : undefined,
         event: e,
         lengthComputable: total != null,
         [isDownloadStream ? 'download' : 'upload']: true,
@@ -2560,7 +2574,7 @@
    */
   function buildFullPath(baseURL, requestedURL, allowAbsoluteUrls) {
     let isRelativeUrl = !isAbsoluteURL(requestedURL);
-    if (baseURL && (isRelativeUrl || allowAbsoluteUrls == false)) {
+    if (baseURL && (isRelativeUrl || allowAbsoluteUrls === false)) {
       return combineURLs(baseURL, requestedURL);
     }
     return requestedURL;
@@ -2580,7 +2594,18 @@
   function mergeConfig(config1, config2) {
     // eslint-disable-next-line no-param-reassign
     config2 = config2 || {};
-    const config = {};
+
+    // Use a null-prototype object so that downstream reads such as `config.auth`
+    // or `config.baseURL` cannot inherit polluted values from Object.prototype
+    // (see GHSA-q8qp-cvcw-x6jj). `hasOwnProperty` is restored as a non-enumerable
+    // own slot to preserve ergonomics for user code that relies on it.
+    const config = Object.create(null);
+    Object.defineProperty(config, 'hasOwnProperty', {
+      value: Object.prototype.hasOwnProperty,
+      enumerable: false,
+      writable: true,
+      configurable: true,
+    });
 
     function getMergedValue(target, source, prop, caseless) {
       if (utils$1.isPlainObject(target) && utils$1.isPlainObject(source)) {
@@ -2619,9 +2644,9 @@
 
     // eslint-disable-next-line consistent-return
     function mergeDirectKeys(a, b, prop) {
-      if (prop in config2) {
+      if (utils$1.hasOwnProp(config2, prop)) {
         return getMergedValue(a, b);
-      } else if (prop in config1) {
+      } else if (utils$1.hasOwnProp(config1, prop)) {
         return getMergedValue(undefined, a);
       }
     }
@@ -2653,6 +2678,7 @@
       httpsAgent: defaultToConfig2,
       cancelToken: defaultToConfig2,
       socketPath: defaultToConfig2,
+      allowedSocketPaths: defaultToConfig2,
       responseEncoding: defaultToConfig2,
       validateStatus: mergeDirectKeys,
       headers: (a, b, prop) =>
@@ -2662,7 +2688,9 @@
     utils$1.forEach(Object.keys({ ...config1, ...config2 }), function computeConfigValue(prop) {
       if (prop === '__proto__' || prop === 'constructor' || prop === 'prototype') return;
       const merge = utils$1.hasOwnProp(mergeMap, prop) ? mergeMap[prop] : mergeDeepProperties;
-      const configValue = merge(config1[prop], config2[prop], prop);
+      const a = utils$1.hasOwnProp(config1, prop) ? config1[prop] : undefined;
+      const b = utils$1.hasOwnProp(config2, prop) ? config2[prop] : undefined;
+      const configValue = merge(a, b, prop);
       (utils$1.isUndefined(configValue) && merge !== mergeDirectKeys) || (config[prop] = configValue);
     });
 
@@ -2672,12 +2700,24 @@
   var resolveConfig = (config) => {
     const newConfig = mergeConfig({}, config);
 
-    let { data, withXSRFToken, xsrfHeaderName, xsrfCookieName, headers, auth } = newConfig;
+    // Read only own properties to prevent prototype pollution gadgets
+    // (e.g. Object.prototype.baseURL = 'https://evil.com'). See GHSA-q8qp-cvcw-x6jj.
+    const own = (key) => (utils$1.hasOwnProp(newConfig, key) ? newConfig[key] : undefined);
+
+    const data = own('data');
+    let withXSRFToken = own('withXSRFToken');
+    const xsrfHeaderName = own('xsrfHeaderName');
+    const xsrfCookieName = own('xsrfCookieName');
+    let headers = own('headers');
+    const auth = own('auth');
+    const baseURL = own('baseURL');
+    const allowAbsoluteUrls = own('allowAbsoluteUrls');
+    const url = own('url');
 
     newConfig.headers = headers = AxiosHeaders$1.from(headers);
 
     newConfig.url = buildURL(
-      buildFullPath(newConfig.baseURL, newConfig.url, newConfig.allowAbsoluteUrls),
+      buildFullPath(baseURL, url, allowAbsoluteUrls),
       config.params,
       config.paramsSerializer
     );
@@ -2716,10 +2756,18 @@
     // Specifically not if we're in a web worker, or react-native.
 
     if (platform.hasStandardBrowserEnv) {
-      withXSRFToken && utils$1.isFunction(withXSRFToken) && (withXSRFToken = withXSRFToken(newConfig));
+      if (utils$1.isFunction(withXSRFToken)) {
+        withXSRFToken = withXSRFToken(newConfig);
+      }
 
-      if (withXSRFToken || (withXSRFToken !== false && isURLSameOrigin(newConfig.url))) {
-        // Add xsrf header
+      // Strict boolean check — prevents proto-pollution gadgets (e.g. Object.prototype.withXSRFToken = 1)
+      // and misconfigurations (e.g. "false") from short-circuiting the same-origin check and leaking
+      // the XSRF token cross-origin. See GHSA-xx6v-rp6x-q39c.
+      const shouldSendXSRF =
+        withXSRFToken === true ||
+        (withXSRFToken == null && isURLSameOrigin(newConfig.url));
+
+      if (shouldSendXSRF) {
         const xsrfValue = xsrfHeaderName && xsrfCookieName && cookies.read(xsrfCookieName);
 
         if (xsrfValue) {
@@ -3140,18 +3188,20 @@
       test(() => {
         let duplexAccessed = false;
 
-        const body = new ReadableStream$1();
-
-        const hasContentType = new Request(platform.origin, {
-          body,
+        const request = new Request(platform.origin, {
+          body: new ReadableStream$1(),
           method: 'POST',
           get duplex() {
             duplexAccessed = true;
             return 'half';
           },
-        }).headers.has('Content-Type');
+        });
+
+        const hasContentType = request.headers.has('Content-Type');
 
-        body.cancel();
+        if (request.body != null) {
+          request.body.cancel();
+        }
 
         return duplexAccessed && !hasContentType;
       });
@@ -3295,6 +3345,19 @@
         // see https://github.com/cloudflare/workerd/issues/902
         const isCredentialsSupported = isRequestSupported && 'credentials' in Request.prototype;
 
+        // If data is FormData and Content-Type is multipart/form-data without boundary,
+        // delete it so fetch can set it correctly with the boundary
+        if (utils$1.isFormData(data)) {
+          const contentType = headers.getContentType();
+          if (
+            contentType &&
+            /^multipart\/form-data/i.test(contentType) &&
+            !/boundary=/i.test(contentType)
+          ) {
+            headers.delete('content-type');
+          }
+        }
+
         const resolvedOptions = {
           ...fetchOptions,
           signal: composedSignal,
@@ -3603,7 +3666,7 @@
     );
   }
 
-  const VERSION = "1.15.0";
+  const VERSION = "1.15.2";
 
   const validators$1 = {};
 
@@ -3688,7 +3751,9 @@
     let i = keys.length;
     while (i-- > 0) {
       const opt = keys[i];
-      const validator = schema[opt];
+      // Use hasOwnProperty so a polluted Object.prototype.<opt> cannot supply
+      // a non-function validator and cause a TypeError. See GHSA-q8qp-cvcw-x6jj.
+      const validator = Object.prototype.hasOwnProperty.call(schema, opt) ? schema[opt] : undefined;
       if (validator) {
         const value = options[opt];
         const result = value === undefined || validator(value, opt, options);
@@ -4478,8 +4543,132 @@
     HTML_PAGE_REQUEST: 'HTML_PAGE_REQUEST',
     HTML_PAGE_RESPONSE: 'HTML_PAGE_RESPONSE',
     HTML_PAGE_EVENT: 'HTML_PAGE_EVENT',
+    HTML_PAGE_ENABLE_COMMENT_MODE: 'HTML_PAGE_ENABLE_COMMENT_MODE',
+    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',
     WINDOW_EVENT: 'WINDOW_EVENT'
   };
+
+  const countSameTagSiblingsBefore = element => {
+    let count = 0;
+    let sibling = element.previousElementSibling;
+    while (sibling) {
+      if (sibling.tagName === element.tagName) count += 1;
+      sibling = sibling.previousElementSibling;
+    }
+    return count;
+  };
+  const generateSelector = element => {
+    if (!element || element === document.body) return null;
+    const parts = [];
+    let current = element;
+    while (current && current !== document.body) {
+      const tag = current.tagName.toLowerCase();
+      const index = countSameTagSiblingsBefore(current) + 1;
+      parts.unshift(`${tag}:nth-of-type(${index})`);
+      current = current.parentElement;
+    }
+    return 'body > ' + parts.join(' > ');
+  };
+  const getHtmlHint = function (element) {
+    let maxLen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 180;
+    const html = element.outerHTML || '';
+    return html.length > maxLen ? html.slice(0, maxLen) : html;
+  };
+  const getCurrentText = function (element) {
+    let maxLen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 160;
+    const text = (element.textContent || '').replace(/\s+/g, ' ').trim();
+    return text.length > maxLen ? text.slice(0, maxLen) : text;
+  };
+  const computeStyle = element => {
+    const style = window.getComputedStyle(element);
+    return {
+      backgroundColor: style.backgroundColor,
+      color: style.color,
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight,
+      fontFamily: style.fontFamily,
+      lineHeight: style.lineHeight,
+      borderRadius: style.borderRadius,
+      paddingBottom: style.paddingBottom,
+      paddingLeft: style.paddingLeft,
+      paddingRight: style.paddingRight,
+      paddingTop: style.paddingTop,
+      marginBottom: style.marginBottom,
+      marginLeft: style.marginLeft,
+      marginRight: style.marginRight,
+      marginTop: style.marginTop,
+      textAlign: style.textAlign,
+      display: style.display,
+      width: style.width,
+      height: style.height
+    };
+  };
+  const generateLabel = element => {
+    const tag = element.tagName.toLowerCase();
+    const classes = element.classList.length > 0 ? '.' + Array.from(element.classList).join('.') : '';
+    return `${tag}${classes}`;
+  };
+  class CommentModeAdapter {
+    constructor() {
+      this.isActive = false;
+      this._handleEvent = this._handleEvent.bind(this);
+      this.mouseEvents = ['click', 'dblclick', 'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'contextmenu'];
+    }
+    enable() {
+      if (this.isActive) return;
+      this.isActive = true;
+      this.mouseEvents.forEach(eventType => {
+        window.addEventListener(eventType, this._handleEvent, true);
+      });
+    }
+    disable() {
+      if (!this.isActive) return;
+      this.isActive = false;
+      this.mouseEvents.forEach(eventType => {
+        window.removeEventListener(eventType, this._handleEvent, true);
+      });
+    }
+    _handleEvent(event) {
+      if (!this.isActive) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      const target = event.target;
+      if (event.type === 'mouseover') {
+        const data = this.buildElementData(target);
+        if (data) {
+          window.parent.postMessage({
+            type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_HOVER,
+            data
+          }, '*');
+        }
+      } else if (event.type === 'click') {
+        const data = this.buildElementData(target);
+        if (data) {
+          window.parent.postMessage({
+            type: POST_MESSAGE_TYPE.HTML_PAGE_COMMENT_MODE_ELEMENT_SELECTED,
+            data
+          }, '*');
+        }
+      }
+    }
+    buildElementData(target) {
+      const selector = generateSelector(target) || null;
+      return {
+        selector,
+        currentText: getCurrentText(target),
+        htmlHint: getHtmlHint(target),
+        computedStyle: computeStyle(target),
+        label: generateLabel(target)
+      };
+    }
+    destroy() {
+      this.disable();
+    }
+  }
+
   const POST_MESSAGE_REQUEST_TYPE = {
     GET_SERVER: 'get_server',
     GET_ACCESS_TOKEN: 'get_access_token',
@@ -4556,6 +4745,8 @@
       this.pendingRequests = {};
       this.eventHandlers = {};
       this.timeout = this.options.timeout || 10000;
+      this.isCommentMode = false;
+      this.commentModeAdapter = new CommentModeAdapter();
       this.setupMessageListener();
     }
     generatorRequestId() {
@@ -4583,47 +4774,57 @@
       }, this.targetOrigin);
     }
     setEventsListener() {
-      let rafId = null;
-      let pendingEvent = null;
-      [...SUPPORT_WINDOW_MOUSE_EVENT_TYPES, ...SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES, ...SUPPORT_WINDOW_DRAG_EVENT_TYPES].forEach(eventType => {
-        window.addEventListener(eventType, event => {
-          if (event.source === WINDOW_EVENT_SOURCE_TYPE.APP) return;
-          const target = event.target;
-          if (target && INTERACTIVE_TAGS.includes(target.tagName)) return;
-          if (SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES.includes(eventType)) {
-            const active = document.activeElement;
-            if (active && INTERACTIVE_TAGS.includes(active.tagName)) return;
-          }
-          if (HIGH_FREQUENCY_WINDOW_EVENT_TYPES.includes(eventType)) {
-            // High-frequency events that need throttling (use RAF to limit to 60fps)
-            // Use requestAnimationFrame for throttling high-frequency events
-            // Store the latest event with necessary data
-            pendingEvent = createWindowEventData({
-              eventType,
-              event
-            });
-
-            // Only schedule a new frame if one isn't already scheduled
-            if (rafId === null) {
-              rafId = requestAnimationFrame(() => {
-                if (pendingEvent) {
-                  this.postWindowEvent(pendingEvent);
-                  pendingEvent = null;
-                  rafId = null;
-                }
-              });
-            }
-            return;
-          }
-
-          // Low-frequency events
-          this.postWindowEvent(createWindowEventData({
-            eventType,
-            event
-          }));
-        }, true);
+      this._windowEventHandler = this._windowEventHandler.bind(this);
+      this.interactiveEventTypes = [...SUPPORT_WINDOW_MOUSE_EVENT_TYPES, ...SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES, ...SUPPORT_WINDOW_DRAG_EVENT_TYPES];
+      this.rafId = null;
+      this.pendingEvent = null;
+      this.bindInteractiveEvents();
+    }
+    bindInteractiveEvents() {
+      this.interactiveEventTypes.forEach(eventType => {
+        window.addEventListener(eventType, this._windowEventHandler, true);
       });
     }
+    unbindInteractiveEvents() {
+      this.interactiveEventTypes.forEach(eventType => {
+        window.removeEventListener(eventType, this._windowEventHandler, true);
+      });
+      if (this.rafId !== null) {
+        cancelAnimationFrame(this.rafId);
+        this.rafId = null;
+      }
+      this.pendingEvent = null;
+    }
+    _windowEventHandler(event) {
+      if (event.source === WINDOW_EVENT_SOURCE_TYPE.APP) return;
+      const target = event.target;
+      if (target && INTERACTIVE_TAGS.includes(target.tagName)) return;
+      const eventType = event.type;
+      if (SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES.includes(eventType)) {
+        const active = document.activeElement;
+        if (active && INTERACTIVE_TAGS.includes(active.tagName)) return;
+      }
+      if (HIGH_FREQUENCY_WINDOW_EVENT_TYPES.includes(eventType)) {
+        this.pendingEvent = createWindowEventData({
+          eventType,
+          event
+        });
+        if (this.rafId === null) {
+          this.rafId = requestAnimationFrame(() => {
+            if (this.pendingEvent) {
+              this.postWindowEvent(this.pendingEvent);
+              this.pendingEvent = null;
+              this.rafId = null;
+            }
+          });
+        }
+        return;
+      }
+      this.postWindowEvent(createWindowEventData({
+        eventType,
+        event
+      }));
+    }
     async request(method, params) {
       if (this.selfWindow) {
         return new Promise(resolve => {
@@ -4681,62 +4882,75 @@
         }
       } else if (type === POST_MESSAGE_TYPE.HTML_PAGE_EVENT) {
         this.emitEvent(eventType, payload);
+      } else if (type === POST_MESSAGE_TYPE.HTML_PAGE_ENABLE_COMMENT_MODE) {
+        this.isCommentMode = true;
+        document.body.style.cursor = 'crosshair';
+        this.unbindInteractiveEvents();
+        if (this.commentModeAdapter) this.commentModeAdapter.enable();
+      } else if (type === POST_MESSAGE_TYPE.HTML_PAGE_DISABLE_COMMENT_MODE) {
+        this.isCommentMode = false;
+        document.body.style.cursor = '';
+        if (this.commentModeAdapter) this.commentModeAdapter.disable();
+        this.bindInteractiveEvents();
       } else if (type === POST_MESSAGE_TYPE.WINDOW_EVENT) {
-        const eventData = data.event_data;
-        if (!eventData) return;
-        let syntheticEvent;
-        let targetElement;
-        if (SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES.includes(eventData.type)) {
-          syntheticEvent = new KeyboardEvent(eventData.type, {
-            bubbles: true,
-            cancelable: true,
-            key: eventData.key,
-            code: eventData.code,
-            keyCode: eventData.keyCode,
-            ctrlKey: eventData.ctrlKey,
-            shiftKey: eventData.shiftKey,
-            altKey: eventData.altKey,
-            metaKey: eventData.metaKey,
-            repeat: eventData.repeat,
-            view: window
-          });
-          targetElement = document.activeElement || document.body;
-        } else if (SUPPORT_WINDOW_MOUSE_EVENT_TYPES.includes(eventData.type)) {
-          syntheticEvent = new MouseEvent(eventData.type, {
-            bubbles: true,
-            cancelable: true,
-            view: window,
-            clientX: eventData.x,
-            clientY: eventData.y,
-            screenX: eventData.x,
-            screenY: eventData.y,
-            button: eventData.button,
-            buttons: eventData.buttons
-          });
-          const elementAtPoint = document.elementFromPoint(eventData.x, eventData.y);
-          targetElement = elementAtPoint || document.body;
-        } else if (SUPPORT_WINDOW_DRAG_EVENT_TYPES.includes(eventData.type)) {
-          syntheticEvent = new DragEvent(eventData.type, {
-            bubbles: true,
-            cancelable: true,
-            view: window,
-            clientX: eventData.x,
-            clientY: eventData.y,
-            screenX: eventData.x,
-            screenY: eventData.y,
-            button: eventData.button,
-            buttons: eventData.buttons
-          });
-          const elementAtPoint = document.elementFromPoint(eventData.x, eventData.y);
-          targetElement = elementAtPoint || document.body;
-        }
-        if (!targetElement || !syntheticEvent) return;
-
-        // Dispatch once on the target element, it will bubble up naturally
-        syntheticEvent.source = eventData.source;
-        targetElement.dispatchEvent(syntheticEvent);
+        this.handleWindowEvent(data);
       }
     }
+    handleWindowEvent(data) {
+      const eventData = data.event_data;
+      if (!eventData || this.isCommentMode) return;
+      let syntheticEvent;
+      let targetElement;
+      if (SUPPORT_WINDOW_KEYBOARD_EVENT_TYPES.includes(eventData.type)) {
+        syntheticEvent = new KeyboardEvent(eventData.type, {
+          bubbles: true,
+          cancelable: true,
+          key: eventData.key,
+          code: eventData.code,
+          keyCode: eventData.keyCode,
+          ctrlKey: eventData.ctrlKey,
+          shiftKey: eventData.shiftKey,
+          altKey: eventData.altKey,
+          metaKey: eventData.metaKey,
+          repeat: eventData.repeat,
+          view: window
+        });
+        targetElement = document.activeElement || document.body;
+      } else if (SUPPORT_WINDOW_MOUSE_EVENT_TYPES.includes(eventData.type)) {
+        syntheticEvent = new MouseEvent(eventData.type, {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: eventData.x,
+          clientY: eventData.y,
+          screenX: eventData.x,
+          screenY: eventData.y,
+          button: eventData.button,
+          buttons: eventData.buttons
+        });
+        const elementAtPoint = document.elementFromPoint(eventData.x, eventData.y);
+        targetElement = elementAtPoint || document.body;
+      } else if (SUPPORT_WINDOW_DRAG_EVENT_TYPES.includes(eventData.type)) {
+        syntheticEvent = new DragEvent(eventData.type, {
+          bubbles: true,
+          cancelable: true,
+          view: window,
+          clientX: eventData.x,
+          clientY: eventData.y,
+          screenX: eventData.x,
+          screenY: eventData.y,
+          button: eventData.button,
+          buttons: eventData.buttons
+        });
+        const elementAtPoint = document.elementFromPoint(eventData.x, eventData.y);
+        targetElement = elementAtPoint || document.body;
+      }
+      if (!targetElement || !syntheticEvent) return;
+
+      // Dispatch once on the target element, it will bubble up naturally
+      syntheticEvent.source = eventData.source;
+      targetElement.dispatchEvent(syntheticEvent);
+    }
     on(eventType, handler) {
       if (!hasOwnProperty(this.eventHandlers, eventType)) {
         this.eventHandlers[eventType] = [];
@@ -4771,6 +4985,9 @@
       });
       this.pendingRequests = {};
       this.eventHandlers = {};
+      if (this.commentModeAdapter) {
+        this.commentModeAdapter.destroy();
+      }
     }
   }