FIO-9201: Fix DataTable in quick inline embed issues (#177)

* FIO-9201: Fix quick inline embed issues

* FIO-9201: Add small fix

* FIO-9201: Add new parameter into jsdocs

src/sdk/Formio.ts

@@ -7,6 +7,7 @@ import EventEmitter from 'eventemitter3';
 import cookies from 'browser-cookies';
 const { fetch, Headers } = fetchPonyfill();
 import Plugins from './Plugins';
+import { attachResourceToDom } from 'utils';
 declare const OktaAuth: any;
 
 /**
@@ -2366,6 +2367,7 @@ export class Formio {
    * @param {string} property - The name of the global property that will be added to the global namespace once the library has been loaded. This is used to check to see if the property exists before resolving the promise that the library is ready for use.
    * @param {string} src - The URL of the library to lazy load.
    * @param {boolean} polling - Determines if polling should be used to determine if they library is ready to use. If set to false, then it will rely on a global callback called ${name}Callback where "name" is the first property passed to this method. When this is called, that will indicate when the library is ready. In most cases, you will want to pass true to this parameter to initiate a polling method to check for the library availability in the global context.
+   * @param {HTMLElement} rootElement - The element after which the resource would be attached (useful when requiring resources from ShadowRoot).
    * @return {Promise<object>} - A promise that will resolve when the plugin is ready to be used.
    */
   static requireLibrary(
@@ -2374,7 +2376,18 @@ export class Formio {
     src: string | Array<string>,
     polling: boolean = false,
     onload?: (ready: Promise<any>) => void,
+    rootElement?: HTMLElement,
   ) {
+    const resourceToDomOptions = {
+      name,
+      src,
+      formio: Formio,
+      onload,
+      rootElement,
+    };
+
+    let hasResourceBeenAdded = false;
+
     if (!Formio.libraries.hasOwnProperty(name)) {
       Formio.libraries[name] = {};
       Formio.libraries[name].ready = new Promise((resolve, reject) => {
@@ -2393,54 +2406,8 @@ export class Formio {
       if (plugin) {
         Formio.libraries[name].resolve(plugin);
       } else {
-        src = Array.isArray(src) ? src : [src];
-        src.forEach((lib: any) => {
-          let attrs: any = {};
-          let elementType = '';
-          if (typeof lib === 'string') {
-            lib = {
-              type: 'script',
-              src: lib,
-            };
-          }
-          switch (lib.type) {
-            case 'script':
-              elementType = 'script';
-              attrs = {
-                src: lib.src,
-                type: 'text/javascript',
-                defer: true,
-                async: true,
-                referrerpolicy: 'origin',
-              };
-              break;
-            case 'styles':
-              elementType = 'link';
-              attrs = {
-                href: lib.src,
-                rel: 'stylesheet',
-              };
-              break;
-          }
-
-          // Add the script to the top of the page.
-          const element = document.createElement(elementType);
-          if (element.setAttribute) {
-            for (const attr in attrs) {
-              element.setAttribute(attr, attrs[attr]);
-            }
-          }
-          if (onload) {
-            element.addEventListener('load', () => {
-              Formio.libraries[name].loaded = true;
-              onload(Formio.libraries[name].ready);
-            });
-          }
-          const { head } = document;
-          if (head) {
-            head.appendChild(element);
-          }
-        });
+        attachResourceToDom(resourceToDomOptions);
+        hasResourceBeenAdded = true;
 
         // if no callback is provided, then check periodically for the script.
         if (polling) {
@@ -2456,6 +2423,11 @@ export class Formio {
     }
 
     const lib = Formio.libraries[name];
+
+    if (rootElement && !hasResourceBeenAdded) {
+      attachResourceToDom(resourceToDomOptions);
+    }
+
     return onload && lib.loaded ? onload(lib.ready) : lib.ready;
   }
 

src/types/ResourceToDomOptions.ts

@@ -0,0 +1,9 @@
+import { Formio } from 'sdk';
+
+export type ResourceToDomOptions = {
+  name: string;
+  src: string | Array<string>;
+  formio: typeof Formio;
+  onload?: (ready: Promise<any>) => void;
+  rootElement?: HTMLElement;
+};

src/types/index.ts

@@ -10,3 +10,4 @@ export * from './process';
 export * from './DataObject';
 export * from './formUtil';
 export * from './PassedComponentInstance';
+export * from './ResourceToDomOptions';

src/utils/utils.ts

@@ -1,5 +1,5 @@
 import { isBoolean, isString } from 'lodash';
-import { BaseComponent, Component } from 'types';
+import { BaseComponent, Component, ResourceToDomOptions } from 'types';
 
 /**
  * Escapes RegEx characters in provided String value.
@@ -64,6 +64,63 @@ export function registerEphermalState(
   });
 }
 
+export function attachResourceToDom(options: ResourceToDomOptions) {
+  const { name, formio, onload, rootElement } = options;
+  let { src } = options;
+  src = Array.isArray(src) ? src : [src];
+  src.forEach((lib: any) => {
+    let attrs: any = {};
+    let elementType = '';
+    if (typeof lib === 'string') {
+      lib = {
+        type: 'script',
+        src: lib,
+      };
+    }
+    switch (lib.type) {
+      case 'script':
+        elementType = 'script';
+        attrs = {
+          src: lib.src,
+          type: 'text/javascript',
+          defer: true,
+          async: true,
+          referrerpolicy: 'origin',
+        };
+        break;
+      case 'styles':
+        elementType = 'link';
+        attrs = {
+          href: lib.src,
+          rel: 'stylesheet',
+        };
+        break;
+    }
+
+    // Add the script to the top of the page.
+    const element = document.createElement(elementType);
+    if (element.setAttribute) {
+      for (const attr in attrs) {
+        element.setAttribute(attr, attrs[attr]);
+      }
+    }
+    if (onload) {
+      element.addEventListener('load', () => {
+        formio.libraries[name].loaded = true;
+        onload(formio.libraries[name].ready);
+      });
+    }
+    if (rootElement) {
+      rootElement.insertAdjacentElement('afterend', element);
+      return;
+    }
+    const { head } = document;
+    if (head) {
+      head.appendChild(element);
+    }
+  });
+}
+
 export function resetEphermalState(component: Component) {
   if (component.ephermalState) {
     delete component.ephermalState;