Fix Syntax Highlighting when 'src' is Not Defined

vanillawc · May 29, 2020 · 272a8ce · 272a8ce
1 parent d0f6417
commit 272a8ce
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ Syntax highlighting requires importing a `mode` module for the language
 Then specify the language with the `mode` attribute
 
 ```html
-<wc-codemirror mode="javascript" src="sample.js"></wc-codemirror>
+<wc-codemirror mode="javascript"></wc-codemirror>
 ```
 
 ### Theming
@@ -85,5 +85,5 @@ Theming requires importing an editor theme stylesheet
 Then specify the theme with the `theme` attribute
 
 ```html
-<wc-codemirror mode="javascript" theme="monokai" src="sample.js"></wc-codemirror>
+<wc-codemirror mode="javascript" theme="monokai"></wc-codemirror>
 ```
diff --git a/dev/index.html b/dev/index.html
@@ -12,19 +12,22 @@
 <body>
 
   <!-- basic -->
-  <wc-codemirror></wc-code-mirror>
+  <!-- <wc-codemirror></wc-code-mirror> -->
 
   <!-- source -->
   <!-- <wc-codemirror src="sample.txt"></wc-code-mirror> -->
 
   <!-- syntax-highlighting -->
-  <!-- <wc-codemirror src="sample.js" mode="javascript"></wc-code-mirror> -->
+  <!-- <wc-codemirror mode="javascript"></wc-code-mirror> -->
 
   <!-- theming -->
-  <!-- <wc-codemirror src="sample.js" mode="javascript" theme="monokai"></wc-code-mirror> -->
+  <!-- <wc-codemirror mode="javascript" theme="monokai"></wc-code-mirror> -->
 
   <!-- html -->
   <!-- <wc-codemirror src="sample.html" mode="htmlmixed" theme="duotone-light"></wc-code-mirror> -->
 
+  <!-- everything -->
+  <wc-codemirror src="sample.js" mode="javascript" theme="monokai"></wc-code-mirror>
+
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -9712,7 +9712,7 @@ self.CodeMirror = CodeMirror;
 
 class WCCodeMirror extends HTMLElement {
   static get observedAttributes () {
-    return ['src', 'value'];
+    return ['src'];
   }
 
   attributeChangedCallback (name, oldValue, newValue) {
@@ -9726,12 +9726,11 @@ class WCCodeMirror extends HTMLElement {
   set src (value) {
     this.setAttribute('src', value);
     this.setSrc();
-    this.__editor.refresh();
   }
 
   get value () { return this.__editor.getValue(); }
   set value (value) {
-    this.__editor.swapDoc(CodeMirror.Doc(value), this.getAttribute('mode'));
+    this.setValue(value);
   }
 
   constructor () {
@@ -9747,17 +9746,9 @@ class WCCodeMirror extends HTMLElement {
   async connectedCallback () {
     this.__element = this.querySelector('#code');
     this.__element.style = this.hasAttribute('style') ? this.style.cssText : 'width:100%;height:100%';
-    this.appendChild(this.__element);
 
-    if (this.hasAttribute('src')) {
-      const src = this.getAttribute('src');
-      this.__element.value = await this.fetchSrc(src);
-    } else {
-      this.__element.value = '';
-    }
-
-    const mode = this.getAttribute('mode') || 'null';
-    const theme = this.getAttribute('theme') || 'default';
+    const mode = this.hasAttribute('mode') ? this.getAttribute('mode') : 'null';
+    const theme = this.hasAttribute('theme') ? this.getAttribute('theme') : 'default';
 
     this.__editor = CodeMirror.fromTextArea(this.__element, {
       lineNumbers: true,
@@ -9766,13 +9757,27 @@ class WCCodeMirror extends HTMLElement {
       theme
     });
 
+    if (this.hasAttribute('src')) {
+      this.setSrc(this.getAttribute('src'));
+    } else {
+      // delay until editor initializes
+      await new Promise(resolve => setTimeout(resolve, 50));
+      this.setValue('');
+    }
+
     this.__initialized = true;
   }
 
   async setSrc () {
     const src = this.getAttribute('src');
     const contents = await this.fetchSrc(src);
     this.__editor.swapDoc(CodeMirror.Doc(contents, this.getAttribute('mode')));
+    this.__editor.refresh();
+  }
+
+  async setValue (value) {
+    this.__editor.swapDoc(CodeMirror.Doc(value, this.getAttribute('mode')));
+    this.__editor.refresh();
   }
 
   async fetchSrc (src) {

diff --git a/index.min.js b/index.min.js
diff --git a/src/wc-codemirror.js b/src/wc-codemirror.js
@@ -4,7 +4,7 @@ self.CodeMirror = CodeMirror;
 
 export class WCCodeMirror extends HTMLElement {
   static get observedAttributes () {
-    return ['src', 'value'];
+    return ['src'];
   }
 
   attributeChangedCallback (name, oldValue, newValue) {
@@ -18,12 +18,11 @@ export class WCCodeMirror extends HTMLElement {
   set src (value) {
     this.setAttribute('src', value);
     this.setSrc();
-    this.__editor.refresh();
   }
 
   get value () { return this.__editor.getValue(); }
   set value (value) {
-    this.__editor.swapDoc(CodeMirror.Doc(value), this.getAttribute('mode'));
+    this.setValue(value);
   }
 
   constructor () {
@@ -39,17 +38,9 @@ export class WCCodeMirror extends HTMLElement {
   async connectedCallback () {
     this.__element = this.querySelector('#code');
     this.__element.style = this.hasAttribute('style') ? this.style.cssText : 'width:100%;height:100%';
-    this.appendChild(this.__element);
 
-    if (this.hasAttribute('src')) {
-      const src = this.getAttribute('src');
-      this.__element.value = await this.fetchSrc(src);
-    } else {
-      this.__element.value = '';
-    }
-
-    const mode = this.getAttribute('mode') || 'null';
-    const theme = this.getAttribute('theme') || 'default';
+    const mode = this.hasAttribute('mode') ? this.getAttribute('mode') : 'null';
+    const theme = this.hasAttribute('theme') ? this.getAttribute('theme') : 'default';
 
     this.__editor = CodeMirror.fromTextArea(this.__element, {
       lineNumbers: true,
@@ -58,13 +49,27 @@ export class WCCodeMirror extends HTMLElement {
       theme
     });
 
+    if (this.hasAttribute('src')) {
+      this.setSrc(this.getAttribute('src'));
+    } else {
+      // delay until editor initializes
+      await new Promise(resolve => setTimeout(resolve, 50));
+      this.setValue('');
+    }
+
     this.__initialized = true;
   }
 
   async setSrc () {
     const src = this.getAttribute('src');
     const contents = await this.fetchSrc(src);
     this.__editor.swapDoc(CodeMirror.Doc(contents, this.getAttribute('mode')));
+    this.__editor.refresh();
+  }
+
+  async setValue (value) {
+    this.__editor.swapDoc(CodeMirror.Doc(value, this.getAttribute('mode')));
+    this.__editor.refresh();
   }
 
   async fetchSrc (src) {