From 3b8b72df427499185a6345ef397d633ffc009026 Mon Sep 17 00:00:00 2001 From: eschleb Date: Tue, 17 Dec 2024 17:01:20 +0100 Subject: [PATCH] Migrate ExtendedRichText to ckEditor5 --- custom-definitions/pom.xml | 18 +++ .../richtext/ExtendedCKEditor5TextField.java | 40 +++++ .../ExtendedCKEditor5TextFieldConfig.java | 81 ++++++++++ .../richtext/ExtendedRichTextDefinition.java | 130 +-------------- .../ExtendedRichTextDefinitionBuilder.java | 152 +++++------------- .../richtext/ExtendedRichTextFactory.java | 126 +++++++++------ .../custom/richtext/HeadingOption.java | 45 ++++++ ...extended-ckeditor5-text-field-connector.js | 62 +++++++ .../toolbarbuilder/RichTextToolbar.java | 8 +- .../toolbarbuilder/RichTextToolbarConfig.java | 2 - .../richtext/toolbarbuilder/ToolbarGroup.java | 44 +++++ .../AbstractToolbarGroupBuilder.java | 61 +++---- .../groupbuilder/BasicStylesGroupBuilder.java | 40 ----- .../groupbuilder/ClipboardGroupBuilder.java | 28 ---- .../groupbuilder/FontGroupBuilder.java | 114 +++++++++++++ .../groupbuilder/FormattingGroupBuilder.java | 40 +++++ .../groupbuilder/ImageGroupBuilder.java | 12 ++ .../groupbuilder/LinksGroupBuilder.java | 10 +- .../groupbuilder/ListGroupBuilder.java | 20 +++ .../groupbuilder/OptionsGroupBuilder.java | 12 -- .../groupbuilder/ParagraphGroupBuilder.java | 40 ----- .../groupbuilder/PositionGroupBuilder.java | 20 +++ .../groupbuilder/StylingGroupBuilder.java | 20 --- .../groupbuilder/TableGroupBuilder.java | 2 +- .../groupbuilder/ToolsGroupBuilder.java | 6 +- .../groupbuilder/UndoGroupBuilder.java | 4 +- ...ExtendedRichTextDefinitionBuilderTest.java | 41 +---- ...bstractRichTextFieldDefinitionBuilder.java | 18 +++ 28 files changed, 684 insertions(+), 512 deletions(-) create mode 100644 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextField.java create mode 100644 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextFieldConfig.java create mode 100644 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/HeadingOption.java create mode 100644 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/extended-ckeditor5-text-field-connector.js create mode 100644 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/ToolbarGroup.java delete mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/BasicStylesGroupBuilder.java delete mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/ClipboardGroupBuilder.java create mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/FontGroupBuilder.java create mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/FormattingGroupBuilder.java create mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/ImageGroupBuilder.java create mode 100644 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/ListGroupBuilder.java delete mode 100644 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/OptionsGroupBuilder.java delete mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/ParagraphGroupBuilder.java create mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/PositionGroupBuilder.java delete mode 100755 custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/toolbarbuilder/groupbuilder/StylingGroupBuilder.java diff --git a/custom-definitions/pom.xml b/custom-definitions/pom.xml index 539056f..2e19835 100644 --- a/custom-definitions/pom.xml +++ b/custom-definitions/pom.xml @@ -57,4 +57,22 @@ test + + + + + + src/main/resources + + **/* + + + + src/main/java + + **/*.js + + + + \ No newline at end of file diff --git a/custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextField.java b/custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextField.java new file mode 100644 index 0000000..d804e15 --- /dev/null +++ b/custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextField.java @@ -0,0 +1,40 @@ +package com.merkle.oss.magnolia.definition.custom.richtext; + +import info.magnolia.ui.vaadin.ckeditor.CKEditor5TextField; +import info.magnolia.ui.vaadin.ckeditor.CKEditor5TextFieldState; + +import com.vaadin.annotations.JavaScript; + +/** + * Server side component for the ExtendedCKEditor 5 JavaScript rich-text editor. + */ +@JavaScript({ + //a virtual path, which is redirected to an actual build specified in the microprofile. + //for developing set 'magnolia.ckeditor5.build' microprofile property. + "vaadin://ckeditor5.js", + "extended-ckeditor5-text-field-connector.js" +}) +public class ExtendedCKEditor5TextField extends CKEditor5TextField { + + @Override + protected State getState() { + return (State) super.getState(); + } + + @Override + protected State getState(final boolean markAsDirty) { + return (State) super.getState(markAsDirty); + } + + public void setConfig(final ExtendedCKEditor5TextFieldConfig config) { + getState().extendedConfig = config; + getState().config = config; + } + + /** + * Shared state for the {@link ExtendedCKEditor5TextField}. + */ + public static class State extends CKEditor5TextFieldState { + public ExtendedCKEditor5TextFieldConfig extendedConfig; + } +} diff --git a/custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextFieldConfig.java b/custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextFieldConfig.java new file mode 100644 index 0000000..6483168 --- /dev/null +++ b/custom-definitions/src/main/java/com/merkle/oss/magnolia/definition/custom/richtext/ExtendedCKEditor5TextFieldConfig.java @@ -0,0 +1,81 @@ +package com.merkle.oss.magnolia.definition.custom.richtext; + +import info.magnolia.ui.vaadin.ckeditor.CKEditor5TextFieldConfig; + +import java.util.List; +import java.util.Optional; +import java.util.stream.Collectors; +import java.util.stream.Stream; + +import com.merkle.oss.magnolia.definition.custom.richtext.toolbarbuilder.ToolbarGroup; +import com.merkle.oss.magnolia.definition.custom.richtext.toolbarbuilder.groupbuilder.FontGroupBuilder; + +public class ExtendedCKEditor5TextFieldConfig extends CKEditor5TextFieldConfig { + public final Heading heading; + + public ExtendedCKEditor5TextFieldConfig( + final String licenseKey, + final List toolbarGroups, + final List options + ) { + super(licenseKey); + this.toolbar = new ExtendedToolbar(toolbarGroups, true); + this.heading = new Heading(options); + getToolbarGroup(toolbarGroups, FontGroupBuilder.FontToolbarGroup.class).ifPresent(fontToolbarGroup -> { + this.fontFamily.options = fontToolbarGroup.getFonts(); + this.fontSize.options = fontToolbarGroup.getFontSizes(); + this.fontColor.colors = fontToolbarGroup.getFontColors(); + }); + } + + private Optional getToolbarGroup(final List toolbarGroups, final Class clazz) { + return toolbarGroups.stream() + .filter(clazz::isInstance) + .findFirst() + .map(clazz::cast); + } + + public static class ExtendedToolbar extends Toolbar { + public ExtendedToolbar(final List toolbarGroups, final boolean shouldNotGroupWhenFull) { + super.shouldNotGroupWhenFull = shouldNotGroupWhenFull; + super.items = toolbarGroups.stream().flatMap(group -> + Stream.concat( + group.getItems().stream(), + Stream.of("|") + ) + ).collect(Collectors.toList()); + } + } + + /** + * Represents a heading configuration. + */ + // See implementation here: + // https://github.com/ckeditor/ckeditor5/blob/v41.4.2/packages/ckeditor5-heading/src/utils.ts#L34 + public static class Heading { + public final List