From 87e0d2545e5a440702c694d80fe8ccffa12e4c6b Mon Sep 17 00:00:00 2001
From: Phillip Kruger <phillip.kruger@gmail.com>
Date: Mon, 19 Feb 2024 17:36:05 +1100
Subject: [PATCH] Use new code block component for Dev UI Code displays

Signed-off-by: Phillip Kruger <phillip.kruger@gmail.com>
---
 bom/dev-ui/pom.xml                            | 10 +--
 docs/src/main/asciidoc/dev-ui.adoc            |  2 +-
 .../resources/dev-ui/qwc-grpc-services.js     | 10 ++-
 .../dev-ui/hibernate-orm-persistence-units.js | 28 +++++---
 .../resources/dev-ui/qwc-kafka-messages.js    |  9 ++-
 .../dev-ui/qwc-kafka-streams-topology.js      | 12 ++--
 .../dev-ui/qwc-kubernetes-manifest.js         | 11 +--
 .../deployment/BuildTimeContentProcessor.java |  1 -
 .../vertx-http/dev-ui-resources/pom.xml       |  4 +-
 .../resources/dev-ui/qui/qui-code-block.js    | 70 -------------------
 .../dev-ui/qwc/qwc-configuration-editor.js    |  7 +-
 .../resources/dev-ui/qwc/qwc-data-raw-page.js | 17 +++--
 .../resources/dev-ui/qwc/qwc-dev-services.js  |  7 +-
 .../resources/dev-ui/qwc/qwc-external-page.js |  9 ++-
 14 files changed, 79 insertions(+), 118 deletions(-)
 delete mode 100644 extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js

diff --git a/bom/dev-ui/pom.xml b/bom/dev-ui/pom.xml
index be2f1cc71d1ae..53ccf228daf0e 100644
--- a/bom/dev-ui/pom.xml
+++ b/bom/dev-ui/pom.xml
@@ -28,7 +28,7 @@
         <vaadin-router.version>1.7.5</vaadin-router.version>
         <lit-state.version>1.7.0</lit-state.version>
         <echarts.version>5.4.3</echarts.version>
-        <wc-codemirror.version>2.1.0</wc-codemirror.version>
+        <codeblock.version>1.0.10</codeblock.version>
         <es-module-shims.version>1.8.2</es-module-shims.version>
         <path-to-regexp.version>2.4.0</path-to-regexp.version>
 
@@ -262,12 +262,12 @@
 
             <!-- Code editor -->
             <dependency>
-                <groupId>org.mvnpm.at.vanillawc</groupId>
-                <artifactId>wc-codemirror</artifactId>
-                <version>${wc-codemirror.version}</version>
+                <groupId>org.mvnpm.at.mvnpm</groupId>
+                <artifactId>codeblock</artifactId>
+                <version>${codeblock.version}</version>
                 <scope>runtime</scope>
             </dependency>
-
+            
             <!-- Polyfill for importmaps -->
             <dependency>
                 <groupId>org.mvnpm</groupId>
diff --git a/docs/src/main/asciidoc/dev-ui.adoc b/docs/src/main/asciidoc/dev-ui.adoc
index 42454fba55d29..b7b2d52f966a8 100644
--- a/docs/src/main/asciidoc/dev-ui.adoc
+++ b/docs/src/main/asciidoc/dev-ui.adoc
@@ -684,7 +684,7 @@ image::dev-ui-qui-code-block-v2.png[alt=Dev UI Code Block,role="center"]
 
 [source,javascript]
 ----
-import 'qui-code-block';
+import '@quarkus-webcomponents/codeblock';
 ----
 
 [source,html]
diff --git a/extensions/grpc/deployment/src/main/resources/dev-ui/qwc-grpc-services.js b/extensions/grpc/deployment/src/main/resources/dev-ui/qwc-grpc-services.js
index 27eba4c5a3594..7a505a4861051 100644
--- a/extensions/grpc/deployment/src/main/resources/dev-ui/qwc-grpc-services.js
+++ b/extensions/grpc/deployment/src/main/resources/dev-ui/qwc-grpc-services.js
@@ -2,6 +2,9 @@ import { QwcHotReloadElement, html, css} from 'qwc-hot-reload-element';
 import { JsonRpc } from 'jsonrpc';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import { gridRowDetailsRenderer } from '@vaadin/grid/lit.js';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@quarkus-webcomponents/codeblock';
 import '@vaadin/progress-bar';
 import '@vaadin/grid';
 import '@vaadin/grid/vaadin-grid-sort-column.js';
@@ -9,14 +12,13 @@ import '@vaadin/vertical-layout';
 import '@vaadin/tabs';
 import '@vaadin/split-layout';
 import 'qui-badge';
-import 'qui-code-block';
 import 'qui-ide-link';
 import '@vaadin/button';
 
 /**
  * This component shows the Grpc Services
  */
-export class QwcGrpcServices extends QwcHotReloadElement { 
+export class QwcGrpcServices extends observeState(QwcHotReloadElement) { 
     jsonRpc = new JsonRpc(this);
     streamsMap = new Map();
 
@@ -214,6 +216,7 @@ export class QwcGrpcServices extends QwcHotReloadElement {
                                     mode='json'
                                     content='${method.prototype}'
                                     value='${method.prototype}'
+                                    theme='${themeState.theme.name}'
                                     editable>
                                 </qui-code-block>
                             </master-content>
@@ -221,7 +224,8 @@ export class QwcGrpcServices extends QwcHotReloadElement {
                                 <qui-code-block
                                     id='${this._responseId(service.name, method)}'
                                     mode='json'
-                                    content='\n\n\n\n'>
+                                    content='\n\n\n\n'
+                                    theme='${themeState.theme.name}'>
                                 </qui-code-block>
                             </detail-content>
                         </vaadin-split-layout>`;
diff --git a/extensions/hibernate-orm/deployment/src/main/resources/dev-ui/hibernate-orm-persistence-units.js b/extensions/hibernate-orm/deployment/src/main/resources/dev-ui/hibernate-orm-persistence-units.js
index f28762193739a..0d6e245238ad1 100644
--- a/extensions/hibernate-orm/deployment/src/main/resources/dev-ui/hibernate-orm-persistence-units.js
+++ b/extensions/hibernate-orm/deployment/src/main/resources/dev-ui/hibernate-orm-persistence-units.js
@@ -5,16 +5,16 @@ import '@vaadin/button';
 import '@vaadin/grid';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import { notifier } from 'notifier';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@quarkus-webcomponents/codeblock';
 
-export class HibernateOrmPersistenceUnitsComponent extends LitElement {
+export class HibernateOrmPersistenceUnitsComponent extends observeState(LitElement) {
 
     static styles = css`
         .full-height {
           height: 100%;
         }
-        .ddl-script {
-            padding: 5px;
-        }
         a.script-heading {
             display: block;
             float:left;
@@ -81,7 +81,11 @@ export class HibernateOrmPersistenceUnitsComponent extends LitElement {
                             </vaadin-button>
                         </vaadin-horizontal-layout>
                     </vaadin-details-summary>
-                    <pre class="ddl-script">${pu.createDDL}</pre>
+                    <qui-code-block
+                        mode="sql"
+                        content="${pu.createDDL}"
+                        theme="${themeState.theme.name}">
+                    </qui-code-block>
                 </vaadin-details>
                 <vaadin-details>
                     <vaadin-details-summary slot="summary" theme="filled">
@@ -96,7 +100,11 @@ export class HibernateOrmPersistenceUnitsComponent extends LitElement {
                             </vaadin-button>
                         </vaadin-horizontal-layout>
                     </vaadin-details-summary>
-                    <pre class="ddl-script">${pu.updateDDL}</pre>
+                    <qui-code-block
+                        mode="sql"
+                        content="${pu.updateDDL}"
+                        theme="${themeState.theme.name}">
+                    </qui-code-block>
                 </vaadin-details>
                 <vaadin-details>
                     <vaadin-details-summary slot="summary" theme="filled">
@@ -111,13 +119,17 @@ export class HibernateOrmPersistenceUnitsComponent extends LitElement {
                             </vaadin-button>
                         </vaadin-horizontal-layout>
                     </vaadin-details-summary>
-                    <pre class="ddl-script">${pu.dropDDL}</pre>
+                    <qui-code-block
+                        mode="sql"
+                        content="${pu.dropDDL}"
+                        theme="${themeState.theme.name}">
+                    </qui-code-block>
                 </vaadin-details>`;
     }
 
     _copyToClipboard(event, what) {
         event.stopPropagation();
-        var text = event.target.closest("vaadin-details").querySelector(".ddl-script").textContent;
+        var text = event.target.closest("vaadin-details").querySelector("qui-code-block").value;
         var listener = function(ev) {
             ev.clipboardData.setData("text/plain", text);
             ev.preventDefault();
diff --git a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js
index 9ff8fcca67877..9164a203ee223 100644
--- a/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js
+++ b/extensions/kafka-client/deployment/src/main/resources/dev-ui/qwc-kafka-messages.js
@@ -7,14 +7,16 @@ import { columnBodyRenderer, gridRowDetailsRenderer } from '@vaadin/grid/lit.js'
 import '@vaadin/dialog';
 import { dialogRenderer } from '@vaadin/dialog/lit.js';
 import '@vaadin/button';
-import 'qui-code-block';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@quarkus-webcomponents/codeblock';
 import '@vaadin/split-layout';
 import './qwc-kafka-add-message.js';
 
 /**
  * This component shows the Kafka Messages for a certain topic
  */
-export class QwcKafkaMessages extends QwcHotReloadElement { 
+export class QwcKafkaMessages extends observeState(QwcHotReloadElement) {
     
     static styles = css`
         .kafka {
@@ -171,7 +173,8 @@ export class QwcKafkaMessages extends QwcHotReloadElement {
                             <div class="code-block">    
                                 <qui-code-block
                                     mode='json'
-                                    content='${message.value}'>
+                                    content='${message.value}'
+                                    theme='${themeState.theme.name}'>
                                 </qui-code-block>
                             </div>
                         </master-content>
diff --git a/extensions/kafka-streams/deployment/src/main/resources/dev-ui/qwc-kafka-streams-topology.js b/extensions/kafka-streams/deployment/src/main/resources/dev-ui/qwc-kafka-streams-topology.js
index 98d40dd857ada..f3f288eac6c51 100644
--- a/extensions/kafka-streams/deployment/src/main/resources/dev-ui/qwc-kafka-streams-topology.js
+++ b/extensions/kafka-streams/deployment/src/main/resources/dev-ui/qwc-kafka-streams-topology.js
@@ -9,12 +9,14 @@ import '@vaadin/details';
 import '@vaadin/tabs';
 import '@vaadin/vertical-layout';
 import 'qui-badge';
-import 'qui-code-block';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@quarkus-webcomponents/codeblock';
 
 /**
  * This component shows the Kafka Streams Topology
  */
-export class QwcKafkaStreamsTopology extends QwcHotReloadElement {
+export class QwcKafkaStreamsTopology extends observeState(QwcHotReloadElement) {
 
     jsonRpc = new JsonRpc(this);
 
@@ -132,15 +134,15 @@ export class QwcKafkaStreamsTopology extends QwcHotReloadElement {
     }
 
     _selectDescribeTab() {
-      this._tabContent = html`<qui-code-block mode='text' content='${this._topology.describe}' class="codeBlock"></qui-code-block>`;
+      this._tabContent = html`<qui-code-block theme='${themeState.theme.name}' content='${this._topology.describe}' class="codeBlock"></qui-code-block>`;
     }
 
     _selectGraphvizTab() {
-      this._tabContent = html`<qui-code-block mode='gv' content='${this._topology.graphviz}' class="codeBlock"></qui-code-block>`;
+      this._tabContent = html`<qui-code-block mode='gv' theme="${themeState.theme.name}" content='${this._topology.graphviz}' class="codeBlock"></qui-code-block>`;
     }
 
     _selectMermaidTab() {
-      this._tabContent = html`<qui-code-block mode='mermaid' content='${this._topology.mermaid}' class="codeBlock"></qui-code-block>`;
+      this._tabContent = html`<qui-code-block mode='mermaid' theme="${themeState.theme.name}" content='${this._topology.mermaid}' class="codeBlock"></qui-code-block>`;
     }
 }
 customElements.define('qwc-kafka-streams-topology', QwcKafkaStreamsTopology);
\ No newline at end of file
diff --git a/extensions/kubernetes/vanilla/deployment/src/main/resources/dev-ui/qwc-kubernetes-manifest.js b/extensions/kubernetes/vanilla/deployment/src/main/resources/dev-ui/qwc-kubernetes-manifest.js
index 6c33ed70fb676..145af77540418 100644
--- a/extensions/kubernetes/vanilla/deployment/src/main/resources/dev-ui/qwc-kubernetes-manifest.js
+++ b/extensions/kubernetes/vanilla/deployment/src/main/resources/dev-ui/qwc-kubernetes-manifest.js
@@ -1,12 +1,14 @@
 import { LitElement, html, css} from 'lit';
 import { JsonRpc } from 'jsonrpc';
-import 'qui-code-block';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@quarkus-webcomponents/codeblock';
 import '@vaadin/icon';
 import '@vaadin/tabs';
 import '@vaadin/tabsheet';
 import '@vaadin/progress-bar';
 
-export class QwcKubernetesManifest extends LitElement {
+export class QwcKubernetesManifest extends observeState(LitElement) {
 
     jsonRpc = new JsonRpc(this);
 
@@ -98,8 +100,9 @@ export class QwcKubernetesManifest extends LitElement {
         
         return html`<div class="codeBlock">
                             <qui-code-block 
-                                mode='yaml'
-                                content='${yaml}'>
+                                mode="yaml"
+                                content="${yaml}"
+                                theme="${themeState.theme.name}">
                             </qui-code-block>
                         </div>`;
     }
diff --git a/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java b/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
index af48090b90383..86b2e1538bfae 100644
--- a/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
+++ b/extensions/vertx-http/deployment/src/main/java/io/quarkus/devui/deployment/BuildTimeContentProcessor.java
@@ -108,7 +108,6 @@ InternalImportMapBuildItem createKnownInternalImportMap(NonApplicationRootPathBu
 
         internalImportMapBuildItem.add("qui-badge", contextRoot + "qui/qui-badge.js");
         internalImportMapBuildItem.add("qui-alert", contextRoot + "qui/qui-alert.js");
-        internalImportMapBuildItem.add("qui-code-block", contextRoot + "qui/qui-code-block.js");
         internalImportMapBuildItem.add("qui-ide-link", contextRoot + "qui/qui-ide-link.js");
 
         // Echarts
diff --git a/extensions/vertx-http/dev-ui-resources/pom.xml b/extensions/vertx-http/dev-ui-resources/pom.xml
index b74ee3f72e11c..e81d2a928adc0 100644
--- a/extensions/vertx-http/dev-ui-resources/pom.xml
+++ b/extensions/vertx-http/dev-ui-resources/pom.xml
@@ -100,8 +100,8 @@
 
         <!-- Code editor -->
         <dependency>
-            <groupId>org.mvnpm.at.vanillawc</groupId>
-            <artifactId>wc-codemirror</artifactId>
+            <groupId>org.mvnpm.at.mvnpm</groupId>
+            <artifactId>codeblock</artifactId>
             <scope>runtime</scope>
         </dependency>
 
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js
deleted file mode 100644
index d0eeb45631847..0000000000000
--- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qui/qui-code-block.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { nothing } from 'lit';
-import { observeState } from 'lit-element-state';
-import { themeState } from 'theme-state';
-import '@vanillawc/wc-codemirror';
-import '@vanillawc/wc-codemirror/mode/yaml/yaml.js';
-import '@vanillawc/wc-codemirror/mode/properties/properties.js';
-import '@vanillawc/wc-codemirror/mode/javascript/javascript.js';
-
-export class QuiCodeBlock extends observeState(LitElement) {
-
-    static styles = css``;
-
-    static properties = {
-        mode: {type: String}, // yaml / js / etc
-        src: {type: String}, // src (optional)
-        content: {type: String}, // content (optional),
-        value: {type: String, reflect: true }, // up to date value
-        editable: {type: Boolean} // readonly
-    };
-
-    constructor() {
-        super();
-        this.mode = null;
-        this.src = null;
-        this.content = null;
-        this.value = null;
-        this.editable = false;
-    }
-    
-    render() {
-        let currentPath = window.location.pathname;
-        currentPath = currentPath.substring(0, currentPath.indexOf('/dev'));
-        
-        return html`<wc-codemirror id="code" mode='${this.mode}'
-                                src='${this.src || nothing}'
-                                theme='base16-${themeState.theme.name}'
-                                ?readonly=${!this.editable}
-                                @keyup=${this._persistValue}>
-                        <link rel='stylesheet' href='${currentPath}/_static/wc-codemirror/theme/base16-${themeState.theme.name}.css'>
-                        ${this._renderContent()}
-                    </wc-codemirror>`;
-        
-    }
-
-    _persistValue(event){
-        this.value = event.target.value;
-    }
-
-    _renderContent(){
-        if(this.content){
-            return html`<script type='wc-content'>${this.content}</script>`;
-        }
-    }
-    
-    populatePrettyJson(v){
-        this.clear();
-        let pv = JSON.parse(v);
-        v = JSON.stringify(pv, null, 2);
-        this.content = v;
-        this.value = v;
-    }
-    
-    clear(){
-        this.content = "\n\n\n\n";
-        this.value = null;
-    }
-}
-
-customElements.define('qui-code-block', QuiCodeBlock);
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration-editor.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration-editor.js
index c376f251e58ad..343d3fabf6234 100644
--- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration-editor.js
+++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration-editor.js
@@ -1,7 +1,9 @@
 import { LitElement, html, css } from 'lit';
 import { JsonRpc } from 'jsonrpc';
 import { notifier } from 'notifier';
-import 'qui-code-block';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@quarkus-webcomponents/codeblock';
 import '@vaadin/button';
 import '@vaadin/icon';
 import '@vaadin/progress-bar';
@@ -9,7 +11,7 @@ import '@vaadin/progress-bar';
 /**
  * This component allows users to change the configuration in an online editor
  */
-export class QwcConfigurationEditor extends LitElement {
+export class QwcConfigurationEditor extends observeState(LitElement) {
     jsonRpc = new JsonRpc(this);
 
     static styles = css`
@@ -77,6 +79,7 @@ export class QwcConfigurationEditor extends LitElement {
             mode='${this._type}'
             content='${this._value}'
             value='${this._value}'
+            theme='${themeState.theme.name}'
             editable>
         </qui-code-block>`;
     }
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-data-raw-page.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-data-raw-page.js
index 24539f51e31cd..e29f3e158f500 100644
--- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-data-raw-page.js
+++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-data-raw-page.js
@@ -1,11 +1,13 @@
 import { LitElement, html, css} from 'lit';
 import { RouterController } from 'router-controller';
-import 'qui-code-block';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
+import '@quarkus-webcomponents/codeblock';
 
 /**
  * This component renders build time data in raw json format
  */
-export class QwcDataRawPage extends LitElement {
+export class QwcDataRawPage extends observeState(LitElement) {
     routerController = new RouterController(this);
     
     static styles = css`
@@ -16,11 +18,6 @@ export class QwcDataRawPage extends LitElement {
             padding-left: 10px;
             padding-right: 10px;
         }
-        .jsondata {
-            height: 100%;
-            overflow: scroll;
-            padding-bottom: 100px;
-        }
     `;
 
     static properties = {
@@ -55,8 +52,10 @@ export class QwcDataRawPage extends LitElement {
 
         return html`<div class="codeBlock">
                         <qui-code-block 
-                            mode='javascript'
-                            content='${json}'>
+                            mode='json'
+                            content='${json}'
+                            theme='${themeState.theme.name}'
+                            showLineNumbers>
                         </qui-code-block>
             </div>`;
     }
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js
index 1fd8e109b5db8..45470905e47b4 100644
--- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js
+++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-dev-services.js
@@ -1,14 +1,16 @@
 import { QwcHotReloadElement, html, css } from 'qwc-hot-reload-element';
 import { devServices } from 'devui-data';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
 import '@vaadin/icon';
-import 'qui-code-block';
+import '@quarkus-webcomponents/codeblock';
 import 'qui-card';
 import 'qwc-no-data';
 
 /**
  * This component shows the Dev Services Page
  */
-export class QwcDevServices extends QwcHotReloadElement {
+export class QwcDevServices extends observeState(QwcHotReloadElement) {
     static styles = css`
         .cards {
             height: 100%;
@@ -100,6 +102,7 @@ export class QwcDevServices extends QwcHotReloadElement {
                         <div class="config">
                             <qui-code-block 
                                 mode='properties'
+                                theme='${themeState.theme.name}'    
                                 content='${properties.trim()}'>
                             </qui-code-block>
                         </div>`;
diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-external-page.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-external-page.js
index a0baff193e6c5..3b67934b3185a 100644
--- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-external-page.js
+++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-external-page.js
@@ -1,14 +1,16 @@
 import { LitElement, html, css} from 'lit';
 import { RouterController } from 'router-controller';
 import { JsonRpc } from 'jsonrpc';
+import { observeState } from 'lit-element-state';
+import { themeState } from 'theme-state';
 import '@vaadin/icon';
-import 'qui-code-block';
+import '@quarkus-webcomponents/codeblock';
 import '@vaadin/progress-bar';
 
 /**
  * This component loads an external page
  */
-export class QwcExternalPage extends LitElement {
+export class QwcExternalPage extends observeState(LitElement) {
     routerController = new RouterController(this);
     
     static styles = css`
@@ -115,7 +117,8 @@ export class QwcExternalPage extends LitElement {
                             </span>
                             <qui-code-block 
                                 mode='${this._mode}'
-                                src='${this._externalUrl}'>
+                                src='${this._externalUrl}'
+                                theme='${themeState.theme.name}'>
                             </qui-code-block>
                         </div>
                         `;