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

Prepared improvment of editor code structure (Typescript part)

pull/10/head
Jens Pelzetter 2021-08-26 20:37:12 +02:00
parent 61e6d6945c
commit 3f8f44e2e7
2 changed files with 146 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -775,9 +775,7 @@ tabindex="-1"
</h6>
</c:when>
<c:otherwise>
<div
id="#{cc.attrs.editorId}-edit-dialog-title"
>
<div id="#{cc.attrs.editorId}-edit-dialog-title">
#{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
</div>
</c:otherwise>
@ -791,9 +789,11 @@ tabindex="-1"
</button>-->
</div>
<!--<div class="modal-body">-->
<div class="cms-tiptap-editor"
<div
class="cms-tiptap-editor"
data-locale="#{cc.attrs.selectedLocale}"
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}">
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
>
<div class="cms-tiptap-editor-buttons d-flex mb-1">
<div class="px-2 cms-tiptap-editor-textformatting">
<button
@ -807,10 +807,7 @@ tabindex="-1"
</span> -->
</button>
<button
class="
btn btn-outline-dark
tiptap-strong-emph
"
class="btn btn-outline-dark tiptap-strong-emph"
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
type="button"
>
@ -830,58 +827,38 @@ tabindex="-1"
</span> -->
</button>
<button
class="
btn btn-outline-dark
tiptap-strikethrough
"
class="btn btn-outline-dark tiptap-strikethrough"
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
type="button"
>
<bootstrap:svgIcon
icon="type-strikethrough"
/>
<bootstrap:svgIcon icon="type-strikethrough" />
<!-- <span class="sr-only">
#{CmsAdminMessages['cms_editor.buttons.strikethrough']}
</span> -->
</button>
<button
class="
btn btn-outline-dark
tiptap-subscript
"
class="btn btn-outline-dark tiptap-subscript"
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
type="button"
>
<span aria-hidden="true"
>x<sub>n</sub></span
>
<span aria-hidden="true">x<sub>n</sub></span>
</button>
<button
class="
btn btn-outline-dark
tiptap-superscript
"
class="btn btn-outline-dark tiptap-superscript"
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
type="button"
>
<span aria-hidden="true"
>x<sup>n</sup></span
>
<span aria-hidden="true">x<sup>n</sup></span>
</button>
</div>
<div class="px-2 cms-tiptap-editor-headings">
<ui:repeat begin="1" end="6" var="level">
<button
class="
btn btn-outline-dark
tiptap-h#{level}
"
class="btn btn-outline-dark tiptap-h#{level}"
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
type="button"
>
<span aria-hidden="true"
>H#{level}</span
>
<span aria-hidden="true">H#{level}</span>
</button>
</ui:repeat>
<!-- <button class="btn btn-outline-dark tiptap-h2"
@ -892,30 +869,21 @@ tabindex="-1"
</div>
<div class="px-2 cms-tiptap-editor-paragraphs">
<button
class="
btn btn-outline-dark
tiptap-paragraph
"
class="btn btn-outline-dark tiptap-paragraph"
title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
type="button"
>
<bootstrap:svgIcon icon="type" />
</button>
<button
class="
btn btn-outline-dark
tiptap-blockquote
"
class="btn btn-outline-dark tiptap-blockquote"
title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
type="button"
>
<bootstrap:svgIcon icon="blockquote-left" />
</button>
<button
class="
btn btn-outline-dark
tiptap-codeblock
"
class="btn btn-outline-dark tiptap-codeblock"
title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
type="button"
>
@ -940,10 +908,7 @@ tabindex="-1"
</div>
<div class="px-2 cms-tiptap-editor-table">
<button
class="
btn btn-outline-dark
tiptap-insert-table
"
class="btn btn-outline-dark tiptap-insert-table"
data-target="#insert-table-dialog"
data-toggle="modal"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
@ -961,8 +926,10 @@ tabindex="-1"
<div class="modal-dialog">
<form class="modal-content">
<div class="modal-header">
<h4 class="modal-title"
id="insert-table-dialog-title">
<h4
class="modal-title"
id="insert-table-dialog-title"
>
#{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
</h4>
<button
@ -971,9 +938,7 @@ tabindex="-1"
data-dismiss="modal"
type="button"
>
<bootstrap:svgIcon
icon="x"
/>
<bootstrap:svgIcon icon="x" />
</button>
</div>
<div class="modal-body">
@ -1019,17 +984,28 @@ tabindex="-1"
</div>
</form>
</div>
<button
class="btn btn-outline-dark tiptap-insert-table-row"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row']}"
type="button"
>
Insert row
</button>
</div>
</div>
</div>
<div class="cms-tiptap-editor-canvas border"
<div
class="cms-tiptap-editor-canvas border"
data-locale="#{cc.attrs.selectedLocale}"
data-variant-url="#{cc.attrs.variantUrl}"></div>
data-variant-url="#{cc.attrs.variantUrl}"
></div>
<!--</div>-->
<!--<div class="modal-footer">-->
<div class="mt-3">
<a class="btn btn-warning cms-editor-cancel-button"
href="#{backUrl}">
<a
class="btn btn-warning cms-editor-cancel-button"
href="#{backUrl}"
>
#{cc.attrs.editDialogCancelLabel}
</a>
<button

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

@ -1,6 +1,6 @@
import "bootstrap";
import * as $ from "jquery";
import { Editor } from "@tiptap/core";
import { ChainedCommands, Editor } from "@tiptap/core";
import Gapcursor from "@tiptap/extension-gapcursor";
import StarterKit from "@tiptap/starter-kit";
import Subscript from "@tiptap/extension-subscript";
@ -10,6 +10,18 @@ import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
const BUTTONS: CmsEditorButton[] = [
{
selector: ".tiptap-emph",
command: editor => {
return editor.chain().focus().toggleItalic().run();
},
can: editor => {
return editor.can().chain().focus().toggleItalic().run();
}
}
];
document.addEventListener("DOMContentLoaded", function (event) {
// const viewButtons = document.querySelectorAll(
// ".cms-editor .cms-editor-variants .cms-editor-view-button"
@ -119,19 +131,31 @@ async function initEditor(editorElem: HTMLElement) {
const buttonsElem = editorElem.querySelector(".cms-tiptap-editor-buttons");
if (buttonsElem) {
initEditorButtons(editor, buttonsElem);
for (const button of BUTTONS) {
buttonsElem
.querySelector(button.selector)
?.addEventListener("click", event => {
event.preventDefault();
button.command(editor);
});
}
} else {
console.error("editorButtons are null");
return;
}
editor.on("selectionUpdate", (editorParam: EditorParam) => {
// ToDo
});
}
function initEditorButtons(editor: Editor, buttonsElem: Element) {
buttonsElem
.querySelector(".tiptap-emph")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleItalic().run();
});
// buttonsElem
// .querySelector(".tiptap-emph")
// ?.addEventListener("click", event => {
// event.preventDefault();
// editor.chain().focus().toggleItalic().run();
// });
buttonsElem
.querySelector(".tiptap-strong-emph")
@ -208,18 +232,6 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
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 => {
@ -252,6 +264,25 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
.run();
$("#insert-table-dialog").modal("hide");
});
buttonsElem
.querySelector(".cms-editor-insert-table-row")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().addRowAfter().run();
});
editor.on("selectionUpdate", ({ editor }) => {
console.log("Selection updated");
console.log(
`can insertRowAfter: ${editor
.can()
.chain()
.focus()
.addRowAfter()
.run()}`
);
});
}
async function showEditDialog(event: Event) {
@ -459,3 +490,13 @@ async function showViewDialog(event: Event) {
const viewDialogJquery = $(`#${viewDialogId}`) as any;
viewDialogJquery.modal("toggle");
}
interface CmsEditorButton {
selector: string;
command: (editor: Editor) => boolean;
can: (editor: Editor) => boolean;
}
interface EditorParam {
editor: Editor;
}