Use new code block component for Dev UI Code displays

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>

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]

extensions/grpc/deployment/src/main/resources/dev-ui/qwc-grpc-services.js

@@ -2,21 +2,23 @@ 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';
 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,14 +216,16 @@ export class QwcGrpcServices extends QwcHotReloadElement {
                                     mode='json'
                                     content='${method.prototype}'
                                     value='${method.prototype}'
+                                    theme='${themeState.theme.name}'
                                     editable>
                                 </qui-code-block>
                             </master-content>
                             <detail-content style="width: 50%;">
                                 <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>`;

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();

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>

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);

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>`;
     }

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

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>
 

extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-configuration-editor.js

@@ -1,15 +1,17 @@
 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';
 
 /**
  * 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>`;
     }

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>`;
     }