Switch out commonmark for prism rendering of text

cf-toolsuite · Oct 16, 2024 · cb0df90 · cb0df90
1 parent 43d5898
commit cb0df90
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 55 deletions.
diff --git a/build.gradle b/build.gradle
@@ -33,7 +33,6 @@ dependencies {
 	implementation 'io.github.openfeign:feign-hc5:13.4'
 	implementation 'com.vaadin:vaadin-spring-boot-starter'
 	implementation 'org.vaadin.olli:file-download-wrapper:7.1.0'
-	implementation 'org.commonmark:commonmark:0.23.0'
 	implementation 'org.apache.commons:commons-lang3'
 	implementation 'io.pivotal.cfenv:java-cfenv-all:3.2.0'
 	implementation 'org.springframework.cloud:spring-cloud-bindings:2.0.3'

diff --git a/src/main/java/org/cftoolsuite/ui/component/Markdown.java b/src/main/java/org/cftoolsuite/ui/component/Markdown.java
@@ -1,56 +1,39 @@
 package org.cftoolsuite.ui.component;
 
-import org.commonmark.node.Node;
-import org.commonmark.parser.Parser;
-import org.commonmark.renderer.html.HtmlRenderer;
+import com.vaadin.flow.component.Html;
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JavaScript;
+import com.vaadin.flow.component.dependency.StyleSheet;
 
-import com.vaadin.flow.component.Composite;
-import com.vaadin.flow.component.html.Div;
-import com.vaadin.flow.component.html.Span;
+@Tag("div")
+@JavaScript("https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js")
+@JavaScript("https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-markdown.min.js")
+@StyleSheet("https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-nord.min.css")
+public class Markdown extends Html {
 
-public class Markdown extends Composite<Div> {
-
-    private final Parser parser = Parser.builder().build();
-    private final HtmlRenderer renderer = HtmlRenderer.builder().build();
-    private final StringBuilder markdownBuffer = new StringBuilder();
-    private final Span rawTextSpan = new Span();
-    private boolean isRendered = false;
+    private StringBuilder builder = new StringBuilder();
 
     public Markdown() {
-        getContent().add(rawTextSpan);
-    }
-
-    public Markdown(String markdown) {
-        this();
-        setMarkdown(markdown);
-    }
-
-    public void setMarkdown(String markdown) {
-        markdownBuffer.setLength(0);
-        rawTextSpan.setText("");
-        addMarkdown(markdown);
-    }
-
-    public void addMarkdown(String markdown) {
-        markdownBuffer.append(markdown).append(" ");
-        rawTextSpan.setText(markdownBuffer.toString());
+        super("<pre><code class=\"language-markdown\"></code></pre>");
+        getElement().executeJs("Prism.highlightElement($0)", getElement());
     }
 
-    public void render() {
-        if (!isRendered) {
-            Node document = parser.parse(markdownBuffer.toString());
-            String html = renderer.render(document);
-            getContent().removeAll();
-            getContent().getElement().setProperty("innerHTML", html);
-            isRendered = true;
+    public void setSource(String code) {
+        if (code.startsWith("-")) {
+            builder.append(System.lineSeparator());
+            builder.append(System.lineSeparator());
         }
+        builder.append(" " + code);
+        setHtmlContent("<pre><code class=\"language-markdown\">" +
+              escapeHtml(builder.toString()) + "</code></pre>");
+        getElement().executeJs("Prism.highlightElement($0)", getElement());
     }
 
-    public void reset() {
-        markdownBuffer.setLength(0);
-        rawTextSpan.setText("");
-        getContent().removeAll();
-        getContent().add(rawTextSpan);
-        isRendered = false;
+    private static String escapeHtml(String html) {
+        return html.replace("&", "&amp;")
+                   .replace("<", "&lt;")
+                   .replace(">", "&gt;")
+                   .replace("\"", "&quot;")
+                   .replace("'", "&#039;");
     }
-}
+}
diff --git a/src/main/java/org/cftoolsuite/ui/view/ListView.java b/src/main/java/org/cftoolsuite/ui/view/ListView.java
@@ -23,7 +23,6 @@
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.H2;
-import com.vaadin.flow.component.html.H3;
 import com.vaadin.flow.component.icon.Icon;
 import com.vaadin.flow.component.icon.VaadinIcon;
 import com.vaadin.flow.component.notification.NotificationVariant;
@@ -176,7 +175,7 @@ protected void showSummary(String fileName) {
             .set("max-height", "600px")
             .set("overflow-y", "auto");
 
-        Markdown markdown = new Markdown("");
+        Markdown markdown = new Markdown();
         contentWrapper.add(markdown);
 
         Dialog summaryDialog = new Dialog();
@@ -200,14 +199,13 @@ protected void showSummary(String fileName) {
                 .log()
                 .subscribe(
                     chunk -> ui.access(() -> {
-                        markdown.addMarkdown(chunk);
+                        markdown.setSource(chunk);
                     }),
                     error -> ui.access(() -> {
                         log.error("Error fetching summary", error);
                         showNotification("Error fetching summary: " + error.getMessage(), NotificationVariant.LUMO_ERROR);
                     }),
                     () -> ui.access(() -> {
-                        markdown.render();
                         showNotification("Summary completed", NotificationVariant.LUMO_SUCCESS);
                     })
                 );

diff --git a/src/main/java/org/cftoolsuite/ui/view/SearchView.java b/src/main/java/org/cftoolsuite/ui/view/SearchView.java
@@ -174,7 +174,7 @@ protected void showSummary(String fileName) {
             .set("max-height", "600px")
             .set("overflow-y", "auto");
 
-        Markdown markdown = new Markdown("");
+        Markdown markdown = new Markdown();
         contentWrapper.add(markdown);
 
         Dialog summaryDialog = new Dialog();
@@ -197,14 +197,13 @@ protected void showSummary(String fileName) {
             Disposable subscription = summaryService.getSummary(fileName)
                 .subscribe(
                     chunk -> ui.access(() -> {
-                        markdown.addMarkdown(chunk);
+                        markdown.setSource(chunk);
                     }),
                     error -> ui.access(() -> {
                         log.error("Error fetching summary", error);
                         showNotification("Error fetching summary: " + error.getMessage(), NotificationVariant.LUMO_ERROR);
                     }),
                     () -> ui.access(() -> {
-                        markdown.render();
                         showNotification("Summary completed", NotificationVariant.LUMO_SUCCESS);
                     })
                 );

diff --git a/src/main/java/org/cftoolsuite/ui/view/SummarizeView.java b/src/main/java/org/cftoolsuite/ui/view/SummarizeView.java
@@ -80,7 +80,7 @@ protected void summarizeRequest() {
             .set("max-height", "600px")
             .set("overflow-y", "auto");
 
-        Markdown markdown = new Markdown("");
+        Markdown markdown = new Markdown();
         contentWrapper.add(markdown);
 
         Dialog summaryDialog = new Dialog();
@@ -103,14 +103,13 @@ protected void summarizeRequest() {
             Disposable subscription = summaryService.getSummary(fileName.getValue())
                 .subscribe(
                     chunk -> ui.access(() -> {
-                        markdown.addMarkdown(chunk);
+                        markdown.setSource(chunk);
                     }),
                     error -> ui.access(() -> {
                         log.error("Error fetching summary", error);
                         showNotification("Error fetching summary: " + error.getMessage(), NotificationVariant.LUMO_ERROR);
                     }),
                     () -> ui.access(() -> {
-                        markdown.render();
                         showNotification("Summary completed", NotificationVariant.LUMO_SUCCESS);
                     })
                 );