Range dom guard + docs/TS fixes (#6751)

* Fix createRange

* Update Component events JSDoc. Closes #6746

* Add at to AddCollectionOptions TS interface

packages/core/src/css_composer/index.ts

@@ -78,6 +78,7 @@ export interface AddCollectionOptions extends UpdateStyleOptions {
   extend?: boolean | number;
   avoidUpdateStyle?: boolean;
   dataBindingImportPolicy?: DataBindingImportPolicy;
+  at?: number;
 }
 
 export default class CssComposer extends ItemManagerModule<CssComposerConfig & { pStylePrefix?: string }> {

packages/core/src/dom_components/index.ts

@@ -22,8 +22,8 @@
  * ## Available Events
  * * `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
  * * `component:mount` - Component is mounted to an element and rendered in canvas
- * * `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
- * * `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback
+ * * `component:add` - Triggered when a component is added to the editor. The callback receives the model and the options object. This can also be triggered on component moves and clones, so you can check `options.action` (`add-component`, `move-component`, `clone-component`) to distinguish the case
+ * * `component:remove` - Triggered when a component is removed from the editor. This can also happen as part of a component move
  * * `component:remove:before` - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments to the callback
  * * `component:clone` - Triggered when a component is cloned, the new model is passed as an argument to the callback
  * * `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback

packages/core/src/dom_components/types.ts

@@ -46,14 +46,18 @@ export interface ParseStringOptions extends AddOptions, OptionAsDocument, WithHT
 
 export enum ComponentsEvents {
   /**
-   * @event `component:add` New component added.
+   * @event `component:add` Component added. The callback receives the component and the options object.
+   * This can also be triggered on component moves and clones, so you can check
+   * `options.action` (`add-component`, `move-component`, `clone-component`) to distinguish the case.
    * @example
-   * editor.on('component:add', (component) => { ... });
+   * editor.on('component:add', (component, options) => {
+   *  console.log(options.action);
+   * });
    */
   add = 'component:add',
 
   /**
-   * @event `component:remove` Component removed.
+   * @event `component:remove` Component removed from the editor. This can also happen as part of a component move.
    * @example
    * editor.on('component:remove', (component) => { ... });
    */

packages/core/src/utils/dom.ts

@@ -168,7 +168,8 @@ export const getElRect = (el?: Element) => {
   let rectText;
 
   if (isTextNode(el)) {
-    const range = document.createRange();
+    if (!el.parentNode) return def;
+    const range = el.ownerDocument.createRange();
     range.selectNode(el);
     rectText = range.getBoundingClientRect();
     range.detach();