Skip to content

Commit 272a8ce

Browse files
evanplaiceevanplaice
committed
Fix Syntax Highlighting when 'src' is Not Defined
1 parent d0f6417 commit 272a8ce

File tree

5 files changed

+45
-32
lines changed

5 files changed

+45
-32
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ Syntax highlighting requires importing a `mode` module for the language
7171
Then specify the language with the `mode` attribute
7272

7373
```html
74-
<wc-codemirror mode="javascript" src="sample.js"></wc-codemirror>
74+
<wc-codemirror mode="javascript"></wc-codemirror>
7575
```
7676

7777
### Theming
@@ -85,5 +85,5 @@ Theming requires importing an editor theme stylesheet
8585
Then specify the theme with the `theme` attribute
8686

8787
```html
88-
<wc-codemirror mode="javascript" theme="monokai" src="sample.js"></wc-codemirror>
88+
<wc-codemirror mode="javascript" theme="monokai"></wc-codemirror>
8989
```

‎dev/index.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,22 @@
1212
<body>
1313

1414
<!-- basic -->
15-
<wc-codemirror></wc-code-mirror>
15+
<!-- <wc-codemirror></wc-code-mirror> -->
1616

1717
<!-- source -->
1818
<!-- <wc-codemirror src="sample.txt"></wc-code-mirror> -->
1919

2020
<!-- syntax-highlighting -->
21-
<!-- <wc-codemirror src="sample.js" mode="javascript"></wc-code-mirror> -->
21+
<!-- <wc-codemirror mode="javascript"></wc-code-mirror> -->
2222

2323
<!-- theming -->
24-
<!-- <wc-codemirror src="sample.js" mode="javascript" theme="monokai"></wc-code-mirror> -->
24+
<!-- <wc-codemirror mode="javascript" theme="monokai"></wc-code-mirror> -->
2525

2626
<!-- html -->
2727
<!-- <wc-codemirror src="sample.html" mode="htmlmixed" theme="duotone-light"></wc-code-mirror> -->
2828

29+
<!-- everything -->
30+
<wc-codemirror src="sample.js" mode="javascript" theme="monokai"></wc-code-mirror>
31+
2932
</body>
3033
</html>

‎index.js

+18-13
Original file line numberDiff line numberDiff line change
@@ -9712,7 +9712,7 @@ self.CodeMirror = CodeMirror;
97129712

97139713
class WCCodeMirror extends HTMLElement {
97149714
static get observedAttributes () {
9715-
return ['src', 'value'];
9715+
return ['src'];
97169716
}
97179717

97189718
attributeChangedCallback (name, oldValue, newValue) {
@@ -9726,12 +9726,11 @@ class WCCodeMirror extends HTMLElement {
97269726
set src (value) {
97279727
this.setAttribute('src', value);
97289728
this.setSrc();
9729-
this.__editor.refresh();
97309729
}
97319730

97329731
get value () { return this.__editor.getValue(); }
97339732
set value (value) {
9734-
this.__editor.swapDoc(CodeMirror.Doc(value), this.getAttribute('mode'));
9733+
this.setValue(value);
97359734
}
97369735

97379736
constructor () {
@@ -9747,17 +9746,9 @@ class WCCodeMirror extends HTMLElement {
97479746
async connectedCallback () {
97489747
this.__element = this.querySelector('#code');
97499748
this.__element.style = this.hasAttribute('style') ? this.style.cssText : 'width:100%;height:100%';
9750-
this.appendChild(this.__element);
97519749

9752-
if (this.hasAttribute('src')) {
9753-
const src = this.getAttribute('src');
9754-
this.__element.value = await this.fetchSrc(src);
9755-
} else {
9756-
this.__element.value = '';
9757-
}
9758-
9759-
const mode = this.getAttribute('mode') || 'null';
9760-
const theme = this.getAttribute('theme') || 'default';
9750+
const mode = this.hasAttribute('mode') ? this.getAttribute('mode') : 'null';
9751+
const theme = this.hasAttribute('theme') ? this.getAttribute('theme') : 'default';
97619752

97629753
this.__editor = CodeMirror.fromTextArea(this.__element, {
97639754
lineNumbers: true,
@@ -9766,13 +9757,27 @@ class WCCodeMirror extends HTMLElement {
97669757
theme
97679758
});
97689759

9760+
if (this.hasAttribute('src')) {
9761+
this.setSrc(this.getAttribute('src'));
9762+
} else {
9763+
// delay until editor initializes
9764+
await new Promise(resolve => setTimeout(resolve, 50));
9765+
this.setValue('');
9766+
}
9767+
97699768
this.__initialized = true;
97709769
}
97719770

97729771
async setSrc () {
97739772
const src = this.getAttribute('src');
97749773
const contents = await this.fetchSrc(src);
97759774
this.__editor.swapDoc(CodeMirror.Doc(contents, this.getAttribute('mode')));
9775+
this.__editor.refresh();
9776+
}
9777+
9778+
async setValue (value) {
9779+
this.__editor.swapDoc(CodeMirror.Doc(value, this.getAttribute('mode')));
9780+
this.__editor.refresh();
97769781
}
97779782

97789783
async fetchSrc (src) {

‎index.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/wc-codemirror.js

+18-13
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ self.CodeMirror = CodeMirror;
44

55
export class WCCodeMirror extends HTMLElement {
66
static get observedAttributes () {
7-
return ['src', 'value'];
7+
return ['src'];
88
}
99

1010
attributeChangedCallback (name, oldValue, newValue) {
@@ -18,12 +18,11 @@ export class WCCodeMirror extends HTMLElement {
1818
set src (value) {
1919
this.setAttribute('src', value);
2020
this.setSrc();
21-
this.__editor.refresh();
2221
}
2322

2423
get value () { return this.__editor.getValue(); }
2524
set value (value) {
26-
this.__editor.swapDoc(CodeMirror.Doc(value), this.getAttribute('mode'));
25+
this.setValue(value);
2726
}
2827

2928
constructor () {
@@ -39,17 +38,9 @@ export class WCCodeMirror extends HTMLElement {
3938
async connectedCallback () {
4039
this.__element = this.querySelector('#code');
4140
this.__element.style = this.hasAttribute('style') ? this.style.cssText : 'width:100%;height:100%';
42-
this.appendChild(this.__element);
4341

44-
if (this.hasAttribute('src')) {
45-
const src = this.getAttribute('src');
46-
this.__element.value = await this.fetchSrc(src);
47-
} else {
48-
this.__element.value = '';
49-
}
50-
51-
const mode = this.getAttribute('mode') || 'null';
52-
const theme = this.getAttribute('theme') || 'default';
42+
const mode = this.hasAttribute('mode') ? this.getAttribute('mode') : 'null';
43+
const theme = this.hasAttribute('theme') ? this.getAttribute('theme') : 'default';
5344

5445
this.__editor = CodeMirror.fromTextArea(this.__element, {
5546
lineNumbers: true,
@@ -58,13 +49,27 @@ export class WCCodeMirror extends HTMLElement {
5849
theme
5950
});
6051

52+
if (this.hasAttribute('src')) {
53+
this.setSrc(this.getAttribute('src'));
54+
} else {
55+
// delay until editor initializes
56+
await new Promise(resolve => setTimeout(resolve, 50));
57+
this.setValue('');
58+
}
59+
6160
this.__initialized = true;
6261
}
6362

6463
async setSrc () {
6564
const src = this.getAttribute('src');
6665
const contents = await this.fetchSrc(src);
6766
this.__editor.swapDoc(CodeMirror.Doc(contents, this.getAttribute('mode')));
67+
this.__editor.refresh();
68+
}
69+
70+
async setValue (value) {
71+
this.__editor.swapDoc(CodeMirror.Doc(value, this.getAttribute('mode')));
72+
this.__editor.refresh();
6873
}
6974

7075
async fetchSrc (src) {

0 commit comments

Comments
 (0)