feat: implement code block highlight

Author: javier-godoy

src/main/java/com/flowingcode/vaadin/addons/demo/SourceCodeViewer.java

@@ -20,7 +20,9 @@
 package com.flowingcode.vaadin.addons.demo;
 
 import com.flowingcode.vaadin.addons.DevSourceRequestHandler;
+import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.HasSize;
+import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
@@ -80,4 +82,15 @@ private void setProperties(Map<String, String> properties) {
       codeViewer.setPropertyJson("env", env);
     }
   }
+
+  public static void highlightOnHover(Component c, String id) {
+    c.addAttachListener(ev -> {
+      c.getElement().executeJs("Vaadin.Flow.fcCodeViewerConnector.highlightOnHover(this,$0)", id);
+    });
+  }
+
+  public static void highlight(String id) {
+    UI.getCurrent().getElement().executeJs("Vaadin.Flow.fcCodeViewerConnector.highlight($0)", id);
+  }
+
 }

src/main/resources/META-INF/resources/frontend/code-viewer.ts

@@ -25,6 +25,27 @@ import {
 
 import "./prism.js";
 
+(function () { 
+  (window as any).Vaadin.Flow.fcCodeViewerConnector = {
+      
+      //highlight a marked block in the single code-viewer of the UI
+      highlight: (id:string|null) => {
+        const viewer = document.querySelector("code-viewer") as CodeViewer;
+        if (viewer) viewer.highligth(id);
+      },
+
+      //highlight a marked block in the single code-viewer of the UI, on hover of element
+      highlightOnHover: (element : HTMLElement, id:string) => {
+        element.addEventListener('mouseenter', ()=>{
+            (window as any).Vaadin.Flow.fcCodeViewerConnector.highlight(id);
+        });
+        element.addEventListener('mouseleave', ()=>{
+            (window as any).Vaadin.Flow.fcCodeViewerConnector.highlight(null);
+        });
+      }
+  }
+})();
+
 @customElement("code-viewer")
 export class CodeViewer extends LitElement {
 
@@ -177,13 +198,22 @@ pre[class*="language-"] {
           display: block;
           background-color: #272822;
           font-size: 10pt;
+          position: relative;
         }
 
 		pre[class*="language-"] {
           background: inherit;
         }
+        
+        .highlight {
+            position: absolute;
+            background: rgba(255,255,128,25%);
+            right: 0;
+            left: 0;
+        }
       </style>
 
+      <div class='highlight'></div>
       <pre><code id="code"></code></pre>
     `;
   }
@@ -203,6 +233,7 @@ pre[class*="language-"] {
 
       (window as any).Prism.highlightAllUnder(self);
       self.__license.reverse().forEach(e=>self.querySelector('pre code')?.prepend(e));
+      self.process(code);
     }};
     xhr.open('GET', sourceUrl, true);
     xhr.send();
@@ -302,6 +333,8 @@ pre[class*="language-"] {
     && !line.startsWith('@SuppressWarnings')
     && !line.startsWith('@Ignore')
     && !line.startsWith('package ')
+    && !line.trim().startsWith('SourceCodeViewer.highlightOnHover(')
+    && !line.trim().startsWith('SourceCodeViewer.highlight(')
     && line != 'import com.vaadin.flow.router.PageTitle;'
     && line != 'import com.vaadin.flow.router.Route;'
     && line != 'import com.flowingcode.vaadin.addons.demo.DemoSource;'
@@ -361,4 +394,68 @@ pre[class*="language-"] {
      return 0;
    }
 
+
+  //process begin-block and end-block instructions 
+  process(code : HTMLElement) {
+    var nodes = code.childNodes;
+    
+    var trimEnd = (i:number) => {
+        //remove trailing \n and spaces from text node i
+        const node = nodes[i]
+        if (node && node.nodeType==3) {
+            node.textContent=(node.textContent as any).replaceAll(/\n[\t\x20]+$/g,'');
+        }
+    }
+      
+    var last : string|undefined;
+    for (var i=0; i<nodes.length; i++) {
+        //process instructions in element nodes
+        if (nodes[i].nodeType!=1) continue;
+          
+        const text = nodes[i].textContent!;
+        var m = text.match("^//\\s*begin-block\\s+(\\S+)\\s*");
+        
+        if (m) {
+            last = m[1];
+            (nodes[i] as HTMLElement).classList.add('begin-'+m[1]);
+            nodes[i].textContent='';
+            trimEnd(i-1);
+            continue;
+        }
+        
+        if (text.match("^//\\s*end-block\\s*") && last) {
+            (nodes[i] as HTMLElement).classList.add('end-'+last);
+            nodes[i].textContent='';
+            trimEnd(i-1);
+            continue;
+        }
+    }
+   
+  }
+  
+  //highligth a marked block
+  highligth(id:string|null) {
+    const div = this.querySelector('.highlight') as HTMLElement;
+    
+    div.style.removeProperty('top');
+    div.style.removeProperty('height');
+    if (id!==null) {
+        var begin = this.querySelector('.begin-'+id) as HTMLElement;
+        var end = this.querySelector('.end-'+id) as HTMLElement;
+        if (begin && end && begin.offsetTop<=end.offsetTop) {
+            var top = begin.offsetTop;
+            var height = end.offsetTop+end.offsetHeight-top;
+            div.style.top= `calc( ${top}px + 0.75em)`;
+            div.style.height= `${height}px`;
+            
+            //scroll to the begin of the marked block
+            if ((begin as any).scrollIntoViewIfNeeded) {
+                (begin as any).scrollIntoViewIfNeeded();
+            }  else {
+                (begin as any).scrollIntoView()
+            }
+        }
+    }
+  }
 }
+

src/test/java/com/flowingcode/vaadin/addons/demo/Demo.java

@@ -32,6 +32,7 @@ public Demo() {
     addDemo(new LegacyDemo());
     addDemo(SampleDemo.class, "Demo");
     addDemo(SampleDemoDefault.class);
+    addDemo(SampleDemoHighlight.class);
     addDemo(AdHocDemo.class);
   }
 }

src/test/java/com/flowingcode/vaadin/addons/demo/SampleDemoHighlight.java

@@ -0,0 +1,68 @@
+/*-
+ * #%L
+ * Commons Demo
+ * %%
+ * Copyright (C) 2020 - 2023 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.demo;
+
+import com.vaadin.flow.component.Text;
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.dependency.StyleSheet;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+@Route(value = "demo/highlight", layout = Demo.class)
+@PageTitle("Highlight")
+@DemoSource
+@StyleSheet("./highlight-demo.css")
+public class SampleDemoHighlight extends Div {
+
+  public SampleDemoHighlight() {
+    add(new Span("Highlight source fragments"));
+
+    // begin-block first
+    Div first = new Div(new Text("First"));
+    SourceCodeViewer.highlightOnHover(first, "first");
+    first.addClassName("dashed"); // hide-source
+    add(first);
+    // end-block
+
+    // begin-block second
+    Div second = new Div(new Text("Second"));
+    SourceCodeViewer.highlightOnHover(second, "second");
+    second.addClassName("dashed"); // hide-source
+    add(second);
+    // end-block
+
+    HorizontalLayout hl = new HorizontalLayout();
+
+    // begin-block button
+    hl.add(new Button("Click me", ev -> {
+      SourceCodeViewer.highlight("button");
+    }));
+    // end-block
+
+    hl.add(new Button("Highlight Off", ev -> {
+      SourceCodeViewer.highlight(null);
+    }));
+
+    add(hl);
+  }
+}

src/test/resources/META-INF/resources/frontend/highlight-demo.css

@@ -0,0 +1,9 @@
+.dashed {
+	border: 1px dashed black;
+	padding: 1ex;
+	margin: 1ex;
+}
+
+.dashed:hover {
+    background: var(--lumo-contrast-10pct);
+}