FIO-10109 fixed TextArea Styling for Quick Inline Embed

src/Embed.js

@@ -320,6 +320,12 @@ export class Formio {
                 mode: 'open'
             });
             options.shadowRoot = wrapper;
+            // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom
+            const quill = {
+                js: `${Formio.cdn.quill}/quill.min.js`,
+                css: `${Formio.cdn.quill}/quill.snow.css`
+            }
+            await Formio.addLibrary(wrapper, quill, 'quill');
         }
 
         element.parentNode.removeChild(element);

src/components/_classes/component/Component.js

@@ -2788,6 +2788,19 @@
           return Promise.resolve(editor);
         }
         else {
+          // Due to an issue with ckeditor not loading styles in the shadowdom (https://github.com/ckeditor/ckeditor5/issues/15824), we need to copy cke-styles to the shadowdom
+          let current = element;
+          while (current) {
+            if (current instanceof ShadowRoot) {
+              const ckeStyles = document.querySelector('style[data-cke="true"]');
+              const clone = document.createElement('style');
+              clone.setAttribute('data-cke', 'true');
+              clone.textContent = ckeStyles.textContent;
+              current.prepend(clone);
+              break;
+            };
+            current = current.parentNode || current.host;
+          }
           return ClassicEditor.create(element, settings).then(editor => {
             editor.model.document.on('change', () => onChange(editor.data.get()));
             return editor;
@@ -2876,6 +2889,7 @@
         editor.setOptions(settings);
         editor.getSession().setMode(settings.mode);
         editor.on('change', () => onChange(editor.getValue()));
+        editor.renderer.attachToShadowRoot();
         if (settings.isUseWorkerDisabled) {
           editor.session.setUseWorker(false);
         }
@@ -3132,7 +3146,7 @@
    * Returns if the value (e.g. array) should be divided between several inputs
    * @returns {boolean}
    */
   isSingleInputValue() {
     return false;
   }