Skip to content

Commit

Permalink
feat: initial implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
mlopezFC committed Oct 4, 2024
1 parent 8038ab8 commit 9afb6f7
Show file tree
Hide file tree
Showing 24 changed files with 931 additions and 149 deletions.
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug-report.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/feature-request.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
49 changes: 36 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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>
```
Expand All @@ -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

Expand All @@ -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

Expand Down
28 changes: 19 additions & 9 deletions pom.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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://[email protected]:/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://[email protected]:/FlowingCode/MarkdownEditor.git</developerConnection>
<tag>master</tag>
</scm>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -293,7 +300,7 @@
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-javadoc-plugin</artifactId>
<version>3.0.1</version>
<version>3.1.0</version>
<executions>
<execution>
<id>attach-javadocs</id>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}

}
Original file line number Diff line number Diff line change
@@ -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);
}

}
Loading

0 comments on commit 9afb6f7

Please sign in to comment.