+
+
diff --git a/How to/Disable Default Hotkeys and Implement Custom Actions/src/index.css b/How to/Disable Default Hotkeys and Implement Custom Actions/src/index.css
new file mode 100644
index 0000000..ff41a99
--- /dev/null
+++ b/How to/Disable Default Hotkeys and Implement Custom Actions/src/index.css
@@ -0,0 +1,819 @@
+#pdfviewer {
+ height: 640px;
+}
+
+#linear-pdfviewer {
+ width: fit-content;
+}
+
+#uploader-pdfviewer {
+ display: none;
+}
+
+.content-wrapper-pdfviewer {
+ border: 1px dashed #c3c3cc;
+ position: relative;
+ text-align: center;
+ padding: 20px 0 10px;
+}
+
+.e-pv-e-sign.control-section {
+ margin-top: 0px !important;
+}
+
+#e-pv-e-sign-userMenu .e-input-value {
+ width: 84% !important;
+}
+
+.e-pv-e-sign-user-dropdown .e-input-group-icon.e-ddl-icon.e-search-icon {
+ padding: 0px ;
+}
+
+.e-pv-sign-hide-toolbar {
+ display: none;
+}
+
+.e-pv-sign-show-toolbar {
+ display: block;
+}
+
+.e-pv-fit-page-icon::before {
+ content: '\e91b';
+ font-family: "e-icons-pv";
+}
+
+@font-face {
+ font-family: "e-icons-pv";
+ font-style: normal;
+ font-weight: normal;
+ src: url(data:application/x-font-ttf;charset=utf-8;base64,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ZWd1bGFyY3VzdG9tLXRvb2xiYXJbMTkwOF1jdXN0b20tdG9vbGJhclsxOTA4XVZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJbMTkwOF1Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAWwAxADkAMAA4AF0AVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype');
+}
+
+.e-pv-e-sign-form-field-property {
+ width: 72px;
+ height: 72px;
+ margin: 9px;
+ border: 1px solid lightgrey !important;
+ border-radius: 8px;
+ display: grid;
+ place-content: center;
+ font-size: 12px;
+}
+
+#e-pv-e-sign-download {
+ width: 115px;
+ height: 32px;
+ flex-shrink: 0;
+ border-radius: 16px;
+ border: 1px solid var(--Color-variables-outline, #79747E);
+}
+
+#e-pv-e-sign-finishbtn {
+ width: 115px !important;
+ height: 28px;
+ padding: 0;
+ font-size: 12px;
+ flex-shrink: 0;
+ border-radius: 16px;
+}
+
+.e-pv-e-sign-user-dropdown .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before,
+.e-pv-e-sign-user-dropdown .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after {
+ width: 0px;
+}
+
+#e-pv-e-sign-user-field {
+ color: #222933;
+ font-family: Heebo, open sans, "sans-serif", -apple-system, BlinkMacSystemFont;
+ border-radius: 4px;
+ display: flex;
+ position: relative;
+
+}
+
+#e-pv-e-sign-toolbar-user-viewer.e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
+ margin-left: 0px !important;
+}
+
+#e-pv-e-sign-toolbar-user-viewer {
+ box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 1px 0px rgba(0, 0, 0, 0.30);
+ z-index: 1111;
+}
+
+.e-pv-e-sign-form-field-property-mob {
+ border: none !important;
+ box-shadow: none;
+}
+
+.e-pv-e-sign-toolbar-user-viewer,
+.e-pv-e-sign-toolbar-user-viewer-mob {
+ z-index: 1001;
+ width: 100% !important;
+ height: 48px !important;
+ box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+}
+
+#e-pv-e-sign-defaultSidebar {
+ height: 640px;
+ position: absolute;
+ box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
+}
+
+.e-pv-e-sign-user-dropdown> :first-child {
+ border: none !important;
+}
+
+#magnificationToolbar {
+ background: transparent;
+ height: auto;
+ min-height: 56px;
+ width: auto;
+ border: none;
+ position: absolute;
+ z-index: 900;
+ top: calc(100% - 140px);
+ left: calc(100% - 150px);
+ transform: rotate(90deg);
+}
+
+div#magnificationToolbar.e-toolbar .e-toolbar-items {
+ background: transparent;
+ padding: 2px 3px 2px 2px;
+}
+
+#magnificationToolbar.e-toolbar .e-tbar-btn {
+ border-radius: 50%;
+ min-height: 30px;
+ min-width: 30px;
+ border: 1px solid #c8c8c8;
+ transform: rotate(90deg);
+}
+
+#customToolbar {
+ top: 20px;
+ z-index: 900;
+}
+
+.e-bookmark-popup {
+ height: 300px;
+ max-width: 300px;
+}
+
+.e-text-search-popup {
+ height: 104px;
+ max-width: 348px;
+}
+
+.e-custom-search-input {
+ width: 234px;
+}
+
+.e-text-search-popup .e-footer-content,
+.e-bookmark-popup .e-footer-content {
+ padding: 0;
+ height: 0;
+}
+
+.search-button,
+.search-button:disabled,
+.search-button:focus,
+.search-button:hover {
+ background: transparent;
+ box-shadow: none;
+}
+
+#popup .e-dlg-content {
+ padding-left: 0;
+ padding-bottom: 0;
+}
+
+.e-pv-bookmarks {
+ min-width: 234px;
+}
+
+.e-pv-current-page-number {
+ width: 46px;
+ height: 28px;
+ text-align: center;
+}
+
+.material .e-pv-current-page-number {
+ border-width: 1px;
+}
+
+.e-btn-icon.e-pv-zoom-out-icon.e-icons {
+ transform: rotate(90deg);
+}
+
+.flex-container {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.e-pv-flex-container{
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.render-mode-info {
+ background: none;
+ border: none;
+ padding-left: 0px;
+}
+
+.render-mode-info .render-mode-info-icon {
+ height: 16px;
+ width: 16px;
+}
+
+.switchLabel {
+ font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.24px;
+ text-align: right;
+ font-size: 14px;
+ margin-bottom: 3px;
+}
+
+.e-pv-switchLabel{
+ font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.24px;
+ text-align: right;
+ font-size: 14px;
+}
+
+.render-mode-info .render-mode-info-icon::before {
+ line-height: normal;
+}
+
+.buttonSwitch {
+ Width: 40px;
+ Height: 24px;
+}
+
+.e-pv-buttonSwitch {
+ Width: 40px;
+ Height: 24px;
+}
+
+.pdfviewer-property-section {
+ padding: 20px 15px;
+}
+
+.pdfviewer-contextmenu-checkbox-label {
+ padding: 10px;
+}
+
+.pdfviewer-control-section {
+ border-right: 1px solid #D7D7D7;
+}
+
+.e-pv-pdfviewer-control-section {
+ border-right: 1px solid #D7D7D7;
+}
+
+.pdfviewer-property-container {
+ padding: 20px 15px;
+}
+
+.pdfviewer-document-list {
+
+ #defaultDialog {
+ left: 23%;
+ top: 0% ! important;
+ }
+
+ #targetElement .dlgbtn {
+ margin-right: 10px;
+ }
+
+ @media screen and (min-width: 150px) and (max-width: 480px) {
+ .control-section {
+ margin-bottom: 30px;
+ }
+
+ .control-wrapper {
+ margin-bottom: 0px;
+ }
+ }
+
+ #defaultDialog .form-title {
+ width: 100%;
+ text-align: center;
+ padding: 10px;
+ font-size: 16px;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.70);
+ }
+
+ #defaultDialog .e-error,
+ #defaultDialog .e-float-text {
+ font-weight: 500;
+ }
+
+ #defaultDialog .e-custom-label {
+ font-size: 14px;
+ font-weight: 500;
+ margin-left: 20px;
+ }
+
+ #defaultDialog #formId {
+ padding-top: 10px;
+ border: 1px solid #ccc;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
+ border-radius: 5px;
+ background: #f9f9f9;
+ height: 250px;
+ overflow-y: scroll;
+ }
+
+ .material-dark #defaultDialog #formId,
+ .material3-dark #defaultDialog #formId,
+ .bootstrap5-dark #defaultDialog #formId {
+ background: #212529;
+ }
+
+ .bootstrap-dark #defaultDialog #formId {
+ background: #1a1a1a;
+ }
+
+ .fabric-dark #defaultDialog #formId {
+ background: #201f1f;
+ }
+
+ .tailwind-dark #defaultDialog #formId {
+ background: #1f2937;
+ }
+
+ .fluent-dark #defaultDialog #formId {
+ background: #111111;
+ }
+
+ .e-pv-fit-page-icon::before {
+ content: '\e91b';
+ font-family: "e-icons";
+ }
+
+
+ .material-dark #defaultDialog .form-title,
+ .material3-dark #defaultDialog .form-title,
+ .bootstrap-dark #defaultDialog .form-title,
+ .fabric-dark #defaultDialog .form-title,
+ .tailwind-dark #defaultDialog .form-title,
+ .bootstrap5-dark #defaultDialog .form-title,
+ .fluent-dark #defaultDialog .form-title {
+ color: rgb(249 249 249);
+ }
+
+ .highcontrast #defaultDialog form,
+ .highcontrast #defaultDialog .header {
+ color: #fff;
+ background: #000000;
+ }
+
+ #defaultDialog .header {
+ color: rgba(0, 0, 0, 0.7);
+ }
+
+ #defaultDialog .form-horizontal .form-group {
+ margin-left: 20px;
+ margin-right: 20px;
+ margin-bottom: 5px;
+ }
+
+ #defaultDialog .e-submit-btn {
+ height: 40px;
+ width: 150px;
+ }
+
+ #defaultDialog .e-reset-btn {
+ height: 40px;
+ width: 150px;
+ }
+
+ #defaultDialog .submitRow {
+ width: 320px;
+ margin: 0px auto;
+ height: 100px;
+ padding-top: 25px;
+ }
+
+ #defaultDialog #DialogChart {
+ text-align: center;
+ }
+
+ #defaultDialog {
+ max-height: 500px;
+ }
+
+ .file-name-container {
+ display: flex;
+ justify-content: left;
+ }
+
+ .file-name-content {
+ display: flex;
+ align-items: center;
+ }
+
+ .icon-and-text {
+ display: flex;
+ align-items: left;
+ }
+
+ .file-name-text {
+ text-align: center;
+ margin-left: 8px;
+ margin-top: 5px;
+ }
+}
+
+/*redaction style*/
+#e-pv-redact-sb-toolbar-secondary .e-input-group {
+ border: none !important;
+}
+
+#e-pv-redact-sb-panel.control-section .e-appbar {
+ height: 36px;
+ font-size: 14px !important;
+}
+
+#e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn {
+ flex-direction: column;
+}
+
+#e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
+ font-size: 18px;
+ padding: 4px !important;
+}
+
+#e-pv-redact-sb-toolbar {
+ height: 72px !important;
+}
+
+#e-pv-redact-sb-toolbar .e-toolbar-items {
+ gap: 5px;
+}
+
+#e-pv-redact-sb-toolbar .e-toolbar-item.e-separator {
+ height: 48px !important;
+}
+
+#e-pv-redact-sb-toolbar,
+#e-pv-redact-sb-toolbar.e-toolbar,
+#e-pv-redact-sb-toolbar-secondary {
+ border-left-width: 1px !important;
+ border-right-width: 1px !important;
+}
+
+.e-pv-redact-sb-toolbar,
+#e-pv-redact-sb-toolbar-secondary {
+ border-top-width: 1px !important;
+ border: 0 solid var(--color-sf-border-light);
+ --color-sf-border-light: #e0e0e0;
+}
+
+.e-pv-current-page-number {
+ font-size: 12px;
+}
+
+.e-pv-total-page-number {
+ font-weight: 400;
+}
+
+.e-pv-redact-sb-black-out-container .black-out {
+ background-color: black;
+ width: 18px !important;
+ height: 18px !important;
+ border: 1px solid white;
+ border-radius: 3px;
+ margin: 4px !important;
+}
+
+.e-pv-redact-sb-white-out-container .white-out {
+ background-color: white;
+ width: 18px !important;
+ height: 18px !important;
+ border: 1px solid black;
+ border-radius: 3px;
+ margin: 4px !important;
+}
+
+.e-bigger .e-pv-redact-sb-black-out-container .black-out,
+.e-bigger .e-pv-redact-sb-black-out-container .white-out {
+ position: relative;
+ top: -4px;
+}
+
+.e-bigger #e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item.e-pv-redact-sb-black-out-container .e-tbar-btn.e-btn,
+.e-bigger #e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item.e-pv-redact-sb-white-out-container .e-tbar-btn.e-btn {
+ padding-top: 5px !important;
+}
+
+.e-bigger .e-pv-redact-sb-black-out-container .e-tbar-btn .e-tbar-btn-text,
+.e-bigger .e-pv-white-out-container .e-tbar-btn .e-tbar-btn-text {
+ padding: 2px 4px 7px 4px !important;
+}
+
+/*upload image*/
+#e-pv-redact-sb-dialog.e-dialog #e-pv-redact-sb-defaultfileupload.e-upload-files {
+ border: none !important;
+}
+
+#e-pv-redact-sb-panel.control-section #file-uploader {
+ display: flex;
+ border: 1px dashed #c8c6c4;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ border-radius: 6px;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-dlg-header-content {
+ border-bottom: 1px solid #C4C7C5 !important;
+ padding: 15px !important;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-footer-content {
+ border-top: 1px solid #C4C7C5 !important;
+ padding: 10px !important;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-dlg-header-content+.e-dlg-content {
+ padding: 20px !important;
+}
+
+#e-pv-redact-sb-panel.control-section .e-file-select-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#e-pv-redact-sb-dialog.e-dialog .e-footer-content .e-btn {
+ background: rgba(0, 0, 0, 0);
+ border-color: rgba(0, 0, 0, 0);
+ box-shadow: none;
+ color: #242424;
+}
+
+#e-pv-redact-sb-defaultfileupload .e-upload-files {
+ border: none !important;
+}
+
+.e-pv-redact-sb-image-source {
+ width: 70px;
+ height: 70px;
+}
+
+.e-pv-redact-sb-image-container {
+ box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4px;
+ gap: 5px;
+ border-radius: 4px;
+}
+
+.e-pv-redact-sb-image-list {
+ display: flex;
+ justify-content: center;
+ padding: 24px 15px;
+ gap: 35px;
+}
+
+.e-pv-redact-sb-image-container-selected {
+ border: 1px solid #757575 !important;
+}
+
+.e-pv-redact-sb-image-container:hover {
+ border: 1px solid #757575;
+}
+
+#e-pv-redact-sb-drop-area-wrap {
+ display: flex;
+ border: 1px dashed #c8c6c4;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+ padding: 16px;
+ border-radius: 6px;
+}
+
+#e-pv-redact-sb-defaultfileupload .e-upload {
+ border: none;
+ margin-top: 10px;
+ width: 100%;
+ height: 100%;
+}
+
+.e-icons.e-redaction:before {
+ content: "\e740";
+}
+
+#e-pv-redact-sb-panel.control-section .e-dlg-overlay {
+ background: none;
+ backdrop-filter: blur(2px) !important;
+}
+
+.e-pv-header-panel {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: sticky;
+ top: 0px;
+ z-index: 2;
+ background-color: white;
+ border-bottom: 1px solid #D7D7D7;
+ padding-bottom: 5px;
+ margin-bottom: 16px;
+}
+
+.e-pv-annot-inner-table td {
+ text-wrap: nowrap;
+ padding: 12px 12px 0 12px;
+ width: 50%;
+}
+
+.e-pv-main-panel {
+ border-left: 1px solid #D7D7D7;
+ height: 700px;
+ overflow-y: scroll;
+ padding-bottom: 0px;
+}
+
+.e-pv-input-item {
+ margin-top: 0px;
+}
+
+.e-pv-annot-inner-container {
+ margin-top: 15px;
+ border: 1px solid rgba(196, 199, 197, 1);
+ padding: 12px;
+}
+
+.e-pv-annot-inner-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+}
+
+.e-pv-pdfViewer-coordinate-table {
+ border-spacing: 0px;
+}
+
+.e-pv-pdfViewer-coordinate-table td {
+ border: 1px solid rgba(196, 199, 197, 1);
+ font-size: 11px;
+ text-align: center;
+ width: auto;
+ padding: 4px 0px;
+}
+
+.e-pv-property-panel-footer {
+ padding: 10px 0px 16px 0px;
+ position: sticky;
+ bottom: 0;
+ background-color: white;
+ z-index: 1;
+ border-top: 1px solid #D7D7D7;
+ margin-top: 16px;
+}
+
+.e-pv-annot-button-section {
+ text-align: center;
+ display: flex;
+ justify-content: end;
+ gap: 12px;
+ flex-wrap: wrap-reverse;
+}
+
+.e-pv-pdfviewer-input-title .e-pv-check-box-row {
+ padding: 5px;
+ margin-top: 16px;
+}
+.fluent2 .e-pv-pdfviewer-input-title .e-pv-check-box-row,
+.fluent2-dark .e-pv-pdfviewer-input-title .e-pv-check-box-row,
+.fluent2-highcontrast .e-pv-pdfviewer-input-title .e-pv-check-box-row {
+ padding: 0;
+ margin-top: 16px;
+}
+.e-pv-pdfviewer-input-title {
+ margin-top: 12px;
+ font-size: 12px;
+}
+
+.e-pv-table-items {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ gap: 2px;
+}
+
+.e-pv-pdfviewer-table-input-title {
+ margin-top: 6px;
+ font-size: 11px;
+}
+
+.e-pv-pdfviewer-text-content {
+ font-size: 12px;
+}
+
+.e-pv-annot-bounds-list {
+ border: 1px solid rgba(196, 199, 197, 1);
+ border-spacing: 0px;
+}
+
+.e-pv-annot-bounds-list td {
+ font-size: 11px;
+ text-align: center;
+ width: auto;
+ padding: 4px 0px;
+ border-bottom: 1px solid rgba(196, 199, 197, 1);
+}
+
+.e-pv-reply-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ justify-content: space-between;
+ padding: 12px;
+}
+.e-pv-reply-main-container {
+ flex-grow: 1;
+}
+.e-pv-replies {
+ overflow-y: auto;
+ max-height: 180px;
+ padding: 0px !important;
+}
+
+.inner-container {
+ margin-top: 15px;
+ border: 1px solid rgba(196, 199, 197, 1);
+ padding: 12px;
+}
+
+.reply-text {
+ width: 100%;
+ font-size: 12px;
+ word-break: break-word;
+}
+
+.upload-image {
+ width: 80px;
+ height: 80px;
+ margin: 12px;
+ border-radius: 5px;
+ border: 1px solid rgba(196, 199, 197, 1);
+ padding: 4px;
+}
+
+div .file-name {
+ font-size: 14px;
+ padding: 0px 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 500;
+ width: 90px;
+ white-space: nowrap;
+}
+.wrapper {
+ display: flex;
+ align-items: center;
+}
+
+.fluent-dark .e-pv-property-panel-footer, .fluent-dark .e-pv-header-panel {
+ background-color: #1B1A19;
+}
+
+.bootstrap5_3-dark .e-pv-property-panel-footer, .bootstrap5_3-dark .e-pv-header-panel{
+ background-color: #212529;
+}
+
+.highcontrast .e-pv-property-panel-footer, .highcontrast .e-pv-header-panel {
+ background-color: #000000;
+}
+
+.fluent2-highcontrast .e-pv-property-panel-footer, .fluent2-highcontrast .e-pv-header-panel,
+.material3-dark .e-pv-property-panel-footer, .material3-dark .e-pv-header-panel,
+.fluent2-dark .e-pv-property-panel-footer, .fluent2-dark .e-pv-header-panel {
+ background-color: #1C1B1F;
+}
+
+.tailwind3-dark .e-pv-property-panel-footer, .tailwind3-dark .e-pv-header-panel {
+ background: #111827;
+}
+
+.tailwind3-dark .e-pv-header-panel #e-pv-refresh-button-icon .e-btn-icon,
+.tailwind3 .e-pv-header-panel #e-pv-refresh-button-icon .e-btn-icon{
+ font-size: 18px;
+}
\ No newline at end of file
diff --git a/How to/Disable Default Hotkeys and Implement Custom Actions/src/index.js b/How to/Disable Default Hotkeys and Implement Custom Actions/src/index.js
new file mode 100644
index 0000000..57a87b6
--- /dev/null
+++ b/How to/Disable Default Hotkeys and Implement Custom Actions/src/index.js
@@ -0,0 +1,112 @@
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import * as React from 'react';
+import { useEffect } from 'react';
+import {
+ PdfViewerComponent,
+ Toolbar,
+ Magnification,
+ Navigation,
+ LinkAnnotation,
+ BookmarkView,
+ ThumbnailView,
+ Print,
+ TextSelection,
+ TextSearch,
+ Annotation,
+ FormFields,
+ FormDesigner,
+ PageOrganizer,
+ Inject,
+} from '@syncfusion/ej2-react-pdfviewer';
+
+function Default() {
+ let viewer;
+
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ const viewerElement = document.querySelector('.e-pv-viewer-container');
+
+ if (!viewerElement) return;
+
+ // Check if the active element is inside the viewer container
+ if (!viewerElement.contains(document.activeElement)) return;
+
+ if (e.ctrlKey) {
+ switch (e.key.toLowerCase()) {
+ case 's':
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Ctrl + S was pressed');
+ break;
+ case 'arrowup':
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Ctrl + Up Arrow was pressed');
+ break;
+ case 'arrowdown':
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Ctrl + Down Arrow was pressed');
+ break;
+ case 'arrowleft':
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Ctrl + Left Arrow was pressed');
+ break;
+ case 'arrowright':
+ e.preventDefault();
+ e.stopPropagation();
+ console.log('Ctrl + Right Arrow was pressed');
+ break;
+ default:
+ break;
+ }
+ }
+ };
+
+ document.addEventListener('keydown', handleKeyDown, true);
+
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ };
+ }, []);
+ return (
+
+
+ {/* Render the PDF Viewer */}
+
{
+ viewer = scope;
+ }}
+ id="container"
+ documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+ resourceUrl="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"
+ style={{ height: '640px' }}
+ >
+
+
+
+
+ );
+}
+export default Default;
+
+const root = createRoot(document.getElementById('sample'));
+root.render(
);