Allow holderId work with ref on dom element

src/components/core.ts

@@ -129,7 +129,9 @@ export default class Core {
     /**
      * If holderId is empty then set a default value
      */
-    if (!this.config.holderId || typeof this.config.holderId !== 'string') {
+    if (!this.config.holderId ||
+      !$.isElement(this.config.holderId) ||
+      typeof this.config.holderId !== 'string') {
       this.config.holderId = 'editorjs';
     }
 
@@ -197,7 +199,7 @@ export default class Core {
     /**
      * Check for a holder element's existence
      */
-    if (!$.get(this.config.holderId)) {
+    if (typeof this.config.holderId === 'string' && !$.get(this.config.holderId)) {
       throw Error(`element with ID «${this.config.holderId}» is missing. Pass correct holder's ID.`);
     }
   }

src/components/dom.ts

@@ -244,7 +244,7 @@ export default class Dom {
    * @param {Object} node
    * @returns {boolean}
    */
-  public static isElement(node: any): boolean {
+  public static isElement(node: any): node is Element {
     return node && typeof node === 'object' && node.nodeType && node.nodeType === Node.ELEMENT_NODE;
   }
 
@@ -518,4 +518,13 @@ export default class Dom {
       return [...result, ...Dom.getDeepestBlockElements(element as HTMLElement)];
     }, []);
   }
+
+  /**
+   * Helper for get holder from {string} or return HTMLElement
+   * @param element
+   */
+  public static getHolder(element: string | HTMLElement): HTMLElement {
+    if (typeof element === 'string') { return document.getElementById(element); }
+    return element;
+  }
 }

src/components/modules/blockManager.ts

@@ -455,7 +455,7 @@ export default class BlockManager extends Module {
    * @returns {Block}
    */
   public getBlock(element: HTMLElement): Block {
-    if (!$.isElement(element)) {
+    if (!$.isElement(element) as boolean) {
       element = element.parentNode as HTMLElement;
     }
 

src/components/modules/ui.ts

@@ -134,11 +134,7 @@ export default class UI extends Module {
      * Element where we need to append Editor.js
      * @type {Element}
      */
-    this.nodes.holder = document.getElementById(this.config.holderId);
-
-    if (!this.nodes.holder) {
-      throw Error('Holder wasn\'t found by ID: #' + this.config.holderId);
-    }
+    this.nodes.holder = $.getHolder(this.config.holderId);
 
     /**
      * Create and save main UI elements
@@ -329,7 +325,8 @@ export default class UI extends Module {
      */
     const target = event.target as HTMLElement;
     const clickedOnInlineToolbarButton = target.closest(`.${this.Editor.InlineToolbar.CSS.inlineToolbar}`);
-    const clickedInsideOfEditor = !!target.closest(`#${this.config.holderId}`) || Selection.isAtEditor;
+
+    const clickedInsideOfEditor = this.nodes.holder.contains(target) || Selection.isAtEditor;
 
     if (!clickedInsideOfEditor) {
       /**

types/configs/editor-config.d.ts

@@ -5,8 +5,9 @@ import {SanitizerConfig} from './sanitizer-config';
 export interface EditorConfig {
   /**
    * Element where Editor will be append
+   * TODO: rename holderId on holder, element or el in next major for better consistent
    */
-  holderId?: string;
+  holderId?: string | HTMLElement;
 
   /**
    * If true, set caret at the first Block after Editor is ready