Examples with RichTextEditor com.vaadin.flow.component.richtexteditor.RichTextEditor used on opensource projects

Example 1 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project flow-components by vaadin.

the class MainView method createRichTextEditorWithBinder.

private void createRichTextEditorWithBinder() {
    RichTextEditor rteWithBinder = new RichTextEditor();
    Div valuePanel = new Div();
    valuePanel.setId("binder-value-panel");
    Div infoPanel = new Div();
    Binder<Entry> binder = new Binder<>();
    // The object that will be edited
    Entry entryBeingEdited = new Entry();
    rteWithBinder.setValueChangeMode(ValueChangeMode.EAGER);
    // Create the action buttons
    Button save = new Button("Save");
    Button reset = new Button("Reset");
    Button getValueButton = new Button("Get value");
    getValueButton.setId("get-binder-rte-value");
    getValueButton.addClickListener(event -> {
        String value = rteWithBinder.getValue();
        valuePanel.setText(value);
    });
    // Button bar
    HorizontalLayout actions = new HorizontalLayout();
    actions.add(save, reset, getValueButton);
    save.getStyle().set("marginRight", "10px");
    SerializablePredicate<String> deltaValuePredicate = value -> !rteWithBinder.getValue().trim().isEmpty();
    Binding<Entry, String> deltaValueBinding = binder.forField(rteWithBinder).withValidator(deltaValuePredicate, "Delta value should contain something").bind(Entry::getDeltaValue, Entry::setDeltaValue);
    // Editor is a required field
    rteWithBinder.setRequiredIndicatorVisible(true);
    // Click listeners for the buttons
    save.addClickListener(event -> {
        if (binder.writeBeanIfValid(entryBeingEdited)) {
            infoPanel.setText("Saved bean values: " + entryBeingEdited);
        } else {
            BinderValidationStatus<Entry> validate = binder.validate();
            String errorText = validate.getFieldValidationStatuses().stream().filter(BindingValidationStatus::isError).map(BindingValidationStatus::getMessage).map(Optional::get).distinct().collect(Collectors.joining(", "));
            infoPanel.setText("There are errors: " + errorText);
        }
    });
    reset.addClickListener(event -> {
        // clear fields by setting null
        binder.readBean(null);
        infoPanel.setText("");
    });
    infoPanel.setId("binder-info");
    rteWithBinder.setId("binder-delta-value");
    save.setId("binder-save");
    reset.setId("binder-reset");
    add(rteWithBinder, actions, infoPanel, valuePanel);
}

Example 2 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project komunumo-server by komunumo.

the class PageDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<Page> binder) {
    final var parent = new Select<>(PageParent.values());
    final var pageUrl = new TextField("URL");
    final var title = new TextField("Title");
    final var content = new RichTextEditor();
    parent.setLabel("Parent");
    parent.setRequiredIndicatorVisible(true);
    parent.addValueChangeListener(changeEvent -> pageUrl.setPrefixComponent(new Span("%s/".formatted(URLUtil.createReadableUrl(changeEvent.getValue().getLiteral())))));
    pageUrl.setRequiredIndicatorVisible(true);
    pageUrl.setValueChangeMode(EAGER);
    title.setRequiredIndicatorVisible(true);
    title.setValueChangeMode(EAGER);
    formLayout.add(parent, pageUrl, title, new CustomLabel("Content"), content);
    binder.forField(parent).withValidator(Objects::nonNull, "Please select the parent navigation").bind(Page::getParent, Page::setParent);
    binder.forField(pageUrl).withValidator(new StringLengthValidator("Please enter the URL of the page (max. 255 chars)", 1, 255)).bind(Page::getPageUrl, Page::setPageUrl);
    binder.forField(title).withValidator(new StringLengthValidator("Please enter the title of the page (max. 255 chars)", 1, 255)).bind(Page::getTitle, Page::setTitle);
    binder.forField(content.asHtml()).withValidator(new StringLengthValidator("The content is too long (max. 8'000 chars)", 0, 8_000)).bind(Page::getContent, Page::setContent);
}

Example 3 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project komunumo-server by komunumo.

the class MailTemplateDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<MailTemplateRecord> binder) {
    final var id = new Select<>(mailTemplateIds.stream().map(MailTemplateId::name).toArray(String[]::new));
    id.setRequiredIndicatorVisible(true);
    id.setLabel("ID");
    formLayout.add(id);
    final var subject = new TextField("Subject");
    subject.setRequiredIndicatorVisible(true);
    subject.setValueChangeMode(EAGER);
    formLayout.add(subject);
    final var contentText = new TextArea();
    contentText.setRequiredIndicatorVisible(true);
    formLayout.add(new CustomLabel("Content as plain text"), contentText);
    final var contentHTML = new RichTextEditor();
    contentHTML.setRequiredIndicatorVisible(true);
    formLayout.add(new CustomLabel("Content as formatted HTML"), contentHTML);
    binder.forField(id).withValidator(Objects::nonNull, "Please select the ID").bind(MailTemplateRecord::getId, MailTemplateRecord::setId);
    binder.forField(subject).withValidator(new StringLengthValidator("Please enter the subject (max. 255 chars)", 1, 255)).bind(MailTemplateRecord::getSubject, MailTemplateRecord::setSubject);
    binder.forField(contentText).withValidator(new StringLengthValidator("Please enter the content as plain text (max. 8'000 chars)", 1, 8_000)).bind(MailTemplateRecord::getContentText, MailTemplateRecord::setContentText);
    binder.forField(contentHTML.asHtml()).withValidator(new StringLengthValidator("Please enter the content as formattet HTML (max. 8'000 chars)", 1, 8_000)).bind(MailTemplateRecord::getContentHtml, MailTemplateRecord::setContentHtml);
    afterOpen = () -> id.setReadOnly(id.getValue() != null);
}

Example 4 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project komunumo-server by komunumo.

the class SpeakerDialog method createForm.

@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<SpeakerRecord> binder) {
    final var firstName = new TextField("First name");
    final var lastName = new TextField("Last name");
    final var company = new TextField("Company");
    final var bio = new RichTextEditor();
    final var photo = new ImageUploadField("Photo");
    final var email = new EmailField("Email");
    final var twitter = new TextField("Twitter");
    final var linkedIn = new TextField("LinkedIn");
    final var website = new TextField("Website");
    final var address = new TextField("Address");
    final var zipCode = new TextField("Zip code");
    final var city = new TextField("City");
    final var state = new TextField("State");
    final var country = new TextField("Country");
    firstName.setRequiredIndicatorVisible(true);
    firstName.setValueChangeMode(EAGER);
    lastName.setRequiredIndicatorVisible(true);
    lastName.setValueChangeMode(EAGER);
    photo.setMaxPreviewSize("150px", "150px");
    email.addValueChangeListener(changeEvent -> {
        final var newEmail = changeEvent.getValue();
        final var photoValue = photo.getValue();
        if (!newEmail.isBlank() && (photoValue.isBlank() || photoValue.startsWith(GRAVATAR_URL))) {
            photo.setValue(GravatarUtil.getGravatarAddress(newEmail, 150));
        } else if (newEmail.isBlank() && photoValue.startsWith(GRAVATAR_URL)) {
            photo.setValue("");
        }
    });
    formLayout.add(firstName, lastName, company, new CustomLabel("Bio"), bio, photo, email, twitter, linkedIn, website, address, zipCode, city, state, country);
    binder.forField(firstName).withValidator(new StringLengthValidator("Please enter the first name of the speaker (max. 255 chars)", 1, 255)).bind(SpeakerRecord::getFirstName, SpeakerRecord::setFirstName);
    binder.forField(lastName).withValidator(new StringLengthValidator("Please enter the last name of the speaker (max. 255 chars)", 1, 255)).bind(SpeakerRecord::getLastName, SpeakerRecord::setLastName);
    binder.forField(company).withValidator(new StringLengthValidator("The company name is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getCompany, SpeakerRecord::setCompany);
    binder.forField(bio.asHtml()).withValidator(new StringLengthValidator("The bio is too long (max. 100'000 chars)", 0, 100_000)).bind(SpeakerRecord::getBio, SpeakerRecord::setBio);
    binder.forField(photo).withValidator(value -> value.isEmpty() || value.startsWith("data:") || value.startsWith("https://"), "The photo must be uploaded or the photo address must be secure (HTTPS)").withValidator(new StringLengthValidator("The photo is too big (max. 250 KB)", 0, 250_000)).bind(SpeakerRecord::getPhoto, SpeakerRecord::setPhoto);
    binder.forField(email).withValidator(new EmailValidator("Please enter a correct email address or leave this field empty", true)).withValidator(new StringLengthValidator("The email address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getEmail, SpeakerRecord::setEmail);
    binder.forField(twitter).withValidator(new StringLengthValidator("The twitter username is too long (max. 15 chars)", 0, 15)).bind(SpeakerRecord::getTwitter, SpeakerRecord::setTwitter);
    binder.forField(linkedIn).withValidator(value -> value.isEmpty() || value.startsWith("https://"), "The LinkedIn address must start with \"https://\"").withValidator(new StringLengthValidator("The LinkedIn address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getLinkedin, SpeakerRecord::setLinkedin);
    binder.forField(website).withValidator(value -> value.isEmpty() || value.startsWith("https://"), "The website address must start with \"https://\"").withValidator(new StringLengthValidator("The website address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getWebsite, SpeakerRecord::setWebsite);
    binder.forField(address).withValidator(new StringLengthValidator("The address is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getAddress, SpeakerRecord::setAddress);
    binder.forField(zipCode).withValidator(new StringLengthValidator("The zip code is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getZipCode, SpeakerRecord::setZipCode);
    binder.forField(city).withValidator(new StringLengthValidator("The city is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getCity, SpeakerRecord::setCity);
    binder.forField(state).withValidator(new StringLengthValidator("The state is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getState, SpeakerRecord::setState);
    binder.forField(country).withValidator(new StringLengthValidator("The country is too long (max. 255 chars)", 0, 255)).bind(SpeakerRecord::getCountry, SpeakerRecord::setCountry);
}

Example 5 with RichTextEditor

use of com.vaadin.flow.component.richtexteditor.RichTextEditor in project komunumo-server by komunumo.

the class EventDialog method createForm.

// just a lot of fields for the form
@SuppressWarnings("checkstyle:MethodLength")
@Override
public void createForm(@NotNull final FormLayout formLayout, @NotNull final Binder<Event> binder) {
    final var type = new Select<>(EventType.values());
    final var title = new TextField("Title");
    final var subtitle = new TextField("Subtitle");
    final var speaker = new MultiselectComboBox<EventSpeakerEntity>("Speaker");
    final var organizer = new MultiselectComboBox<Member>("Organizer");
    final var description = new RichTextEditor();
    final var keyword = new MultiselectComboBox<KeywordEntity>("Keyword");
    final var agenda = new RichTextEditor();
    final var level = new Select<>(EventLevel.values());
    final var language = new Select<>(EventLanguage.values());
    final var room = new TextField("Room");
    final var travelInstructions = new TextField("Travel instructions");
    final var location = new ComboBox<String>("Location");
    final var webinarUrl = new TextField("Webinar URL");
    final var youtTube = new TextField("YouTube");
    final var date = new DateTimePicker("Date & Time");
    final var duration = new TimePicker("Duration");
    final var eventUrl = new TextField("Event URL");
    final var attendeeLimit = new IntegerField("Attendee limit (0 = no limit)");
    final var membersOnly = new Checkbox("Members only");
    final var published = new Checkbox("Published");
    type.setLabel("Type");
    type.setRequiredIndicatorVisible(true);
    title.setRequiredIndicatorVisible(true);
    title.setValueChangeMode(EAGER);
    title.addValueChangeListener(changeEvent -> {
        if (eventUrl.getValue().equals(URLUtil.createReadableUrl(changeEvent.getOldValue()))) {
            eventUrl.setValue(URLUtil.createReadableUrl(changeEvent.getValue()));
        }
    });
    subtitle.setValueChangeMode(EAGER);
    speaker.setOrdered(true);
    speaker.setItemLabelGenerator(EventSpeakerEntity::fullName);
    speaker.setItems(databaseService.getAllEventSpeakers());
    organizer.setOrdered(true);
    organizer.setItemLabelGenerator(value -> String.format("%s %s", value.getFirstName(), value.getLastName()));
    organizer.setItems(databaseService.getAllAdmins());
    organizer.setRequiredIndicatorVisible(true);
    keyword.setOrdered(true);
    keyword.setItemLabelGenerator(KeywordEntity::keyword);
    keyword.setItems(databaseService.getAllKeywords());
    level.setLabel("Level");
    language.setLabel("Language");
    location.setItems(databaseService.getAllEventLocations());
    location.setAllowCustomValue(true);
    location.addValueChangeListener(changeEvent -> {
        final var value = changeEvent.getValue();
        final var isOnline = "Online".equalsIgnoreCase(value);
        webinarUrl.setEnabled(isOnline);
        webinarUrl.setRequiredIndicatorVisible(published.getValue() && isOnline);
        room.setRequiredIndicatorVisible(!isOnline);
        updateEventUrlPrefix(location, date, eventUrl);
        binder.validate();
    });
    room.setValueChangeMode(EAGER);
    travelInstructions.setValueChangeMode(EAGER);
    webinarUrl.setValueChangeMode(EAGER);
    date.setMin(LocalDateTime.now());
    date.addValueChangeListener(changeEvent -> updateEventUrlPrefix(location, date, eventUrl));
    duration.setStep(Duration.ofMinutes(15));
    duration.setMin(LocalTime.of(1, 0));
    duration.setMax(LocalTime.of(3, 0));
    eventUrl.setValueChangeMode(EAGER);
    updateEventUrlPrefix(location, date, eventUrl);
    attendeeLimit.setMin(0);
    attendeeLimit.setMax(500);
    attendeeLimit.setStep(10);
    attendeeLimit.setHasControls(true);
    published.addValueChangeListener(changeEvent -> {
        final var value = changeEvent.getValue();
        speaker.setRequiredIndicatorVisible(value);
        level.setRequiredIndicatorVisible(value);
        description.setRequiredIndicatorVisible(value);
        language.setRequiredIndicatorVisible(value);
        location.setRequiredIndicatorVisible(value);
        room.setRequiredIndicatorVisible(!"Online".equalsIgnoreCase(location.getValue()));
        date.setRequiredIndicatorVisible(value);
        duration.setRequiredIndicatorVisible(value);
        eventUrl.setRequiredIndicatorVisible(value);
        binder.validate();
    });
    formLayout.add(type, title, subtitle, speaker, organizer, level, new CustomLabel("Description"), description, keyword, new CustomLabel("Agenda"), agenda, language, location, room, travelInstructions, webinarUrl, youtTube, date, duration, eventUrl, attendeeLimit, membersOnly, published);
    binder.forField(type).withValidator(value -> !published.getValue() || value != null, "Please select a type").bind(Event::getType, Event::setType);
    binder.forField(title).withValidator(new StringLengthValidator("Please enter a title (max. 255 chars)", 1, 255)).bind(Event::getTitle, Event::setTitle);
    binder.forField(subtitle).withValidator(new StringLengthValidator("The subtitle is too long (max. 255 chars)", 0, 255)).bind(Event::getSubtitle, Event::setSubtitle);
    binder.forField(speaker).withValidator(value -> !published.getValue() || !value.isEmpty(), "Please select at least one speaker").bind(this::getSpeakers, this::setSpeakers);
    binder.forField(organizer).withValidator(value -> !value.isEmpty(), "Please select at least one organizer").bind(this::getOrganizer, this::setOrganizer);
    binder.forField(level).withValidator(value -> !published.getValue() || value != null, "Please select a level").bind(Event::getLevel, Event::setLevel);
    binder.forField(description.asHtml()).withValidator(value -> !published.getValue() || value != null && !value.isBlank(), "Please enter a description").bind(Event::getDescription, Event::setDescription);
    binder.forField(keyword).bind(this::getKeyword, this::setKeyword);
    binder.forField(agenda.asHtml()).bind(Event::getAgenda, Event::setAgenda);
    binder.forField(language).withValidator(value -> !published.getValue() || value != null, "Please select a language").bind(Event::getLanguage, Event::setLanguage);
    binder.forField(location).withValidator(value -> !published.getValue() || value != null, "Please select a location").bind(Event::getLocation, Event::setLocation);
    binder.forField(room).withValidator(value -> !published.getValue() || "Online".equalsIgnoreCase(location.getValue()) || !value.isBlank(), "Please enter a room").bind(Event::getRoom, Event::setRoom);
    binder.forField(travelInstructions).withValidator(value -> value.isBlank() || URLUtil.isValid(value), "Please enter a valid URL").bind(Event::getTravelInstructions, Event::setTravelInstructions);
    binder.forField(webinarUrl).withValidator(value -> !published.getValue() || !"Online".equalsIgnoreCase(location.getValue()) || URLUtil.isValid(value), "Please enter a valid URL").bind(Event::getWebinarUrl, Event::setWebinarUrl);
    binder.forField(youtTube).bind(Event::getYoutube, Event::setYoutube);
    binder.forField(date).withValidator(value -> isPastEvent(date) || !published.getValue() && (value == null || value.isAfter(LocalDateTime.now())) || value != null && value.isAfter(LocalDateTime.now()), "Please enter a date and time in the future").bind(Event::getDate, Event::setDate);
    binder.forField(duration).withValidator(value -> !published.getValue() || (value != null && value.isAfter(LocalTime.MIN) && value.isBefore(LocalTime.MAX)), "Please enter a duration").bind(Event::getDuration, Event::setDuration);
    // TODO check for duplicates
    binder.forField(eventUrl).withValidator(value -> !published.getValue() || value != null && !value.isBlank(), "Please enter a valid event URL").bind(Event::getEventUrl, Event::setEventUrl);
    binder.forField(attendeeLimit).bind(Event::getAttendeeLimit, Event::setAttendeeLimit);
    binder.forField(membersOnly).bind(Event::getMembersOnly, Event::setMembersOnly);
    binder.forField(published).bind(Event::getPublished, Event::setPublished);
    afterOpen = () -> {
        webinarUrl.setEnabled("Online".equalsIgnoreCase(location.getValue()));
        if (isPastEvent(date)) {
            binder.setReadOnly(true);
            binder.setValidatorsDisabled(true);
            youtTube.setReadOnly(false);
        }
    };
}