handsontable 18.0.0 → 18.1.0-rc7

package/plugins/copyPaste/copyPaste.mjs

@@ -54,8 +54,8 @@ import { stringify, parse } from '../../3rdparty/SheetClip/index.mjs';
 import { arrayEach } from '../../helpers/array.mjs';
 import { isJSON } from '../../helpers/string.mjs';
 import { isObject, deepClone } from '../../helpers/object.mjs';
-import { warnOnce } from '../../helpers/console.mjs';
-import { removeContentEditableFromElementAndDeselect, runWithSelectedContendEditableElement, makeElementContentEditableAndSelectItsContent, isHTMLElement, isInternalElement, SANITIZER_WARN_KEY } from '../../helpers/dom/element.mjs';
+import { removeContentEditableFromElementAndDeselect, runWithSelectedContendEditableElement, makeElementContentEditableAndSelectItsContent, isHTMLElement, isInternalElement, isShadowRoot } from '../../helpers/dom/element.mjs';
+import { sanitizeHTML } from '../../utils/sanitizer.mjs';
 import { isSafari } from '../../helpers/browser.mjs';
 import copyItem from './contextMenuItem/copy.mjs';
 import copyColumnHeadersOnlyItem from './contextMenuItem/copyColumnHeadersOnly.mjs';
@@ -110,6 +110,12 @@ var /**
    *
    * @type {'cells-only' | 'column-headers-only' | 'with-column-group-headers' | 'with-column-headers'}
    */ _copyMode = /*#__PURE__*/ new WeakMap(), /**
+   * Registry of the clipboard events that were already processed. When the grid lives inside
+   * a Shadow DOM tree, the clipboard listeners are bound both to the document and to the
+   * grid's shadow root, so the same event instance can reach the plugin twice.
+   *
+   * @type {WeakSet<object>}
+   */ _processedClipboardEvents = /*#__PURE__*/ new WeakMap(), /**
    * Flag that is used to prevent copying when the native shortcut was not pressed.
    *
    * @type {boolean}
@@ -142,6 +148,19 @@ var /**
    */ _addContentEditableToHighlightedCell = /*#__PURE__*/ new WeakSet(), /**
    * Remove the `contenteditable` attribute from the highlighted cell and deselect its content.
    */ _removeContentEditableFromHighlightedCell = /*#__PURE__*/ new WeakSet(), /**
+   * Resolves the element the clipboard event originated from. A complete path (one that
+   * crosses shadow boundaries and therefore contains ShadowRoot entries) is trusted as-is -
+   * its initial element is the real source, e.g. a node inside a web component that a custom
+   * renderer put in a cell. A path without ShadowRoot entries either involves no shadow tree
+   * at all (then `target` equals the path's initial element) or was filtered by a sandboxed
+   * host (e.g. Salesforce Lightning Web Security) that collapses `composedPath()` to the
+   * shadow host chain while still retargeting `event.target` correctly for listeners bound
+   * within the grid's shadow tree - in both cases the retargeted `target` is the deepest
+   * reliable reference to the source element.
+   *
+   * @param {ClipboardEvent | PasteEvent} event The clipboard event to resolve.
+   * @returns {unknown} The deepest known event source element.
+   */ _resolveClipboardEventTarget = /*#__PURE__*/ new WeakSet(), /**
    * Reads pasted data and source data from a paste event's clipboard.
    *
    * @param {ClipboardEvent | PasteEvent} event The paste event.
@@ -267,9 +286,28 @@ var /**
         this.addHook('afterSelectionEnd', _class_private_field_get(this, _onAfterSelectionEnd));
         // Events are attached to the document, not the root table element - as it should,
         // for Chrome 133 and lower to copy/paste/cut work properly (#dev-2277).
-        this.eventManager.addEventListener(this.hot.rootDocument, 'copy', (e)=>this.onCopy(e));
-        this.eventManager.addEventListener(this.hot.rootDocument, 'cut', (e)=>this.onCut(e));
-        this.eventManager.addEventListener(this.hot.rootDocument, 'paste', (e)=>this.onPaste(e));
+        const dedupe = (handler)=>(event)=>{
+                if (_class_private_field_get(this, _processedClipboardEvents).has(event)) {
+                    return;
+                }
+                _class_private_field_get(this, _processedClipboardEvents).add(event);
+                handler(event);
+            };
+        this.eventManager.addEventListener(this.hot.rootDocument, 'copy', dedupe((e)=>this.onCopy(e)));
+        this.eventManager.addEventListener(this.hot.rootDocument, 'cut', dedupe((e)=>this.onCut(e)));
+        this.eventManager.addEventListener(this.hot.rootDocument, 'paste', dedupe((e)=>this.onPaste(e)));
+        const rootNode = this.hot.rootElement.getRootNode();
+        // When the grid lives inside a Shadow DOM tree, the same listeners are attached to the
+        // grid's shadow root as well. Sandboxed hosts (e.g. Salesforce Lightning Web Security)
+        // retarget events observed at the document level, which hides the grid internals from
+        // the document listeners above. Listeners bound inside the grid's own shadow tree still
+        // receive the untouched event path. The `#processedClipboardEvents` registry prevents
+        // double handling when both listeners receive the same event.
+        if (isShadowRoot(rootNode)) {
+            this.eventManager.addEventListener(rootNode, 'copy', dedupe((e)=>this.onCopy(e)));
+            this.eventManager.addEventListener(rootNode, 'cut', dedupe((e)=>this.onCut(e)));
+            this.eventManager.addEventListener(rootNode, 'paste', dedupe((e)=>this.onPaste(e)));
+        }
         // Without this workaround Safari (tested on Safari@16.5.2) does allow copying/cutting from the browser menu.
         if (isSafari()) {
             this.eventManager.addEventListener(this.hot.rootDocument.body, 'mouseenter', _class_private_field_get(this, _onSafariMouseEnter));
@@ -540,7 +578,7 @@ var /**
    * @param {Event} event ClipboardEvent.
    * @private
    */ onCopy(event) {
-        const eventTarget = event.composedPath()[0];
+        const eventTarget = _class_private_method_get(this, _resolveClipboardEventTarget, resolveClipboardEventTarget).call(this, event);
         const focusedElement = this.hot.getFocusManager().getRefocusElement();
         const isHotInput = isHTMLElement(eventTarget) && 'hotInput' in eventTarget.dataset;
         if (!this.hot.isListening() && !_class_private_field_get(this, _isTriggeredByCopy) || this.isEditorOpened() || isHTMLElement(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !isInternalElement(eventTarget, this.hot.rootElement))) {
@@ -565,7 +603,7 @@ var /**
    * @param {Event} event ClipboardEvent.
    * @private
    */ onCut(event) {
-        const eventTarget = event.composedPath()[0];
+        const eventTarget = _class_private_method_get(this, _resolveClipboardEventTarget, resolveClipboardEventTarget).call(this, event);
         const focusedElement = this.hot.getFocusManager().getRefocusElement();
         const isHotInput = isHTMLElement(eventTarget) && 'hotInput' in eventTarget.dataset;
         if (!this.hot.isListening() && !_class_private_field_get(this, _isTriggeredByCut) || this.isEditorOpened() || isHTMLElement(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !isInternalElement(eventTarget, this.hot.rootElement))) {
@@ -589,7 +627,7 @@ var /**
    * @param {Event} event ClipboardEvent or pseudo ClipboardEvent, if paste was called manually.
    * @private
    */ onPaste(event) {
-        const eventTarget = event.composedPath()[0];
+        const eventTarget = _class_private_method_get(this, _resolveClipboardEventTarget, resolveClipboardEventTarget).call(this, event);
         const focusedElement = this.hot.getFocusManager().getRefocusElement();
         const isHotInput = isHTMLElement(eventTarget) && 'hotInput' in eventTarget.dataset;
         if (!this.hot.isListening() || this.isEditorOpened() || !this.hot.getSelected() || isHTMLElement(eventTarget) && (isHotInput && eventTarget !== focusedElement || !isHotInput && eventTarget !== this.hot.rootDocument.body && !isInternalElement(eventTarget, this.hot.rootElement))) {
@@ -627,7 +665,7 @@ var /**
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _ensureClipboardEventsGetTriggered), _class_private_method_init(this, _countCopiedHeaders), _class_private_method_init(this, _addContentEditableToHighlightedCell), _class_private_method_init(this, _removeContentEditableFromHighlightedCell), _class_private_method_init(this, _readClipboardData), _class_private_method_init(this, _setClipboardData), _class_private_field_init(this, _enableCopyColumnHeaders, {
+        super(...args), _class_private_method_init(this, _ensureClipboardEventsGetTriggered), _class_private_method_init(this, _countCopiedHeaders), _class_private_method_init(this, _addContentEditableToHighlightedCell), _class_private_method_init(this, _removeContentEditableFromHighlightedCell), _class_private_method_init(this, _resolveClipboardEventTarget), _class_private_method_init(this, _readClipboardData), _class_private_method_init(this, _setClipboardData), _class_private_field_init(this, _enableCopyColumnHeaders, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _enableCopyColumnGroupHeaders, {
@@ -639,6 +677,9 @@ var /**
         }), _class_private_field_init(this, _copyMode, {
             writable: true,
             value: void 0
+        }), _class_private_field_init(this, _processedClipboardEvents, {
+            writable: true,
+            value: void 0
         }), _class_private_field_init(this, _isTriggeredByCopy, {
             writable: true,
             value: void 0
@@ -691,7 +732,7 @@ var /**
    * The UI container for the secondary focusable element.
    *
    * @type {HTMLElement}
-   */ this.uiContainer = this.hot.rootDocument.body, _class_private_field_set(this, _enableCopyColumnHeaders, false), _class_private_field_set(this, _enableCopyColumnGroupHeaders, false), _class_private_field_set(this, _enableCopyColumnHeadersOnly, false), _class_private_field_set(this, _copyMode, 'cells-only'), _class_private_field_set(this, _isTriggeredByCopy, false), _class_private_field_set(this, _isTriggeredByCut, false), _class_private_field_set(this, _copyableRangesFactory, new CopyableRangesFactory({
+   */ this.uiContainer = this.hot.rootDocument.body, _class_private_field_set(this, _enableCopyColumnHeaders, false), _class_private_field_set(this, _enableCopyColumnGroupHeaders, false), _class_private_field_set(this, _enableCopyColumnHeadersOnly, false), _class_private_field_set(this, _copyMode, 'cells-only'), _class_private_field_set(this, _processedClipboardEvents, new WeakSet()), _class_private_field_set(this, _isTriggeredByCopy, false), _class_private_field_set(this, _isTriggeredByCut, false), _class_private_field_set(this, _copyableRangesFactory, new CopyableRangesFactory({
             countRows: ()=>this.hot.countRows(),
             countColumns: ()=>this.hot.countCols(),
             rowsLimit: ()=>this.rowsLimit,
@@ -801,22 +842,35 @@ function removeContentEditableFromHighlightedCell() {
         }
     }
 }
+function resolveClipboardEventTarget(event) {
+    const eventPath = event.composedPath();
+    if (eventPath.some((entry)=>isShadowRoot(entry))) {
+        return eventPath[0];
+    }
+    const target = 'target' in event ? event.target : null;
+    return target ?? eventPath[0];
+}
 function readClipboardData(event) {
     let pastedData;
     let pastedSourceData;
     if (event && typeof event.clipboardData !== 'undefined') {
         const clipboardData = event.clipboardData;
-        const sourceDataHTML = clipboardData.getData(SOURCE_DATA_HTML_MIME_TYPE);
+        // `SOURCE_DATA_HTML_MIME_TYPE` is written by Handsontable's own copy handler, but the
+        // clipboard is not a trusted channel: any page can set the same type from its own `copy`
+        // handler, so it is sanitized like the `text/html` branch below.
+        //
+        // It gets its own context. The sink it feeds is inert (`htmlToGridSettings()` parses through
+        // `DOMParser`), so a sanitizer may pass this payload through without reopening an injection
+        // hole, and passing it through is what keeps object-based source data surviving a strict
+        // sanitizer. Sharing one context would force that choice on everyone and would also run the
+        // sanitizer twice over the same cells on an internal paste, since both clipboard types carry
+        // a full table.
+        const sourceDataHTML = sanitizeHTML(this.hot, clipboardData.getData(SOURCE_DATA_HTML_MIME_TYPE) ?? '', 'CopyPaste.paste.sourceData');
         if (sourceDataHTML) {
             const parsedSourceConfig = htmlToGridSettings(sourceDataHTML, this.hot.rootDocument);
             pastedSourceData = parsedSourceConfig?.data;
         }
-        const rawTextHTML = clipboardData.getData('text/html') ?? '';
-        const customSanitizer = this.hot.getSettings().sanitizer;
-        if (rawTextHTML && typeof customSanitizer !== 'function') {
-            warnOnce(this.hot.rootElement, SANITIZER_WARN_KEY, 'HTML content is being pasted to the DOM without a sanitizer. ' + 'Configure the "sanitizer" option to prevent XSS vulnerabilities.');
-        }
-        const textHTML = typeof customSanitizer === 'function' ? customSanitizer(rawTextHTML, 'CopyPaste.paste') : rawTextHTML;
+        const textHTML = sanitizeHTML(this.hot, clipboardData.getData('text/html') ?? '', 'CopyPaste.paste');
         if (textHTML && /(<table)|(<TABLE)/g.test(textHTML)) {
             const parsedConfig = htmlToGridSettings(textHTML, this.hot.rootDocument);
             pastedData = parsedConfig?.data;

package/plugins/copyPaste/copyableRanges.js

@@ -225,19 +225,23 @@ function trimRowsRange(startRow, endRow) {
 function normalizeRanges(ranges) {
     const rows = [];
     const columns = [];
+    const seenRows = new Set();
+    const seenColumns = new Set();
     (0, _array.arrayEach)(ranges, (range)=>{
         const r = range;
         const minRow = Math.min(r.startRow, r.endRow);
         const maxRow = Math.max(r.startRow, r.endRow);
         (0, _number.rangeEach)(minRow, maxRow, (row)=>{
-            if (rows.indexOf(row) === -1) {
+            if (!seenRows.has(row)) {
+                seenRows.add(row);
                 rows.push(row);
             }
         });
         const minColumn = Math.min(r.startCol, r.endCol);
         const maxColumn = Math.max(r.startCol, r.endCol);
         (0, _number.rangeEach)(minColumn, maxColumn, (column)=>{
-            if (columns.indexOf(column) === -1) {
+            if (!seenColumns.has(column)) {
+                seenColumns.add(column);
                 columns.push(column);
             }
         });

package/plugins/copyPaste/copyableRanges.mjs

@@ -219,19 +219,23 @@ function trimRowsRange(startRow, endRow) {
  */ export function normalizeRanges(ranges) {
     const rows = [];
     const columns = [];
+    const seenRows = new Set();
+    const seenColumns = new Set();
     arrayEach(ranges, (range)=>{
         const r = range;
         const minRow = Math.min(r.startRow, r.endRow);
         const maxRow = Math.max(r.startRow, r.endRow);
         rangeEach(minRow, maxRow, (row)=>{
-            if (rows.indexOf(row) === -1) {
+            if (!seenRows.has(row)) {
+                seenRows.add(row);
                 rows.push(row);
             }
         });
         const minColumn = Math.min(r.startCol, r.endCol);
         const maxColumn = Math.max(r.startCol, r.endCol);
         rangeEach(minColumn, maxColumn, (column)=>{
-            if (columns.indexOf(column) === -1) {
+            if (!seenColumns.has(column)) {
+                seenColumns.add(column);
                 columns.push(column);
             }
         });

package/plugins/copyPaste/pasteEvent.d.ts

@@ -18,5 +18,5 @@ export default class PasteEvent {
     /**
      * Returns an empty array as a stub for the composed path of this synthetic event.
      */
-    composedPath(): unknown[];
+    composedPath(): EventTarget[];
 }

package/plugins/customBorders/customBorders.d.ts

@@ -1,6 +1,5 @@
 import { BasePlugin } from '../base';
 import type { BorderSettings, BorderObject, CustomBorderConfig } from './utils';
-import type CellRange from '../../3rdparty/walkontable/src/cell/range';
 export declare const PLUGIN_KEY = "customBorders";
 export declare const PLUGIN_PRIORITY = 90;
 export type { BorderSettings, BorderObject };
@@ -66,6 +65,13 @@ export declare class CustomBorders extends BasePlugin {
      * Returns the priority order used to determine the order in which plugins are initialized.
      */
     static get PLUGIN_PRIORITY(): number;
+    /**
+     * Returns the settings keys that trigger the plugin update on `updateSettings()`. Beside the
+     * plugin key itself this covers `customBordersProgressive`, which changes how the very same
+     * configuration is applied - without it, switching only that option would stay inert until some
+     * unrelated `customBorders` update happened to come along.
+     */
+    static get SETTING_KEYS(): string[] | boolean;
     /**
      * Saved borders.
      *
@@ -113,7 +119,12 @@ export declare class CustomBorders extends BasePlugin {
      * ```
      *
      * @param {Array[]|CellRange[]} selectionRanges Array of selection ranges.
-     * @param {object} borderObject Object with `top`, `right`, `bottom` and `start` properties.
+     * @param {object} borderObject Object with `top`, `bottom`, `start`, and `end` properties.
+     * Each side object can include:
+     * - `width` (`number`) Border width in pixels (default: `1`).
+     * - `color` (`string`) CSS border color value (default: `'#000'`).
+     * - `hide` (`boolean`) Hides a border side when set to `true`.
+     * Legacy aliases `left` and `right` are also supported and are normalized to `start` and `end`.
      */
     setBorders(selectionRanges: unknown[], borderObject?: Record<string, unknown>): void;
     /**
@@ -232,20 +243,8 @@ export declare class CustomBorders extends BasePlugin {
      */
     countHide(border: BorderObject): number;
     /**
-     * Clear borders settings from custom selections.
-     *
-     * @private
-     * @param {string} borderId Border id name as string.
-     */
-    clearBordersFromSelectionSettings(borderId: string): void;
-    /**
-     * Clear cellRange with null value.
-     *
-     * @private
-     */
-    clearNullCellRange(): void;
-    /**
-     * Hide custom borders.
+     * Hide custom borders. Destroys the rendered working-set selections; the `savedBorders` model is
+     * kept so the borders can be re-materialized if the plugin is re-enabled.
      *
      * @private
      */
@@ -267,35 +266,17 @@ export declare class CustomBorders extends BasePlugin {
      * @returns {boolean}
      */
     checkSavedBorders(border: BorderObject): boolean;
-    /**
-     * Check if an border already exists in the customSelections, and if true call toggleHiddenClass method.
-     *
-     * @private
-     * @param {object} border Object with `row` and `col`, `start`, `end`, `top` and `bottom`, `id` and
-     *                        `border` ({Object} with `color`, `width` and `cornerVisible` property) properties.
-     * @param {string} place Coordinate where add/remove border - `top`, `bottom`, `start`, `end` and `noBorders`.
-     * @param {boolean} remove True when remove borders, and false when add borders.
-     *
-     * @returns {boolean}
-     */
-    checkCustomSelectionsFromContextMenu(border: Record<string, unknown>, place: string, remove: boolean | undefined): boolean;
-    /**
-     * Check if an border already exists in the customSelections, and if true reset cellRange.
-     *
-     * @private
-     * @param {object} border Object with `row` and `col`, `start`, `end`, `top` and `bottom`, `id` and
-     *                        `border` ({Object} with `color`, `width` and `cornerVisible` property) properties.
-     * @param {CellRange} cellRange The selection range to check.
-     * @param {string} [place] Coordinate where add/remove border - `top`, `bottom`, `start`, `end`.
-     * @returns {boolean}
-     */
-    checkCustomSelections(border: BorderObject, cellRange: CellRange, place: string | undefined): boolean;
     /**
      * Change borders from settings.
      *
      * @private
+     * @param {boolean} [render=true] If `true`, a render is forced after the border model is rebuilt
+     * so `#syncViewportSelections` materializes the visible selections. Pass `false` on the `init`
+     * path: the `init` hook fires before the core's own first render, so that render performs the
+     * sync - and rendering here would paint the grid before later-priority plugins (e.g.
+     * NestedHeaders) finish their `init` setup, leaving corrupted header DOM behind.
      */
-    changeBorderSettings(): void;
+    changeBorderSettings(render?: boolean): void;
     /**
      * Checks the settings cohesion. The properties such like "left"/"right" are supported only
      * in the LTR mode and the "left"/"right" options can not be used together with "start"/"end" properties.