Merge pull request #785 from exadel-inc/style-tag-omitted

fix: style tag omitted on the root level of html snippet
exadel-inc · Jul 3, 2024 · b875aaa · b875aaa
2 parents 21552f5 + a875c8a
commit b875aaa
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/site/views/examples/example/text.njk b/site/views/examples/example/text.njk
@@ -6,8 +6,14 @@ title: Example with dummy text (pre-processors)
   <uip-snippets class="uip-toolbar"></uip-snippets>
 
   <script type="text/html" uip-snippet-js="snippet-js-1" uip-snippet label="Example with dummy text 1">
+    <style>
+      .text {
+        color: green;
+      }
+    </style>
     <h2><!-- text --></h2>
     <div class="text">
+      Hello text
       <!-- paragraph x2 -->
     </div>
     <button type="button">
@@ -23,6 +29,11 @@ title: Example with dummy text (pre-processors)
   </script>
   <script type="text/html" uip-snippet-js="snippet-js-2" uip-snippet uip-isolated label="Example with dummy text 2">
     <h2><!-- text --></h2>
+    <style>
+      button {
+        border-color: blue;
+      }
+    </style>
     <div class="text">
       <!-- paragraph x2 -->
     </div>
@@ -37,6 +48,34 @@ title: Example with dummy text (pre-processors)
       alert(`Form submitted with ${json}!`);
     };
   </script>
+  <script type="text/html" uip-snippet-js="snippet-js-3" uip-snippet label="Example with dummy text 3">
+    <style>
+      .text {
+        color: purple;
+      }
+    </style>
+    <style>
+      .text {
+        font-style: italic;
+      }
+    </style>
+
+    <h2><!-- text --></h2>
+    <div class="text">
+      Hello text
+      <!-- paragraph x2 -->
+    </div>
+    <button type="button">
+      <!-- text x5 -->
+    </button>
+  </script>
+  <script type="text/plain" id="snippet-js-3">
+    document.querySelector('form').onsubmit = (e) => {
+      e.preventDefault();
+      const json = JSON.stringify(Object.fromEntries(new FormData(e.target)));
+      alert(`Form submitted with ${json}!`);
+    };
+  </script>
   <uip-preview class="centered-content" resizable></uip-preview>
 
   <uip-editor copy collapsible label="Markdown"></uip-editor>

diff --git a/src/core/base/model.ts b/src/core/base/model.ts
@@ -91,8 +91,16 @@ export class UIPStateModel extends SyntheticEventTarget {
    */
   public setHtml(markup: string, modifier: UIPPlugin | UIPRoot, force: boolean = false): void {
     const html = UIPHTMLNormalizationPreprocessors.preprocess(markup);
-    const root = new DOMParser().parseFromString(html, 'text/html').body;
-    if (!root || root.innerHTML.trim() !== this.html.trim()) {
+    const {head, body: root} = new DOMParser().parseFromString(html, 'text/html');
+
+    Array.from(head.children).reverse().forEach((el) => {
+      if (el.tagName === 'STYLE') {
+        root.innerHTML = '\n' + root.innerHTML;
+        root.insertBefore(el, root.firstChild);
+      }
+    });
+
+    if (root.innerHTML.trim() !== this.html.trim()) {
       this._html = root;
       this._changes.push({modifier, type: 'html', force});
       this.dispatchChange();