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