From 508720ca98b0eae8a33eeb4cc497593c563a1152 Mon Sep 17 00:00:00 2001 From: Jens Pelzetter Date: Thu, 19 Aug 2021 20:30:47 +0200 Subject: [PATCH] Additional functions for the text editor. --- ccm-cms/package-lock.json | 10 +++ ccm-cms/package.json | 2 + .../components/librecms/cmsEditor.xhtml | 75 +++++++++++++++---- .../typescript/content-sections/cms-editor.ts | 38 +++++++++- 4 files changed, 108 insertions(+), 17 deletions(-) diff --git a/ccm-cms/package-lock.json b/ccm-cms/package-lock.json index 67801e01a..b42ea04e0 100644 --- a/ccm-cms/package-lock.json +++ b/ccm-cms/package-lock.json @@ -3075,6 +3075,16 @@ "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.9.tgz", "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": { "version": "2.0.0-beta.7", "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.7.tgz", diff --git a/ccm-cms/package.json b/ccm-cms/package.json index ed23c4031..ad0b8e220 100644 --- a/ccm-cms/package.json +++ b/ccm-cms/package.json @@ -21,6 +21,8 @@ }, "dependencies": { "@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", "bootstrap": "^4.6.0", "bootstrap-icons": "^1.5.0", diff --git a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml index a57fa9dcd..5fabb8131 100644 --- a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml +++ b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml @@ -2,7 +2,8 @@ + xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" + xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
- - +
+ + + + + + +
+
+ + + + +
diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts index f81a18964..03cdbebee 100644 --- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts +++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts @@ -2,6 +2,8 @@ import "bootstrap"; import * as $ from "jquery"; import { Editor } from "@tiptap/core"; import StarterKit from "@tiptap/starter-kit"; +import Subscript from "@tiptap/extension-subscript"; +import Superscript from "@tiptap/extension-superscript"; document.addEventListener("DOMContentLoaded", function (event) { const viewButtons = document.querySelectorAll( @@ -297,6 +299,39 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) { event.preventDefault(); 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) { @@ -346,7 +381,7 @@ async function showEditDialog(event: Event) { const editor = new Editor({ element: tiptapDiv, - extensions: [StarterKit], + extensions: [StarterKit, Subscript, Superscript], content: variant }); @@ -492,7 +527,6 @@ async function showViewDialog(event: Event) { viewDialogBody.innerHTML = variant; - const viewDialogJquery = $(`#${viewDialogId}`) as any; viewDialogJquery.modal("toggle"); }