Prepared improvment of editor code structure (Typescript part)
parent
61e6d6945c
commit
3f8f44e2e7
|
|
@ -5,10 +5,10 @@
|
|||
xmlns:cc="http://xmlns.jcp.org/jsf/composite"
|
||||
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
|
||||
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||||
>
|
||||
>
|
||||
<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."
|
||||
>
|
||||
>
|
||||
<!-- <cc:attribute
|
||||
name="addMethod"
|
||||
required="true"
|
||||
|
|
@ -57,19 +57,19 @@
|
|||
shortDescription="Title for the dialog."
|
||||
type="String"
|
||||
/>-->
|
||||
<cc:attribute
|
||||
<cc:attribute
|
||||
name="backUrl"
|
||||
required="true"
|
||||
shortDescription="The back URL."
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="canEdit"
|
||||
default="true"
|
||||
required="false"
|
||||
shortDescription="Can the current user edit the text?"
|
||||
type="boolean"
|
||||
/>
|
||||
/>
|
||||
<!-- <cc:attribute
|
||||
name="editButtonLabel"
|
||||
default="#{CmsAdminMessages['edit_button.label']}"
|
||||
|
|
@ -83,41 +83,41 @@
|
|||
required="false"
|
||||
shortDescription="Label for the cancel and close button of the edit dialog"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="editDialogSubmitLabel"
|
||||
default="#{CmsAdminMessages['save_button.label']}"
|
||||
required="false"
|
||||
shortDescription="Label for the submit button of the edit dialog"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="editDialogValueHelp"
|
||||
default="Value to update"
|
||||
required="false"
|
||||
shortDescription="Help text for the value field"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="editDialogValueLabel"
|
||||
default="Value"
|
||||
required="false"
|
||||
shortDescription="Label for the value field"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="editDialogTitle"
|
||||
default="#{CmsAdminMessages['text.edit.dialog.title']}"
|
||||
required="false"
|
||||
shortDescription="Title for the edit dialog"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="editMethod"
|
||||
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."
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<!-- <cc:attribute
|
||||
name="hasUnusedLocales"
|
||||
required="true"
|
||||
|
|
@ -130,13 +130,13 @@
|
|||
required="false"
|
||||
shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component."
|
||||
type="int"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="editorId"
|
||||
required="true"
|
||||
shortDescription="ID for the editor. Also used as prefix to generate IDs for some subcomponents"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<!-- <cc:attribute
|
||||
name="emptyText"
|
||||
default="#{text.editor.no_localized_values}"
|
||||
|
|
@ -149,38 +149,38 @@
|
|||
default="Failed to save."
|
||||
required="false"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="messageSaveSuccessful"
|
||||
default="Saved sucessfully."
|
||||
required="false"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="messageVariantLoadFailed"
|
||||
default="Failed to load variant."
|
||||
required="false"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="mode"
|
||||
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."
|
||||
required="false"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<cc:attribute
|
||||
name="objectIdentifier"
|
||||
required="true"
|
||||
shortDescription="Identifier of the object to which the localized string belongs"
|
||||
type="String"
|
||||
/>
|
||||
<cc:attribute
|
||||
/>
|
||||
<cc:attribute
|
||||
name="selectedLocale"
|
||||
required="true"
|
||||
shortDescription="The selected locale."
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<!-- <cc:attribute
|
||||
name="removeButtonLabel"
|
||||
default="Remove"
|
||||
|
|
@ -248,7 +248,7 @@
|
|||
required="true"
|
||||
shortDescription="Title/Heading of the editor widget"
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<!-- <cc:attribute
|
||||
name="unusedLocales"
|
||||
required="true"
|
||||
|
|
@ -266,7 +266,7 @@
|
|||
required="true"
|
||||
shortDescription="URL of the endpoint for retrieving a variant. The locale of the variant to retrieve is appended as last token."
|
||||
type="String"
|
||||
/>
|
||||
/>
|
||||
<!-- <cc:attribute name="viewButtonLabel" default="View" type="String" />
|
||||
<cc:attribute name="viewDialogTitle" default="View" type="String" />
|
||||
<cc:attribute
|
||||
|
|
@ -328,7 +328,7 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- <c:if test="#{cc.attrs.hasUnusedLocales}">
|
||||
<!-- <c:if test="#{cc.attrs.hasUnusedLocales}">
|
||||
<div class="mb-2">
|
||||
<div class="text-right">
|
||||
<button
|
||||
|
|
@ -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,29 +789,28 @@ tabindex="-1"
|
|||
</button>-->
|
||||
</div>
|
||||
<!--<div class="modal-body">-->
|
||||
<div class="cms-tiptap-editor"
|
||||
data-locale="#{cc.attrs.selectedLocale}"
|
||||
data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}">
|
||||
<div
|
||||
class="cms-tiptap-editor"
|
||||
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="px-2 cms-tiptap-editor-textformatting">
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-emph"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
|
||||
type="button"
|
||||
>
|
||||
>
|
||||
<bootstrap:svgIcon icon="type-italic" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.emph']}
|
||||
</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"
|
||||
>
|
||||
>
|
||||
<bootstrap:svgIcon icon="type-bold" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.strong_emph']}
|
||||
|
|
@ -823,65 +820,45 @@ tabindex="-1"
|
|||
class="btn btn-outline-dark tiptap-code"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.code']}"
|
||||
type="button"
|
||||
>
|
||||
>
|
||||
<bootstrap:svgIcon icon="code" />
|
||||
<!-- <span class="sr-only">
|
||||
#{CmsAdminMessages['cms_editor.buttons.code']}
|
||||
</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,33 +869,24 @@ 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"
|
||||
>
|
||||
>
|
||||
<bootstrap:svgIcon icon="code-square" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -927,28 +895,25 @@ tabindex="-1"
|
|||
class="btn btn-outline-dark tiptap-ul"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.ul']}"
|
||||
type="button"
|
||||
>
|
||||
>
|
||||
<bootstrap:svgIcon icon="list-ul" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-dark tiptap-ol"
|
||||
title="#{CmsAdminMessages['cms_editor.buttons.ol']}"
|
||||
type="button"
|
||||
>
|
||||
>
|
||||
<bootstrap:svgIcon icon="list-ol" />
|
||||
</button>
|
||||
</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']}"
|
||||
type="button"
|
||||
>
|
||||
>
|
||||
<bootstrap:svgIcon icon="table" />
|
||||
</button>
|
||||
<div
|
||||
|
|
@ -957,12 +922,14 @@ tabindex="-1"
|
|||
class="modal fade cms-editor-insert-table-dialog"
|
||||
id="insert-table-dialog"
|
||||
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
|
||||
|
|
@ -970,10 +937,8 @@ tabindex="-1"
|
|||
class="close"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
>
|
||||
<bootstrap:svgIcon
|
||||
icon="x"
|
||||
/>
|
||||
>
|
||||
<bootstrap:svgIcon icon="x" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
|
@ -982,30 +947,30 @@ tabindex="-1"
|
|||
inputId="rows"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.rows.label']}"
|
||||
name="rows"
|
||||
/>
|
||||
/>
|
||||
<bootstrap:formGroupNumber
|
||||
help="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.help']}"
|
||||
inputId="cols"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.cols.label']}"
|
||||
name="cols"
|
||||
/>
|
||||
/>
|
||||
<bootstrap:formCheck
|
||||
checked="true"
|
||||
inputId="headerRow"
|
||||
label="#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.header_row.label']}"
|
||||
name="headerRow"
|
||||
value="true"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="
|
||||
btn btn-warning
|
||||
cms-editor-cancel-button
|
||||
btn btn-warning
|
||||
cms-editor-cancel-button
|
||||
"
|
||||
data-dismiss="modal"
|
||||
type="button"
|
||||
>
|
||||
>
|
||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.close']}
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -1013,30 +978,41 @@ tabindex="-1"
|
|||
data-dismiss="modal"
|
||||
data-backdrop="false"
|
||||
type="submit"
|
||||
>
|
||||
>
|
||||
#{CmsDefaultStepsMessageBundle['cms_editor.dialogs.insert_table.submit']}
|
||||
</button>
|
||||
</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"
|
||||
data-locale="#{cc.attrs.selectedLocale}"
|
||||
data-variant-url="#{cc.attrs.variantUrl}"></div>
|
||||
<div
|
||||
class="cms-tiptap-editor-canvas border"
|
||||
data-locale="#{cc.attrs.selectedLocale}"
|
||||
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
|
||||
class="btn btn-success cms-editor-save-button"
|
||||
disabled="#{cc.attrs.canEdit ? '' : 'disabled'}"
|
||||
type="button"
|
||||
>
|
||||
>
|
||||
#{cc.attrs.editDialogSubmitLabel}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue