feat: initial implementation

Author: mlopezFC

README.md

@@ -1,23 +1,25 @@
-[![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)
 
-# 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 +28,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 +45,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,7 +70,7 @@ 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 is written by Flowing Code S.A.
 
 # Developer Guide
 

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>
 

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

@@ -0,0 +1,83 @@
+/*-
+ * #%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.react.ReactAdapterComponent;
+
+/**
+ * Base class for Markdown based Components
+ */
+@SuppressWarnings("serial")
+@CssImport("./styles/markdown-editor-styles.css")
+public class BaseMarkdownComponent extends ReactAdapterComponent implements HasSize {
+  
+  /**
+   * Colors schemes for the Markdown component
+   */
+  public enum DATA_COLOR_MODE {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
+   */
+  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(DATA_COLOR_MODE 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,89 @@
+/*-
+ * #%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 = "@uiw/react-md-editor", version = "4.0.4")
+@NpmPackage(value = "rehype-sanitize", version = "6.0.0")
+@JsModule("./markdown-editor.tsx")
+@Tag("markdown-editor")
+public class MarkdownEditor extends BaseMarkdownComponent {
+  
+  /**
+   * Default constructor with empty content
+   */
+  public MarkdownEditor() {
+    super("");
+  }
+
+  /**
+   * 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 length for the Markdown editor.
+   * 
+   * @return the configured maximum length
+   */
+  public int getMaxLength() {
+    return getState("maxLength", Integer.class);
+  }
+  
+  /**
+   * Sets the maximum length for the Markdown editor.
+   * 
+   * @param maxlength the maximum length
+   */
+  public void setMaxLength(int maxlength) {
+    setState("maxLength", maxlength);
+  }
+
+}

src/main/java/com/flowingcode/vaadin/addons/template/TemplateAddon.java renamed to src/main/java/com/flowingcode/vaadin/addons/markdown/MarkdownViewer.java

@@ -1,15 +1,15 @@
 /*-
  * #%L
- * Template Add-on
+ * 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.
@@ -18,15 +18,33 @@
  * #L%
  */
 
-package com.flowingcode.vaadin.addons.template;
+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;
-import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.react.ReactAdapterComponent;
 
 @SuppressWarnings("serial")
-@NpmPackage(value = "@polymer/paper-input", version = "3.2.1")
-@JsModule("@polymer/paper-input/paper-input.js")
-@Tag("paper-input")
-public class TemplateAddon extends Div {}
+@NpmPackage(value = "@uiw/react-md-editor", version = "4.0.4")
+@JsModule("./markdown-viewer.tsx")
+@Tag("markdown-viewer")
+public class MarkdownViewer extends BaseMarkdownComponent {
+
+  /**
+   * Default constructor with empty content
+   */
+  public MarkdownViewer() {
+    super("");
+  }
+  
+  /**
+   * Constructor that receives the default content
+   * 
+   * @param string
+   */
+  public MarkdownViewer(String content) {
+    super(content);
+  }
+
+}

src/main/resources/META-INF/frontend/styles/markdown-editor-styles.css

@@ -0,0 +1,37 @@
+/*-
+ * #%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%
+ */
+.w-md-editor-text {
+	height:100%;
+}
+.w-md-editor-text textarea {
+	height:100%;
+}
+
+.w-md-editor {
+	height: calc(100% - 3px) !important;
+    width: calc(100% - 2px) !important;
+    top: 1px;
+    left: 1px;
+}
+
+.wmde-markdown {
+	overflow: auto;
+	height: 100%;
+}

src/main/resources/META-INF/frontend/styles/static_addon_styles

@@ -0,0 +1,30 @@
+import {type ReactElement} from 'react';
+import MDEditor from '@uiw/react-md-editor/nohighlight';
+import {ReactAdapterElement, type RenderHooks} from "Frontend/generated/flow/ReactAdapter";
+import React from 'react';
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import rehypeSanitize from "rehype-sanitize";
+
+class MarkdownEditorElement extends ReactAdapterElement {
+
+    protected override render(hooks: RenderHooks): ReactElement | null {
+      const [content, setContent] = hooks.useState<string>("content"); 
+      const [placeholder] = hooks.useState<string>("placeholder");
+      const [maxLength] = hooks.useState<number>("maxLength");
+      
+      return <MDEditor visibleDragbar={false} 
+      					value={content} 
+      					onChange={setContent} 
+				        textareaProps={{
+				          placeholder: placeholder,
+				          maxLength: maxLength
+				        }}
+      					previewOptions={{
+					          rehypePlugins: [[rehypeSanitize]],
+					        }}
+      					/>;
+    }
+}
+  
+customElements.define("markdown-editor",MarkdownEditorElement);