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

Added Tiptab table plugin

pull/10/head
Jens Pelzetter 2021-08-21 17:27:38 +02:00
parent eeeb8a288f
commit 55fd96523d
4 changed files with 913 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ccm-cms/package-lock.json generated
View File

@ -3085,6 +3085,50 @@
"resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.0.0-beta.4.tgz",
"integrity": "sha512-rTQCnSnloSf6UN1y3zhu6j41MxrcCVWm5JIPX8VEt60WsOXJLAc/YJHLYi2FWhh/Psq8k78sPrmZbjYUrj3Dkw=="
},
"@tiptap/extension-table": {
"version": "2.0.0-beta.29",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.0.0-beta.29.tgz",
"integrity": "sha512-2yK4dZboe7+KQoJeM0p6v7xx+G/yKDWbbtDtYRnFecD2Oiz1u44DeMKGzVqPXcMYWxmCnAeUK0kcbmwnPYyBTg==",
"requires": {
"prosemirror-tables": "^1.1.1",
"prosemirror-view": "^1.19.3"
},
"dependencies": {
"prosemirror-model": {
"version": "1.14.3",
"resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.14.3.tgz",
"integrity": "sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ==",
"requires": {
"orderedmap": "^1.1.0"
}
},
"prosemirror-view": {
"version": "1.19.3",
"resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.19.3.tgz",
"integrity": "sha512-YP/ZzVwqPPwbHbJi97U2/CeyZ8PIHmLJt0gIhZWP8XfnuBRGG3y+jwLzUoBVmiuoUCy3R6PSB+pOATliGzLfPg==",
"requires": {
"prosemirror-model": "^1.14.3",
"prosemirror-state": "^1.0.0",
"prosemirror-transform": "^1.1.0"
}
}
}
},
"@tiptap/extension-table-cell": {
"version": "2.0.0-beta.14",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.14.tgz",
"integrity": "sha512-VoZ8SF8urU1/I3XnjDez2pbDO0h4cow+o8Xi6mhkMTXbxr212T674W7lu5DVMJ4Y1NF1eLe9eJ9kGJE43cA0+Q=="
},
"@tiptap/extension-table-header": {
"version": "2.0.0-beta.16",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.16.tgz",
"integrity": "sha512-L/r+ez4G7ZlninS4MwK4tYoVuA6bMMCz7OLvHGBmp24vZm7OA3qyUP4+GGtOXtdhv3aydeBis03gSrrB50aRWw=="
},
"@tiptap/extension-table-row": {
"version": "2.0.0-beta.14",
"resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.14.tgz",
"integrity": "sha512-mewdlTqgBCyzeZIZ6F08gfuzwsiYjQ7BvABo2UhDfr0+EN2UvfJj0bT3tGgeZhMxT5Js2DXL+c+ZOVJxWJ9faQ=="
},
"@tiptap/extension-text": {
"version": "2.0.0-beta.7",
"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.7.tgz",
@ -8640,6 +8684,18 @@
"prosemirror-transform": "^1.0.0"
}
},
"prosemirror-tables": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz",
"integrity": "sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA==",
"requires": {
"prosemirror-keymap": "^1.1.2",
"prosemirror-model": "^1.8.1",
"prosemirror-state": "^1.3.1",
"prosemirror-transform": "^1.2.1",
"prosemirror-view": "^1.13.3"
}
},
"prosemirror-transform": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz",

4
ccm-cms/package.json
View File

@ -23,6 +23,10 @@
"@tiptap/core": "^2.0.0-beta.46",
"@tiptap/extension-subscript": "^2.0.0-beta.4",
"@tiptap/extension-superscript": "^2.0.0-beta.4",
"@tiptap/extension-table": "^2.0.0-beta.29",
"@tiptap/extension-table-cell": "^2.0.0-beta.14",
"@tiptap/extension-table-header": "^2.0.0-beta.16",
"@tiptap/extension-table-row": "^2.0.0-beta.14",
"@tiptap/starter-kit": "^2.0.0-beta.43",
"bootstrap": "^4.6.0",
"bootstrap-icons": "^1.5.0",

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

File diff suppressed because it is too large Load Diff

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

@ -1,9 +1,14 @@
import "bootstrap";
import * as $ from "jquery";
import { Editor } from "@tiptap/core";
import Gapcursor from "@tiptap/extension-gapcursor";
import StarterKit from "@tiptap/starter-kit";
import Subscript from "@tiptap/extension-subscript";
import Superscript from "@tiptap/extension-superscript";
import Table from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
document.addEventListener("DOMContentLoaded", function (event) {
const viewButtons = document.querySelectorAll(
@ -353,6 +358,64 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
event.preventDefault();
editor.chain().focus().toggleCodeBlock().run();
});
buttonsElem
.querySelector(".tiptap-ul")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleBulletList().run();
});
buttonsElem
.querySelector(".tiptap-ol")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleOrderedList().run();
});
editor.on("selectionUpdate", ({ editor }) => {
console.log("Selection updated");
console.log(
`can insertRowBefore: ${editor
.can()
.chain()
.focus()
.addRowBefore()
.run()}`
);
});
buttonsElem
.querySelector(".cms-editor-insert-table-dialog .btn-success")
?.addEventListener("click", event => {
event.preventDefault();
const dialog = buttonsElem.querySelector(
".cms-editor-insert-table-dialog"
);
if (!dialog) {
return;
}
const rowsInput = dialog.querySelector(
"input#rows"
) as HTMLInputElement;
const colsInput = dialog.querySelector(
"input#cols"
) as HTMLInputElement;
const headerRowInput = dialog.querySelector(
"input#headerRow"
) as HTMLInputElement;
console.log(`rowsInput = ${rowsInput}`);
console.log(`colsInput = ${colsInput}`);
console.log(`headerRowInput = ${headerRowInput}`);
const rows = rowsInput.value;
const cols = colsInput.value;
const headerRow = JSON.parse(headerRowInput.value) as Boolean;
editor
.chain()
.focus()
.insertTable({ cols: cols, rows: rows, headerRow: headerRow })
.run();
});
}
async function showEditDialog(event: Event) {
@ -402,7 +465,16 @@ async function showEditDialog(event: Event) {
const editor = new Editor({
element: tiptapDiv,
extensions: [StarterKit, Subscript, Superscript],
extensions: [
Gapcursor,
StarterKit,
Subscript,
Superscript,
Table.configure({ resizable: true }),
TableRow,
TableHeader,
TableCell
],
content: variant
});