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

Additional functions for the text editor.

pull/10/head
Jens Pelzetter 2021-08-19 20:30:47 +02:00
parent c81e2757e7
commit 508720ca98
4 changed files with 108 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3075,6 +3075,16 @@
"resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.9.tgz", "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.9.tgz",
"integrity": "sha512-wk7iQ6JQzQ3ZJSR55k9fC20oI4U/k3H6ZzUSaQWCsWp3+GwPwYw3dHcFL2BqTwfTTuikb10Hh2YAG/bivVq1tw==" "integrity": "sha512-wk7iQ6JQzQ3ZJSR55k9fC20oI4U/k3H6ZzUSaQWCsWp3+GwPwYw3dHcFL2BqTwfTTuikb10Hh2YAG/bivVq1tw=="
}, },
"@tiptap/extension-subscript": {
"version": "2.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-2.0.0-beta.4.tgz",
"integrity": "sha512-eEjUXkgfeIBIgzdg3/GQGdta9Ww0Wwfiovn7ZvalRofRT4dnoiS0/83t1pQL81JT+ENow5jtx8RZHlaw/fMP4g=="
},
"@tiptap/extension-superscript": {
"version": "2.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.0.0-beta.4.tgz",
"integrity": "sha512-rTQCnSnloSf6UN1y3zhu6j41MxrcCVWm5JIPX8VEt60WsOXJLAc/YJHLYi2FWhh/Psq8k78sPrmZbjYUrj3Dkw=="
},
"@tiptap/extension-text": { "@tiptap/extension-text": {
"version": "2.0.0-beta.7", "version": "2.0.0-beta.7",
"resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.7.tgz", "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.7.tgz",

2
ccm-cms/package.json
View File

@ -21,6 +21,8 @@
}, },
"dependencies": { "dependencies": {
"@tiptap/core": "^2.0.0-beta.46", "@tiptap/core": "^2.0.0-beta.46",
"@tiptap/extension-subscript": "^2.0.0-beta.4",
"@tiptap/extension-superscript": "^2.0.0-beta.4",
"@tiptap/starter-kit": "^2.0.0-beta.43", "@tiptap/starter-kit": "^2.0.0-beta.43",
"bootstrap": "^4.6.0", "bootstrap": "^4.6.0",
"bootstrap-icons": "^1.5.0", "bootstrap-icons": "^1.5.0",

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

@ -2,7 +2,8 @@
<html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap" xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
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">
<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: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" <cc:attribute name="addMethod"
required="true" required="true"
@ -537,20 +538,64 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="cms-tiptap-editor-buttons mb-1"> <div class="cms-tiptap-editor-buttons mb-1">
<div class="border-end border-dark cms-tiptap-editor-textformatting">
<button class="btn btn-outline-dark tiptap-emph" <button class="btn btn-outline-dark tiptap-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 class="btn btn-outline-dark tiptap-strong-emph" <button class="btn btn-outline-dark tiptap-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']}
</span> </span> -->
</button> </button>
<button 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"
title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
type="button">
<bootstrap:svgIcon icon="type-strikethrough" />
<!-- <span class="sr-only">
#{CmsAdminMessages['cms_editor.buttons.strikethrough']}
</span> -->
</button>
<button class="btn btn-outline-dark tiptap-subscript"
title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
type="button">
<span aria-hidden="true">x<sub>n</sub></span>
</button>
<button class="btn btn-outline-dark tiptap-superscript"
title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
type="button">
<span aria-hidden="true">x<sup>n</sup></span>
</button>
</div>
<div class="border-end border-dark cms-tiptap-editor-headings">
<ui:repeat begin="1" end="6" var="level">
<button class="btn btn-outline-dark tiptap-h#{level}"
title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
type="button">
<span aria-hidden="true">H#{level}</sup></span>
</button>
</ui:repeat>
<!-- <button class="btn btn-outline-dark tiptap-h2"
title="#{CmsAdminMessages['cms_editor.buttons.h2']}"
type="button">
<bootstrap:svgIcon icon="type-h2" />
</button> -->
</div>
</div> </div>
<div class="cms-tiptap-editor border"> <div class="cms-tiptap-editor border">

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

@ -2,6 +2,8 @@ import "bootstrap";
import * as $ from "jquery"; import * as $ from "jquery";
import { Editor } from "@tiptap/core"; import { Editor } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit"; import StarterKit from "@tiptap/starter-kit";
import Subscript from "@tiptap/extension-subscript";
import Superscript from "@tiptap/extension-superscript";
document.addEventListener("DOMContentLoaded", function (event) { document.addEventListener("DOMContentLoaded", function (event) {
const viewButtons = document.querySelectorAll( const viewButtons = document.querySelectorAll(
@ -297,6 +299,39 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
event.preventDefault(); event.preventDefault();
editor.chain().focus().toggleBold().run(); editor.chain().focus().toggleBold().run();
}); });
buttonsElem
.querySelector(".tiptap-code")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleCode().run();
});
buttonsElem
.querySelector(".tiptap-strikethrough")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleStrike().run();
});
buttonsElem
.querySelector(".tiptap-subscript")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleSubscript().run();
});
buttonsElem
.querySelector(".tiptap-superscript")
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleSuperscript().run();
});
for(let i = 1; i <= 6; i++) {
buttonsElem
.querySelector(`.tiptap-h${i}`)
?.addEventListener("click", event => {
event.preventDefault();
editor.chain().focus().toggleHeading({level: i}).run();
});
}
} }
async function showEditDialog(event: Event) { async function showEditDialog(event: Event) {
@ -346,7 +381,7 @@ async function showEditDialog(event: Event) {
const editor = new Editor({ const editor = new Editor({
element: tiptapDiv, element: tiptapDiv,
extensions: [StarterKit], extensions: [StarterKit, Subscript, Superscript],
content: variant content: variant
}); });
@ -492,7 +527,6 @@ async function showViewDialog(event: Event) {
viewDialogBody.innerHTML = variant; viewDialogBody.innerHTML = variant;
const viewDialogJquery = $(`#${viewDialogId}`) as any; const viewDialogJquery = $(`#${viewDialogId}`) as any;
viewDialogJquery.modal("toggle"); viewDialogJquery.modal("toggle");
} }