feat(#115): on lineNumbers attribute change, refresh code

Author: peterpeterparker

webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx

@@ -114,6 +114,11 @@ export class DeckdeckgoHighlightCode {
     });
   }
 
+  @Watch('lineNumbers')
+  async onLineNumbersChange() {
+    await this.fetchOrParse();
+  }
+
   @Method()
   load(): Promise<void> {
     return new Promise<void>(async (resolve) => {

webcomponents/highlight-code/src/index.html

@@ -30,6 +30,17 @@ <h1>Editable:</h1>
     }</code>
 </deckgo-highlight-code>
 
+<script type="text/javascript">
+    function toggleLineNumbers() {
+        const elem = document.getElementsByTagName('deckgo-highlight-code');
+        if (elem && elem.length > 0) {
+            elem[0].lineNumbers = !elem[0].lineNumbers;
+        }
+    }
+</script>
+
+<button onclick="toggleLineNumbers()">Toggle line numbers</button>
+
 <h1>Editable empty:</h1>
 
 <deckgo-highlight-code language="java" editable="true">
@@ -38,18 +49,31 @@ <h1>Editable empty:</h1>
 
 <h1>From src:</h1>
 
-<deckgo-highlight-code line-numbers="true" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/core/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx">
+<script type="text/javascript">
+    function toggleSrcLineNumbers() {
+        const elem = document.getElementById('deckGoCode');
+        if (elem) {
+            elem.lineNumbers = !elem.lineNumbers;
+        }
+    }
+</script>
+
+<button onclick="toggleSrcLineNumbers()" style="margin-bottom: 16px;">Toggle fetched line numbers</button>
+
+<deckgo-highlight-code line-numbers="true" id="deckGoCode"
+                       src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/core/src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx">
 </deckgo-highlight-code>
 
 <h1>Typescript</h1>
 
-<deckgo-highlight-code language="typescript" highlight-lines="1,1" line-numbers="true" style="--deckgo-highlight-code-line-background: lightgrey;">
+<deckgo-highlight-code language="typescript" highlight-lines="1,1" line-numbers="true"
+                       style="--deckgo-highlight-code-line-background: lightgrey;">
   <code slot="code">@Method()
-isMobile(): Promise&lt;boolean> {
-  return new Promise&lt;boolean>((resolve) => {
+    isMobile(): Promise&lt;boolean> {
+    return new Promise&lt;boolean>((resolve) => {
     resolve(DeckdeckgoUtils.isMobile());
-  });
-}</code>
+    });
+    }</code>
 </deckgo-highlight-code>
 
 <h1>Plain code and java language:</h1>
@@ -79,7 +103,8 @@ <h1>Plain code and java language:</h1>
   <code slot="code">Cool, let's kick start a new DeckDeckGo presentation
 
     ? What's your project name (will be use to create a new folder)? (deckdeckgo)
-    ? What's your presentation name (max. 45 characters, will be use for meta tags and manifest information)? (DeckDeckGo)
+    ? What's your presentation name (max. 45 characters, will be use for meta tags and manifest information)?
+    (DeckDeckGo)
     ? What's your presentation about (its description)? (Create a lightweight presentation using Web Components 🚀)
     ? What's your name (will be use for the author meta information)? (David)
     ? What method do you want to use to edit your presentation? (Use arrow keys)