From 235d889023639365a118dfcb3e943dee027a6309 Mon Sep 17 00:00:00 2001
From: Hanna Kurban <hannak@form.io>
Date: Thu, 15 May 2025 13:56:22 +0300
Subject: [PATCH] FIO-10109 fixed TextArea Styling for Quick Inline Embed

---
 src/Embed.js                                   |  6 ++++++
 src/components/_classes/component/Component.js | 14 ++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/Embed.js b/src/Embed.js
index a7237321da..072f85a2af 100644
--- a/src/Embed.js
+++ b/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);
diff --git a/src/components/_classes/component/Component.js b/src/components/_classes/component/Component.js
index 308d2ea9b1..bf2958e5be 100644
--- a/src/components/_classes/component/Component.js
+++ b/src/components/_classes/component/Component.js
@@ -2788,6 +2788,19 @@ export default class Component extends Element {
           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 @@ export default class Component extends Element {
         editor.setOptions(settings);
         editor.getSession().setMode(settings.mode);
         editor.on('change', () => onChange(editor.getValue()));
+        editor.renderer.attachToShadowRoot();
         if (settings.isUseWorkerDisabled) {
           editor.session.setUseWorker(false);
         }