handsontable 13.1.0 → 14.0.0-next-e8f87aa-20231030

package/helpers/dom/element.js

@@ -3,6 +3,7 @@
 exports.__esModule = true;
 exports.addClass = addClass;
 exports.addEvent = addEvent;
+exports.appendElement = appendElement;
 exports.clearTextSelection = clearTextSelection;
 exports.closest = closest;
 exports.closestDown = closestDown;
@@ -36,23 +37,30 @@ exports.isChildOf = isChildOf;
 exports.isDetached = isDetached;
 exports.isInput = isInput;
 exports.isOutsideInput = isOutsideInput;
+exports.isThisHotChild = isThisHotChild;
 exports.isVisible = isVisible;
+exports.makeElementContentEditableAndSelectItsContent = makeElementContentEditableAndSelectItsContent;
 exports.matchesCSSRules = matchesCSSRules;
 exports.observeVisibilityChangeOnce = observeVisibilityChangeOnce;
 exports.offset = offset;
 exports.outerHeight = outerHeight;
 exports.outerWidth = outerWidth;
 exports.overlayContainsElement = overlayContainsElement;
+exports.removeAttribute = removeAttribute;
 exports.removeClass = removeClass;
+exports.removeContentEditableFromElementAndDeselect = removeContentEditableFromElementAndDeselect;
 exports.removeEvent = removeEvent;
 exports.removeTextNodes = removeTextNodes;
 exports.resetCssTransform = resetCssTransform;
+exports.runWithSelectedContendEditableElement = runWithSelectedContendEditableElement;
 exports.selectElementIfAllowed = selectElementIfAllowed;
+exports.setAttribute = setAttribute;
 exports.setCaretPosition = setCaretPosition;
 exports.setOverlayPosition = setOverlayPosition;
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.error.cause.js");
 var _string = require("../string");
+var _a11y = require("../a11y");
 /**
  * Get the parent of the specified node in the DOM tree.
  *
@@ -80,6 +88,18 @@ function getParent(element) {
   return parent;
 }
 
+/**
+ * Check if the provided element is a child of the provided Handsontable container.
+ *
+ * @param {HTMLElement} element Element to be analyzed.
+ * @param {HTMLElement} thisHotContainer The Handsontable container.
+ * @returns {boolean}
+ */
+function isThisHotChild(element, thisHotContainer) {
+  const closestHandsontableContainer = element.closest('.handsontable');
+  return !!closestHandsontableContainer && (closestHandsontableContainer.parentNode === thisHotContainer || closestHandsontableContainer === thisHotContainer);
+}
+
 /**
  * Gets `frameElement` of the specified frame. Returns null if it is a top frame or if script has no access to read property.
  *
@@ -93,7 +113,7 @@ function getFrameElement(frame) {
 /**
  * Gets parent frame of the specified frame. Returns null if it is a top frame or if script has no access to read property.
  *
- * @param {Window} frame Frame from which should be get frameElement in safe way.
+ * @param {Window} frame Frame from which should get frameElement in a safe way.
  * @returns {Window|null}
  */
 function getParentWindow(frame) {
@@ -103,7 +123,7 @@ function getParentWindow(frame) {
 /**
  * Checks if script has access to read from parent frame of specified frame.
  *
- * @param {Window} frame Frame from which should be get frameElement in safe way.
+ * @param {Window} frame Frame from which should get frameElement in a safe way.
  * @returns {boolean}
  */
 function hasAccessToParentWindow(frame) {
@@ -238,7 +258,7 @@ function overlayContainsElement(overlayType, element, root) {
 }
 
 /**
- * @param {string} classNames The element "class" attribute string.
+ * @param {string[]} classNames The element "class" attribute string.
  * @returns {string[]}
  */
 function filterEmptyClassNames(classNames) {
@@ -248,6 +268,35 @@ function filterEmptyClassNames(classNames) {
   return classNames.filter(x => !!x);
 }
 
+/**
+ * Filter out the RegExp entries from an array.
+ *
+ * @param {(string|RegExp)[]} list Array of either strings, Regexes or a mix of both.
+ * @param {boolean} [returnBoth] If `true`, both the array without regexes and an array of regexes will be returned.
+ * @returns {string[]|{regexFree: string[], regexes: RegExp[]}}
+ */
+function filterRegexes(list, returnBoth) {
+  if (!list || !list.length) {
+    return returnBoth ? {
+      regexFree: [],
+      regexes: []
+    } : [];
+  }
+  const regexes = [];
+  const regexFree = [];
+  regexFree.push(...list.filter(entry => {
+    const isRegex = entry instanceof RegExp;
+    if (isRegex && returnBoth) {
+      regexes.push(entry);
+    }
+    return !isRegex;
+  }));
+  return returnBoth ? {
+    regexFree,
+    regexes
+  } : regexFree;
+}
+
 /**
  * Checks if element has class name.
  *
@@ -282,16 +331,86 @@ function addClass(element, className) {
  * Remove class name from an element.
  *
  * @param {HTMLElement} element An element to process.
- * @param {string|Array} className Class name as string or array of strings.
+ * @param {string|Array<string|RegExp>} className Class name as string or array of strings.
  */
 function removeClass(element, className) {
   if (typeof className === 'string') {
     className = className.split(' ');
+  } else if (className instanceof RegExp) {
+    className = [className];
   }
-  className = filterEmptyClassNames(className);
-  if (className.length > 0) {
-    element.classList.remove(...className);
+  let {
+    regexFree: stringClasses,
+    // eslint-disable-next-line prefer-const
+    regexes: regexClasses
+  } = filterRegexes(className, true);
+  stringClasses = filterEmptyClassNames(stringClasses);
+  if (stringClasses.length > 0) {
+    element.classList.remove(...stringClasses);
   }
+  regexClasses.forEach(regexClassName => {
+    element.classList.forEach(currentClassName => {
+      if (regexClassName.test(currentClassName)) {
+        element.classList.remove(currentClassName);
+      }
+    });
+  });
+}
+
+/**
+ * Set a single attribute or multiple attributes at once.
+ *
+ * @param {HTMLElement} domElement The HTML element to be modified.
+ * @param {Array[]|string} attributes If setting multiple attributes at once, `attributes` holds an array containing the
+ * attributes to be added. Each element of the array should be an array in a form of `[attributeName,
+ * attributeValue]`. If setting a single attribute, `attributes` holds the name of the attribute.
+ * @param {string|number|undefined} [attributeValue] If setting a single attribute, `attributeValue` holds the attribute
+ * value.
+ */
+function setAttribute(domElement) {
+  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let attributeValue = arguments.length > 2 ? arguments[2] : undefined;
+  if (!Array.isArray(attributes)) {
+    attributes = [[attributes, attributeValue]];
+  }
+  attributes.forEach(attributeInfo => {
+    if (Array.isArray(attributeInfo) && attributeInfo[0] !== '') {
+      domElement.setAttribute(...attributeInfo);
+    }
+  });
+}
+
+/**
+ * Remove a single attribute or multiple attributes from the provided element at once.
+ *
+ * @param {HTMLElement} domElement The HTML element to be processed.
+ * @param {Array<string|RegExp>|string} attributesToRemove If removing multiple attributes, `attributesToRemove`
+ * holds an array of attribute names to be removed from the provided element. If removing a single attribute, it
+ * holds the attribute name.
+ */
+function removeAttribute(domElement) {
+  let attributesToRemove = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  if (typeof attributesToRemove === 'string') {
+    attributesToRemove = attributesToRemove.split(' ');
+  } else if (attributesToRemove instanceof RegExp) {
+    attributesToRemove = [attributesToRemove];
+  }
+  const {
+    regexFree: stringAttributes,
+    regexes: regexAttributes
+  } = filterRegexes(attributesToRemove, true);
+  stringAttributes.forEach(attributeNameToRemove => {
+    if (attributeNameToRemove !== '') {
+      domElement.removeAttribute(attributeNameToRemove);
+    }
+  });
+  regexAttributes.forEach(attributeRegex => {
+    domElement.getAttributeNames().forEach(attributeName => {
+      if (attributeRegex.test(attributeName)) {
+        domElement.removeAttribute(attributeName);
+      }
+    });
+  });
 }
 
 /**
@@ -309,7 +428,7 @@ function removeTextNodes(element) {
 }
 
 /**
- * Remove childs function
+ * Remove children function
  * WARNING - this doesn't unload events and data attached by jQuery
  * http://jsperf.com/jquery-html-vs-empty-vs-innerhtml/9
  * http://jsperf.com/jquery-html-vs-empty-vs-innerhtml/11 - no siginificant improvement with Chrome remove() method.
@@ -324,16 +443,15 @@ function empty(element) {
     element.removeChild(child);
   }
 }
-const HTML_CHARACTERS = /(<(.*)>|&(.*);)/;
+const HTML_CHARACTERS = exports.HTML_CHARACTERS = /(<(.*)>|&(.*);)/;
 
 /**
- * Insert content into element trying avoid innerHTML method.
+ * Insert content into element trying to avoid innerHTML method.
  *
  * @param {HTMLElement} element An element to write into.
  * @param {string} content The text to write.
  * @param {boolean} [sanitizeContent=true] If `true`, the content will be sanitized before writing to the element.
  */
-exports.HTML_CHARACTERS = HTML_CHARACTERS;
 function fastInnerHTML(element, content) {
   let sanitizeContent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   if (HTML_CHARACTERS.test(content)) {
@@ -391,7 +509,7 @@ function isVisible(element) {
       } else {
         return false; // this is a node detached from document in IE8
       }
-    } else if (next.style && next.style.display === 'none') {
+    } else if (getComputedStyle(next).display === 'none') {
       return false;
     }
     next = next.parentNode;
@@ -423,6 +541,11 @@ function offset(element) {
     if (elementToCheck === rootDocument.body) {
       break;
     }
+    // If the element is inside an SVG context, the `offsetParent` can be
+    // a <foreignObject> that does not have properties `offsetLeft` and `offsetTop` defined.
+    if (!('offsetLeft' in elementToCheck)) {
+      break;
+    }
     offsetLeft += elementToCheck.offsetLeft;
     offsetTop += elementToCheck.offsetTop;
     lastElem = elementToCheck;
@@ -952,4 +1075,93 @@ function observeVisibilityChangeOnce(elementToBeObserved, callback) {
     root: elementToBeObserved.ownerDocument.body
   });
   visibilityObserver.observe(elementToBeObserved);
+}
+
+/**
+ * Add a `contenteditable` attribute, select the contents and optionally add the `invisibleSelection`
+ * class to the provided element.
+ *
+ * @param {HTMLElement} element Element to be processed.
+ * @param {boolean} [invisibleSelection=true] `true` if the class should be added to the element.
+ * @param {boolean} [ariaHidden=true] `true` if the `aria-hidden` attribute should be added to the processed element.
+ */
+function makeElementContentEditableAndSelectItsContent(element) {
+  let invisibleSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let ariaHidden = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const ownerDocument = element.ownerDocument;
+  const range = ownerDocument.createRange();
+  const sel = ownerDocument.defaultView.getSelection();
+  setAttribute(element, 'contenteditable', true);
+  if (ariaHidden) {
+    setAttribute(element, ...(0, _a11y.A11Y_HIDDEN)());
+  }
+  if (invisibleSelection) {
+    addClass(element, 'invisibleSelection');
+  }
+  range.selectNodeContents(element);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+/**
+ * Remove the `contenteditable` attribute, deselect the contents and optionally remove the `invisibleSelection`
+ * class from the provided element.
+ *
+ * @param {HTMLElement} selectedElement The element to be deselected.
+ * @param {boolean} [removeInvisibleSelectionClass=true] `true` if the class should be removed from the element.
+ */
+function removeContentEditableFromElementAndDeselect(selectedElement) {
+  let removeInvisibleSelectionClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const sel = selectedElement.ownerDocument.defaultView.getSelection();
+  if (selectedElement.hasAttribute('aria-hidden')) {
+    selectedElement.removeAttribute('aria-hidden');
+  }
+  sel.removeAllRanges();
+  if (removeInvisibleSelectionClass) {
+    removeClass(selectedElement, 'invisibleSelection');
+  }
+  selectedElement.removeAttribute('contenteditable');
+}
+
+/**
+ * Run the provided callback while the provided element is selected and modified to have the `contenteditable`
+ * attribute added. Optionally, the selection can be configured to be invisible.
+ *
+ * @param {HTMLElement} element Element to be selected.
+ * @param {Function} callback Callback to be called.
+ * @param {boolean} [invisibleSelection=true] `true` if the selection should be invisible.
+ */
+function runWithSelectedContendEditableElement(element, callback) {
+  let invisibleSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  makeElementContentEditableAndSelectItsContent(element, invisibleSelection);
+  callback();
+  removeContentEditableFromElementAndDeselect(element, invisibleSelection);
+}
+
+/**
+ * Creates a new DOM element and appends it to the parent element with the provided class name(s) and attributes.
+ *
+ * @param {HTMLElement} parentElement The parent element.
+ * @param {object} properties The properties object.
+ * @param {string} properties.tagName The type of the new element.
+ * @param {string|string[]} properties.className Class name as string or array of strings.
+ * @param {Array[]} properties.attributes An array containing the attributes to be added. Each element of the array
+ * should be an array in a form of `[attributeName, attributeValue]`.
+ * @returns {HTMLElement} The created div element.
+ */
+function appendElement(parentElement, _ref) {
+  let {
+    tagName,
+    className,
+    attributes
+  } = _ref;
+  const element = parentElement.ownerDocument.createElement(tagName);
+  if (className) {
+    addClass(element, className);
+  }
+  if (attributes && attributes.length) {
+    setAttribute(element, attributes);
+  }
+  parentElement.appendChild(element);
+  return element;
 }

package/helpers/dom/element.mjs

@@ -1,6 +1,7 @@
 import "core-js/modules/es.array.push.js";
 import "core-js/modules/es.error.cause.js";
 import { sanitize } from "../string.mjs";
+import { A11Y_HIDDEN } from "../a11y.mjs";
 /**
  * Get the parent of the specified node in the DOM tree.
  *
@@ -28,6 +29,18 @@ export function getParent(element) {
   return parent;
 }
 
+/**
+ * Check if the provided element is a child of the provided Handsontable container.
+ *
+ * @param {HTMLElement} element Element to be analyzed.
+ * @param {HTMLElement} thisHotContainer The Handsontable container.
+ * @returns {boolean}
+ */
+export function isThisHotChild(element, thisHotContainer) {
+  const closestHandsontableContainer = element.closest('.handsontable');
+  return !!closestHandsontableContainer && (closestHandsontableContainer.parentNode === thisHotContainer || closestHandsontableContainer === thisHotContainer);
+}
+
 /**
  * Gets `frameElement` of the specified frame. Returns null if it is a top frame or if script has no access to read property.
  *
@@ -41,7 +54,7 @@ export function getFrameElement(frame) {
 /**
  * Gets parent frame of the specified frame. Returns null if it is a top frame or if script has no access to read property.
  *
- * @param {Window} frame Frame from which should be get frameElement in safe way.
+ * @param {Window} frame Frame from which should get frameElement in a safe way.
  * @returns {Window|null}
  */
 export function getParentWindow(frame) {
@@ -51,7 +64,7 @@ export function getParentWindow(frame) {
 /**
  * Checks if script has access to read from parent frame of specified frame.
  *
- * @param {Window} frame Frame from which should be get frameElement in safe way.
+ * @param {Window} frame Frame from which should get frameElement in a safe way.
  * @returns {boolean}
  */
 export function hasAccessToParentWindow(frame) {
@@ -186,7 +199,7 @@ export function overlayContainsElement(overlayType, element, root) {
 }
 
 /**
- * @param {string} classNames The element "class" attribute string.
+ * @param {string[]} classNames The element "class" attribute string.
  * @returns {string[]}
  */
 function filterEmptyClassNames(classNames) {
@@ -196,6 +209,35 @@ function filterEmptyClassNames(classNames) {
   return classNames.filter(x => !!x);
 }
 
+/**
+ * Filter out the RegExp entries from an array.
+ *
+ * @param {(string|RegExp)[]} list Array of either strings, Regexes or a mix of both.
+ * @param {boolean} [returnBoth] If `true`, both the array without regexes and an array of regexes will be returned.
+ * @returns {string[]|{regexFree: string[], regexes: RegExp[]}}
+ */
+function filterRegexes(list, returnBoth) {
+  if (!list || !list.length) {
+    return returnBoth ? {
+      regexFree: [],
+      regexes: []
+    } : [];
+  }
+  const regexes = [];
+  const regexFree = [];
+  regexFree.push(...list.filter(entry => {
+    const isRegex = entry instanceof RegExp;
+    if (isRegex && returnBoth) {
+      regexes.push(entry);
+    }
+    return !isRegex;
+  }));
+  return returnBoth ? {
+    regexFree,
+    regexes
+  } : regexFree;
+}
+
 /**
  * Checks if element has class name.
  *
@@ -230,16 +272,86 @@ export function addClass(element, className) {
  * Remove class name from an element.
  *
  * @param {HTMLElement} element An element to process.
- * @param {string|Array} className Class name as string or array of strings.
+ * @param {string|Array<string|RegExp>} className Class name as string or array of strings.
  */
 export function removeClass(element, className) {
   if (typeof className === 'string') {
     className = className.split(' ');
+  } else if (className instanceof RegExp) {
+    className = [className];
   }
-  className = filterEmptyClassNames(className);
-  if (className.length > 0) {
-    element.classList.remove(...className);
+  let {
+    regexFree: stringClasses,
+    // eslint-disable-next-line prefer-const
+    regexes: regexClasses
+  } = filterRegexes(className, true);
+  stringClasses = filterEmptyClassNames(stringClasses);
+  if (stringClasses.length > 0) {
+    element.classList.remove(...stringClasses);
   }
+  regexClasses.forEach(regexClassName => {
+    element.classList.forEach(currentClassName => {
+      if (regexClassName.test(currentClassName)) {
+        element.classList.remove(currentClassName);
+      }
+    });
+  });
+}
+
+/**
+ * Set a single attribute or multiple attributes at once.
+ *
+ * @param {HTMLElement} domElement The HTML element to be modified.
+ * @param {Array[]|string} attributes If setting multiple attributes at once, `attributes` holds an array containing the
+ * attributes to be added. Each element of the array should be an array in a form of `[attributeName,
+ * attributeValue]`. If setting a single attribute, `attributes` holds the name of the attribute.
+ * @param {string|number|undefined} [attributeValue] If setting a single attribute, `attributeValue` holds the attribute
+ * value.
+ */
+export function setAttribute(domElement) {
+  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let attributeValue = arguments.length > 2 ? arguments[2] : undefined;
+  if (!Array.isArray(attributes)) {
+    attributes = [[attributes, attributeValue]];
+  }
+  attributes.forEach(attributeInfo => {
+    if (Array.isArray(attributeInfo) && attributeInfo[0] !== '') {
+      domElement.setAttribute(...attributeInfo);
+    }
+  });
+}
+
+/**
+ * Remove a single attribute or multiple attributes from the provided element at once.
+ *
+ * @param {HTMLElement} domElement The HTML element to be processed.
+ * @param {Array<string|RegExp>|string} attributesToRemove If removing multiple attributes, `attributesToRemove`
+ * holds an array of attribute names to be removed from the provided element. If removing a single attribute, it
+ * holds the attribute name.
+ */
+export function removeAttribute(domElement) {
+  let attributesToRemove = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  if (typeof attributesToRemove === 'string') {
+    attributesToRemove = attributesToRemove.split(' ');
+  } else if (attributesToRemove instanceof RegExp) {
+    attributesToRemove = [attributesToRemove];
+  }
+  const {
+    regexFree: stringAttributes,
+    regexes: regexAttributes
+  } = filterRegexes(attributesToRemove, true);
+  stringAttributes.forEach(attributeNameToRemove => {
+    if (attributeNameToRemove !== '') {
+      domElement.removeAttribute(attributeNameToRemove);
+    }
+  });
+  regexAttributes.forEach(attributeRegex => {
+    domElement.getAttributeNames().forEach(attributeName => {
+      if (attributeRegex.test(attributeName)) {
+        domElement.removeAttribute(attributeName);
+      }
+    });
+  });
 }
 
 /**
@@ -257,7 +369,7 @@ export function removeTextNodes(element) {
 }
 
 /**
- * Remove childs function
+ * Remove children function
  * WARNING - this doesn't unload events and data attached by jQuery
  * http://jsperf.com/jquery-html-vs-empty-vs-innerhtml/9
  * http://jsperf.com/jquery-html-vs-empty-vs-innerhtml/11 - no siginificant improvement with Chrome remove() method.
@@ -275,7 +387,7 @@ export function empty(element) {
 export const HTML_CHARACTERS = /(<(.*)>|&(.*);)/;
 
 /**
- * Insert content into element trying avoid innerHTML method.
+ * Insert content into element trying to avoid innerHTML method.
  *
  * @param {HTMLElement} element An element to write into.
  * @param {string} content The text to write.
@@ -338,7 +450,7 @@ export function isVisible(element) {
       } else {
         return false; // this is a node detached from document in IE8
       }
-    } else if (next.style && next.style.display === 'none') {
+    } else if (getComputedStyle(next).display === 'none') {
       return false;
     }
     next = next.parentNode;
@@ -370,6 +482,11 @@ export function offset(element) {
     if (elementToCheck === rootDocument.body) {
       break;
     }
+    // If the element is inside an SVG context, the `offsetParent` can be
+    // a <foreignObject> that does not have properties `offsetLeft` and `offsetTop` defined.
+    if (!('offsetLeft' in elementToCheck)) {
+      break;
+    }
     offsetLeft += elementToCheck.offsetLeft;
     offsetTop += elementToCheck.offsetTop;
     lastElem = elementToCheck;
@@ -899,4 +1016,93 @@ export function observeVisibilityChangeOnce(elementToBeObserved, callback) {
     root: elementToBeObserved.ownerDocument.body
   });
   visibilityObserver.observe(elementToBeObserved);
+}
+
+/**
+ * Add a `contenteditable` attribute, select the contents and optionally add the `invisibleSelection`
+ * class to the provided element.
+ *
+ * @param {HTMLElement} element Element to be processed.
+ * @param {boolean} [invisibleSelection=true] `true` if the class should be added to the element.
+ * @param {boolean} [ariaHidden=true] `true` if the `aria-hidden` attribute should be added to the processed element.
+ */
+export function makeElementContentEditableAndSelectItsContent(element) {
+  let invisibleSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  let ariaHidden = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  const ownerDocument = element.ownerDocument;
+  const range = ownerDocument.createRange();
+  const sel = ownerDocument.defaultView.getSelection();
+  setAttribute(element, 'contenteditable', true);
+  if (ariaHidden) {
+    setAttribute(element, ...A11Y_HIDDEN());
+  }
+  if (invisibleSelection) {
+    addClass(element, 'invisibleSelection');
+  }
+  range.selectNodeContents(element);
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+/**
+ * Remove the `contenteditable` attribute, deselect the contents and optionally remove the `invisibleSelection`
+ * class from the provided element.
+ *
+ * @param {HTMLElement} selectedElement The element to be deselected.
+ * @param {boolean} [removeInvisibleSelectionClass=true] `true` if the class should be removed from the element.
+ */
+export function removeContentEditableFromElementAndDeselect(selectedElement) {
+  let removeInvisibleSelectionClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const sel = selectedElement.ownerDocument.defaultView.getSelection();
+  if (selectedElement.hasAttribute('aria-hidden')) {
+    selectedElement.removeAttribute('aria-hidden');
+  }
+  sel.removeAllRanges();
+  if (removeInvisibleSelectionClass) {
+    removeClass(selectedElement, 'invisibleSelection');
+  }
+  selectedElement.removeAttribute('contenteditable');
+}
+
+/**
+ * Run the provided callback while the provided element is selected and modified to have the `contenteditable`
+ * attribute added. Optionally, the selection can be configured to be invisible.
+ *
+ * @param {HTMLElement} element Element to be selected.
+ * @param {Function} callback Callback to be called.
+ * @param {boolean} [invisibleSelection=true] `true` if the selection should be invisible.
+ */
+export function runWithSelectedContendEditableElement(element, callback) {
+  let invisibleSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  makeElementContentEditableAndSelectItsContent(element, invisibleSelection);
+  callback();
+  removeContentEditableFromElementAndDeselect(element, invisibleSelection);
+}
+
+/**
+ * Creates a new DOM element and appends it to the parent element with the provided class name(s) and attributes.
+ *
+ * @param {HTMLElement} parentElement The parent element.
+ * @param {object} properties The properties object.
+ * @param {string} properties.tagName The type of the new element.
+ * @param {string|string[]} properties.className Class name as string or array of strings.
+ * @param {Array[]} properties.attributes An array containing the attributes to be added. Each element of the array
+ * should be an array in a form of `[attributeName, attributeValue]`.
+ * @returns {HTMLElement} The created div element.
+ */
+export function appendElement(parentElement, _ref) {
+  let {
+    tagName,
+    className,
+    attributes
+  } = _ref;
+  const element = parentElement.ownerDocument.createElement(tagName);
+  if (className) {
+    addClass(element, className);
+  }
+  if (attributes && attributes.length) {
+    setAttribute(element, attributes);
+  }
+  parentElement.appendChild(element);
+  return element;
 }

package/helpers/dom/event.d.ts

@@ -2,3 +2,4 @@ export function stopImmediatePropagation(event: Event): void;
 export function isImmediatePropagationStopped(event: Event): boolean;
 export function isRightClick(event: Event): boolean;
 export function isLeftClick(event: Event): boolean;
+export function offsetRelativeTo(event: Event, untilElement: HTMLElement | undefined): { x: number, y: number };