com.github.fluorumlabs.disconnect.vaadin.RichTextEditor Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of disconnect-vaadin Show documentation
Show all versions of disconnect-vaadin Show documentation
Vaadin components bindings for Disconnect Zero
The newest version!
package com.github.fluorumlabs.disconnect.vaadin;
import com.github.fluorumlabs.disconnect.core.annotations.WebComponent;
import com.github.fluorumlabs.disconnect.polymer.types.StringPropertyChangeEvent;
import com.github.fluorumlabs.disconnect.vaadin.elements.RichTextEditorElement;
import com.github.fluorumlabs.disconnect.vaadin.i18n.RichTextEditorI18n;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasElementMixin;
import com.github.fluorumlabs.disconnect.vaadin.mixins.HasThemableMixin;
import com.github.fluorumlabs.disconnect.vaadin.types.ThemeVariant;
import com.github.fluorumlabs.disconnect.zero.component.AbstractComponent;
import com.github.fluorumlabs.disconnect.zero.component.Component;
import com.github.fluorumlabs.disconnect.zero.component.HasComponents;
import com.github.fluorumlabs.disconnect.zero.component.HasStyle;
import com.github.fluorumlabs.disconnect.zero.observable.ObservableEvent;
import js.extras.JsEnum;
import javax.annotation.Nullable;
import javax.annotation.Untainted;
/**
* <vaadin-rich-text-editor> is a Web Component for rich text editing.
* It provides a set of toolbar controls to apply formatting on the content,
* which is stored and can be accessed as HTML5 or JSON string.
*
* <vaadin-rich-text-editor></vaadin-rich-text-editor>
*
* Vaadin Rich Text Editor focuses on the structure, not the styling of content.
* Therefore, the semantic HTML5 tags such as , and are used,
* and CSS usage is limited to most common cases, like horizontal text alignment.
*
* Styling
* The following state attributes are available for styling:
*
*
*
* Attribute Description Part name disabledSet to a disabled text editor :host readonlySet to a readonly text editor :host onSet to a toolbar button applied to the selected text toolbar-button
* The following shadow DOM parts are available for styling:
*
*
*
* Part name Description contentThe content wrapper toolbarThe toolbar wrapper toolbar-groupThe group for toolbar controls toolbar-group-historyThe group for histroy controls toolbar-group-emphasisThe group for emphasis controls toolbar-group-headingThe group for heading controls toolbar-group-glyph-transformationThe group for glyph transformation controls toolbar-group-group-listThe group for group list controls toolbar-group-alignmentThe group for alignment controls toolbar-group-rich-textThe group for rich text controls toolbar-group-blockThe group for preformatted block controls toolbar-group-formatThe group for format controls toolbar-buttonThe toolbar button (applies to all buttons) toolbar-button-undoThe "undo" button toolbar-button-redoThe "redo" button toolbar-button-boldThe "bold" button toolbar-button-italicThe "italic" button toolbar-button-underlineThe "underline" button toolbar-button-strikeThe "strike-through" button toolbar-button-h1The "header 1" button toolbar-button-h2The "header 2" button toolbar-button-h3The "header 3" button toolbar-button-subscriptThe "subscript" button toolbar-button-superscriptThe "superscript" button toolbar-button-list-orderedThe "ordered list" button toolbar-button-list-bulletThe "bullet list" button toolbar-button-align-leftThe "left align" button toolbar-button-align-centerThe "center align" button toolbar-button-align-rightThe "right align" button toolbar-button-imageThe "image" button toolbar-button-linkThe "link" button toolbar-button-blockquoteThe "blockquote" button toolbar-button-code-blockThe "code block" button toolbar-button-cleanThe "clean formatting" button
* See
* ThemableMixin – how to apply styles for shadow parts
*/
@WebComponent
public class RichTextEditor extends AbstractComponent
implements HasElementMixin,
HasThemableMixin,
HasStyle, HasComponents> {
public RichTextEditor() {
super(RichTextEditorElement.TAGNAME());
}
/**
* Value is a list of the operations which describe change to the document.
* Each of those operations describe the change at the current index.
* They can be an insert, delete or retain. The format is as follows:
*
* [
* { insert: 'Hello World' },
* { insert: '!', attributes: { bold: true }}
* ]
*
* See also https://github.com/quilljs/delta
* for detailed documentation.
*/
@Nullable
public String value() {
return getNode().getValue();
}
/**
* Value is a list of the operations which describe change to the document.
* Each of those operations describe the change at the current index.
* They can be an insert, delete or retain. The format is as follows:
*
* [
* { insert: 'Hello World' },
* { insert: '!', attributes: { bold: true }}
* ]
*
* See also https://github.com/quilljs/delta
* for detailed documentation.
*/
public RichTextEditor value(String value) {
getNode().setValue(value);
return this;
}
/**
* HTML representation of the rich text editor content.
*/
@Nullable
public String htmlValue() {
return getNode().getHtmlValue();
}
/**
* When true, the user can not modify, nor copy the editor content.
*/
public boolean disabled() {
return getNode().isDisabled();
}
/**
* When true, the user can not modify, nor copy the editor content.
*/
public RichTextEditor disabled(boolean disabled) {
getNode().setDisabled(disabled);
return this;
}
/**
* When true, the user can not modify the editor content, but can copy it.
*/
public boolean readonly() {
return getNode().isReadonly();
}
/**
* When true, the user can not modify the editor content, but can copy it.
*/
public RichTextEditor readonly(boolean readonly) {
getNode().setReadonly(readonly);
return this;
}
/**
* An object used to localize this component. The properties are used
* e.g. as the tooltips for the editor toolbar buttons.
*/
@Nullable
public RichTextEditorI18n i18n() {
return getNode().getI18n();
}
/**
* An object used to localize this component. The properties are used
* e.g. as the tooltips for the editor toolbar buttons.
*/
public RichTextEditor i18n(RichTextEditorI18n i18n) {
getNode().setI18n(i18n);
return this;
}
/**
* Sets content represented by HTML snippet into the editor.
* The snippet is interpreted by
* Quill's Clipboard matchers,
* which may not produce the exactly input HTML.
*
* NOTE: Improper handling of HTML can lead to cross site scripting (XSS) and failure to sanitize
* properly is both notoriously error-prone and a leading cause of web vulnerabilities.
* This method is aptly named to ensure the developer has taken the necessary precautions.
*/
public void dangerouslySetHtmlValue(@Untainted String htmlValue) {
getNode().dangerouslySetHtmlValue(htmlValue);
}
/**
* Fired when the value property changes.
*/
public ObservableEvent valueChangedEvent() {
return createEvent("value-changed");
}
/**
* Fired when the htmlValue property changes.
*/
public ObservableEvent htmlValueChangedEvent() {
return createEvent("html-value-changed");
}
public abstract static class Variant extends ThemeVariant {
public static final Variant NO_BORDER = JsEnum.of("no-border");
public static final Variant COMPACT = JsEnum.of("compact");
}
}