LibreCCM
/
libreccm
3
0
Fork 0
Code Issues 10 Pull Requests Packages Releases Wiki Activity

Buttons for table editing.

pull/10/head
Jens Pelzetter 2021-08-30 15:15:33 +02:00
parent 05862f81eb
commit f136f75e11
3 changed files with 309 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -551,11 +551,76 @@
</div>
</div>
<button
class="btn btn-outline-dark tiptap-insert-table-row"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row']}"
class="btn btn-outline-dark tiptap-remove-table"
title="#{CmsAdminMessage['cms_editor.buttons.remove_table']}"
type="button"
>
Insert row
Remove table
</button>
<button
class="btn btn-outline-dark tiptap-insert-table-row-before"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_before']}"
type="button"
>
Insert row before
</button>
<button
class="btn btn-outline-dark tiptap-insert-table-row-after"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row_after']}"
type="button"
>
Insert row after
</button>
<button
class="btn btn-outline-dark tiptap-table-remove-row"
title="#{CmsAdminMessages['cms_editor.buttons.remove_table_row']}"
type="button">
Remove row
</button>
<button
class="btn btn-outline-dark tiptap-insert-table-column-before"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_column_before']}"
type="button"
>
Insert column before
</button>
<button
class="btn btn-outline-dark tiptap-insert-table-column-after"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_column_after']}"
type="button"
>
Insert column after
</button>
<button
class="btn btn-outline-dark tiptap-remove-table-column"
title="#{CmsAdminMessage['cms_editor.buttons.remove_table_column']}"
type="button"
>
Remove column
</button>
<button
class="btn btn-outline-dark tiptap-toggle-table-header-row"
title="#{CmsAdminMessage['cms_editor.buttons.toggle_header_rowy']}"
type="button">
Toggle Header row
</button>
<button
class="btn btn-outline-dark tiptap-toggle-table-header-column"
title="#{CmsAdminMessage['cms_editor.buttons.toggle_header_column']}"
type="button">
Toggle Header column
</button>
<button
class="btn btn-outline-dark tiptap-merge-table-cells"
title="#{CmsAdminMessage['cms_editor.buttons.merge-table-cells']}"
type="button">
Merge cells
</button>
<button
class="btn btn-outline-dark tiptap-split-table-cell"
title="#{CmsAdminMessage['cms_editor.buttons.split-table-cell']}"
type="button">
Split cell
</button>
</div>
</div>

2
ccm-cms/src/main/scss/content-sections/cms-admin.scss
View File

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

327
ccm-cms/src/main/typescript/content-sections/cms-editor.ts
View File

@ -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) {