From 9e2054d13d5296a5fa72fe062c2022eddfed8a20 Mon Sep 17 00:00:00 2001
From: Javier Godoy <11554739+javier-godoy@users.noreply.github.com>
Date: Wed, 26 Jun 2024 16:39:23 -0300
Subject: [PATCH] feat: support highlighting code in CSS

---
 README.md                                                 | 2 ++
 .../resources/META-INF/resources/frontend/code-viewer.ts  | 6 +++++-
 .../flowingcode/vaadin/addons/demo/MultiSourceDemo.java   | 8 ++++++--
 .../META-INF/resources/frontend/multi-source-demo.css     | 6 ++++--
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 0949a81..f929f81 100644
--- a/README.md
+++ b/README.md
@@ -183,6 +183,8 @@ The `// begin-block` and `// end-block` comments are removed after post-processi
     add(other);
 ```
 
+For highlighting code in CSS, use `/*// begin-block filenameAndId */`
+
 <!-- FROM https://github.com/FlowingCode/CommonsDemo/pull/62 -->
 ![image](https://github.com/FlowingCode/CommonsDemo/assets/11554739/02063272-029f-4b4b-bd6f-821f2f8a0158)
 
diff --git a/src/main/resources/META-INF/resources/frontend/code-viewer.ts b/src/main/resources/META-INF/resources/frontend/code-viewer.ts
index 44f1a72..5fcc9fe 100644
--- a/src/main/resources/META-INF/resources/frontend/code-viewer.ts
+++ b/src/main/resources/META-INF/resources/frontend/code-viewer.ts
@@ -416,7 +416,11 @@ pre[class*="language-"] {
         //process instructions in element nodes
         if (nodes[i].nodeType!=1) continue;
           
-        const text = nodes[i].textContent!;
+        var text = nodes[i].textContent!;
+        
+        var blockComment = text.match("^/\\*(?<content>(\\*(?!\/)|[^\\*])*)\\*\/");
+        if (blockComment) text = blockComment.groups!.content;
+        
         var m = text.match("^//\\s*begin-block\\s+(\\S+)\\s*");
         
         if (m) {
diff --git a/src/test/java/com/flowingcode/vaadin/addons/demo/MultiSourceDemo.java b/src/test/java/com/flowingcode/vaadin/addons/demo/MultiSourceDemo.java
index e7ceba9..f6d5b40 100644
--- a/src/test/java/com/flowingcode/vaadin/addons/demo/MultiSourceDemo.java
+++ b/src/test/java/com/flowingcode/vaadin/addons/demo/MultiSourceDemo.java
@@ -41,11 +41,15 @@ public MultiSourceDemo() {
     div.addClassName("custom-style");
     SourceCodeViewer.highlightOnHover(div, "main");
     add(div);
-    // end-block
 
     Button button1 = new Button("Highlight code in AdditionalSources");
     SourceCodeViewer.highlightOnClick(button1, "AdditionalSources.java#fragment");
-    add(button1);
+    add(new Div(button1));
+
+    Button button2 = new Button("Highlight code in CSS");
+    SourceCodeViewer.highlightOnClick(button2, "multi-source-demo.css#css-fragment");
+    add(new Div(button2));
+    // end-block
   }
 
 }
diff --git a/src/test/resources/META-INF/resources/frontend/multi-source-demo.css b/src/test/resources/META-INF/resources/frontend/multi-source-demo.css
index d41fcb6..84c7648 100644
--- a/src/test/resources/META-INF/resources/frontend/multi-source-demo.css
+++ b/src/test/resources/META-INF/resources/frontend/multi-source-demo.css
@@ -1,3 +1,5 @@
+/*// begin-block css */
 .custom-style {
-  color: red;		
-}
\ No newline at end of file
+  color: red;
+}
+/*// end-block */
\ No newline at end of file