Insert table now working for cms editor

ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml

@@ -791,6 +791,9 @@ tabindex="-1"
                                     </button>-->
         </div>
         <!--<div class="modal-body">-->
+        <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
@@ -939,7 +942,7 @@ tabindex="-1"
                     <button
                         class="
                         btn btn-outline-dark
-                    tiptab-insert-table
+                        tiptap-insert-table
                         "
                         data-target="#insert-table-dialog"
                         data-toggle="modal"
@@ -1007,6 +1010,8 @@ tabindex="-1"
                                     </button>
                                     <button
                                         class="btn btn-success"
+                                        data-dismiss="modal"
+                                        data-backdrop="false"
                                         type="submit"
                                         >
                                         #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
@@ -1017,7 +1022,7 @@ tabindex="-1"
                     </div>
                 </div>
             </div>
-        <div class="cms-tiptap-editor border"
+            <div class="cms-tiptap-editor-canvas border"
                  data-locale="#{cc.attrs.selectedLocale}"
                  data-variant-url="#{cc.attrs.variantUrl}"></div>
             <!--</div>-->
@@ -1035,6 +1040,7 @@ tabindex="-1"
                     #{cc.attrs.editDialogSubmitLabel}
                 </button>
             </div>
+        </div>
         <!--</div>
     </div>
 </div>-->

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;
+        }
+    }
 }

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");
         });
 }