From df4cab4b5c6dc08389e3f9f6e794b9bcaf17ba0c Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Mon, 23 Aug 2021 21:29:26 +0200
Subject: [PATCH] Work on the text editor.

---
 .../contenttypes/MvcArticleTextBodyStep.java  |    3 +-
 .../components/librecms/cmsEditor.xhtml       | 1684 +++++++++--------
 .../librecms/cmsEditorVariants.xhtml          |  558 ++++++
 .../contenttypes/article/article-text.xhtml   |    2 +-
 .../article-text/available-languages.xhtml    |  146 +-
 .../article/article-text/edit.xhtml           |   22 +-
 .../typescript/content-sections/cms-editor.ts |  327 +---
 7 files changed, 1528 insertions(+), 1214 deletions(-)
 create mode 100644 ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditorVariants.xhtml

diff --git a/ccm-cms/src/main/java/org/librecms/ui/contenttypes/MvcArticleTextBodyStep.java b/ccm-cms/src/main/java/org/librecms/ui/contenttypes/MvcArticleTextBodyStep.java
index 894626ce8..3583f779a 100644
--- a/ccm-cms/src/main/java/org/librecms/ui/contenttypes/MvcArticleTextBodyStep.java
+++ b/ccm-cms/src/main/java/org/librecms/ui/contenttypes/MvcArticleTextBodyStep.java
@@ -129,7 +129,7 @@ public class MvcArticleTextBodyStep extends AbstractMvcAuthoringStep {
         }
 
         if (itemPermissionChecker.canEditItem(getArticle())) {
-            return "org/librecms/ui/contenttypes/article/article-text.xhtml";
+            return "org/librecms/ui/contenttypes/article/article-text/available-languages.xhtml";
 //            return "org/librecms/ui/contenttypes/article/article-text/available-languages.xhtml";
         } else {
             return documentUi.showAccessDenied(
@@ -165,7 +165,6 @@ public class MvcArticleTextBodyStep extends AbstractMvcAuthoringStep {
 //    public String getSelectedLocale() {
 //        return selectedLocale;
 //    }
-
     /**
      * Adds a localized main text.
      *
diff --git a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
index e6ae0df9e..b6e8664b0 100644
--- a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
+++ b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
@@ -5,274 +5,286 @@
     xmlns:cc="http://xmlns.jcp.org/jsf/composite"
     xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
     xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
->
+    >
     <cc:interface
         shortDescription="A editor component for HTML texts using the TipTap editor. To use this component you have also to include the cms-editor.js file into the page."
-    >
-        <cc:attribute
-            name="addMethod"
+        >
+        <!--        <cc:attribute
+                    name="addMethod"
+                    required="true"
+                    shortDescription="URL of teh endpoint for adding localized values."
+                    type="String"
+                />
+                <cc:attribute
+                    name="addButtonLabel"
+                    default="Add"
+                    required="false"
+                    shortDescription="Label for the add button"
+                    type="String"
+                />
+                <cc:attribute
+                    name="addDialogCancelLabel"
+                    default="#{CmsAdminMessages['cancel_button.label']}"
+                    required="false"
+                    shortDescription="Label for the cancel and close buttons."
+                    type="String"
+                />
+                <cc:attribute
+                    name="addDialogLocaleSelectHelp"
+                    default="The locale of the value of add"
+                    required="false"
+                    shortDescription="Help text for the locale select field"
+                    type="String"
+                />
+                <cc:attribute
+                    name="addDialogLocaleSelectLabel"
+                    default="#{CmsAdminMessages['locale_select.label']}"
+                    required="false"
+                    shortDescription="Label for the locale select field"
+                    type="String"
+                />
+                <cc:attribute
+                    name="addDialogSubmitLabel"
+                    default="#{CmsAdminMessages['locale_add.label']}"
+                    required="false"
+                    shortDescription="Label for the submit button"
+                    type="String"
+                />
+                <cc:attribute
+                    name="addDialogTitle"
+                    default="#{CmsAdminMessages['locale_add.dialog.title']}"
+                    required="false"
+                    shortDescription="Title for the dialog."
+                    type="String"
+                />-->
+        <cc:attribute 
+            name="backUrl"
             required="true"
-            shortDescription="URL of teh endpoint for adding localized values."
+            shortDescription="The back URL."
             type="String"
-        />
-        <cc:attribute
-            name="addButtonLabel"
-            default="Add"
-            required="false"
-            shortDescription="Label for the add button"
-            type="String"
-        />
-        <cc:attribute
-            name="addDialogCancelLabel"
-            default="#{CmsAdminMessages['cancel_button.label']}"
-            required="false"
-            shortDescription="Label for the cancel and close buttons."
-            type="String"
-        />
-        <cc:attribute
-            name="addDialogLocaleSelectHelp"
-            default="The locale of the value of add"
-            required="false"
-            shortDescription="Help text for the locale select field"
-            type="String"
-        />
-        <cc:attribute
-            name="addDialogLocaleSelectLabel"
-            default="#{CmsAdminMessages['locale_select.label']}"
-            required="false"
-            shortDescription="Label for the locale select field"
-            type="String"
-        />
-        <cc:attribute
-            name="addDialogSubmitLabel"
-            default="#{CmsAdminMessages['locale_add.label']}"
-            required="false"
-            shortDescription="Label for the submit button"
-            type="String"
-        />
-        <cc:attribute
-            name="addDialogTitle"
-            default="#{CmsAdminMessages['locale_add.dialog.title']}"
-            required="false"
-            shortDescription="Title for the dialog."
-            type="String"
-        />
+            />
         <cc:attribute
             name="canEdit"
             default="true"
             required="false"
             shortDescription="Can the current user edit the text?"
             type="boolean"
-        />
-        <cc:attribute
-            name="editButtonLabel"
-            default="#{CmsAdminMessages['edit_button.label']}"
-            required="false"
-            shortDescription="Label for the edit button"
-            type="String"
-        />
+            />
+        <!--        <cc:attribute
+                    name="editButtonLabel"
+                    default="#{CmsAdminMessages['edit_button.label']}"
+                    required="false"
+                    shortDescription="Label for the edit button"
+                    type="String"
+                />-->
         <cc:attribute
             name="editDialogCancelLabel"
             default="#{CmsAdminMessages['cancel_button.label']}"
             required="false"
             shortDescription="Label for the cancel and close button of the edit dialog"
             type="String"
-        />
+            />
         <cc:attribute
             name="editDialogSubmitLabel"
             default="#{CmsAdminMessages['save_button.label']}"
             required="false"
             shortDescription="Label for the submit button of the edit dialog"
             type="String"
-        />
+            />
         <cc:attribute
             name="editDialogValueHelp"
             default="Value to update"
             required="false"
             shortDescription="Help text for the value field"
             type="String"
-        />
+            />
         <cc:attribute
             name="editDialogValueLabel"
             default="Value"
             required="false"
             shortDescription="Label for the value field"
             type="String"
-        />
+            />
         <cc:attribute
             name="editDialogTitle"
             default="#{CmsAdminMessages['text.edit.dialog.title']}"
             required="false"
             shortDescription="Title for the edit dialog"
             type="String"
-        />
+            />
         <cc:attribute
             name="editMethod"
             required="true"
             shortDescription="URL of the endpoint for editing/updating a value. The value of the locale to update is added after the provided URL, eg. /de for updating the german value."
             type="String"
-        />
-        <cc:attribute
-            name="hasUnusedLocales"
-            required="true"
-            shortDescription="Are there unused locales? This will usually be an expression pointing to some method. The result must resolve to boolean."
-            type="boolean"
-        />
+            />
+        <!--        <cc:attribute
+                    name="hasUnusedLocales"
+                    required="true"
+                    shortDescription="Are there unused locales? This will usually be an expression pointing to some method. The result must resolve to boolean."
+                    type="boolean"
+                />-->
         <cc:attribute
             name="headingLevel"
             default="2"
             required="false"
             shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component."
             type="int"
-        />
+            />
         <cc:attribute
             name="editorId"
             required="true"
             shortDescription="ID for the editor. Also used as prefix to generate IDs for some subcomponents"
             type="String"
-        />
-        <cc:attribute
-            name="emptyText"
-            default="#{text.editor.no_localized_values}"
-            required="false"
-            shortDescription="Text shown if the localized has no values yet."
-            type="String"
-        />
+            />
+        <!--        <cc:attribute
+                    name="emptyText"
+                    default="#{text.editor.no_localized_values}"
+                    required="false"
+                    shortDescription="Text shown if the localized has no values yet."
+                    type="String"
+                />-->
         <cc:attribute
             name="messageSaveFailed"
             default="Failed to save."
             required="false"
             type="String"
-        />
+            />
         <cc:attribute
             name="messageSaveSuccessful"
             default="Saved sucessfully."
             required="false"
             type="String"
-        />
+            />
         <cc:attribute
             name="messageVariantLoadFailed"
             default="Failed to load variant."
             required="false"
             type="String"
-        />
+            />
         <cc:attribute
             name="mode"
             default="full"
             shortDescription="The editor mode. Use 'full' to enable all options including adding images etc. Use 'textonly' for a minimal version that only supports text editing, but does not allow insertation of images etc."
             required="false"
             type="String"
-        />
+            />
         <cc:attribute
             name="objectIdentifier"
             required="true"
             shortDescription="Identifier of the object to which the localized string belongs"
             type="String"
-        />
-        <cc:attribute
-            name="removeButtonLabel"
-            default="Remove"
-            required="false"
-            shortDescription="Label for the remove button"
-            type="String"
-        />
-        <cc:attribute
-            name="removeDialogCancelLabel"
-            default="Cancel"
-            required="false"
-            shortDescription="Label for the cancel and close buttons of the remove dialog"
-            type="String"
-        />
-        <cc:attribute
-            name="removeDialogSubmitLabel"
-            default="Remove localized value"
-            required="false"
-            shortDescription="Label for the submit button of the remove dialog (removes the localized value)"
-            type="String"
-        />
-        <cc:attribute
-            name="removeDialogText"
-            default="Are you sure to remove the following localized value?"
-            required="false"
-            shortDescription="Text for the remove dialog"
-            type="String"
-        />
-        <cc:attribute
-            name="removeDialogTitle"
-            default="Remove localized value"
-            required="false"
-            shortDescription="The title of the remove dialog"
-            type="String"
-        />
-        <cc:attribute
-            name="removeMethod"
+            />
+        <cc:attribute 
+            name="selectedLocale"
             required="true"
-            shortDescription="URL of the endpoint for remvoving a value. The locale of the value to remove is added to the end of the URL. Eg. /de for removing the value for the locale de."
+            shortDescription="The selected locale."
             type="String"
-        />
-        <cc:attribute
-            name="tableActionsHeading"
-            default="Actions"
-            required="false"
-            shortDescription="Heading for the action columns"
-            type="String"
-        />
-        <cc:attribute
-            name="tableLocaleHeading"
-            default="Locale"
-            required="false"
-            shortDescription="Heading for the locale column"
-            type="String"
-        />
-        <cc:attribute
-            name="tableWordCountHeading"
-            default="Words"
-            required="false"
-            shortDescription="Heading for the word count column"
-            type="String"
-        />
+            />
+        <!--        <cc:attribute
+                    name="removeButtonLabel"
+                    default="Remove"
+                    required="false"
+                    shortDescription="Label for the remove button"
+                    type="String"
+                />
+                <cc:attribute
+                    name="removeDialogCancelLabel"
+                    default="Cancel"
+                    required="false"
+                    shortDescription="Label for the cancel and close buttons of the remove dialog"
+                    type="String"
+                />
+                <cc:attribute
+                    name="removeDialogSubmitLabel"
+                    default="Remove localized value"
+                    required="false"
+                    shortDescription="Label for the submit button of the remove dialog (removes the localized value)"
+                    type="String"
+                />
+                <cc:attribute
+                    name="removeDialogText"
+                    default="Are you sure to remove the following localized value?"
+                    required="false"
+                    shortDescription="Text for the remove dialog"
+                    type="String"
+                />
+                <cc:attribute
+                    name="removeDialogTitle"
+                    default="Remove localized value"
+                    required="false"
+                    shortDescription="The title of the remove dialog"
+                    type="String"
+                />
+                <cc:attribute
+                    name="removeMethod"
+                    required="true"
+                    shortDescription="URL of the endpoint for remvoving a value. The locale of the value to remove is added to the end of the URL. Eg. /de for removing the value for the locale de."
+                    type="String"
+                />
+                <cc:attribute
+                    name="tableActionsHeading"
+                    default="Actions"
+                    required="false"
+                    shortDescription="Heading for the action columns"
+                    type="String"
+                />
+                <cc:attribute
+                    name="tableLocaleHeading"
+                    default="Locale"
+                    required="false"
+                    shortDescription="Heading for the locale column"
+                    type="String"
+                />
+                <cc:attribute
+                    name="tableWordCountHeading"
+                    default="Words"
+                    required="false"
+                    shortDescription="Heading for the word count column"
+                    type="String"
+                />-->
         <cc:attribute
             name="title"
             required="true"
             shortDescription="Title/Heading of the editor widget"
             type="String"
-        />
-        <cc:attribute
-            name="unusedLocales"
-            required="true"
-            shortDescription="A collection of the unused locales of the edited localized string"
-            type="java.util.Collection"
-        />
-        <cc:attribute
-            name="variants"
-            required="true"
-            shortDescription="Info about the available variants. Must be a List of CmsEditorLocaleVariantRow objects."
-            type="java.util.List"
-        />
+            />
+        <!--        <cc:attribute
+                    name="unusedLocales"
+                    required="true"
+                    shortDescription="A collection of the unused locales of the edited localized string"
+                    type="java.util.Collection"
+                />
+                <cc:attribute
+                    name="variants"
+                    required="true"
+                    shortDescription="Info about the available variants. Must be a List of CmsEditorLocaleVariantRow objects."
+                    type="java.util.List"
+                />-->
         <cc:attribute
             name="variantUrl"
             required="true"
             shortDescription="URL of the endpoint for retrieving a variant. The locale of the variant to retrieve is appended as last token."
             type="String"
-        />
-        <cc:attribute name="viewButtonLabel" default="View" type="String" />
-        <cc:attribute name="viewDialogTitle" default="View" type="String" />
-        <cc:attribute
-            name="viewDialogEditButtonLabel"
-            default="Edit"
-            type="String"
-        />
-        <cc:attribute
-            name="viewDialogCloseButtonLabel"
-            default="Close"
-            type="String"
-        />
-        <cc:attribute
-            name="wordCountUrl"
-            required="true"
-            shortDescription="URL of the endpoint for retrieving the wordcount of a variant. The locale of the variant to retrieve is appended as last token."
-            type="String"
-        />
+            />
+        <!--        <cc:attribute name="viewButtonLabel" default="View" type="String" />
+                <cc:attribute name="viewDialogTitle" default="View" type="String" />
+                <cc:attribute
+                    name="viewDialogEditButtonLabel"
+                    default="Edit"
+                    type="String"
+                />
+                <cc:attribute
+                    name="viewDialogCloseButtonLabel"
+                    default="Close"
+                    type="String"
+                />
+                <cc:attribute
+                    name="wordCountUrl"
+                    required="true"
+                    shortDescription="URL of the endpoint for retrieving the wordcount of a variant. The locale of the variant to retrieve is appended as last token."
+                    type="String"
+                />-->
     </cc:interface>
     <cc:implementation>
         <div class="cms-editor" id="#{cc.attrs.editorId}">
@@ -316,7 +328,7 @@
                     </div>
                 </template>
             </div>
-            <c:if test="#{cc.attrs.hasUnusedLocales}">
+<!--            <c:if test="#{cc.attrs.hasUnusedLocales}">
                 <div class="mb-2">
                     <div class="text-right">
                         <button
@@ -351,678 +363,680 @@
                                                 class="modal-title"
                                                 id="#{cc.attrs.editorId}-dialog-title"
                                             >
-                                                #{cc.attrs.addDialogTitle}
-                                            </h2>
-                                        </c:when>
-                                        <c:when
-                                            test="#{cc.attrs.headingLevel == 2}"
-                                        >
-                                            <h3
-                                                class="modal-title"
-                                                id="#{cc.attrs.editorId}-dialog-title"
-                                            >
-                                                #{cc.attrs.addDialogTitle}
-                                            </h3>
-                                        </c:when>
-                                        <c:when
-                                            test="#{cc.attrs.headingLevel == 3}"
-                                        >
-                                            <h4
-                                                class="modal-title"
-                                                id="#{cc.attrs.editorId}-dialog-title"
-                                            >
-                                                #{cc.attrs.addDialogTitle}
-                                            </h4>
-                                        </c:when>
-                                        <c:when
-                                            test="#{cc.attrs.headingLevel == 4}"
-                                        >
-                                            <h5
-                                                class="modal-title"
-                                                id="#{cc.attrs.editorId}-dialog-title"
-                                            >
-                                                #{cc.attrs.addDialogTitle}
-                                            </h5>
-                                        </c:when>
-                                        <c:when
-                                            test="#{cc.attrs.headingLevel == 5}"
-                                        >
-                                            <h6
-                                                class="modal-title"
-                                                id="#{cc.attrs.editorId}-dialog-title"
-                                            >
-                                                #{cc.attrs.addDialogTitle}
-                                            </h6>
-                                        </c:when>
-                                        <c:otherwise>
-                                            <div>
-                                                #{cc.attrs.addDialogTitle}
-                                            </div>
-                                        </c:otherwise>
-                                    </c:choose>
-                                    <button
-                                        aria-label="#{cc.attrs.addDialogCancelLabel}"
-                                        class="close"
-                                        data-dismiss="modal"
-                                        type="button"
-                                    >
-                                        <span aria-hidden="true">
-                                            <bootstrap:svgIcon icon="x" />
-                                        </span>
-                                    </button>
-                                </div>
-                                <div class="modal-body">
-                                    <div class="form-group">
-                                        <label
-                                            for="#{cc.attrs.editorId}-form-locale-select"
-                                        >
-                                            #{cc.attrs.addDialogLocaleSelectLabel}
-                                        </label>
-                                        <select
-                                            aria-describedby="#{cc.attrs.editorId}-form-locale-select-help"
-                                            id="#{cc.attrs.editorId}-form-locale-select"
-                                            name="locale"
-                                            required="true"
-                                        >
-                                            <c:forEach
-                                                items="#{cc.attrs.unusedLocales}"
-                                                var="locale"
-                                            >
-                                                <option value="#{locale}">
-                                                    #{locale}
-                                                </option>
-                                            </c:forEach>
-                                        </select>
-                                        <small
-                                            class="form-text text-muted"
-                                            id="#{cc.attrs.editorId}-form-locale-select-help"
-                                        >
-                                            #{cc.attrs.addDialogLocaleSelectHelp}
-                                        </small>
-                                    </div>
-                                </div>
-                                <div class="modal-footer">
-                                    <button
-                                        class="btn btn-secondary"
-                                        data-dismiss="modal"
-                                        type="button"
-                                    >
-                                        #{cc.attrs.addDialogCancelLabel}
-                                    </button>
-                                    <button
-                                        type="submit"
-                                        class="btn btn-primary"
-                                    >
-                                        #{cc.attrs.addDialogSubmitLabel}
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </c:if>
+            #{cc.attrs.addDialogTitle}
+        </h2>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 2}"
+    >
+        <h3
+            class="modal-title"
+            id="#{cc.attrs.editorId}-dialog-title"
+        >
+            #{cc.attrs.addDialogTitle}
+        </h3>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 3}"
+    >
+        <h4
+            class="modal-title"
+            id="#{cc.attrs.editorId}-dialog-title"
+        >
+            #{cc.attrs.addDialogTitle}
+        </h4>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 4}"
+    >
+        <h5
+            class="modal-title"
+            id="#{cc.attrs.editorId}-dialog-title"
+        >
+            #{cc.attrs.addDialogTitle}
+        </h5>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 5}"
+    >
+        <h6
+            class="modal-title"
+            id="#{cc.attrs.editorId}-dialog-title"
+        >
+            #{cc.attrs.addDialogTitle}
+        </h6>
+    </c:when>
+    <c:otherwise>
+        <div>
+            #{cc.attrs.addDialogTitle}
+        </div>
+    </c:otherwise>
+</c:choose>
+<button
+    aria-label="#{cc.attrs.addDialogCancelLabel}"
+    class="close"
+    data-dismiss="modal"
+    type="button"
+>
+    <span aria-hidden="true">
+        <bootstrap:svgIcon icon="x" />
+    </span>
+</button>
+</div>
+<div class="modal-body">
+<div class="form-group">
+    <label
+        for="#{cc.attrs.editorId}-form-locale-select"
+    >
+            #{cc.attrs.addDialogLocaleSelectLabel}
+        </label>
+        <select
+            aria-describedby="#{cc.attrs.editorId}-form-locale-select-help"
+            id="#{cc.attrs.editorId}-form-locale-select"
+            name="locale"
+            required="true"
+        >
+            <c:forEach
+                items="#{cc.attrs.unusedLocales}"
+                var="locale"
+            >
+                <option value="#{locale}">
+            #{locale}
+        </option>
+    </c:forEach>
+</select>
+<small
+    class="form-text text-muted"
+    id="#{cc.attrs.editorId}-form-locale-select-help"
+>
+            #{cc.attrs.addDialogLocaleSelectHelp}
+        </small>
+    </div>
+</div>
+<div class="modal-footer">
+    <button
+        class="btn btn-secondary"
+        data-dismiss="modal"
+        type="button"
+    >
+            #{cc.attrs.addDialogCancelLabel}
+        </button>
+        <button
+            type="submit"
+            class="btn btn-primary"
+        >
+            #{cc.attrs.addDialogSubmitLabel}
+        </button>
+    </div>
+</form>
+</div>
+</div>
+</div>
+</c:if>
+<c:choose>
+<c:when test="#{cc.attrs.values.isEmpty()}">
+<p>#{cc.attrs.emptyText}</p>
+</c:when>
+<c:otherwise>
+<table class="cms-editor-variants table table-hover">
+<thead class="thead-light">
+<tr>
+    <th scope="col">
+            #{cc.attrs.tableLocaleHeading}
+        </th>
+        <th scope="col">
+            #{cc.attrs.tableWordCountHeading}
+        </th>
+        <th scope="col">
+            #{cc.attrs.tableActionsHeading}
+        </th>
+    </tr>
+</thead>
+<tbody>
+    <c:forEach
+        items="#{cc.attrs.variants}"
+        var="variant"
+    >
+        <tr id="variant-#{variant.locale}">
+            <td>#{variant.locale}</td>
+            <td>
+                <span class="wordcount"
+                    >#{variant.wordCount}</span
+                >
+            #{CmsAdminMessages['cms_editor.variants.wordcount']}
+        </td>
+        <td>
+            <button
+                class="
+                    btn btn-primary
+                    cms-editor-view-button
+                "
+                data-view-dialog="#{cc.attrs.editorId}-view-dialog"
+                data-variant-url="#{cc.attrs.variantUrl}/#{variant.locale}"
+                type="button"
+            >
+                <bootstrap:svgIcon icon="eye" />
+                <span class="sr-only">
+            #{cc.attrs.viewButtonLabel}
+        </span>
+    </button>
+    <c:if test="#{cc.attrs.canEdit}">
+        <button
+            class="
+                btn btn-primary
+                cms-editor-edit-button
+            "
+            data-edit-dialog="#{cc.attrs.editorId}-edit-dialog"
+            data-locale="#{variant.locale}"
+            data-variant-url="#{cc.attrs.variantUrl}/#{variant.locale}"
+            data-save-url="#{cc.attrs.editMethod}/#{variant.locale}"
+            data-wordcount-url="#{cc.attrs.wordCountUrl}/#{variant.locale}"
+            type="button"
+        >
+            <bootstrap:svgIcon icon="pen" />
+            <span class="sr-only">
+            #{cc.attrs.editButtonLabel}
+        </span>
+    </button>
+    <button
+        class="btn btn-danger"
+        data-target="##{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
+        data-toggle="modal"
+        type="button"
+    >
+        <bootstrap:svgIcon
+            icon="x-circle"
+        />
+        <span class="sr-only">
+            #{cc.attrs.removeButtonLabel}
+        </span>
+    </button>
+    <div
+        aria-describedby="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog-title"
+        aria-hidden="true"
+        class="modal fade"
+        data-backdrop="static"
+        id="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
+        tabindex="-1"
+    >
+        <div class="modal-dialog">
+            <form
+                action="#{cc.attrs.removeMethod}/#{variant.locale}"
+                class="modal-content"
+                method="post"
+            >
+                <div
+                    class="modal-header"
+                >
+                    <c:choose>
+                        <c:when
+                            test="#{cc.attrs.headingLevel == 1}"
+                        >
+                            <h2>
+            #{cc.attrs.removeDialogTitle}
+        </h2>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 2}"
+    >
+        <h3>
+            #{cc.attrs.removeDialogTitle}
+        </h3>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 3}"
+    >
+        <h4>
+            #{cc.attrs.removeDialogTitle}
+        </h4>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 4}"
+    >
+        <h5>
+            #{cc.attrs.removeDialogTitle}
+        </h5>
+    </c:when>
+    <c:when
+        test="#{cc.attrs.headingLevel == 5}"
+    >
+        <h6>
+            #{cc.attrs.removeDialogTitle}
+        </h6>
+    </c:when>
+    <c:otherwise>
+        <div>
+            #{cc.attrs.removeDialogTitle}
+        </div>
+    </c:otherwise>
+</c:choose>
+<button
+    aria-label="#{cc.attrs.removeDialogCancelLabel}"
+    class="close"
+    data-dismiss="modal"
+    type="button"
+>
+    <span
+        aria-hidden="true"
+        >&times;</span
+    >
+</button>
+</div>
+<div class="modal-body">
+<p>
+            #{cc.attrs.removeDialogText}
+        </p>
+        <pre>
+            #{variant.locale}</pre
+                                                                        >
+                                                                        <input
+                                                                            name="confirmed"
+                                                                            type="hidden"
+                                                                            value="true"
+                                                                        />
+                                                                    </div>
+                                                                    <div
+                                                                        class="modal-footer"
+                                                                    >
+                                                                        <button
+                                                                            class="
+                                                                                btn
+                                                                                btn-secondary
+                                                                            "
+                                                                            data-dismiss="modal"
+                                                                            type="button"
+                                                                        >
+            #{cc.attrs.removeDialogCancelLabel}
+        </button>
+        <button
+            type="submit"
+            class="
+                btn
+                btn-danger
+            "
+        >
+            #{cc.attrs.removeDialogSubmitLabel}
+        </button>
+    </div>
+</form>
+</div>
+</div>
+</c:if>
+</td>
+</tr>
+</c:forEach>
+</tbody>
+</table>
+</c:otherwise>
+</c:choose>
+</div>
+<div
+aria-describedby="#{cc.attrs.editorId}-view-dialog-title"
+aria-hidden="true"
+class="modal fade"
+data-backdrop="static"
+id="#{cc.attrs.editorId}-view-dialog"
+tabindex="-1"
+>
+<div class="modal-dialog modal-xl modal-dialog-scrollable">
+<div class="modal-content">
+<div class="modal-header">
+<c:choose>
+<c:when test="#{cc.attrs.headingLevel == 1}">
+<h2 id="#{cc.attrs.editorId}-view-dialog-title">
+            #{cc.attrs.viewDialogTitle}
+        </h2>
+    </c:when>
+    <c:when test="#{cc.attrs.headingLevel == 2}">
+        <h3 id="#{cc.attrs.editorId}-view-dialog-title">
+            #{cc.attrs.viewDialogTitle}
+        </h3>
+    </c:when>
+    <c:when test="#{cc.attrs.headingLevel == 3}">
+        <h4 id="#{cc.attrs.editorId}-view-dialog-title">
+            #{cc.attrs.viewDialogTitle}
+        </h4>
+    </c:when>
+    <c:when test="#{cc.attrs.headingLevel == 4}">
+        <h5 id="#{cc.attrs.editorId}-view-dialog-title">
+            #{cc.attrs.viewDialogTitle}
+        </h5>
+    </c:when>
+    <c:when test="#{cc.attrs.headingLevel == 5}">
+        <h6 id="#{cc.attrs.editorId}-view-dialog-title">
+            #{cc.attrs.viewDialogTitle}
+        </h6>
+    </c:when>
+    <c:otherwise>
+        <div
+            id="#{cc.attrs.editorId}-view-dialog-title"
+        >
+            #{cc.attrs.viewDialogTitle}
+        </div>
+    </c:otherwise>
+</c:choose>
+<button
+    aria-label="#{cc.attrs.viewDialogCancelLabel}"
+    class="close"
+    data-dismiss="modal"
+    type="button"
+>
+    <bootstrap:svgIcon icon="x" />
+</button>
+</div>
+<div class="modal-body"></div>
+<div class="modal-footer">
+<button
+    class="btn btn-secondary"
+    data-dismiss="modal"
+    type="button"
+>
+            #{cc.attrs.viewDialogCloseButtonLabel}
+        </button>
+    </div>
+</div>
+</div>
+</div>
+<div
+aria-describedby="#{cc.attrs.editorId}-edit-dialog-title"
+aria-hidden="true"
+class="modal fade"
+data-backdrop="static"
+id="#{cc.attrs.editorId}-edit-dialog"
+tabindex="-1"
+>
+<div class="modal-dialog modal-xl modal-dialog-scrollable">
+<div class="modal-content">
+    <div class="modal-header">-->
             <c:choose>
-                <c:when test="#{cc.attrs.values.isEmpty()}">
-                    <p>#{cc.attrs.emptyText}</p>
+                <c:when test="#{cc.attrs.headingLevel == 1}">
+                    <h2 id="#{cc.attrs.editorId}-edit-dialog-title">
+                        #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
+                    </h2>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 2}">
+                    <h3 id="#{cc.attrs.editorId}-edit-dialog-title">
+                        #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
+                    </h3>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 3}">
+                    <h4 id="#{cc.attrs.editorId}-edit-dialog-title">
+                        #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
+                    </h4>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 4}">
+                    <h5 id="#{cc.attrs.editorId}-edit-dialog-title">
+                        #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
+                    </h5>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 5}">
+                    <h6 id="#{cc.attrs.editorId}-edit-dialog-title">
+                        #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
+                    </h6>
                 </c:when>
                 <c:otherwise>
-                    <table class="cms-editor-variants table table-hover">
-                        <thead class="thead-light">
-                            <tr>
-                                <th scope="col">
-                                    #{cc.attrs.tableLocaleHeading}
-                                </th>
-                                <th scope="col">
-                                    #{cc.attrs.tableWordCountHeading}
-                                </th>
-                                <th scope="col">
-                                    #{cc.attrs.tableActionsHeading}
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <c:forEach
-                                items="#{cc.attrs.variants}"
-                                var="variant"
-                            >
-                                <tr id="variant-#{variant.locale}">
-                                    <td>#{variant.locale}</td>
-                                    <td>
-                                        <span class="wordcount"
-                                            >#{variant.wordCount}</span
-                                        >
-                                        #{CmsAdminMessages['cms_editor.variants.wordcount']}
-                                    </td>
-                                    <td>
-                                        <button
-                                            class="
-                                                btn btn-primary
-                                                cms-editor-view-button
-                                            "
-                                            data-view-dialog="#{cc.attrs.editorId}-view-dialog"
-                                            data-variant-url="#{cc.attrs.variantUrl}/#{variant.locale}"
-                                            type="button"
-                                        >
-                                            <bootstrap:svgIcon icon="eye" />
-                                            <span class="sr-only">
-                                                #{cc.attrs.viewButtonLabel}
-                                            </span>
-                                        </button>
-                                        <c:if test="#{cc.attrs.canEdit}">
-                                            <button
-                                                class="
-                                                    btn btn-primary
-                                                    cms-editor-edit-button
-                                                "
-                                                data-edit-dialog="#{cc.attrs.editorId}-edit-dialog"
-                                                data-locale="#{variant.locale}"
-                                                data-variant-url="#{cc.attrs.variantUrl}/#{variant.locale}"
-                                                data-save-url="#{cc.attrs.editMethod}/#{variant.locale}"
-                                                data-wordcount-url="#{cc.attrs.wordCountUrl}/#{variant.locale}"
-                                                type="button"
-                                            >
-                                                <bootstrap:svgIcon icon="pen" />
-                                                <span class="sr-only">
-                                                    #{cc.attrs.editButtonLabel}
-                                                </span>
-                                            </button>
-                                            <button
-                                                class="btn btn-danger"
-                                                data-target="##{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
-                                                data-toggle="modal"
-                                                type="button"
-                                            >
-                                                <bootstrap:svgIcon
-                                                    icon="x-circle"
-                                                />
-                                                <span class="sr-only">
-                                                    #{cc.attrs.removeButtonLabel}
-                                                </span>
-                                            </button>
-                                            <div
-                                                aria-describedby="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog-title"
-                                                aria-hidden="true"
-                                                class="modal fade"
-                                                data-backdrop="static"
-                                                id="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
-                                                tabindex="-1"
-                                            >
-                                                <div class="modal-dialog">
-                                                    <form
-                                                        action="#{cc.attrs.removeMethod}/#{variant.locale}"
-                                                        class="modal-content"
-                                                        method="post"
-                                                    >
-                                                        <div
-                                                            class="modal-header"
-                                                        >
-                                                            <c:choose>
-                                                                <c:when
-                                                                    test="#{cc.attrs.headingLevel == 1}"
-                                                                >
-                                                                    <h2>
-                                                                        #{cc.attrs.removeDialogTitle}
-                                                                    </h2>
-                                                                </c:when>
-                                                                <c:when
-                                                                    test="#{cc.attrs.headingLevel == 2}"
-                                                                >
-                                                                    <h3>
-                                                                        #{cc.attrs.removeDialogTitle}
-                                                                    </h3>
-                                                                </c:when>
-                                                                <c:when
-                                                                    test="#{cc.attrs.headingLevel == 3}"
-                                                                >
-                                                                    <h4>
-                                                                        #{cc.attrs.removeDialogTitle}
-                                                                    </h4>
-                                                                </c:when>
-                                                                <c:when
-                                                                    test="#{cc.attrs.headingLevel == 4}"
-                                                                >
-                                                                    <h5>
-                                                                        #{cc.attrs.removeDialogTitle}
-                                                                    </h5>
-                                                                </c:when>
-                                                                <c:when
-                                                                    test="#{cc.attrs.headingLevel == 5}"
-                                                                >
-                                                                    <h6>
-                                                                        #{cc.attrs.removeDialogTitle}
-                                                                    </h6>
-                                                                </c:when>
-                                                                <c:otherwise>
-                                                                    <div>
-                                                                        #{cc.attrs.removeDialogTitle}
-                                                                    </div>
-                                                                </c:otherwise>
-                                                            </c:choose>
-                                                            <button
-                                                                aria-label="#{cc.attrs.removeDialogCancelLabel}"
-                                                                class="close"
-                                                                data-dismiss="modal"
-                                                                type="button"
-                                                            >
-                                                                <span
-                                                                    aria-hidden="true"
-                                                                    >&times;</span
-                                                                >
-                                                            </button>
-                                                        </div>
-                                                        <div class="modal-body">
-                                                            <p>
-                                                                #{cc.attrs.removeDialogText}
-                                                            </p>
-                                                            <pre>
-#{variant.locale}</pre
-                                                            >
-                                                            <input
-                                                                name="confirmed"
-                                                                type="hidden"
-                                                                value="true"
-                                                            />
-                                                        </div>
-                                                        <div
-                                                            class="modal-footer"
-                                                        >
-                                                            <button
-                                                                class="
-                                                                    btn
-                                                                    btn-secondary
-                                                                "
-                                                                data-dismiss="modal"
-                                                                type="button"
-                                                            >
-                                                                #{cc.attrs.removeDialogCancelLabel}
-                                                            </button>
-                                                            <button
-                                                                type="submit"
-                                                                class="
-                                                                    btn
-                                                                    btn-danger
-                                                                "
-                                                            >
-                                                                #{cc.attrs.removeDialogSubmitLabel}
-                                                            </button>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                            </div>
-                                        </c:if>
-                                    </td>
-                                </tr>
-                            </c:forEach>
-                        </tbody>
-                    </table>
+                    <div
+                        id="#{cc.attrs.editorId}-edit-dialog-title"
+                        >
+                        #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
+                    </div>
                 </c:otherwise>
             </c:choose>
-        </div>
-        <div
-            aria-describedby="#{cc.attrs.editorId}-view-dialog-title"
-            aria-hidden="true"
-            class="modal fade"
-            data-backdrop="static"
-            id="#{cc.attrs.editorId}-view-dialog"
-            tabindex="-1"
-        >
-            <div class="modal-dialog modal-xl modal-dialog-scrollable">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <c:choose>
-                            <c:when test="#{cc.attrs.headingLevel == 1}">
-                                <h2 id="#{cc.attrs.editorId}-view-dialog-title">
-                                    #{cc.attrs.viewDialogTitle}
-                                </h2>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 2}">
-                                <h3 id="#{cc.attrs.editorId}-view-dialog-title">
-                                    #{cc.attrs.viewDialogTitle}
-                                </h3>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 3}">
-                                <h4 id="#{cc.attrs.editorId}-view-dialog-title">
-                                    #{cc.attrs.viewDialogTitle}
-                                </h4>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 4}">
-                                <h5 id="#{cc.attrs.editorId}-view-dialog-title">
-                                    #{cc.attrs.viewDialogTitle}
-                                </h5>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 5}">
-                                <h6 id="#{cc.attrs.editorId}-view-dialog-title">
-                                    #{cc.attrs.viewDialogTitle}
-                                </h6>
-                            </c:when>
-                            <c:otherwise>
-                                <div
-                                    id="#{cc.attrs.editorId}-view-dialog-title"
-                                >
-                                    #{cc.attrs.viewDialogTitle}
-                                </div>
-                            </c:otherwise>
-                        </c:choose>
-                        <button
-                            aria-label="#{cc.attrs.viewDialogCancelLabel}"
-                            class="close"
-                            data-dismiss="modal"
-                            type="button"
-                        >
-                            <bootstrap:svgIcon icon="x" />
-                        </button>
-                    </div>
-                    <div class="modal-body"></div>
-                    <div class="modal-footer">
-                        <button
-                            class="btn btn-secondary"
-                            data-dismiss="modal"
-                            type="button"
-                        >
-                            #{cc.attrs.viewDialogCloseButtonLabel}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div
-            aria-describedby="#{cc.attrs.editorId}-edit-dialog-title"
-            aria-hidden="true"
-            class="modal fade"
-            data-backdrop="static"
-            id="#{cc.attrs.editorId}-edit-dialog"
-            tabindex="-1"
-        >
-            <div class="modal-dialog modal-xl modal-dialog-scrollable">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <c:choose>
-                            <c:when test="#{cc.attrs.headingLevel == 1}">
-                                <h2 id="#{cc.attrs.editorId}-edit-dialog-title">
-                                    #{cc.attrs.editDialogTitle}
-                                </h2>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 2}">
-                                <h3 id="#{cc.attrs.editorId}-edit-dialog-title">
-                                    #{cc.attrs.editDialogTitle}
-                                </h3>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 3}">
-                                <h4 id="#{cc.attrs.editorId}-edit-dialog-title">
-                                    #{cc.attrs.editDialogTitle}
-                                </h4>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 4}">
-                                <h5 id="#{cc.attrs.editorId}-edit-dialog-title">
-                                    #{cc.attrs.editDialogTitle}
-                                </h5>
-                            </c:when>
-                            <c:when test="#{cc.attrs.headingLevel == 5}">
-                                <h6 id="#{cc.attrs.editorId}-edit-dialog-title">
-                                    #{cc.attrs.editDialogTitle}
-                                </h6>
-                            </c:when>
-                            <c:otherwise>
-                                <div
-                                    id="#{cc.attrs.editorId}-edit-dialog-title"
-                                >
-                                    #{cc.attrs.editDialogTitle}
-                                </div>
-                            </c:otherwise>
-                        </c:choose>
-                        <button
-                            aria-label="#{cc.attrs.editDialogCancelLabel}"
-                            class="close"
-                            type="button"
-                        >
-                            <bootstrap:svgIcon icon="x" />
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        <div class="cms-tiptap-editor-buttons d-flex mb-1">
-                            <div class="px-2 cms-tiptap-editor-textformatting">
-                                <button
-                                    class="btn btn-outline-dark tiptap-emph"
-                                    title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="type-italic" />
-                                    <!-- <span class="sr-only">
-                                        #{CmsAdminMessages['cms_editor.buttons.emph']}
-                                    </span> -->
-                                </button>
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptap-strong-emph
-                                    "
-                                    title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="type-bold" />
-                                    <!-- <span class="sr-only">
-                                        #{CmsAdminMessages['cms_editor.buttons.strong_emph']}
-                                    </span> -->
-                                </button>
-                                <button
-                                    class="btn btn-outline-dark tiptap-code"
-                                    title="#{CmsAdminMessages['cms_editor.buttons.code']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="code" />
-                                    <!-- <span class="sr-only">
-                                        #{CmsAdminMessages['cms_editor.buttons.code']}
-                                    </span> -->
-                                </button>
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptap-strikethrough
-                                    "
-                                    title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon
-                                        icon="type-strikethrough"
-                                    />
-                                    <!-- <span class="sr-only">
-                                        #{CmsAdminMessages['cms_editor.buttons.strikethrough']}
-                                    </span> -->
-                                </button>
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptap-subscript
-                                    "
-                                    title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
-                                    type="button"
-                                >
-                                    <span aria-hidden="true"
-                                        >x<sub>n</sub></span
-                                    >
-                                </button>
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptap-superscript
-                                    "
-                                    title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
-                                    type="button"
-                                >
-                                    <span aria-hidden="true"
-                                        >x<sup>n</sup></span
-                                    >
-                                </button>
-                            </div>
-                            <div class="px-2 cms-tiptap-editor-headings">
-                                <ui:repeat begin="1" end="6" var="level">
-                                    <button
-                                        class="
-                                            btn btn-outline-dark
-                                            tiptap-h#{level}
-                                        "
-                                        title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
+            <!--                        <button
+                                        aria-label="#{cc.attrs.editDialogCancelLabel}"
+                                        class="close"
                                         type="button"
                                     >
-                                        <span aria-hidden="true"
-                                            >H#{level}</span
-                                        >
-                                    </button>
-                                </ui:repeat>
-                                <!-- <button class="btn btn-outline-dark tiptap-h2"
-                                        title="#{CmsAdminMessages['cms_editor.buttons.h2']}"
-                                        type="button">
-                                    <bootstrap:svgIcon icon="type-h2" />
-                                </button> -->
-                            </div>
-                            <div class="px-2 cms-tiptap-editor-paragraphs">
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptap-paragraph
-                                    "
-                                    title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="type" />
-                                </button>
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptap-blockquote
-                                    "
-                                    title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="blockquote-left" />
-                                </button>
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptap-codeblock
-                                    "
-                                    title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="code-square" />
-                                </button>
-                            </div>
-                            <div class="px-2 cms-tiptap-editor-lists">
-                                <button
-                                    class="btn btn-outline-dark tiptap-ul"
-                                    title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="list-ul" />
-                                </button>
-                                <button
-                                    class="btn btn-outline-dark tiptap-ol"
-                                    title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="list-ol" />
-                                </button>
-                            </div>
-                            <div class="px-2 cms-tiptap-editor-table">
-                                <button
-                                    class="
-                                        btn btn-outline-dark
-                                        tiptab-insert-table
-                                    "
-                                    data-target="#insert-table-dialog"
-                                    data-toggle="modal"
-                                    title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
-                                    type="button"
-                                >
-                                    <bootstrap:svgIcon icon="table" />
-                                </button>
-                                <div
-                                    aria-hidden="true"
-                                    aria-labelledby="insert-table-dialog-title"
-                                    class="modal fade cms-editor-insert-table-dialog"
-                                    id="insert-table-dialog"
-                                    tabindex="-1"
-                                >
-                                    <div class="modal-dialog">
-                                        <form class="modal-content">
-                                            <div class="modal-header">
-                                                <h4 class="modal-title"
-                                                    id="insert-table-dialog-title">
-                                                    #{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
-                                                </h4>
-                                                <button
-                                                    aria-label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}"
-                                                    class="close"
-                                                    data-dismiss="modal"
-                                                    type="button"
-                                                >
-                                                    <bootstrap:svgIcon
-                                                        icon="x"
-                                                    />
-                                                </button>
-                                            </div>
-                                            <div class="modal-body">
-                                                <bootstrap:formGroupNumber
-                                                    help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.help']}"
-                                                    inputId="rows"
-                                                    label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
-                                                    name="rows"
-                                                    />
-                                                <bootstrap:formGroupNumber
-                                                    help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
-                                                    inputId="cols"
-                                                    label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
-                                                    name="cols"
-                                                    />
-                                                <bootstrap:formCheck
-                                                    checked="true"
-                                                    inputId="headerRow"
-                                                    label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
-                                                    name="headerRow"
-                                                    value="true"
-                                                    />
-                                            </div>
-                                            <div class="modal-footer">
-                                                <button
-                                                    class="
-                                                        btn btn-warning
-                                                        cms-editor-cancel-button
-                                                    "
-                                                    data-dismiss="modal"
-                                                    type="button"
-                                                >
-                                                    #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
-                                                </button>
-                                                <button
-                                                    class="btn btn-success"
-                                                    type="submit"
-                                                >
-                                                    #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
-                                                </button>
-                                            </div>
-                                        </form>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cms-tiptap-editor border"></div>
-                    </div>
-                    <div class="modal-footer">
-                        <button
-                            class="btn btn-warning cms-editor-cancel-button"
-                            type="button"
+                                        <bootstrap:svgIcon icon="x" />
+                                    </button>-->
+        </div>
+        <!--<div class="modal-body">-->
+        <div class="cms-tiptap-editor-buttons d-flex mb-1">
+            <div class="px-2 cms-tiptap-editor-textformatting">
+                <button
+                    class="btn btn-outline-dark tiptap-emph"
+                    title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="type-italic" />
+                    <!-- <span class="sr-only">
+                    #{CmsAdminMessages['cms_editor.buttons.emph']}
+                </span> -->
+                </button>
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptap-strong-emph
+                    "
+                    title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="type-bold" />
+                    <!-- <span class="sr-only">
+                    #{CmsAdminMessages['cms_editor.buttons.strong_emph']}
+                </span> -->
+                </button>
+                <button
+                    class="btn btn-outline-dark tiptap-code"
+                    title="#{CmsAdminMessages['cms_editor.buttons.code']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="code" />
+                    <!-- <span class="sr-only">
+                    #{CmsAdminMessages['cms_editor.buttons.code']}
+                </span> -->
+                </button>
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptap-strikethrough
+                    "
+                    title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon
+                        icon="type-strikethrough"
+                        />
+                    <!-- <span class="sr-only">
+                    #{CmsAdminMessages['cms_editor.buttons.strikethrough']}
+                </span> -->
+                </button>
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptap-subscript
+                    "
+                    title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
+                    type="button"
+                    >
+                    <span aria-hidden="true"
+                          >x<sub>n</sub></span
+                    >
+                </button>
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptap-superscript
+                    "
+                    title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
+                    type="button"
+                    >
+                    <span aria-hidden="true"
+                          >x<sup>n</sup></span
+                    >
+                </button>
+            </div>
+            <div class="px-2 cms-tiptap-editor-headings">
+                <ui:repeat begin="1" end="6" var="level">
+                    <button
+                        class="
+                        btn btn-outline-dark
+                        tiptap-h#{level}
+                        "
+                        title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
+                        type="button"
                         >
-                            #{cc.attrs.editDialogCancelLabel}
-                        </button>
-                        <button
-                            class="btn btn-success cms-editor-save-button"
-                            type="button"
+                        <span aria-hidden="true"
+                              >H#{level}</span
                         >
-                            #{cc.attrs.editDialogSubmitLabel}
-                        </button>
+                    </button>
+                </ui:repeat>
+                <!-- <button class="btn btn-outline-dark tiptap-h2"
+                        title="#{CmsAdminMessages['cms_editor.buttons.h2']}"
+                        type="button">
+                    <bootstrap:svgIcon icon="type-h2" />
+                </button> -->
+            </div>
+            <div class="px-2 cms-tiptap-editor-paragraphs">
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptap-paragraph
+                    "
+                    title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="type" />
+                </button>
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptap-blockquote
+                    "
+                    title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="blockquote-left" />
+                </button>
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptap-codeblock
+                    "
+                    title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="code-square" />
+                </button>
+            </div>
+            <div class="px-2 cms-tiptap-editor-lists">
+                <button
+                    class="btn btn-outline-dark tiptap-ul"
+                    title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="list-ul" />
+                </button>
+                <button
+                    class="btn btn-outline-dark tiptap-ol"
+                    title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="list-ol" />
+                </button>
+            </div>
+            <div class="px-2 cms-tiptap-editor-table">
+                <button
+                    class="
+                    btn btn-outline-dark
+                    tiptab-insert-table
+                    "
+                    data-target="#insert-table-dialog"
+                    data-toggle="modal"
+                    title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
+                    type="button"
+                    >
+                    <bootstrap:svgIcon icon="table" />
+                </button>
+                <div
+                    aria-hidden="true"
+                    aria-labelledby="insert-table-dialog-title"
+                    class="modal fade cms-editor-insert-table-dialog"
+                    id="insert-table-dialog"
+                    tabindex="-1"
+                    >
+                    <div class="modal-dialog">
+                        <form class="modal-content">
+                            <div class="modal-header">
+                                <h4 class="modal-title"
+                                    id="insert-table-dialog-title">
+                                    #{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
+                                </h4>
+                                <button
+                                    aria-label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    type="button"
+                                    >
+                                    <bootstrap:svgIcon
+                                        icon="x"
+                                        />
+                                </button>
+                            </div>
+                            <div class="modal-body">
+                                <bootstrap:formGroupNumber
+                                    help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.help']}"
+                                    inputId="rows"
+                                    label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
+                                    name="rows"
+                                    />
+                                <bootstrap:formGroupNumber
+                                    help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
+                                    inputId="cols"
+                                    label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
+                                    name="cols"
+                                    />
+                                <bootstrap:formCheck
+                                    checked="true"
+                                    inputId="headerRow"
+                                    label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
+                                    name="headerRow"
+                                    value="true"
+                                    />
+                            </div>
+                            <div class="modal-footer">
+                                <button
+                                    class="
+                                    btn btn-warning
+                                    cms-editor-cancel-button
+                                    "
+                                    data-dismiss="modal"
+                                    type="button"
+                                    >
+                                    #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
+                                </button>
+                                <button
+                                    class="btn btn-success"
+                                    type="submit"
+                                    >
+                                    #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
+                                </button>
+                            </div>
+                        </form>
                     </div>
                 </div>
             </div>
         </div>
+        <div class="cms-tiptap-editor border"
+             data-locale="#{cc.attrs.selectedLocale}"
+             data-variant-url="#{cc.attrs.variantUrl}"></div>
+        <!--</div>-->
+        <!--<div class="modal-footer">-->
+        <div class="mt-3">
+            <a class="btn btn-warning cms-editor-cancel-button"
+               href="#{backUrl}">
+                #{cc.attrs.editDialogCancelLabel}
+            </a>
+            <button
+                class="btn btn-success cms-editor-save-button"
+                disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
+                type="button"
+                >
+                #{cc.attrs.editDialogSubmitLabel}
+            </button>
+        </div>
+        <!--</div>
+    </div>
+</div>-->
     </cc:implementation>
 </html>
diff --git a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditorVariants.xhtml b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditorVariants.xhtml
new file mode 100644
index 000000000..8d1d9c8fc
--- /dev/null
+++ b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditorVariants.xhtml
@@ -0,0 +1,558 @@
+<!DOCTYPE html [<!ENTITY times '&#215;'>]>
+<html
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
+    xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+    >
+    <cc:interface shortDescription="The variants list for the rich text editor">
+
+        <cc:attribute
+            name="addMethod"
+            required="true"
+            shortDescription="URL of the endpoint for adding localized values."
+            type="String"
+            />
+        <cc:attribute
+            name="addButtonLabel"
+            default="Add"
+            required="false"
+            shortDescription="Label for the add button"
+            type="String"
+            />
+        <cc:attribute
+            name="addDialogCancelLabel"
+            default="#{CmsAdminMessages['cancel_button.label']}"
+            required="false"
+            shortDescription="Label for the cancel and close buttons."
+            type="String"
+            />
+        <cc:attribute
+            name="addDialogLocaleSelectHelp"
+            default="The locale of the value of add"
+            required="false"
+            shortDescription="Help text for the locale select field"
+            type="String"
+            />
+        <cc:attribute
+            name="addDialogLocaleSelectLabel"
+            default="#{CmsAdminMessages['locale_select.label']}"
+            required="false"
+            shortDescription="Label for the locale select field"
+            type="String"
+            />
+        <cc:attribute
+            name="addDialogSubmitLabel"
+            default="#{CmsAdminMessages['locale_add.label']}"
+            required="false"
+            shortDescription="Label for the submit button"
+            type="String"
+            />
+        <cc:attribute
+            name="addDialogTitle"
+            default="#{CmsAdminMessages['locale_add.dialog.title']}"
+            required="false"
+            shortDescription="Title for the dialog."
+            type="String"
+            />
+        <cc:attribute
+            name="canEdit"
+            default="true"
+            required="false"
+            shortDescription="Can the current user edit the text?"
+            type="boolean"
+            />
+        <cc:attribute
+            name="editButtonLabel"
+            default="#{CmsAdminMessages['edit_button.label']}"
+            required="false"
+            shortDescription="Label for the edit button."
+            type="String"
+            />
+        <cc:attribute
+            name="editSourceCodeButtonLabel"
+            default="#{CmsAdminMessages['edit_source_code_button.label']}"
+            required="false"
+            shortDescription="Label for the edit source code button."
+            type="String"
+            />
+        <cc:attribute 
+            name="editorPageUrl"
+            required="true"
+            shortDescription="The URL of the page that contains the editor component. The URL of the page must accept the locale of the variant to edit as last path element."
+            type="String" 
+            />
+        <cc:attribute
+            name="hasUnusedLocales"
+            required="true"
+            shortDescription="Are there unused locales? This will usually be an expression pointing to some method. The result must resolve to boolean."
+            type="boolean"
+            />
+        <cc:attribute
+            name="headingLevel"
+            default="2"
+            required="false"
+            shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component."
+            type="int"
+            />
+        <cc:attribute
+            name="emptyText"
+            default="#{text.editor.no_localized_values}"
+            required="false"
+            shortDescription="Text shown if the localized has no values yet."
+            type="String"
+            />
+        <cc:attribute 
+            name="sourceEditorPageUrl"
+            required="true"
+            shortDescription="The URL of the page that contains the source editor component. The URL of the page must accept the locale of the variant to edit as last path element."
+            type="String" 
+            />
+        <cc:attribute
+            name="removeButtonLabel"
+            default="Remove"
+            required="false"
+            shortDescription="Label for the remove button"
+            type="String"
+            />
+        <cc:attribute
+            name="removeDialogCancelLabel"
+            default="Cancel"
+            required="false"
+            shortDescription="Label for the cancel and close buttons of the remove dialog"
+            type="String"
+            />
+        <cc:attribute
+            name="removeDialogSubmitLabel"
+            default="Remove localized value"
+            required="false"
+            shortDescription="Label for the submit button of the remove dialog (removes the localized value)"
+            type="String"
+            />
+        <cc:attribute
+            name="removeDialogText"
+            default="Are you sure to remove the following localized value?"
+            required="false"
+            shortDescription="Text for the remove dialog"
+            type="String"
+            />
+        <cc:attribute
+            name="removeDialogTitle"
+            default="Remove localized value"
+            required="false"
+            shortDescription="The title of the remove dialog"
+            type="String"
+            />
+        <cc:attribute
+            name="removeMethod"
+            required="true"
+            shortDescription="URL of the endpoint for remvoving a value. The locale of the value to remove is added to the end of the URL. Eg. /de for removing the value for the locale de."
+            type="String"
+            />
+        <cc:attribute
+            name="tableActionsHeading"
+            default="Actions"
+            required="false"
+            shortDescription="Heading for the action columns"
+            type="String"
+            />
+        <cc:attribute
+            name="tableLocaleHeading"
+            default="Locale"
+            required="false"
+            shortDescription="Heading for the locale column"
+            type="String"
+            />
+        <cc:attribute
+            name="tableWordCountHeading"
+            default="Words"
+            required="false"
+            shortDescription="Heading for the word count column"
+            type="String"
+            />
+        <cc:attribute
+            name="title"
+            required="true"
+            shortDescription="Title/Heading of the editor widget"
+            type="String"
+            />
+        <cc:attribute
+            name="unusedLocales"
+            required="true"
+            shortDescription="A collection of the unused locales of the edited localized string"
+            type="java.util.Collection"
+            />
+        <cc:attribute
+            name="variants"
+            required="true"
+            shortDescription="Info about the available variants. Must be a List of CmsEditorLocaleVariantRow objects."
+            type="java.util.List"
+            />
+        <cc:attribute 
+            name="viewPageUrl"
+            required="true"
+            shortDescription="The URL of the page that contains the preview component. The URL of the page must accept the locale of the variant to edit as last path element."
+            type="String" 
+            />
+        <cc:attribute name="viewButtonLabel" default="View" type="String" />
+        <cc:implementation>
+            <div class="cms-editor">
+                <c:choose>
+                    <c:when test="#{cc.attrs.headingLevel == 1}">
+                        <h1>#{cc.attrs.title}</h1>
+                    </c:when>
+                    <c:when test="#{cc.attrs.headingLevel == 2}">
+                        <h2>#{cc.attrs.title}</h2>
+                    </c:when>
+                    <c:when test="#{cc.attrs.headingLevel == 3}">
+                        <h3>#{cc.attrs.title}</h3>
+                    </c:when>
+                    <c:when test="#{cc.attrs.headingLevel == 4}">
+                        <h4>#{cc.attrs.title}</h4>
+                    </c:when>
+                    <c:when test="#{cc.attrs.headingLevel == 5}">
+                        <h5>#{cc.attrs.title}</h5>
+                    </c:when>
+                    <c:when test="#{cc.attrs.headingLevel == 6}">
+                        <h6>#{cc.attrs.title}</h6>
+                    </c:when>
+                    <c:otherwise>
+                        <div>#{cc.attrs.title}</div>
+                    </c:otherwise>
+                </c:choose>
+                <div class="cms-editor-messages"></div>
+                <c:if test="#{cc.attrs.hasUnusedLocales}">
+                    <div class="mb-2">
+                        <div class="text-right">
+                            <button
+                                class="btn btn-secondary"
+                                data-target="##{cc.attrs.editorId}-dialog"
+                                data-toggle="modal"
+                                type="button"
+                                >
+                                <bootstrap:svgIcon icon="plus-circle" />
+                                <span> #{cc.attrs.addButtonLabel} </span>
+                            </button>
+                        </div>
+                        <div
+                            aria-labelledby="#{cc.attrs.editorId}-dialog-title"
+                            aria-hidden="true"
+                            class="modal fade"
+                            id="#{cc.attrs.editorId}-dialog"
+                            tabindex="-1"
+                            >
+                            <div class="modal-dialog">
+                                <form
+                                    action="#{cc.attrs.addMethod}"
+                                    class="modal-content"
+                                    method="post"
+                                    >
+                                    <div class="modal-header">
+                                        <c:choose>
+                                            <c:when
+                                                test="#{cc.attrs.headingLevel == 1}"
+                                                >
+                                                <h2
+                                                    class="modal-title"
+                                                    id="#{cc.attrs.editorId}-dialog-title"
+                                                    >
+                                                    #{cc.attrs.addDialogTitle}
+                                                </h2>
+                                            </c:when>
+                                            <c:when
+                                                test="#{cc.attrs.headingLevel == 2}"
+                                                >
+                                                <h3
+                                                    class="modal-title"
+                                                    id="#{cc.attrs.editorId}-dialog-title"
+                                                    >
+                                                    #{cc.attrs.addDialogTitle}
+                                                </h3>
+                                            </c:when>
+                                            <c:when
+                                                test="#{cc.attrs.headingLevel == 3}"
+                                                >
+                                                <h4
+                                                    class="modal-title"
+                                                    id="#{cc.attrs.editorId}-dialog-title"
+                                                    >
+                                                    #{cc.attrs.addDialogTitle}
+                                                </h4>
+                                            </c:when>
+                                            <c:when
+                                                test="#{cc.attrs.headingLevel == 4}"
+                                                >
+                                                <h5
+                                                    class="modal-title"
+                                                    id="#{cc.attrs.editorId}-dialog-title"
+                                                    >
+                                                    #{cc.attrs.addDialogTitle}
+                                                </h5>
+                                            </c:when>
+                                            <c:when
+                                                test="#{cc.attrs.headingLevel == 5}"
+                                                >
+                                                <h6
+                                                    class="modal-title"
+                                                    id="#{cc.attrs.editorId}-dialog-title"
+                                                    >
+                                                    #{cc.attrs.addDialogTitle}
+                                                </h6>
+                                            </c:when>
+                                            <c:otherwise>
+                                                <div>
+                                                    #{cc.attrs.addDialogTitle}
+                                                </div>
+                                            </c:otherwise>
+                                        </c:choose>
+                                        <button
+                                            aria-label="#{cc.attrs.addDialogCancelLabel}"
+                                            class="close"
+                                            data-dismiss="modal"
+                                            type="button"
+                                            >
+                                            <span aria-hidden="true">
+                                                <bootstrap:svgIcon icon="x" />
+                                            </span>
+                                        </button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <div class="form-group">
+                                            <label
+                                                for="#{cc.attrs.editorId}-form-locale-select"
+                                                >
+                                                #{cc.attrs.addDialogLocaleSelectLabel}
+                                            </label>
+                                            <select
+                                                aria-describedby="#{cc.attrs.editorId}-form-locale-select-help"
+                                                id="#{cc.attrs.editorId}-form-locale-select"
+                                                name="locale"
+                                                required="true"
+                                                >
+                                                <c:forEach
+                                                    items="#{cc.attrs.unusedLocales}"
+                                                    var="locale"
+                                                    >
+                                                    <option value="#{locale}">
+                                                        #{locale}
+                                                    </option>
+                                                </c:forEach>
+                                            </select>
+                                            <small
+                                                class="form-text text-muted"
+                                                id="#{cc.attrs.editorId}-form-locale-select-help"
+                                                >
+                                                #{cc.attrs.addDialogLocaleSelectHelp}
+                                            </small>
+                                        </div>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button
+                                            class="btn btn-secondary"
+                                            data-dismiss="modal"
+                                            type="button"
+                                            >
+                                            #{cc.attrs.addDialogCancelLabel}
+                                        </button>
+                                        <button
+                                            type="submit"
+                                            class="btn btn-primary"
+                                            >
+                                            #{cc.attrs.addDialogSubmitLabel}
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </c:if>
+                <c:choose>
+                    <c:when test="#{cc.attrs.values.isEmpty()}">
+                        <p>#{cc.attrs.emptyText}</p>
+                    </c:when>
+                    <c:otherwise>
+                        <table class="cms-editor-variants table table-hover">
+                            <thead class="thead-light">
+                                <tr>
+                                    <th scope="col">
+                                        #{cc.attrs.tableLocaleHeading}
+                                    </th>
+                                    <th scope="col">
+                                        #{cc.attrs.tableWordCountHeading}
+                                    </th>
+                                    <th scope="col">
+                                        #{cc.attrs.tableActionsHeading}
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <c:forEach
+                                    items="#{cc.attrs.variants}"
+                                    var="variant">
+                                    <tr id="variant-#{variant.locale}">
+                                        <td>#{variant.locale}</td>
+                                        <td>
+                                            <span class="wordcount"
+                                                  >#{variant.wordCount}</span
+                                            >
+                                            #{CmsAdminMessages['cms_editor.variants.wordcount']}
+                                        </td>
+                                        <td>
+                                            <a class="btn btn-primary  cms-editor-viewbutton"
+                                               href="#{cc.attrs.viewPageUrl}/#{variant.locale}">
+                                                <bootstrap:svgIcon icon="eye" />
+                                                <span class="sr-only">
+                                                    #{cc.attrs.viewButtonLabel}
+                                                </span>
+                                            </a>
+                                            <c:if test="#{cc.attrs.canEdit}">
+                                                <a class="btn btn-primary"
+                                                   href="#{cc.attrs.editorPageUrl}/#{variant.locale}">
+                                                    <bootstrap:svgIcon icon="pen" />
+                                                    <span class="sr-only">
+                                                        #{cc.attrs.editButtonLabel}
+                                                    </span>
+                                                </a>
+                                                <a class="btn btn-secondary"
+                                                   href="#{cc.attrs.sourceEditorPageUrl}/#{variant.locale}">
+                                                    <bootstrap:svgIcon icon="code-slash" />
+                                                    <span class="sr-only">
+                                                        #{cc.attrs.editSourceCodeButtonLabel}
+                                                    </span>
+                                                </a>
+                                                <button
+                                                class="btn btn-danger"
+                                                data-target="##{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
+                                                data-toggle="modal"
+                                                type="button"
+                                            >
+                                                <bootstrap:svgIcon
+                                                    icon="x-circle"
+                                                />
+                                                <span class="sr-only">
+                                                    #{cc.attrs.removeButtonLabel}
+                                                </span>
+                                            </button>
+                                            <div
+                                                aria-describedby="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog-title"
+                                                aria-hidden="true"
+                                                class="modal fade"
+                                                data-backdrop="static"
+                                                id="#{cc.attrs.editorId}-#{variant.locale}-remove-dialog"
+                                                tabindex="-1"
+                                            >
+                                                <div class="modal-dialog">
+                                                    <form
+                                                        action="#{cc.attrs.removeMethod}/#{variant.locale}"
+                                                        class="modal-content"
+                                                        method="post"
+                                                    >
+                                                        <div
+                                                            class="modal-header"
+                                                        >
+                                                            <c:choose>
+                                                                <c:when
+                                                                    test="#{cc.attrs.headingLevel == 1}"
+                                                                >
+                                                                    <h2>
+                                                                        #{cc.attrs.removeDialogTitle}
+                                                                    </h2>
+                                                                </c:when>
+                                                                <c:when
+                                                                    test="#{cc.attrs.headingLevel == 2}"
+                                                                >
+                                                                    <h3>
+                                                                        #{cc.attrs.removeDialogTitle}
+                                                                    </h3>
+                                                                </c:when>
+                                                                <c:when
+                                                                    test="#{cc.attrs.headingLevel == 3}"
+                                                                >
+                                                                    <h4>
+                                                                        #{cc.attrs.removeDialogTitle}
+                                                                    </h4>
+                                                                </c:when>
+                                                                <c:when
+                                                                    test="#{cc.attrs.headingLevel == 4}"
+                                                                >
+                                                                    <h5>
+                                                                        #{cc.attrs.removeDialogTitle}
+                                                                    </h5>
+                                                                </c:when>
+                                                                <c:when
+                                                                    test="#{cc.attrs.headingLevel == 5}"
+                                                                >
+                                                                    <h6>
+                                                                        #{cc.attrs.removeDialogTitle}
+                                                                    </h6>
+                                                                </c:when>
+                                                                <c:otherwise>
+                                                                    <div>
+                                                                        #{cc.attrs.removeDialogTitle}
+                                                                    </div>
+                                                                </c:otherwise>
+                                                            </c:choose>
+                                                            <button
+                                                                aria-label="#{cc.attrs.removeDialogCancelLabel}"
+                                                                class="close"
+                                                                data-dismiss="modal"
+                                                                type="button"
+                                                            >
+                                                                <span
+                                                                    aria-hidden="true"
+                                                                    >&times;</span
+                                                                >
+                                                            </button>
+                                                        </div>
+                                                        <div class="modal-body">
+                                                            <p>
+                                                                #{cc.attrs.removeDialogText}
+                                                            </p>
+                                                            <pre>
+#{variant.locale}</pre
+                                                            >
+                                                            <input
+                                                                name="confirmed"
+                                                                type="hidden"
+                                                                value="true"
+                                                            />
+                                                        </div>
+                                                        <div
+                                                            class="modal-footer"
+                                                        >
+                                                            <button
+                                                                class="
+                                                                    btn
+                                                                    btn-secondary
+                                                                "
+                                                                data-dismiss="modal"
+                                                                type="button"
+                                                            >
+                                                                #{cc.attrs.removeDialogCancelLabel}
+                                                            </button>
+                                                            <button
+                                                                type="submit"
+                                                                class="
+                                                                    btn
+                                                                    btn-danger
+                                                                "
+                                                            >
+                                                                #{cc.attrs.removeDialogSubmitLabel}
+                                                            </button>
+                                                        </div>
+                                                    </form>
+                                                </div>
+                                            </div>
+                                            </c:if>
+                                        </td>
+                                    </tr>
+                                </c:forEach>
+                            </tbody>
+                        </table>
+                    </c:otherwise>
+                </c:choose>
+            </div>
+        </cc:implementation>
+    </cc:interface>
+</html>
\ No newline at end of file
diff --git a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text.xhtml b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text.xhtml
index 8f25e929f..563e4753e 100644
--- a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text.xhtml
+++ b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text.xhtml
@@ -15,7 +15,7 @@
 
             <librecms:cmsEditor addButtonLabel="#{CmsArticleMessageBundle['text.editor.add_variant']}"
                                 addDialogLocaleSelectHelp="#{CmsAdminMessages['text.editor.add.locale.help']}"
-                                addMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/add"
+                            addMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/add"
                                 editDialogValueHelp="#{CmsAdminMessages['text.editor.edit.value.help']}"
                                 editDialogValueLabel="#{CmsAdminMessages['text.editor.edit.value.label']}"
                                 editMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit"
diff --git a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/available-languages.xhtml b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/available-languages.xhtml
index c6577017c..26b9d1e71 100644
--- a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/available-languages.xhtml
+++ b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/available-languages.xhtml
@@ -3,130 +3,36 @@
       xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
       xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
       xmlns:libreccm="http://xmlns.jcp.org/jsf/composite/components/libreccm"
+      xmlns:librecms="http://xmlns.jcp.org/jsf/composite/components/librecms"
       xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
     <ui:composition template="/WEB-INF/views/org/librecms/ui/contentsection/documents/authoringstep.xhtml">
 
-        <ui:define name="authoringStep">
-            <h2>#{CmsArticleMessageBundle['textstep.header.languages']}</h2>
+        <ui:param name="authoringStep" 
+                  value="/libreccm/@contentsections/info/documents/test-article/@article-text" />
+
+        <ui:define name="authoringStep">
+            <h2>#{CmsArticleMessageBundle['textstep.header']}</h2>
+
+            <librecms:cmsEditorVariants 
+                addButtonLabel="#{CmsArticleMessageBundle['text.editor.add_variant']}"
+                addDialogLocaleSelectHelp="#{CmsAdminMessages['text.editor.add.locale.help']}"
+                addMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/add"
+                editorPageUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit"
+                hasUnusedLocales="#{!CmsArticleTextBodyStep.unusedLocales.isEmpty()}"
+                removeMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/remove"
+                sourceEditorPageUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit-source"
+                title="#{CmsArticleMessageBundle['text.editor.header']}"
+                unusedLocales="#{CmsArticleTextBodyStep.unusedLocales}"
+                variants="#{CmsArticleTextBodyStep.variants}"
+                viewPageUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/view"
+                />
 
-            <c:if test="#{CmsArticleTextBodyStep.canEdit and !CmsArticleTextBodyStep.unusedLocales.isEmpty()}">
-                <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/@add"
-                      method="post">
-                    <div class="d-flex justify-content-start">
-                        <div class="form-group mr-2">
-                            <label for="add-locale">#{CmsArticleMessageBundle['textstep.languages.add_language.label']}</label>
-                            <select aria-describedby="add-locale-help" 
-                                    name="locale"
-                                    size="1">
-                                <c:forEach items="#{CmsArticleTextBodyStep.unusedLocales}"
-                                           var="locale">
-                                    <option value="#{locale}">#{locale}</option>
-                                </c:forEach>
-                            </select>
-                            <small id="add-locale-help"
-                                   class="form-text text-muted">
-                                #{CmsArticleMessageBundle['textstep.languages.add_language.help']}
-                            </small>
-                        </div>
-                        <button class="btn btn-secondary align-self-start"
-                                type="submit">
-                            <bootstrap:svgIcon icon="plus-circle" />
-                            <span>
-                                #{CmsArticleMessageBundle['textstep.languages.add_language.submit']}
-                            </span>
-                        </button>
-                    </div>
-                </form>
-            </c:if>
-            <c:choose>
-                <c:when test="#{CmsArticleTextBodyStep.textValues.isEmpty()}">
-                    #{CmsArticleMessageBundle['textstep.languages.none']}
-                </c:when>
-                <c:otherwise>
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>#{CmsArticleMessageBundle['textstep.languages.th.language']}</th>
-                                <th>#{CmsArticleMessageBundle['textstep.languages.th.actions']}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <c:forEach items="#{CmsArticleTextBodyStep.textValues}" 
-                                       var="entry">
-                                <tr>
-                                    <td>#{entry.key}</td>
-                                    <td>
-                                        <a class="btn btn-secondary"
-                                           href="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/#{entry.key}/@view">
-                                            <bootstrap:svgIcon icon="eye" />
-                                            <span class="sr-only">#{CmsArticleMessageBundle['textstep.languages.view']}</span>
-                                        </a>
-                                        <c:if test="#{CmsArticleTextBodyStep.canEdit}">
-                                            <a class="btn btn-secondary"
-                                               href="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/#{entry.key}/@edit">
-                                                <bootstrap:svgIcon icon="pen" />
-                                                <span class="sr-only">#{CmsArticleMessageBundle['textstep.languages.edit']}</span>
-                                            </a>
-                                            <button class="btn btn-danger"
-                                                    data-target="#remove-locale-#{entry.key}-dialog"
-                                                    data-toggle="modal"
-                                                    type="button">
-                                                <bootstrap:svgIcon icon="x-circle" />
-                                                <span class="sr-only">#{CmsArticleMessageBundle['textstep.languages.remove']}</span>
-                                            </button>
-                                            <div aria-labelledby="remove-locale-#{entry.key}-dialog-title"
-                                                 aria-hidden="true"
-                                                 class="modal fade"
-                                                 data-backdrop="static"
-                                                 id="remove-locale-#{entry.key}-dialog"
-                                                 tabindex="-1">
-                                                <div class="modal-dialog">
-                                                    <form action="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/#{entry.key}/@remove"
-                                                          class="modal-content"
-                                                          method="post">
-                                                        <div class="modal-header">
-                                                            <div class="modal-title">
-                                                                <h3 class="remove-locale-#{entry.key}-dialog-title">#{CmsArticleMessageBundle.getMessage('textstep.languages.remove.title', [entry.key])}</h3>
-                                                                <button aria-label="#{CmsArticleMessageBundle['textstep.languages.remove.cancel']}"
-                                                                        class="close"
-                                                                        data-dismiss="modal"
-                                                                        type="button">
-                                                                    <bootstrap:svgIcon icon="x" />
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                        <div class="modal-body">
-                                                            <input name="confirmed" type="hidden" value="true" />
-                                                            <p>
-                                                                #{CmsArticleMessageBundle.getMessage('textstep.languages.remove.message', [entry.key])}
-                                                            </p>
-                                                        </div>
-                                                        <div class="modal-footer">
-                                                            <button class="btn btn-secondary" 
-                                                                    data-dismiss="modal"
-                                                                    type="button" >
-                                                                #{CmsArticleMessageBundle['textstep.languages.remove.cancel']}
-                                                            </button>
-                                                            <button type="submit" class="btn btn-danger">
-                                                                #{CmsArticleMessageBundle['textstep.languages.remove.confirm']}
-                                                            </button>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                            </div>
-                                            <!--                                    <button class="btn btn-secondary"
-                                                                                        href="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/#{entry.key}/@delete">
-                                                                                    <bootstrap:svgIcon icon="eye" />
-                                                                                    <span>{CmsArticleMessageBundle['textstep.languages.view']}</span>
-                                                                                </button>-->
-                                        </c:if>
-                                    </td>
-                                </tr>
-                            </c:forEach>
-                        </tbody>
-                    </table>
-                </c:otherwise>
-            </c:choose>
         </ui:define>
+
+        <ui:define name="scripts">
+            <script src="#{request.contextPath}/assets/@content-sections/cms-editor.js"></script>
+        </ui:define>
+
     </ui:composition>
 </html>
+
diff --git a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/edit.xhtml b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/edit.xhtml
index ff8409613..a5c47c2b5 100644
--- a/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/edit.xhtml
+++ b/ccm-cms/src/main/resources/WEB-INF/views/org/librecms/ui/contenttypes/article/article-text/edit.xhtml
@@ -3,6 +3,7 @@
       xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
       xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
       xmlns:libreccm="http://xmlns.jcp.org/jsf/composite/components/libreccm"
+      xmlns:librecms="http://xmlns.jcp.org/jsf/composite/components/librecms"
       xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
     <ui:composition template="/WEB-INF/views/org/librecms/ui/contentsection/documents/authoringstep.xhtml">
 
@@ -16,17 +17,24 @@
                 <h2>#{CmsArticleMessageBundle.getMessage('textstep.header.edit',[CmsArticleTextBodyStep.selectedLocale])}</h2>
             </div>
 
-
-
-            <pre>selected locale: #{CmsArticleTextBodyStep.selectedLocale}</pre>
-
             <c:if test="#{CmsArticleTextBodyStep.canEdit}">
-                <div class="cms-editor">
-                    #{CmsArticleTextBodyStep.textValues.get(CmsArticleTextBodyStep.selectedLocale)}
-                </div>
+                <librecms:cmsEditor
+                    backUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text"
+                    canEdit="#{CmsArticleTextBodyStep.canEdit}"
+                    editMethod="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text/edit"
+                    editorId="article-text-editor"
+                    objectIdentifier="#{CmsSelectedDocumentModel.itemPath}"
+                    selectedLocale="#{CmsArticleTextBodyStep.selectedLocale}"
+                    title="#{CmsArticleMessageBundle['text.editor.header']}"
+                    variantUrl="#{mvc.basePath}/#{ContentSectionModel.sectionName}/documents/#{CmsSelectedDocumentModel.itemPath}/@article-text-resources/variants"
+                    />
             </c:if>
 
         </ui:define>
+        
+        <ui:define name="scripts">
+            <script src="#{request.contextPath}/assets/@content-sections/cms-editor.js"></script>
+        </ui:define>
     </ui:composition>
 </html>
 
diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
index 60f8db07d..c7abb13fa 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
@@ -11,241 +11,43 @@ import TableCell from "@tiptap/extension-table-cell";
 import TableHeader from "@tiptap/extension-table-header";
 
 document.addEventListener("DOMContentLoaded", function (event) {
-    const viewButtons = document.querySelectorAll(
-        ".cms-editor .cms-editor-variants .cms-editor-view-button"
-    );
-    for (let i = 0; i < viewButtons.length; i++) {
-        viewButtons[i].addEventListener("click", event =>
-            showViewDialog(event)
-        );
+    // const viewButtons = document.querySelectorAll(
+    //     ".cms-editor .cms-editor-variants .cms-editor-view-button"
+    // );
+    // for (let i = 0; i < viewButtons.length; i++) {
+    //     viewButtons[i].addEventListener("click", event =>
+    //         showViewDialog(event)
+    //     );
+    // }
+
+    // const editButtons = document.querySelectorAll(
+    //     ".cms-editor .cms-editor-variants .cms-editor-edit-button"
+    // );
+    // for (let i = 0; i < editButtons.length; i++) {
+    //     editButtons[i].addEventListener("click", event =>
+    //         showEditDialog(event)
+    //     );
+    // }
+
+    console.log("Trying to init editor...");
+    const editor = document.querySelector(".cms-tiptap-editor");
+    if (editor) {
+        initEditor(editor as HTMLElement)
+            .then(() => console.log("editor initalized."))
+            .catch(error => console.log(`Failed to init editor ${error}`));
+    } else {
+        console.log("No editor found.");
     }
-
-    const editButtons = document.querySelectorAll(
-        ".cms-editor .cms-editor-variants .cms-editor-edit-button"
-    );
-    for (let i = 0; i < editButtons.length; i++) {
-        editButtons[i].addEventListener("click", event =>
-            showEditDialog(event)
-        );
-    }
-
-    // document
-    //     .querySelector(
-    //         ".cms-editor .cms-editor-variants .cms-editor-view-button"
-    //     )
-    //     .addEventListener("click", function (event) {
-    //         event.preventDefault();
-
-    //         const target = event.currentTarget as Element;
-    //         const variantUrl = target.getAttribute("data-variant-url");
-    //         const viewDialogId = target.getAttribute("data-view-dialog");
-
-    //         fetch(variantUrl, {
-    //             method: "GET",
-    //             credentials: "include"
-    //         })
-    //             .then(response => {
-    //                 if (response.ok) {
-    //                     response
-    //                         .text()
-    //                         .then(text => {
-    //                             const viewDialog = document.querySelector(
-    //                                 `#${viewDialogId}`
-    //                             );
-    //                             const viewDialogBody =
-    //                                 viewDialog.querySelector(".modal-body");
-
-    //                             viewDialogBody.textContent = text;
-
-    //                             $(`#${viewDialogId}`).modal("toggle");
-    //                         })
-    //                         .catch(err => {
-    //                             showMessage(
-    //                                 "#cms-editor-msg-variant-load-failed"
-    //                             );
-    //                         });
-    //                 } else {
-    //                     showMessage("#cms-editor-msg-variant-load-failed");
-    //                 }
-    //             })
-    //             .catch(err => {
-    //                 showMessage("#cms-editor-msg-variant-load-failed");
-    //             });
-    //     });
-
-    // document
-    //     .querySelector(
-    //         ".cms-editor .cms-editor-variants .cms-editor-edit-button"
-    //     )
-    //     .addEventListener("click", function (event) {
-    //         event.preventDefault();
-
-    //         const target = event.currentTarget as Element;
-    //         const locale = target.getAttribute("data-locale");
-    //         const variantUrl = target.getAttribute("data-variant-url");
-    //         const editDialogId = target.getAttribute("data-edit-dialog");
-    //         const saveUrl = target.getAttribute("data-save-url");
-
-    //         fetch(variantUrl, {
-    //             method: "GET",
-    //             credentials: "include"
-    //         })
-    //             .then(response => {
-    //                 if (response.ok) {
-    //                     response
-    //                         .text()
-    //                         .then(text => {
-    //                             const editDialog = document.querySelector(
-    //                                 `#${editDialogId}`
-    //                             );
-    //                             const tiptapDiv = editDialog.querySelector(
-    //                                 ".modal-body .cms-tiptap-editor"
-    //                             );
-    //                             if (!tiptapDiv) {
-    //                                 console.warn("tiptapDiv is null");
-    //                             }
-
-    //                             const editor = new Editor({
-    //                                 element: tiptapDiv,
-    //                                 extensions: [StarterKit],
-    //                                 content: text
-    //                             });
-
-    //                             const buttonsDiv = editDialog.querySelector(
-    //                                 ".cms-tiptap-editor-buttons"
-    //                             );
-    //                             if (!buttonsDiv) {
-    //                                 console.warn("buttonsDiv is null.");
-    //                             }
-    //                             const emphButton =
-    //                                 buttonsDiv.querySelector(".tiptap-emph");
-    //                             if (!emphButton) {
-    //                                 console.warn("emphButton not found.");
-    //                             }
-    //                             emphButton.addEventListener("click", event => {
-    //                                 event.preventDefault();
-    //                                 editor.chain().focus().toggleItalic().run();
-    //                             });
-
-    //                             const strongEmphButton =
-    //                                 buttonsDiv.querySelector(
-    //                                     ".tiptap-strong-emph"
-    //                                 );
-    //                             if (!strongEmphButton) {
-    //                                 console.warn("strongEmphButton not found.");
-    //                             }
-    //                             strongEmphButton.addEventListener(
-    //                                 "click",
-    //                                 event => {
-    //                                     event.preventDefault();
-    //                                     editor
-    //                                         .chain()
-    //                                         .focus()
-    //                                         .toggleBold()
-    //                                         .run();
-    //                                 }
-    //                             );
-
-    //                             const closeButton = editDialog.querySelector(
-    //                                 ".modal-header .close"
-    //                             );
-    //                             const cancelButton = editDialog.querySelector(
-    //                                 ".modal-footer .cms-editor-cancel-button"
-    //                             );
-    //                             const saveButton = editDialog.querySelector(
-    //                                 ".modal-footer .cms-editor-save-button"
-    //                             );
-
-    //                             closeButton.addEventListener("click", event => {
-    //                                 editor.chain().clearContent();
-    //                                 editor.destroy();
-    //                                 $(`#${editDialogId}`).modal("toggle");
-    //                             });
-
-    //                             cancelButton.addEventListener(
-    //                                 "click",
-    //                                 event => {
-    //                                     editor.chain().clearContent();
-    //                                     editor.destroy();
-    //                                     $(`#${editDialogId}`).modal("toggle");
-    //                                 }
-    //                             );
-
-    //                             saveButton.addEventListener("click", event => {
-    //                                 const html = editor.getHTML();
-    //                                 const params = new URLSearchParams();
-    //                                 params.append("value", html);
-    //                                 fetch(saveUrl, {
-    //                                     method: "POST",
-    //                                     credentials: "include",
-    //                                     headers: {
-    //                                         "Content-Type":
-    //                                             "application/x-www-form-urlencoded"
-    //                                     },
-    //                                     body: params
-    //                                 })
-    //                                     .then(saveResponse => {
-    //                                         if (saveResponse.ok) {
-    //                                             showMessage(
-    //                                                 "#cms-editor-msg-save-successful"
-    //                                             );
-    //                                             window.location.reload();
-    //                                         } else {
-    //                                             showMessage(
-    //                                                 "#cms-editor-msg-save-failed"
-    //                                             );
-    //                                         }
-    //                                         $(`#${editDialogId}`).modal(
-    //                                             "toggle"
-    //                                         );
-    //                                     })
-    //                                     .catch(err => {
-    //                                         showMessage(
-    //                                             "#cms-editor-msg-save-failed"
-    //                                         );
-    //                                         console.error(err);
-    //                                         $(`#${editDialogId}`).modal(
-    //                                             "toggle"
-    //                                         );
-    //                                     });
-    //                             });
-
-    //                             $(`#${editDialogId}`).modal("toggle");
-    //                         })
-    //                         .catch(err => {
-    //                             showMessage(
-    //                                 "#cms-editor-msg-variant-load-failed"
-    //                             );
-    //                             console.error(err);
-    //                         });
-    //                 } else {
-    //                     showMessage("#cms-editor-msg-variant-load-failed");
-    //                 }
-    //             })
-    //             .catch(err => {
-    //                 showMessage("#cms-editor-msg-variant-load-failed");
-    //                 console.error(err);
-    //             });
-    //     });
-
-    // console.log("Starting editor");
-    // new Editor({
-    //     element: document.querySelector('#cms-editor'),
-    //     extensions: [
-    //         StarterKit
-    //     ],
-    //     content: '<h1>Hello World</h1>'
-    // })
 });
 
-function closeEditor(event: Event, editor: Editor, editDialogId: string) {
-    event.preventDefault();
+// function closeEditor(event: Event, editor: Editor, editDialogId: string) {
+//     event.preventDefault();
 
-    editor.chain().clearContent();
-    editor.destroy();
-    const editDialog = $(`#${editDialogId}`) as any;
-    editDialog.modal("toggle");
-}
+//     editor.chain().clearContent();
+//     editor.destroy();
+//     const editDialog = $(`#${editDialogId}`) as any;
+//     editDialog.modal("toggle");
+// }
 
 async function fetchVariant(fromUrl: string) {
     try {
@@ -281,16 +83,43 @@ async function fetchWordCount(fromUrl: string) {
     }
 }
 
+async function initEditor(editorElem: HTMLElement) {
+    console.log("init editor");
+    const variantUrl = editorElem.getAttribute("data-variant-url");
+    if (variantUrl == null) {
+        console.error("variantUrl is null");
+        return;
+    }
+    console.log(`variantUrl = ${variantUrl}`);
+    const variant = await fetchVariant(variantUrl);
+    console.log("Got variant");
+
+    const editor = new Editor({
+        element: editorElem,
+        extensions: [
+            Gapcursor,
+            StarterKit,
+            Subscript,
+            Superscript,
+            Table.configure({ resizable: true }),
+            TableRow,
+            TableHeader,
+            TableCell
+        ],
+        content: variant
+    });
+
+    console.log("initializing editor buttons");
+    const buttonsElem = editorElem.querySelector(".cms-tiptap-editor-buttons");
+    if (buttonsElem) {
+        initEditorButtons(editor, buttonsElem);
+    } else {
+        console.error("editorButtons are null");
+        return;
+    }
+}
+
 function initEditorButtons(editor: Editor, buttonsElem: Element) {
-    // const emphButton: HTMLButtonElement | null = buttonsElem.querySelector(
-    //     ".tiptap-emph"
-    // );
-    // if(emphButton) {
-    //     emphButton.addEventListener("click", event => {
-    //         event.preventDefault();
-    //         editor.chain().focus().toggleItalic().run();
-    //     });
-    // }
     buttonsElem
         .querySelector(".tiptap-emph")
         ?.addEventListener("click", event => {
@@ -485,12 +314,12 @@ async function showEditDialog(event: Event) {
     }
     initEditorButtons(editor, editorButtons);
 
-    const editDialogHeader = editDialog.querySelector(".modal-header .close");
-    if (editDialogHeader) {
-        editDialogHeader.addEventListener("click", event =>
-            closeEditor(event, editor, editDialogId)
-        );
-    }
+    // const editDialogHeader = editDialog.querySelector(".modal-header .close");
+    // if (editDialogHeader) {
+    //     editDialogHeader.addEventListener("click", event =>
+    //         closeEditor(event, editor, editDialogId)
+    //     );
+    // }
     const cancelButton = editDialog.querySelector(
         ".modal-footer .cms-editor-cancel-button"
     );
@@ -498,9 +327,9 @@ async function showEditDialog(event: Event) {
         console.error("cancelButton is null");
         return;
     }
-    cancelButton.addEventListener("click", event =>
-        closeEditor(event, editor, editDialogId)
-    );
+    // cancelButton.addEventListener("click", event =>
+    //     closeEditor(event, editor, editDialogId)
+    // );
     const editButton = editDialog.querySelector(
         ".modal-footer .cms-editor-save-button"
     );