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

Skeleton for Image Node for Tiptap

pull/10/head
Jens Pelzetter 2021-09-28 20:16:00 +02:00
parent a28673c8e2
commit ebdf9cfe41
2 changed files with 633 additions and 714 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -623,6 +623,14 @@
<img src="#{request.contextPath}/icons/cms-editor/table-split-cells.svg" />
</button>
</div>
<div class="px-2 cms-tiptap-editor-button-row cms-tiptap-editor-media">
<button
class="btn btn-outline-dark tiptap-insert-image"
title="#{CmsAdminMessage['cms_editor.buttons.media.insert_image']}"
type="button">
<bootstrap:svgIcon icon="image" />
</button>
</div>
</div>
<div
class="cms-tiptap-editor-canvas border"

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

@ -1,6 +1,6 @@
import "bootstrap";
import * as $ from "jquery";
import { ChainedCommands, Editor } from "@tiptap/core";
import { ChainedCommands, Editor, Node } from "@tiptap/core";
import Gapcursor from "@tiptap/extension-gapcursor";
import StarterKit from "@tiptap/starter-kit";
import Subscript from "@tiptap/extension-subscript";
@ -13,75 +13,46 @@ 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 => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.toggleItalic()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().toggleItalic().run();
},
},
{
selector: ".tiptap-strong-emph",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleBold().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.toggleBold()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().toggleBold().run();
},
},
{
selector: ".tiptap-code",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleCode().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.toggleCode()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().toggleCode().run();
},
},
{
selector: ".tiptap-strikethrough",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleStrike().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.toggleStrike()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().toggleStrike().run();
},
},
{
selector: ".tiptap-subscript",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.toggleSubscript()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleSubscript().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -89,19 +60,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleSubscript()
.run();
}
},
},
{
selector: ".tiptap-superscript",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.toggleSuperscript()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleSuperscript().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -109,11 +75,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleSuperscript()
.run();
}
},
},
{
selector: ".tiptap-h1",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@ -121,7 +87,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 1 })
.run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -129,11 +95,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 1 })
.run();
}
},
},
{
selector: ".tiptap-h2",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@ -141,7 +107,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 2 })
.run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -149,11 +115,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 2 })
.run();
}
},
},
{
selector: ".tiptap-h3",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@ -161,7 +127,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 3 })
.run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -169,11 +135,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 3 })
.run();
}
},
},
{
selector: ".tiptap-h5",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@ -181,7 +147,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 5 })
.run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -189,11 +155,11 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 5 })
.run();
}
},
},
{
selector: ".tiptap-h6",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor
.getEditor()
.chain()
@ -201,7 +167,7 @@ const BUTTONS: CmsEditorButton[] = [
.toggleHeading({ level: 6 })
.run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -209,34 +175,23 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeading({ level: 6 })
.run();
}
},
},
{
selector: ".tiptap-paragraph",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().clearNodes().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.clearNodes()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().clearNodes().run();
},
},
{
selector: ".tiptap-blockquote",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.toggleBlockquote()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleBlockquote().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -244,19 +199,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleBlockquote()
.run();
}
},
},
{
selector: ".tiptap-codeblock",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.toggleCodeBlock()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleCodeBlock().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -264,19 +214,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleCodeBlock()
.run();
}
},
},
{
selector: ".tiptap-ul",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.toggleBulletList()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleBulletList().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -284,19 +229,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleBulletList()
.run();
}
},
},
{
selector: ".tiptap-ol",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.toggleOrderedList()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleOrderedList().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -304,38 +244,28 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleOrderedList()
.run();
}
},
},
{
selector: ".cms-editor-insert-table-dialog",
command: cmsEditor => {
command: (cmsEditor) => {
return true;
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.insertTable()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().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");
if (!dialog) {
return false;
}
const rowsInput = dialog.querySelector(
"input#rows"
) as HTMLInputElement;
const colsInput = dialog.querySelector(
"input#cols"
) as HTMLInputElement;
const rowsInput = dialog.querySelector("input#rows") as HTMLInputElement;
const colsInput = dialog.querySelector("input#cols") as HTMLInputElement;
const headerRowInput = dialog.querySelector(
"input#headerRow"
) as HTMLInputElement;
@ -357,55 +287,38 @@ const BUTTONS: CmsEditorButton[] = [
cols: cols,
// headerRow: headerRow,
// resizable: true,
rows: rows
rows: rows,
})
.run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return true;
}
},
},
{
selector: ".tiptap-insert-table-row-before",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().addRowBefore().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.addRowBefore()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().addRowBefore().run();
},
},
{
selector: ".tiptap-insert-table-row-after",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().addRowAfter().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.addRowAfter()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().addRowAfter().run();
},
},
{
selector: ".tiptap-insert-table-column-before",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.addColumnBefore()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().addColumnBefore().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -413,79 +326,50 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.addColumnBefore()
.run();
}
},
},
{
selector: ".tiptap-insert-table-column-after",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().addColumnAfter().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.addColumnAfter()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().addColumnAfter().run();
},
},
{
selector: ".tiptap-remove-table-row",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().deleteRow().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.deleteRow()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().deleteRow().run();
},
},
{
selector: ".tiptap-remove-table-column",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().deleteColumn().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.deleteColumn()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().deleteColumn().run();
},
},
{
selector: ".tiptap-remove-table",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().deleteTable().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.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();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleHeaderRow().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -493,19 +377,14 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeaderRow()
.run();
}
},
},
{
selector: ".tiptap-toggle-table-header-column",
command: cmsEditor => {
return cmsEditor
.getEditor()
.chain()
.focus()
.toggleHeaderColumn()
.run();
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().toggleHeaderColumn().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
@ -513,43 +392,41 @@ const BUTTONS: CmsEditorButton[] = [
.focus()
.toggleHeaderColumn()
.run();
}
},
},
{
selector: ".tiptap-merge-table-cells",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().mergeCells().run();
},
can: cmsEditor => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.mergeCells()
.run();
}
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().mergeCells().run();
},
},
{
selector: ".tiptap-split-table-cell",
command: cmsEditor => {
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().splitCell().run();
},
can: cmsEditor => {
can: (cmsEditor) => {
return cmsEditor.getEditor().can().chain().focus().splitCell().run();
},
},
{
selector: ".tiptap-insert-image",
command: (cmsEditor) => {
return cmsEditor.getEditor().chain().focus().setLibreCmsImage().run();
},
can: (cmsEditor) => {
return cmsEditor
.getEditor()
.can()
.chain()
.focus()
.splitCell()
.setLibreCmsImage()
.run();
}
}
// {
// selector: "",
// command: cmsEditor => {},
// can: cmsEditor => {}
// },
},
},
// {
// selector: "",
// command: cmsEditor => {},
@ -567,29 +444,68 @@ const BUTTONS: CmsEditorButton[] = [
// }
];
declare module "@tiptap/core" {
interface Commands<ReturnType> {
libreCmsImageNode: {
setLibreCmsImage: (attributes?: { language: string }) => ReturnType;
};
}
}
const ImageNode = Node.create({
name: "libreCmsImageNode",
content: "inline*",
marks: '',
group: 'block',
code: false,
defining: true,
addCommands() {
return {
setLibreCmsImage:
(attributes) =>
({ commands }) => {
return commands.setNode("libreCmsImageNode", attributes);
},
};
},
parseHTML() {
return [
{
tag: "figure",
"data-librecms-editor-node": "image",
},
];
},
renderHTML({ HTMLAttributes }) {
return ["figure", HTMLAttributes, ["img"], ["figcaption"]];
},
});
class CmsEditor {
private editor: Editor;
private editorElem: HTMLElement;
private saveUrl: string;
public constructor(
editor: Editor,
editorElem: HTMLElement,
saveUrl: string
) {
public constructor(editor: Editor, editorElem: HTMLElement, saveUrl: string) {
this.editor = editor;
this.editorElem = editorElem;
this.saveUrl = saveUrl;
console.log("initializing editor buttons");
const buttonsElem = editorElem.querySelector(
".cms-tiptap-editor-buttons"
);
const buttonsElem = editorElem.querySelector(".cms-tiptap-editor-buttons");
if (buttonsElem) {
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);
});
@ -628,7 +544,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) {
@ -642,16 +558,13 @@ 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 {
this.showSaveFailedMessage(
response.status,
response.statusText
);
this.showSaveFailedMessage(response.status, response.statusText);
}
} catch (error) {
this.showSaveFailedErrMessage(error as string);
@ -715,6 +628,7 @@ class CmsEditorBuilder {
element: canvasElement,
extensions: [
Gapcursor,
ImageNode,
StarterKit,
Subscript,
Superscript,
@ -722,13 +636,13 @@ class CmsEditorBuilder {
allowTableNodeSelection: true,
cellMinWidth: 100,
handleWidth: 25,
resizable: true
resizable: true,
}),
TableRow,
TableHeader,
TableCell
TableCell,
],
content: variant
content: variant,
});
return new CmsEditor(editor, this.editorElem, this.saveUrl);
@ -738,16 +652,13 @@ class CmsEditorBuilder {
try {
const response = await fetch(variantUrl, {
method: "GET",
credentials: "include"
credentials: "include",
});
if (response.ok) {
return await response.text();
} else {
this.showLoadVariantFailedMessage(
response.status,
response.statusText
);
this.showLoadVariantFailedMessage(response.status, response.statusText);
throw `Failed to load variant. Status: ${response.status}, Status Text: ${response.statusText}`;
}
} catch (error) {