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 fc8eeef1b..478fa729e 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
@@ -551,11 +551,76 @@
+
+
+
+
+
+
+
+
+
+
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 f7173d6fb..87f2e61f6 100644
--- a/ccm-cms/src/main/scss/content-sections/cms-admin.scss
+++ b/ccm-cms/src/main/scss/content-sections/cms-admin.scss
@@ -18,7 +18,7 @@
border: 1px solid #000;
margin-left: 0.2em;
margin-right: 0.2em;
- width: 100%;
+ // 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 fb46ee484..70213948d 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
@@ -13,10 +13,10 @@ import TableHeader from "@tiptap/extension-table-header";
const BUTTONS: CmsEditorButton[] = [
{
selector: ".tiptap-emph",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleItalic().run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -24,14 +24,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleItalic()
.run();
- }
+ },
},
{
selector: ".tiptap-strong-emph",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleBold().run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -39,14 +39,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleBold()
.run();
- }
+ },
},
{
selector: ".tiptap-code",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleCode().run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -54,14 +54,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleCode()
.run();
- }
+ },
},
{
selector: ".tiptap-strikethrough",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleStrike().run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -69,11 +69,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleStrike()
.run();
- }
+ },
},
{
selector: ".tiptap-subscript",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -81,7 +81,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleSubscript()
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -89,11 +89,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleSubscript()
.run();
- }
+ },
},
{
selector: ".tiptap-superscript",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -101,7 +101,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleSuperscript()
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -109,11 +109,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleSuperscript()
.run();
- }
+ },
},
{
selector: ".tiptap-h1",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -121,7 +121,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 1 })
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -129,11 +129,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 1 })
.run();
- }
+ },
},
{
selector: ".tiptap-h2",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -141,7 +141,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 2 })
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -149,11 +149,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 2 })
.run();
- }
+ },
},
{
selector: ".tiptap-h3",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -161,7 +161,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 3 })
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -169,11 +169,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 3 })
.run();
- }
+ },
},
{
selector: ".tiptap-h5",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -181,7 +181,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 5 })
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -189,11 +189,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 5 })
.run();
- }
+ },
},
{
selector: ".tiptap-h6",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -201,7 +201,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 6 })
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -209,14 +209,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 6 })
.run();
- }
+ },
},
{
selector: ".tiptap-paragraph",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().clearNodes().run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -224,11 +224,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.clearNodes()
.run();
- }
+ },
},
{
selector: ".tiptap-blockquote",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -236,7 +236,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleBlockquote()
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -244,11 +244,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleBlockquote()
.run();
- }
+ },
},
{
selector: ".tiptap-codeblock",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -256,7 +256,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleCodeBlock()
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -264,11 +264,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleCodeBlock()
.run();
- }
+ },
},
{
selector: ".tiptap-ul",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -276,7 +276,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleBulletList()
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -284,11 +284,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleBulletList()
.run();
- }
+ },
},
{
selector: ".tiptap-ol",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@@ -296,7 +296,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleOrderedList()
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -304,14 +304,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleOrderedList()
.run();
- }
+ },
},
{
selector: ".cms-editor-insert-table-dialog",
- command: cmsEditor => {
+ command: (cmsEditor) => {
return true;
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -319,11 +319,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.insertTable()
.run();
- }
+ },
},
{
selector: ".cms-editor-insert-table-dialog .btn-success",
- command: cmsEditor => {
+ command: (cmsEditor) => {
const dialog = cmsEditor
.getEditorElem()
.querySelector(".cms-editor-insert-table-dialog");
@@ -351,19 +351,41 @@ const BUTTONS: CmsEditorButton[] = [
.getEditor()
.chain()
.focus()
- .insertTable({ cols: cols, rows: rows, headerRow: headerRow })
+ .insertTable({
+ allowTableNodeSelection: true,
+ cellMinWidth: 150,
+ cols: cols,
+ headerRow: headerRow,
+ resizable: true,
+ rows: rows,
+ })
.run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return true;
- }
+ },
},
{
- selector: ".tiptap-insert-table-row",
- command: cmsEditor => {
+ selector: ".tiptap-insert-table-row-before",
+ command: (cmsEditor) => {
+ return cmsEditor.getEditor().chain().focus().addRowBefore().run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .addRowBefore()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-insert-table-row-after",
+ command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().addRowAfter().run();
},
- can: cmsEditor => {
+ can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@@ -371,29 +393,158 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.addRowAfter()
.run();
- }
- }
- // ,
- // {
- // selector: "",
- // command: cmsEditor => {},
- // can: cmsEditor => {}
- // },
- // {
- // selector: "",
- // command: cmsEditor => {},
- // can: cmsEditor => {}
- // },
- // {
- // selector: "",
- // command: cmsEditor => {},
- // can: cmsEditor => {}
- // },
- // {
- // selector: "",
- // command: cmsEditor => {},
- // can: cmsEditor => {}
- // },
+ },
+ },
+ {
+ selector: ".tiptap-insert-table-column-before",
+ command: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .chain()
+ .focus()
+ .addColumnBefore()
+ .run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .addColumnBefore()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-insert-table-column-after",
+ command: (cmsEditor) => {
+ return cmsEditor.getEditor().chain().focus().addColumnAfter().run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .addColumnAfter()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-remove-table-row",
+ command: (cmsEditor) => {
+ return cmsEditor.getEditor().chain().focus().deleteRow().run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .deleteRow()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-remove-table-column",
+ command: (cmsEditor) => {
+ return cmsEditor.getEditor().chain().focus().deleteColumn().run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .deleteColumn()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-remove-table",
+ command: (cmsEditor) => {
+ return cmsEditor.getEditor().chain().focus().deleteTable().run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .deleteTable()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-toggle-table-header-row",
+ command: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .chain()
+ .focus()
+ .toggleHeaderRow()
+ .run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .toggleHeaderRow()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-toggle-table-header-column",
+ command: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .chain()
+ .focus()
+ .toggleHeaderColumn()
+ .run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .toggleHeaderColumn()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-merge-table-cells",
+ command: (cmsEditor) => {
+ return cmsEditor.getEditor().chain().focus().mergeCells().run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .mergeCells()
+ .run();
+ },
+ },
+ {
+ selector: ".tiptap-split-table-cell",
+ command: (cmsEditor) => {
+ return cmsEditor.getEditor().chain().focus().splitCell().run();
+ },
+ can: (cmsEditor) => {
+ return cmsEditor
+ .getEditor()
+ .can()
+ .chain()
+ .focus()
+ .splitCell()
+ .run();
+ },
+ },
// {
// selector: "",
// command: cmsEditor => {},
@@ -438,7 +589,7 @@ class CmsEditor {
for (const button of BUTTONS) {
const buttonElem = buttonsElem.querySelector(button.selector);
if (buttonElem) {
- buttonElem.addEventListener("click", event => {
+ buttonElem.addEventListener("click", (event) => {
event.preventDefault();
button.command(this);
});
@@ -477,7 +628,7 @@ class CmsEditor {
console.log(`editorElem = ${editorElem}`);
const saveButton = editorElem.querySelector(".cms-editor-save-button");
- saveButton?.addEventListener("click", event => this.save(event));
+ saveButton?.addEventListener("click", (event) => this.save(event));
}
protected async save(event: Event) {
@@ -491,9 +642,9 @@ class CmsEditor {
method: "POST",
credentials: "include",
headers: {
- "Content-Type": "application/x-www-form-urlencoded"
+ "Content-Type": "application/x-www-form-urlencoded",
},
- body: params
+ body: params,
});
if (response.ok) {
} else {
@@ -569,9 +720,9 @@ class CmsEditorBuilder {
Table.configure({ resizable: true }),
TableRow,
TableHeader,
- TableCell
+ TableCell,
],
- content: variant
+ content: variant,
});
return new CmsEditor(editor, this.editorElem, this.saveUrl);
@@ -581,7 +732,7 @@ class CmsEditorBuilder {
try {
const response = await fetch(variantUrl, {
method: "GET",
- credentials: "include"
+ credentials: "include",
});
if (response.ok) {
@@ -635,4 +786,4 @@ interface EditorParam {
editor: Editor;
}
-export { CmsEditor, CmsEditorBuilder, CmsEditorParameters };
\ No newline at end of file
+export { CmsEditor, CmsEditorBuilder, CmsEditorParameters };