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

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

@ -5,10 +5,10 @@
xmlns:cc="http://xmlns.jcp.org/jsf/composite" xmlns:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
> >
<cc:interface <cc:interface
shortDescription="A editor component for HTML texts using the TipTap editor. To use this component you have also to include the cms-editor.js file into the page." shortDescription="A editor component for HTML texts using the TipTap editor. To use this component you have also to include the cms-editor.js file into the page."
> >
<!-- <cc:attribute <!-- <cc:attribute
name="addMethod" name="addMethod"
required="true" required="true"
@ -57,19 +57,19 @@
shortDescription="Title for the dialog." shortDescription="Title for the dialog."
type="String" type="String"
/>--> />-->
<cc:attribute <cc:attribute
name="backUrl" name="backUrl"
required="true" required="true"
shortDescription="The back URL." shortDescription="The back URL."
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="canEdit" name="canEdit"
default="true" default="true"
required="false" required="false"
shortDescription="Can the current user edit the text?" shortDescription="Can the current user edit the text?"
type="boolean" type="boolean"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="editButtonLabel" name="editButtonLabel"
default="#{CmsAdminMessages['edit_button.label']}" default="#{CmsAdminMessages['edit_button.label']}"
@ -83,41 +83,41 @@
required="false" required="false"
shortDescription="Label for the cancel and close button of the edit dialog" shortDescription="Label for the cancel and close button of the edit dialog"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogSubmitLabel" name="editDialogSubmitLabel"
default="#{CmsAdminMessages['save_button.label']}" default="#{CmsAdminMessages['save_button.label']}"
required="false" required="false"
shortDescription="Label for the submit button of the edit dialog" shortDescription="Label for the submit button of the edit dialog"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogValueHelp" name="editDialogValueHelp"
default="Value to update" default="Value to update"
required="false" required="false"
shortDescription="Help text for the value field" shortDescription="Help text for the value field"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogValueLabel" name="editDialogValueLabel"
default="Value" default="Value"
required="false" required="false"
shortDescription="Label for the value field" shortDescription="Label for the value field"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editDialogTitle" name="editDialogTitle"
default="#{CmsAdminMessages['text.edit.dialog.title']}" default="#{CmsAdminMessages['text.edit.dialog.title']}"
required="false" required="false"
shortDescription="Title for the edit dialog" shortDescription="Title for the edit dialog"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="editMethod" name="editMethod"
required="true" required="true"
shortDescription="URL of the endpoint for editing/updating a value. The value of the locale to update is added after the provided URL, eg. /de for updating the german value." shortDescription="URL of the endpoint for editing/updating a value. The value of the locale to update is added after the provided URL, eg. /de for updating the german value."
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="hasUnusedLocales" name="hasUnusedLocales"
required="true" required="true"
@ -130,13 +130,13 @@
required="false" required="false"
shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component." shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component."
type="int" type="int"
/> />
<cc:attribute <cc:attribute
name="editorId" name="editorId"
required="true" required="true"
shortDescription="ID for the editor. Also used as prefix to generate IDs for some subcomponents" shortDescription="ID for the editor. Also used as prefix to generate IDs for some subcomponents"
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="emptyText" name="emptyText"
default="#{text.editor.no_localized_values}" default="#{text.editor.no_localized_values}"
@ -149,38 +149,38 @@
default="Failed to save." default="Failed to save."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="messageSaveSuccessful" name="messageSaveSuccessful"
default="Saved sucessfully." default="Saved sucessfully."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="messageVariantLoadFailed" name="messageVariantLoadFailed"
default="Failed to load variant." default="Failed to load variant."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="mode" name="mode"
default="full" default="full"
shortDescription="The editor mode. Use 'full' to enable all options including adding images etc. Use 'textonly' for a minimal version that only supports text editing, but does not allow insertation of images etc." shortDescription="The editor mode. Use 'full' to enable all options including adding images etc. Use 'textonly' for a minimal version that only supports text editing, but does not allow insertation of images etc."
required="false" required="false"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="objectIdentifier" name="objectIdentifier"
required="true" required="true"
shortDescription="Identifier of the object to which the localized string belongs" shortDescription="Identifier of the object to which the localized string belongs"
type="String" type="String"
/> />
<cc:attribute <cc:attribute
name="selectedLocale" name="selectedLocale"
required="true" required="true"
shortDescription="The selected locale." shortDescription="The selected locale."
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="removeButtonLabel" name="removeButtonLabel"
default="Remove" default="Remove"
@ -248,7 +248,7 @@
required="true" required="true"
shortDescription="Title/Heading of the editor widget" shortDescription="Title/Heading of the editor widget"
type="String" type="String"
/> />
<!-- <cc:attribute <!-- <cc:attribute
name="unusedLocales" name="unusedLocales"
required="true" required="true"
@ -266,7 +266,7 @@
required="true" required="true"
shortDescription="URL of the endpoint for retrieving a variant. The locale of the variant to retrieve is appended as last token." shortDescription="URL of the endpoint for retrieving a variant. The locale of the variant to retrieve is appended as last token."
type="String" type="String"
/> />
<!-- <cc:attribute name="viewButtonLabel" default="View" type="String" /> <!-- <cc:attribute name="viewButtonLabel" default="View" type="String" />
<cc:attribute name="viewDialogTitle" default="View" type="String" /> <cc:attribute name="viewDialogTitle" default="View" type="String" />
<cc:attribute <cc:attribute
@ -328,7 +328,7 @@
</div> </div>
</template> </template>
</div> </div>
<!-- <c:if test="#{cc.attrs.hasUnusedLocales}"> <!-- <c:if test="#{cc.attrs.hasUnusedLocales}">
<div class="mb-2"> <div class="mb-2">
<div class="text-right"> <div class="text-right">
<button <button
@ -775,9 +775,7 @@ tabindex="-1"
</h6> </h6>
</c:when> </c:when>
<c:otherwise> <c:otherwise>
<div <div id="#{cc.attrs.editorId}-edit-dialog-title">
id="#{cc.attrs.editorId}-edit-dialog-title"
>
#{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale} #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
</div> </div>
</c:otherwise> </c:otherwise>
@ -791,29 +789,28 @@ tabindex="-1"
</button>--> </button>-->
</div> </div>
<!--<div class="modal-body">--> <!--<div class="modal-body">-->
<div class="cms-tiptap-editor" <div
data-locale="#{cc.attrs.selectedLocale}" class="cms-tiptap-editor"
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"> data-locale="#{cc.attrs.selectedLocale}"
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
>
<div class="cms-tiptap-editor-buttons d-flex mb-1"> <div class="cms-tiptap-editor-buttons d-flex mb-1">
<div class="px-2 cms-tiptap-editor-textformatting"> <div class="px-2 cms-tiptap-editor-textformatting">
<button <button
class="btn btn-outline-dark tiptap-emph" class="btn btn-outline-dark tiptap-emph"
title="#{CmsAdminMessages['cms_editor.buttons.emph']}" title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="type-italic" /> <bootstrap:svgIcon icon="type-italic" />
<!-- <span class="sr-only"> <!-- <span class="sr-only">
#{CmsAdminMessages['cms_editor.buttons.emph']} #{CmsAdminMessages['cms_editor.buttons.emph']}
</span> --> </span> -->
</button> </button>
<button <button
class=" class="btn btn-outline-dark tiptap-strong-emph"
btn btn-outline-dark
tiptap-strong-emph
"
title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}" title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="type-bold" /> <bootstrap:svgIcon icon="type-bold" />
<!-- <span class="sr-only"> <!-- <span class="sr-only">
#{CmsAdminMessages['cms_editor.buttons.strong_emph']} #{CmsAdminMessages['cms_editor.buttons.strong_emph']}
@ -823,65 +820,45 @@ tabindex="-1"
class="btn btn-outline-dark tiptap-code" class="btn btn-outline-dark tiptap-code"
title="#{CmsAdminMessages['cms_editor.buttons.code']}" title="#{CmsAdminMessages['cms_editor.buttons.code']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="code" /> <bootstrap:svgIcon icon="code" />
<!-- <span class="sr-only"> <!-- <span class="sr-only">
#{CmsAdminMessages['cms_editor.buttons.code']} #{CmsAdminMessages['cms_editor.buttons.code']}
</span> --> </span> -->
</button> </button>
<button <button
class=" class="btn btn-outline-dark tiptap-strikethrough"
btn btn-outline-dark
tiptap-strikethrough
"
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}" title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
type="button" type="button"
> >
<bootstrap:svgIcon <bootstrap:svgIcon icon="type-strikethrough" />
icon="type-strikethrough"
/>
<!-- <span class="sr-only"> <!-- <span class="sr-only">
#{CmsAdminMessages['cms_editor.buttons.strikethrough']} #{CmsAdminMessages['cms_editor.buttons.strikethrough']}
</span> --> </span> -->
</button> </button>
<button <button
class=" class="btn btn-outline-dark tiptap-subscript"
btn btn-outline-dark
tiptap-subscript
"
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}" title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
type="button" type="button"
> >
<span aria-hidden="true" <span aria-hidden="true">x<sub>n</sub></span>
>x<sub>n</sub></span
>
</button> </button>
<button <button
class=" class="btn btn-outline-dark tiptap-superscript"
btn btn-outline-dark
tiptap-superscript
"
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}" title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
type="button" type="button"
> >
<span aria-hidden="true" <span aria-hidden="true">x<sup>n</sup></span>
>x<sup>n</sup></span
>
</button> </button>
</div> </div>
<div class="px-2 cms-tiptap-editor-headings"> <div class="px-2 cms-tiptap-editor-headings">
<ui:repeat begin="1" end="6" var="level"> <ui:repeat begin="1" end="6" var="level">
<button <button
class=" class="btn btn-outline-dark tiptap-h#{level}"
btn btn-outline-dark
tiptap-h#{level}
"
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}" title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
type="button" type="button"
> >
<span aria-hidden="true" <span aria-hidden="true">H#{level}</span>
>H#{level}</span
>
</button> </button>
</ui:repeat> </ui:repeat>
<!-- <button class="btn btn-outline-dark tiptap-h2" <!-- <button class="btn btn-outline-dark tiptap-h2"
@ -892,33 +869,24 @@ tabindex="-1"
</div> </div>
<div class="px-2 cms-tiptap-editor-paragraphs"> <div class="px-2 cms-tiptap-editor-paragraphs">
<button <button
class=" class="btn btn-outline-dark tiptap-paragraph"
btn btn-outline-dark
tiptap-paragraph
"
title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}" title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="type" /> <bootstrap:svgIcon icon="type" />
</button> </button>
<button <button
class=" class="btn btn-outline-dark tiptap-blockquote"
btn btn-outline-dark
tiptap-blockquote
"
title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}" title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="blockquote-left" /> <bootstrap:svgIcon icon="blockquote-left" />
</button> </button>
<button <button
class=" class="btn btn-outline-dark tiptap-codeblock"
btn btn-outline-dark
tiptap-codeblock
"
title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}" title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="code-square" /> <bootstrap:svgIcon icon="code-square" />
</button> </button>
</div> </div>
@ -927,28 +895,25 @@ tabindex="-1"
class="btn btn-outline-dark tiptap-ul" class="btn btn-outline-dark tiptap-ul"
title="#{CmsAdminMessages['cms_editor.buttons.ul']}" title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="list-ul" /> <bootstrap:svgIcon icon="list-ul" />
</button> </button>
<button <button
class="btn btn-outline-dark tiptap-ol" class="btn btn-outline-dark tiptap-ol"
title="#{CmsAdminMessages['cms_editor.buttons.ol']}" title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="list-ol" /> <bootstrap:svgIcon icon="list-ol" />
</button> </button>
</div> </div>
<div class="px-2 cms-tiptap-editor-table"> <div class="px-2 cms-tiptap-editor-table">
<button <button
class=" class="btn btn-outline-dark tiptap-insert-table"
btn btn-outline-dark
tiptap-insert-table
"
data-target="#insert-table-dialog" data-target="#insert-table-dialog"
data-toggle="modal" data-toggle="modal"
title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}" title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
type="button" type="button"
> >
<bootstrap:svgIcon icon="table" /> <bootstrap:svgIcon icon="table" />
</button> </button>
<div <div
@ -957,12 +922,14 @@ tabindex="-1"
class="modal fade cms-editor-insert-table-dialog" class="modal fade cms-editor-insert-table-dialog"
id="insert-table-dialog" id="insert-table-dialog"
tabindex="-1" tabindex="-1"
> >
<div class="modal-dialog"> <div class="modal-dialog">
<form class="modal-content"> <form class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" <h4
id="insert-table-dialog-title"> class="modal-title"
id="insert-table-dialog-title"
>
#{CmsAdminMessages['cms_editor.dialogs.insert_table.title']} #{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
</h4> </h4>
<button <button
@ -970,10 +937,8 @@ tabindex="-1"
class="close" class="close"
data-dismiss="modal" data-dismiss="modal"
type="button" type="button"
> >
<bootstrap:svgIcon <bootstrap:svgIcon icon="x" />
icon="x"
/>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -982,30 +947,30 @@ tabindex="-1"
inputId="rows" inputId="rows"
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}" label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
name="rows" name="rows"
/> />
<bootstrap:formGroupNumber <bootstrap:formGroupNumber
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}" help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
inputId="cols" inputId="cols"
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}" label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
name="cols" name="cols"
/> />
<bootstrap:formCheck <bootstrap:formCheck
checked="true" checked="true"
inputId="headerRow" inputId="headerRow"
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}" label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
name="headerRow" name="headerRow"
value="true" value="true"
/> />
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button <button
class=" class="
btn btn-warning btn btn-warning
cms-editor-cancel-button cms-editor-cancel-button
" "
data-dismiss="modal" data-dismiss="modal"
type="button" type="button"
> >
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']} #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
</button> </button>
<button <button
@ -1013,30 +978,41 @@ tabindex="-1"
data-dismiss="modal" data-dismiss="modal"
data-backdrop="false" data-backdrop="false"
type="submit" type="submit"
> >
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']} #{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
</button> </button>
</div> </div>
</form> </form>
</div> </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>
</div> </div>
<div class="cms-tiptap-editor-canvas border" <div
data-locale="#{cc.attrs.selectedLocale}" class="cms-tiptap-editor-canvas border"
data-variant-url="#{cc.attrs.variantUrl}"></div> data-locale="#{cc.attrs.selectedLocale}"
data-variant-url="#{cc.attrs.variantUrl}"
></div>
<!--</div>--> <!--</div>-->
<!--<div class="modal-footer">--> <!--<div class="modal-footer">-->
<div class="mt-3"> <div class="mt-3">
<a class="btn btn-warning cms-editor-cancel-button" <a
href="#{backUrl}"> class="btn btn-warning cms-editor-cancel-button"
href="#{backUrl}"
>
#{cc.attrs.editDialogCancelLabel} #{cc.attrs.editDialogCancelLabel}
</a> </a>
<button <button
class="btn btn-success cms-editor-save-button" class="btn btn-success cms-editor-save-button"
disabled="#{cc.attrs.canEdit ? '' : 'disabled'}" disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
type="button" type="button"
> >
#{cc.attrs.editDialogSubmitLabel} #{cc.attrs.editDialogSubmitLabel}
</button> </button>
</div> </div>

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

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