Rebuild Sources and Update Dev

vanillawc · Nov 12, 2021 · badf073 · badf073
1 parent 7d6799c
commit badf073
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 29 deletions.
diff --git a/dev/index.html b/dev/index.html
@@ -8,8 +8,6 @@
   <script type="module" src="../mode/htmlmixed/htmlmixed.js"></script>
   <script type="module" src="../mode/xml/xml.js"></script>
   <script type="module" src="../mode/css/css.js"></script>
-  <link rel="stylesheet" href="../theme/monokai.css">
-  <link rel="stylesheet" href="../theme/duotone-light.css">
 </head>
 <body>
 
@@ -32,10 +30,14 @@
   <!-- <wc-codemirror mode="javascript"></wc-codemirror> -->
 
   <!-- theming -->
-  <!-- <wc-codemirror mode="javascript" theme="monokai"></wc-codemirror> -->
+  <!-- <wc-codemirror mode="javascript" theme="monokai">
+    <link rel="stylesheet" href="../theme/monokai.css">
+  </wc-codemirror> -->
 
   <!-- html -->
-  <!-- <wc-codemirror src="sample.html" mode="htmlmixed" theme="duotone-light"></wc-codemirror> -->
+  <!-- <wc-codemirror src="sample.html" mode="htmlmixed" theme="duotone-light">
+    <link rel="stylesheet" href="../theme/duotone-light.css">
+  </wc-codemirror> -->
 
   <!-- viewport-margin -->
   <!-- <wc-codemirror viewport-margin="infinity"></wc-codemirror> -->

diff --git a/index.js b/index.js
@@ -9302,8 +9302,7 @@ CodeMirror.version = "5.61.0";
 var codemirror_default = CodeMirror;
 
 // src/styling.js
-document.body.insertAdjacentHTML("beforeend", `
-<style>
+var CODE_MIRROR_CSS_CONTENT = `
 /* BASICS */
 
 .CodeMirror {
@@ -9653,8 +9652,7 @@ div.CodeMirror-dragcursors {
 
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
-</style>
-`);
+`;
 
 // src/wc-codemirror.js
 self.CodeMirror = codemirror_default;
@@ -9712,18 +9710,23 @@ var WCCodeMirror = class extends HTMLElement {
     this.editor = null;
   }
   async connectedCallback() {
+    const shadow = this.attachShadow({mode: "open"});
     const template = document.createElement("template");
+    const stylesheet = document.createElement("style");
+    stylesheet.innerHTML = CODE_MIRROR_CSS_CONTENT;
     template.innerHTML = WCCodeMirror.template();
-    this.appendChild(template.content.cloneNode(true));
+    shadow.appendChild(stylesheet);
+    shadow.appendChild(template.content.cloneNode(true));
     this.style.display = "block";
-    this.__element = this.querySelector("textarea");
+    this.__element = shadow.querySelector("textarea");
     const mode = this.hasAttribute("mode") ? this.getAttribute("mode") : "null";
     const theme = this.hasAttribute("theme") ? this.getAttribute("theme") : "default";
     let readOnly = this.getAttribute("readonly");
     if (readOnly === "")
       readOnly = true;
     else if (readOnly !== "nocursor")
       readOnly = false;
+    this.refreshStyles();
     let content = "";
     const innerScriptTag = this.querySelector("script");
     if (innerScriptTag) {
@@ -9770,6 +9773,18 @@ var WCCodeMirror = class extends HTMLElement {
     const response = await fetch(src);
     return response.text();
   }
+  refreshStyles() {
+    Array.from(this.shadowRoot.children).forEach((element) => {
+      if (element.tagName === "LINK" && element.getAttribute("rel") === "stylesheet") {
+        element.remove();
+      }
+    });
+    Array.from(this.children).forEach((element) => {
+      if (element.tagName === "LINK" && element.getAttribute("rel") === "stylesheet") {
+        this.shadowRoot.appendChild(element.cloneNode(true));
+      }
+    });
+  }
   static template() {
     return `
       <textarea style="display:inherit; width:inherit; height:inherit;"></textarea>