diff --git a/apps/OpenSign/package-lock.json b/apps/OpenSign/package-lock.json index c9de1b9a3..311171281 100644 --- a/apps/OpenSign/package-lock.json +++ b/apps/OpenSign/package-lock.json @@ -34,6 +34,7 @@ "react-konva": "^18.2.10", "react-modal": "^3.16.1", "react-pdf": "^7.7.1", + "react-quill": "^2.0.0", "react-redux": "^9.1.0", "react-rnd": "^10.4.1", "react-router-dom": "^6.22.3", @@ -6209,6 +6210,14 @@ "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz", "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==" }, + "node_modules/@types/quill": { + "version": "1.3.10", + "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz", + "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==", + "dependencies": { + "parchment": "^1.1.2" + } + }, "node_modules/@types/range-parser": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.5.tgz", @@ -9432,6 +9441,25 @@ "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz", "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==" }, + "node_modules/deep-equal": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz", + "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==", + "dependencies": { + "is-arguments": "^1.1.1", + "is-date-object": "^1.0.5", + "is-regex": "^1.1.4", + "object-is": "^1.1.5", + "object-keys": "^1.1.1", + "regexp.prototype.flags": "^1.5.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/deep-extend": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", @@ -10990,6 +11018,11 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, + "node_modules/extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" + }, "node_modules/external-editor": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz", @@ -12616,6 +12649,21 @@ "node": ">= 10" } }, + "node_modules/is-arguments": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", + "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -16845,6 +16893,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/object-is": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", + "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/object-keys": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", @@ -17198,6 +17261,11 @@ "tslib": "^2.0.3" } }, + "node_modules/parchment": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", + "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -19138,6 +19206,50 @@ } ] }, + "node_modules/quill": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", + "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", + "dependencies": { + "clone": "^2.1.1", + "deep-equal": "^1.0.1", + "eventemitter3": "^2.0.3", + "extend": "^3.0.2", + "parchment": "^1.1.4", + "quill-delta": "^3.6.2" + } + }, + "node_modules/quill-delta": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", + "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "dependencies": { + "deep-equal": "^1.0.1", + "extend": "^3.0.2", + "fast-diff": "1.1.2" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/quill-delta/node_modules/fast-diff": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==" + }, + "node_modules/quill/node_modules/clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/quill/node_modules/eventemitter3": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==" + }, "node_modules/radix-ui": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.0.1.tgz", @@ -19749,6 +19861,20 @@ } } }, + "node_modules/react-quill": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz", + "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==", + "dependencies": { + "@types/quill": "^1.3.10", + "lodash": "^4.17.4", + "quill": "^1.3.7" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/react-reconciler": { "version": "0.29.0", "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz", diff --git a/apps/OpenSign/package.json b/apps/OpenSign/package.json index a90a5ea44..801361767 100644 --- a/apps/OpenSign/package.json +++ b/apps/OpenSign/package.json @@ -29,6 +29,7 @@ "react-konva": "^18.2.10", "react-modal": "^3.16.1", "react-pdf": "^7.7.1", + "react-quill": "^2.0.0", "react-redux": "^9.1.0", "react-rnd": "^10.4.1", "react-router-dom": "^6.22.3", diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js index eb8416b6d..94737f8a7 100644 --- a/apps/OpenSign/src/components/Header.js +++ b/apps/OpenSign/src/components/Header.js @@ -28,13 +28,15 @@ const Header = ({ showSidebar }) => { }, []); async function checkSubscription() { if (isEnableSubscription) { - const applogo = await getAppLogo(); - if (applogo) { - setAppLogo(applogo); - } else { - setAppLogo(localStorage.getItem("appLogo") || ""); - } const getIsSubscribe = await checkIsSubscribed(); + if (getIsSubscribe) { + const applogo = await getAppLogo(); + if (applogo) { + setAppLogo(applogo); + } else { + setAppLogo(localStorage.getItem("appLogo") || ""); + } + } setIsPro(getIsSubscribe); setIsSubscribe(getIsSubscribe); } diff --git a/apps/OpenSign/src/components/pdf/EditorToolbar.js b/apps/OpenSign/src/components/pdf/EditorToolbar.js new file mode 100644 index 000000000..0dd3f90d7 --- /dev/null +++ b/apps/OpenSign/src/components/pdf/EditorToolbar.js @@ -0,0 +1,157 @@ +import React from "react"; +import { Quill } from "react-quill"; + +// Custom Undo button icon component for Quill editor. You can import it directly +// from 'quill/assets/icons/undo.svg' but I found that a number of loaders do not +// handle them correctly +const CustomUndo = () => ( + +); + +// Redo button icon component for Quill editor +const CustomRedo = () => ( + +); + +// Undo and redo functions for Custom Toolbar +function undoChange() { + this.quill.history.undo(); +} +function redoChange() { + this.quill.history.redo(); +} + +// Add sizes to whitelist and register them +const Size = Quill.import("formats/size"); +Size.whitelist = ["extra-small", "small", "medium", "large"]; +Quill.register(Size, true); + +// Add fonts to whitelist and register them +const Font = Quill.import("formats/font"); +Font.whitelist = [ + "arial", + "comic-sans", + "courier-new", + "georgia", + "helvetica", + "lucida" +]; +Quill.register(Font, true); + +// Modules object for setting up the Quill editor +export const module1 = { + toolbar: { + container: "#toolbar1", + handlers: { + undo: undoChange, + redo: redoChange + } + }, + history: { + delay: 500, + maxStack: 100, + userOnly: true + } +}; +// Formats objects for setting up the Quill editor +export const formats = [ + "header", + "font", + "size", + "bold", + "italic", + "underline", + "align", + "strike", + "script", + "blockquote", + "background", + "list", + "bullet", + "indent", + "link", + "image", + "color", + "code-block" +]; +// Quill Toolbar component +export const QuillToolbar = ({ containerId }) => ( +
Digital Signature Request
This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " + - sender + - " directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign™ here.
Digital Signature Request
This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " + + senderEmail + + " directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign™ here.
Hi {{receiver_name}},
We hope this email finds you well. {{sender_name}} has requested you to review and sign {{document_title}}.
Your signature is crucial to proceed with the next steps as it signifies your agreement and authorization.
{{signing_url}}
If you have any questions or need further clarification regarding the document or the signing process, please contact the sender.
Thanks
Team OpenSign™
Digital Signature Request
This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " + - sender + - " directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign™ here.
Digital Signature Request
This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " + + senderEmail + + " directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign™ here.
Please add field for all recipients.
+ Please add field for all recipients. ) : isSendAlert.mssg === textWidget ? (Please confirm that you have filled the text field.
) : ( isSendAlert.mssg === "confirm" && ( -- Are you sure you want to send out this document for - signatures? -
+ <> ++ Are you sure you want to send out this document for + signatures? +
+ + <> +