Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add API to set color options to RichTextEditor #6284

Merged
merged 6 commits into from
Aug 28, 2024
Merged

feat: add API to set color options to RichTextEditor #6284

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
311ca18
feat: add API to set color options to RichTextEditor
web-padawan May 10, 2024
30e1d58
docs: mention that colors should be in HEX format
web-padawan May 13, 2024
3631f69
chore: run formatter
web-padawan Aug 28, 2024
6377a17
refactor: return unmodifiable list, update JavaDoc
web-padawan Aug 28, 2024
0630602
Merge branch 'main' into feat/rte-color-options
web-padawan Aug 28, 2024
96bb524
Merge branch 'main' into feat/rte-color-options
web-padawan Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions ...xt-editor-flow/src/main/java/com/vaadin/flow/component/richtexteditor/RichTextEditor.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
package com.vaadin.flow.component.richtexteditor;

import java.io.Serializable;
import java.util.List;
import java.util.Objects;

import com.vaadin.flow.component.AbstractSinglePropertyField;
Expand All @@ -35,6 +36,7 @@
import com.vaadin.flow.internal.JsonSerializer;
import com.vaadin.flow.shared.Registration;

import elemental.json.JsonArray;
import elemental.json.JsonObject;

/**
Expand Down Expand Up @@ -268,6 +270,32 @@ private String getDeltaValue() {
return getElement().getProperty("value");
}

/**
* Gets the list of colors in HEX format used by the text color picker and
* background color picker controls of the text editor.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mention that this doesn't have a default value and returns null by default. Maybe also elaborate that in this case the web component shows a default palette.

Apart from that modifying the list returned by the method doesn't do anything. Let's return an unmodifyable list which would trigger a respective exception when trying to modify it, and mention in the JavaDoc that this returns an umnodifyable list. There are some similar use cases in the repo already (e.g. setting avatar items).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, updated.

*
* @since 24.5
* @return the list of colors options
*/
public List<String> getColorOptions() {
return JsonSerializer.toObjects(String.class,
(JsonArray) getElement().getPropertyRaw("colorOptions"));
}

/**
* Sets the list of colors in HEX format to use by the text color picker and
* background color picker controls of the text editor.
*
* @since 24.5
* @param colorOptions
* the list of colors to set, not null
*/
public void setColorOptions(List<String> colorOptions) {
Objects.requireNonNull(colorOptions, "Color options must not be null");
getElement().setPropertyJson("colorOptions",
JsonSerializer.toJson(colorOptions));
}

static String sanitize(String html) {
var settings = new org.jsoup.nodes.Document.OutputSettings();
settings.prettyPrint(false);
Expand Down
18 changes: 18 additions & 0 deletions ...rc/test/java/com/vaadin/flow/component/richtexteditor/RichTextEditorSanitizationTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,24 @@ public void sanitizeH3Tag_H3TagPersist() {
RichTextEditor.sanitize("<h3>Foo</h3>"));
}

// Style group sanitization

@Test
public void sanitizeStyleColor_StyleColorPersist() {
Assert.assertEquals(
"<p><span style=\"color: rgb(230, 0, 0);\">Foo</span></p>",
RichTextEditor.sanitize(
"<p><span style=\"color: rgb(230, 0, 0);\">Foo</span></p>"));
}

@Test
public void sanitizeStyleBackgroundColor_StyleBackgroundColorPersist() {
Assert.assertEquals(
"<p><span style=\"background-color: rgb(230, 0, 0);\">Foo</span></p>",
RichTextEditor.sanitize(
"<p><span style=\"background-color: rgb(230, 0, 0);\">Foo</span></p>"));
}

// Super - / Sub - scripts group sanitization

@Test
Expand Down
23 changes: 23 additions & 0 deletions ...ditor-flow/src/test/java/com/vaadin/flow/component/richtexteditor/RichTextEditorTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@

import static org.junit.Assert.assertEquals;

import java.util.List;

import org.junit.Assert;
import org.junit.Rule;
import org.junit.Test;
Expand All @@ -25,6 +27,8 @@
import com.vaadin.flow.server.VaadinService;
import com.vaadin.flow.server.VaadinSession;

import elemental.json.JsonArray;

/**
* Tests for the {@link RichTextEditor}.
*/
Expand Down Expand Up @@ -230,4 +234,23 @@ public void elementHasValue_wrapIntoField_propertyIsNotSetToInitialValue() {
RichTextEditor field = Component.from(element, RichTextEditor.class);
Assert.assertEquals("foo", field.getElement().getPropertyRaw("value"));
}

@Test
public void setColorOptions_propertyIsUpdated() {
RichTextEditor rte = new RichTextEditor();
rte.setColorOptions(
List.of("#000000", "#0066cc", "#008a00", "#e60000"));
JsonArray jsonArray = (JsonArray) rte.getElement()
.getPropertyRaw("colorOptions");
Assert.assertEquals(4, jsonArray.length());
}

@Test
public void setColorOptions_getColorOptions() {
RichTextEditor rte = new RichTextEditor();
rte.setColorOptions(
List.of("#000000", "#0066cc", "#008a00", "#e60000"));
List<String> options = rte.getColorOptions();
Assert.assertEquals(4, options.size());
}
}