From 4834fbd3fc8832f6b70cec3b9e69c7221669c4d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Boris=20Lehe=C4=8Dka?= <boris@daliboris.cz>
Date: Tue, 19 Sep 2023 23:04:00 +0200
Subject: [PATCH] change the content if the code property is changed

---
 src/pb-code-highlight.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pb-code-highlight.js b/src/pb-code-highlight.js
index 231aa2d1..967868ae 100644
--- a/src/pb-code-highlight.js
+++ b/src/pb-code-highlight.js
@@ -51,6 +51,7 @@ export class PbCodeHighlight extends themableMixin(LitElement) {
              * The code to be highlighted as a string. If not set,
              * this will be populated from either a template child element
              * or the element's text content.
+             * The value of the property can be changed programmatically from JavaScript.
              */
             code: {
                 type: String
@@ -118,6 +119,14 @@ export class PbCodeHighlight extends themableMixin(LitElement) {
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('code')) {
+            //if the code property is changed, the content of the <code> element is replaced
+            const pre = this.shadowRoot.getElementById("pb-code-highlight");
+            if(pre != null) {
+                const code = document.createElement("code");
+                code.textContent = this.code; //textContent property keeps new lines in the code
+                pre.replaceChildren(code);
+                
+            }
             this.highlight();
         }
     }
@@ -130,7 +139,7 @@ export class PbCodeHighlight extends themableMixin(LitElement) {
         if (this.code) {
             return html`
                 ${this._themeStyles}
-                <pre class="${this.lineNumbers ? 'line-numbers' : ''} language-${this.language}"><code>${this.code}</code></pre>
+                <pre id="pb-code-highlight" class="${this.lineNumbers ? 'line-numbers' : ''} language-${this.language}"><code>${this.code}</code></pre>
             `;
         }
         return html`<pre class="line-numbers"><code><code></pre>`;