diff --git a/ccm-cms/package-lock.json b/ccm-cms/package-lock.json
index b42ea04e0..9ec746d05 100644
--- a/ccm-cms/package-lock.json
+++ b/ccm-cms/package-lock.json
@@ -3085,6 +3085,50 @@
             "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.0.0-beta.4.tgz",
             "integrity": "sha512-rTQCnSnloSf6UN1y3zhu6j41MxrcCVWm5JIPX8VEt60WsOXJLAc/YJHLYi2FWhh/Psq8k78sPrmZbjYUrj3Dkw=="
         },
+        "@tiptap/extension-table": {
+            "version": "2.0.0-beta.29",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.0.0-beta.29.tgz",
+            "integrity": "sha512-2yK4dZboe7+KQoJeM0p6v7xx+G/yKDWbbtDtYRnFecD2Oiz1u44DeMKGzVqPXcMYWxmCnAeUK0kcbmwnPYyBTg==",
+            "requires": {
+                "prosemirror-tables": "^1.1.1",
+                "prosemirror-view": "^1.19.3"
+            },
+            "dependencies": {
+                "prosemirror-model": {
+                    "version": "1.14.3",
+                    "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.14.3.tgz",
+                    "integrity": "sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ==",
+                    "requires": {
+                        "orderedmap": "^1.1.0"
+                    }
+                },
+                "prosemirror-view": {
+                    "version": "1.19.3",
+                    "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.19.3.tgz",
+                    "integrity": "sha512-YP/ZzVwqPPwbHbJi97U2/CeyZ8PIHmLJt0gIhZWP8XfnuBRGG3y+jwLzUoBVmiuoUCy3R6PSB+pOATliGzLfPg==",
+                    "requires": {
+                        "prosemirror-model": "^1.14.3",
+                        "prosemirror-state": "^1.0.0",
+                        "prosemirror-transform": "^1.1.0"
+                    }
+                }
+            }
+        },
+        "@tiptap/extension-table-cell": {
+            "version": "2.0.0-beta.14",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.14.tgz",
+            "integrity": "sha512-VoZ8SF8urU1/I3XnjDez2pbDO0h4cow+o8Xi6mhkMTXbxr212T674W7lu5DVMJ4Y1NF1eLe9eJ9kGJE43cA0+Q=="
+        },
+        "@tiptap/extension-table-header": {
+            "version": "2.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.16.tgz",
+            "integrity": "sha512-L/r+ez4G7ZlninS4MwK4tYoVuA6bMMCz7OLvHGBmp24vZm7OA3qyUP4+GGtOXtdhv3aydeBis03gSrrB50aRWw=="
+        },
+        "@tiptap/extension-table-row": {
+            "version": "2.0.0-beta.14",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.14.tgz",
+            "integrity": "sha512-mewdlTqgBCyzeZIZ6F08gfuzwsiYjQ7BvABo2UhDfr0+EN2UvfJj0bT3tGgeZhMxT5Js2DXL+c+ZOVJxWJ9faQ=="
+        },
         "@tiptap/extension-text": {
             "version": "2.0.0-beta.7",
             "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.7.tgz",
@@ -8640,6 +8684,18 @@
                 "prosemirror-transform": "^1.0.0"
             }
         },
+        "prosemirror-tables": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz",
+            "integrity": "sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA==",
+            "requires": {
+                "prosemirror-keymap": "^1.1.2",
+                "prosemirror-model": "^1.8.1",
+                "prosemirror-state": "^1.3.1",
+                "prosemirror-transform": "^1.2.1",
+                "prosemirror-view": "^1.13.3"
+            }
+        },
         "prosemirror-transform": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz",
diff --git a/ccm-cms/package.json b/ccm-cms/package.json
index ad0b8e220..07de4b68e 100644
--- a/ccm-cms/package.json
+++ b/ccm-cms/package.json
@@ -23,6 +23,10 @@
         "@tiptap/core": "^2.0.0-beta.46",
         "@tiptap/extension-subscript": "^2.0.0-beta.4",
         "@tiptap/extension-superscript": "^2.0.0-beta.4",
+        "@tiptap/extension-table": "^2.0.0-beta.29",
+        "@tiptap/extension-table-cell": "^2.0.0-beta.14",
+        "@tiptap/extension-table-header": "^2.0.0-beta.16",
+        "@tiptap/extension-table-row": "^2.0.0-beta.14",
         "@tiptap/starter-kit": "^2.0.0-beta.43",
         "bootstrap": "^4.6.0",
         "bootstrap-icons": "^1.5.0",
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 38a72ab09..e6ae0df9e 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
@@ -1,202 +1,281 @@
 <!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="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"
-                      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="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="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="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="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"
-                      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="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" />
+<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="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"
+            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="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="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="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="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"
+            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="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:interface>
     <cc:implementation>
-        <div class="cms-editor"
-             id="#{cc.attrs.editorId}">
+        <div class="cms-editor" id="#{cc.attrs.editorId}">
             <c:choose>
                 <c:when test="#{cc.attrs.headingLevel == 1}">
                     <h1>#{cc.attrs.title}</h1>
@@ -240,55 +319,93 @@
             <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">
+                        <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>
+                            <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
+                        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">
+                            <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
+                                            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
+                                            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
+                                            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
+                                            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
+                                            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>
+                                            <div>
+                                                #{cc.attrs.addDialogTitle}
+                                            </div>
                                         </c:otherwise>
                                     </c:choose>
-                                    <button aria-label="#{cc.attrs.addDialogCancelLabel}"
-                                            class="close" 
-                                            data-dismiss="modal" 
-                                            type="button" >
+                                    <button
+                                        aria-label="#{cc.attrs.addDialogCancelLabel}"
+                                        class="close"
+                                        data-dismiss="modal"
+                                        type="button"
+                                    >
                                         <span aria-hidden="true">
                                             <bootstrap:svgIcon icon="x" />
                                         </span>
@@ -296,31 +413,46 @@
                                 </div>
                                 <div class="modal-body">
                                     <div class="form-group">
-                                        <label for="#{cc.attrs.editorId}-form-locale-select">
+                                        <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>
+                                        <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">
+                                        <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" >
+                                    <button
+                                        class="btn btn-secondary"
+                                        data-dismiss="modal"
+                                        type="button"
+                                    >
                                         #{cc.attrs.addDialogCancelLabel}
                                     </button>
-                                    <button type="submit" class="btn btn-primary">
+                                    <button
+                                        type="submit"
+                                        class="btn btn-primary"
+                                    >
                                         #{cc.attrs.addDialogSubmitLabel}
                                     </button>
                                 </div>
@@ -331,113 +463,186 @@
             </c:if>
             <c:choose>
                 <c:when test="#{cc.attrs.values.isEmpty()}">
-                    <p>
-                        #{cc.attrs.emptyText}
-                    </p>
+                    <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>
+                                <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">
+                            <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']}
+                                        <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">
+                                        <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">
+                                            <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" />
+                                            <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
+                                                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">
+                                                    <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
+                                                                    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
+                                                                    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
+                                                                    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
+                                                                    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
+                                                                    test="#{cc.attrs.headingLevel == 5}"
+                                                                >
+                                                                    <h6>
+                                                                        #{cc.attrs.removeDialogTitle}
+                                                                    </h6>
                                                                 </c:when>
                                                                 <c:otherwise>
-                                                                    <div>#{cc.attrs.removeDialogTitle}</div>
+                                                                    <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
+                                                                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" />
+                                                            <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" >
+                                                        <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">
+                                                            <button
+                                                                type="submit"
+                                                                class="
+                                                                    btn
+                                                                    btn-danger
+                                                                "
+                                                            >
                                                                 #{cc.attrs.removeDialogSubmitLabel}
                                                             </button>
                                                         </div>
@@ -453,141 +658,215 @@
                 </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
+            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>
+                                <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>
+                                <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>
+                                <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>
+                                <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>
+                                <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>
+                                <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" >
+                        <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-body"></div>
                     <div class="modal-footer">
-                        <button class="btn btn-secondary" 
-                                data-dismiss="modal"
-                                type="button" >
+                        <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
+            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>
+                                <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>
+                                <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>
+                                <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>
+                                <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>
+                                <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>
+                                <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" >
+                        <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="border-end border-dark cms-tiptap-editor-textformatting">
-                                <button class="btn btn-outline-dark tiptap-emph"
+                            <div class="px-2 cms-tiptap-editor-textformatting">
+                                <button
+                                    class="btn btn-outline-dark tiptap-emph"
                                     title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
-                                    type="button">
+                                    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">
+                                <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">
+                                <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" />
+                                <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
+                                    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
+                                    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="border-end border-dark cms-tiptap-editor-headings">
+                            <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">
-                                        <span aria-hidden="true">H#{level}</span>
+                                    <button
+                                        class="
+                                            btn btn-outline-dark
+                                            tiptap-h#{level}
+                                        "
+                                        title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
+                                        type="button"
+                                    >
+                                        <span aria-hidden="true"
+                                            >H#{level}</span
+                                        >
                                     </button>
                                 </ui:repeat>
                                 <!-- <button class="btn btn-outline-dark tiptap-h2"
@@ -596,35 +875,149 @@
                                     <bootstrap:svgIcon icon="type-h2" />
                                 </button> -->
                             </div>
-                            <div class="border-end border-dark cms-tiptap-editor-paragraphs">
-                                <button class="btn btn-outline-dark tiptap-paragraph"
-                                        title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
-                                        type="button">
+                            <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">
+                                <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">
+                                <button
+                                    class="
+                                        btn btn-outline-dark
+                                        tiptap-codeblock
+                                    "
+                                    title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
+                                    type="button"
+                                >
                                     <bootstrap:svgIcon icon="code-square" />
                                 </button>
-                            </div>                            
-                        </div>
-                        <div class="cms-tiptap-editor border">
-                            
+                            </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" >
+                        <button
+                            class="btn btn-warning cms-editor-cancel-button"
+                            type="button"
+                        >
                             #{cc.attrs.editDialogCancelLabel}
                         </button>
-                        <button class="btn btn-success cms-editor-save-button"
-                                type="button" >
+                        <button
+                            class="btn btn-success cms-editor-save-button"
+                            type="button"
+                        >
                             #{cc.attrs.editDialogSubmitLabel}
                         </button>
                     </div>
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 c5eaa0fc3..60f8db07d 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
@@ -1,9 +1,14 @@
 import "bootstrap";
 import * as $ from "jquery";
 import { Editor } from "@tiptap/core";
+import Gapcursor from "@tiptap/extension-gapcursor";
 import StarterKit from "@tiptap/starter-kit";
 import Subscript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
+import Table from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
 
 document.addEventListener("DOMContentLoaded", function (event) {
     const viewButtons = document.querySelectorAll(
@@ -339,20 +344,78 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
             event.preventDefault();
             editor.chain().focus().clearNodes().run();
         });
-    
+
     buttonsElem
         .querySelector(".tiptap-blockquote")
         ?.addEventListener("click", event => {
             event.preventDefault();
             editor.chain().focus().toggleBlockquote().run();
         });
-    
+
     buttonsElem
         .querySelector(".tiptap-codeblock")
         ?.addEventListener("click", event => {
             event.preventDefault();
             editor.chain().focus().toggleCodeBlock().run();
         });
+
+    buttonsElem
+        .querySelector(".tiptap-ul")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            editor.chain().focus().toggleBulletList().run();
+        });
+
+    buttonsElem
+        .querySelector(".tiptap-ol")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            editor.chain().focus().toggleOrderedList().run();
+        });
+
+    editor.on("selectionUpdate", ({ editor }) => {
+        console.log("Selection updated");
+        console.log(
+            `can insertRowBefore: ${editor
+                .can()
+                .chain()
+                .focus()
+                .addRowBefore()
+                .run()}`
+        );
+    });
+
+    buttonsElem
+        .querySelector(".cms-editor-insert-table-dialog .btn-success")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            const dialog = buttonsElem.querySelector(
+                ".cms-editor-insert-table-dialog"
+            );
+            if (!dialog) {
+                return;
+            }
+            const rowsInput = dialog.querySelector(
+                "input#rows"
+            ) as HTMLInputElement;
+            const colsInput = dialog.querySelector(
+                "input#cols"
+            ) as HTMLInputElement;
+            const headerRowInput = dialog.querySelector(
+                "input#headerRow"
+            ) as HTMLInputElement;
+            console.log(`rowsInput = ${rowsInput}`);
+            console.log(`colsInput = ${colsInput}`);
+            console.log(`headerRowInput = ${headerRowInput}`);
+            const rows = rowsInput.value;
+            const cols = colsInput.value;
+            const headerRow = JSON.parse(headerRowInput.value) as Boolean;
+            editor
+                .chain()
+                .focus()
+                .insertTable({ cols: cols, rows: rows, headerRow: headerRow })
+                .run();
+        });
 }
 
 async function showEditDialog(event: Event) {
@@ -402,7 +465,16 @@ async function showEditDialog(event: Event) {
 
     const editor = new Editor({
         element: tiptapDiv,
-        extensions: [StarterKit, Subscript, Superscript],
+        extensions: [
+            Gapcursor,
+            StarterKit,
+            Subscript,
+            Superscript,
+            Table.configure({ resizable: true }),
+            TableRow,
+            TableHeader,
+            TableCell
+        ],
         content: variant
     });