feat: initial implementation

Author: mlopezFC

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,5 +1,5 @@
 name: Bug Report
-description: Please report issues related to TEMPLATE_ADDON here.
+description: Please report issues related to Markdown Editor add-on here.
 body:
   - type: textarea
     id: problem-description

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,5 +1,5 @@
 name: Feature Request
-description: Please add feature suggestions related to TEMPLATE_ADDON here.
+description: Please add feature suggestions related to Markdown Editor add-on here.
 body:
   - type: textarea
     id: feature-proposal

README.md

@@ -1,23 +1,26 @@
-[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/template-addon)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/template-addon.svg)](https://vaadin.com/directory/component/template-addon)
-[![Build Status](https://jenkins.flowingcode.com/job/template-addon/badge/icon)](https://jenkins.flowingcode.com/job/template-addon)
-[![Maven Central](https://img.shields.io/maven-central/v/com.flowingcode.vaadin.addons/template-addon)](https://mvnrepository.com/artifact/com.flowingcode.vaadin.addons/template-addon)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/markdown-editor-add-on)
+[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/markdown-editor-addon.svg)](https://vaadin.com/directory/component/markdown-editor-add-on)
+[![Build Status](https://jenkins.flowingcode.com/job/markdown-editor-addon/badge/icon)](https://jenkins.flowingcode.com/job/MarkdownEditor-addon)
+[![Maven Central](https://img.shields.io/maven-central/v/com.flowingcode.vaadin.addons/markdown-editor-addon)](https://mvnrepository.com/artifact/com.flowingcode.vaadin.addons/markdown-editor-addon)
+[![Javadoc](https://img.shields.io/badge/javadoc-00b4f0)](https://javadoc.flowingcode.com/artifact/com.flowingcode.vaadin.addons/markdown-editor-addon)
 
-# Template Add-on
+# Markdown Editor Add-on
 
-This is a template project for building new Vaadin 24 add-ons
+This is a wrapper around [the React Markdown Editor component](https://github.com/uiwjs/react-md-editor).
 
 ## Features
 
-* List the features of your add-on in here
+* Supports both visual editing of markdown and also just viewing markdown content
+* Support for dark and light themes
+* Built in support for sanitization
 
 ## Online demo
 
-[Online demo here](http://addonsv24.flowingcode.com/template)
+[Online demo here](http://addonsv24.flowingcode.com/markdown-editor)
 
 ## Download release
 
-[Available in Vaadin Directory](https://vaadin.com/directory/component/template-addon)
+[Available in Vaadin Directory](https://vaadin.com/directory/component/markdown-editor-add-on)
 
 ### Maven install
 
@@ -26,7 +29,7 @@ Add the following dependencies in your pom.xml file:
 ```xml
 <dependency>
    <groupId>com.flowingcode.vaadin.addons</groupId>
-   <artifactId>template-addon</artifactId>
+   <artifactId>markdown-editor-addon</artifactId>
    <version>X.Y.Z</version>
 </dependency>
 ```
@@ -43,7 +46,7 @@ To see the demo, navigate to http://localhost:8080/
 
 ## Release notes
 
-See [here](https://github.com/FlowingCode/TemplateAddon/releases)
+See [here](https://github.com/FlowingCode/MarkdownEditor/releases)
 
 ## Issue tracking
 
@@ -68,13 +71,33 @@ Then, follow these steps for creating a contribution:
 
 This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.
 
-TEMPLATE_ADDON is written by Flowing Code S.A.
+Markdown Editor Add-on is written by Flowing Code S.A.
 
 # Developer Guide
 
 ## Getting started
 
-Add your code samples in this section
+### Markdown Viewer
+
+To use the viewer, instantiate it and add it to a view like this:
+
+    MarkdownViewer mdv = new MarkdownViewer();
+    mdv.setSizeFull();
+    mdv.setDataColorMode(DataColorMode.LIGTH);
+    mdv.setContent("# h1 Heading");
+    add(mdv);
+    
+### Markdown Editor
+
+To use the editor, similar to the viewer, instantiate it and add it to a view like this:
+
+    MarkdownEditor mde = new MarkdownEditor();
+    mde.setSizeFull();
+    mde.setPlaceholder("Enter Markdown here");
+    mde.setMaxLength(500);
+    mde.setDataColorMode(DataColorMode.LIGTH);
+
+To obtain the edited value, call `getContent()`
 
 ## Special configuration when using Spring
 

pom.xml

@@ -5,10 +5,10 @@
     <modelVersion>4.0.0</modelVersion>
 
     <groupId>com.flowingcode.vaadin.addons</groupId>
-    <artifactId>template-addon</artifactId>
+    <artifactId>markdown-editor-addon</artifactId>
     <version>1.0.0-SNAPSHOT</version>
-    <name>Template Add-on</name>
-    <description>Template Add-on for Vaadin Flow</description>
+    <name>Markdown Editor Add-on</name>
+    <description>Markdown Editor for Vaadin Flow</description>
     <url>https://www.flowingcode.com/en/open-source/</url>
 
     <properties>
@@ -39,9 +39,9 @@
     </licenses>
 
     <scm>
-        <url>https://github.com/FlowingCode/AddonStarter24</url>
-        <connection>scm:git:git://github.com/FlowingCode/AddonStarter24.git</connection>
-        <developerConnection>scm:git:ssh://git@github.com:/FlowingCode/AddonStarter24.git</developerConnection>
+        <url>https://github.com/FlowingCode/MarkdownEditor</url>
+        <connection>scm:git:git://github.com/FlowingCode/MarkdownEditor.git</connection>
+        <developerConnection>scm:git:ssh://git@github.com:/FlowingCode/MarkdownEditor.git</developerConnection>
         <tag>master</tag>
     </scm>
 
@@ -126,6 +126,7 @@
             <groupId>com.flowingcode.vaadin.addons.demo</groupId>
             <artifactId>commons-demo</artifactId>
             <version>${flowingcode.commons.demo.version}</version>
+            <scope>test</scope>
         </dependency>
         <dependency>
             <groupId>org.slf4j</groupId>
@@ -226,8 +227,14 @@
                     <licenseName>apache_v2</licenseName>
                     <addJavaLicenseAfterPackage>false</addJavaLicenseAfterPackage>
                     <excludes>
-                        <exclude>**/dev-bundle/**</exclude>
+                        <exclude>**/main/dev-bundle/**</exclude>
+                        <exclude>**/main/bundles/**</exclude>
+                        <exclude>**/main/frontend/**</exclude>
+                        <exclude>**/main/frontend/**</exclude>
                     </excludes>
+                    <extraExtensions>
+                        <tsx>java</tsx>
+                    </extraExtensions>
                 </configuration>
             </plugin>
             <plugin>
@@ -293,7 +300,7 @@
                     <plugin>
                         <groupId>org.apache.maven.plugins</groupId>
                         <artifactId>maven-javadoc-plugin</artifactId>
-                        <version>3.0.1</version>
+                        <version>3.10.0</version>
                         <executions>
                             <execution>
                                 <id>attach-javadocs</id>
@@ -306,7 +313,10 @@
                         <configuration>
                             <quiet>true</quiet>
                             <doclint>none</doclint>
-                            <additionalparam>-Xdoclint:none</additionalparam>
+                            <failOnWarnings>true</failOnWarnings>
+                            <links>
+                                <link>https://javadoc.io/doc/com.vaadin/vaadin-platform-javadoc/${vaadin.version}</link>								
+                            </links>
                         </configuration>
                     </plugin>
                     <plugin>

src/main/java/com/flowingcode/vaadin/addons/markdown/BaseMarkdownComponent.java

@@ -0,0 +1,96 @@
+/*-
+ * #%L
+ * Markdown Editor Add-on
+ * %%
+ * Copyright (C) 2024 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.markdown;
+
+import com.vaadin.flow.component.HasSize;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.react.ReactAdapterComponent;
+
+/**
+ * Base class for Markdown based Components.
+ */
+@SuppressWarnings("serial")
+@CssImport("./styles/markdown-editor-styles.css")
+@NpmPackage(value = "mermaid", version = "11.2.1")
+@NpmPackage(value = "@uiw/react-md-editor", version = "4.0.4")
+@NpmPackage(value = "dompurify", version = "3.1.6")
+public class BaseMarkdownComponent extends ReactAdapterComponent implements HasSize {
+  
+  /**
+   * Defines the color schemes for the Markdown component.
+   *
+   * The color mode can be set using the {@link #setDataColorMode(DataColorMode)} method.
+   *
+   * <ul>
+   *   <li>{@link #DARK}: Dark color scheme.
+   *   <li>{@link #LIGTH}: Light color scheme.
+   *   <li>{@link #AUTO}: Automatically detects the color scheme based on the user's system settings.
+   * </ul>
+   */
+  public enum DataColorMode {DARK,LIGTH,AUTO};
+  
+  /**
+   * Base constructor that receives the content of the markdown component.
+   * 
+   * @param content content to be used in the Markdown component
+   */
+  public BaseMarkdownComponent(String content) {
+    setContent(content);
+  }
+  
+  /**
+   * Sets the content of the Markdown component.
+   * 
+   * @return the content of the Markdown component
+   */
+  public String getContent() {
+    return getState("content", String.class);
+  }
+
+  /**
+   * Gets the content of the Markdown component.
+   * 
+   * @param content retrieved from the state of the component
+   */
+  public void setContent(String content) {
+    setState("content", content);
+  }
+  
+  /**
+   * Sets the color mode of the Markdown component.
+   * 
+   * @param mode the color mode of the component
+   */
+  public void setDataColorMode(DataColorMode mode) {
+    switch (mode) {
+      case DARK:
+        getElement().setAttribute("data-color-mode", "dark");
+        break;
+      case LIGTH:
+        getElement().setAttribute("data-color-mode", "light");
+        break;
+      case AUTO:
+        getElement().removeAttribute("data-color-mode");
+        break;
+    }
+  }
+  
+}

src/main/java/com/flowingcode/vaadin/addons/markdown/MarkdownEditor.java

@@ -0,0 +1,88 @@
+/*-
+ * #%L
+ * Markdown Editor Add-on
+ * %%
+ * Copyright (C) 2024 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.markdown;
+
+import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+
+/**
+ * Markdown component that allows editing the contents.
+ */
+@SuppressWarnings("serial")
+@NpmPackage(value = "rehype-sanitize", version = "6.0.0")
+@JsModule("./markdown-editor.tsx")
+@Tag("markdown-editor")
+public class MarkdownEditor extends BaseMarkdownComponent {
+  
+  /**
+   * Constructor with empty content.
+   */
+  public MarkdownEditor() {
+    super(null);
+  }
+
+  /**
+   * Constructor with default content.
+   * 
+   * @param content default content for the Markdown editor
+   */
+  public MarkdownEditor(String content) {
+    super(content);
+  }
+  
+  /**
+   * Returns the placeholder text for the Markdown editor.
+   * 
+   * @return the placeholder text
+   */
+  public String getPlaceholder() {
+    return getState("placeholder", String.class);
+  }
+  
+  /**
+   * Sets the placeholder text for the Markdown editor.
+   * 
+   * @param placeholder the placeholder text
+   */
+  public void setPlaceholder(String placeholder) {
+    setState("placeholder", placeholder);
+  }
+  
+  /**
+   * Returns the configured maximum character count for the Markdown editor.
+   * 
+   * @return the configured maximum character count
+   */
+  public int getMaxLength() {
+    return getState("maxLength", Integer.class);
+  }
+  
+  /**
+   * Sets the maximum character count for the Markdown editor.
+   * 
+   * @param maxlength the maximum character count
+   */
+  public void setMaxLength(int maxlength) {
+    setState("maxLength", maxlength);
+  }
+
+}