From 61e6d6945c7b4a435a38f5cf8e3c661fbc703815 Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Wed, 25 Aug 2021 20:00:15 +0200
Subject: [PATCH] Insert table now working for cms editor

---
 .../components/librecms/cmsEditor.xhtml       | 466 +++++++++---------
 .../main/scss/content-sections/cms-admin.scss |  11 +
 .../typescript/content-sections/cms-editor.ts |   9 +-
 3 files changed, 255 insertions(+), 231 deletions(-)

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 b6e8664b0..c2af84640 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
@@ -791,249 +791,255 @@ tabindex="-1"
                                     </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">
+        <div class="cms-tiptap-editor"
+             data-locale="#{cc.attrs.selectedLocale}"
+             data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}">
+            <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-h#{level}
+                        tiptap-strong-emph
                         "
-                        title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
+                        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"
-                              >H#{level}</span
+                              >x<sub>n</sub></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
+                        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"
+                            >
+                            <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
+                        tiptap-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"
                                         />
-                                </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>
+                                    <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"
+                                        data-dismiss="modal"
+                                        data-backdrop="false"
+                                        type="submit"
+                                        >
+                                        #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
                     </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 class="cms-tiptap-editor-canvas 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>
diff --git a/ccm-cms/src/main/scss/content-sections/cms-admin.scss b/ccm-cms/src/main/scss/content-sections/cms-admin.scss
index 4fb0e40c1..f7173d6fb 100644
--- a/ccm-cms/src/main/scss/content-sections/cms-admin.scss
+++ b/ccm-cms/src/main/scss/content-sections/cms-admin.scss
@@ -13,4 +13,15 @@
         margin: 0.33em;
         padding: 0.2em;
     }
+
+    table {
+        border: 1px solid #000;
+        margin-left: 0.2em;
+        margin-right: 0.2em;
+        width: 100%;
+
+        td, th, tr {
+            border: 1px solid #000;
+        }
+    }
 }
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 c7abb13fa..7418a2a90 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
@@ -94,8 +94,14 @@ async function initEditor(editorElem: HTMLElement) {
     const variant = await fetchVariant(variantUrl);
     console.log("Got variant");
 
+    const canvasElem = editorElem.querySelector(".cms-tiptap-editor-canvas");
+    if (!canvasElem) {
+        console.error("canvasElem not found.");
+        return;
+    }
+
     const editor = new Editor({
-        element: editorElem,
+        element: canvasElem,
         extensions: [
             Gapcursor,
             StarterKit,
@@ -244,6 +250,7 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
                 .focus()
                 .insertTable({ cols: cols, rows: rows, headerRow: headerRow })
                 .run();
+            $("#insert-table-dialog").modal("hide");
         });
 }