Portal Secure Messages ckeditor replacement. (openemr#7595)

* Portal Updates for Usability study, UI/UX and bug fixes. - bug prevent version check in ckeditor. * start removing secure chat app. delete support secure chat app classes fix for portal ckeditor version check * - rename Ledger - fix CCDA shows in menu if not enabled - remove direction arrows from history button - reword demographics edit buttons - rename reports - Chang topNav to container instead of fluid * Add hide menu item flag to twig menu builder started adding cards to Dashboard from top menu rework action buttons in patient documents all cards consistent in view size using container-fluid some smaller UX issues solved Removed Accounting top menu and moved items to main menu. Still unsure what menu will look like when finished! * more UX refactors add more cards to dashboard * remove secure chat count in dropdown removing persist cards * change dashboard load order * more refactoring to dashboard cards created selection of available documents by cayegory from patient documents for download add separate flag to use custom report in portal globals reorg globals portal page WIP settings page * remove top level Reports Menu * review comments add globals to turn off insurance and portal upload to documents refactor dashboard naming and order * still trying to balance top menu with dashboard. maybe top needs to go! also selections naming conventions * add a prescription card remove id from secure message message display modify signatures plugin to always display on white background rewrote Help landing page- upload from dashboard. * fix create and reset portal credentials add global flag to toggle the use of email for username create or reset rename change password to generate new * theme change * refactor page tag title remove pid in demo change username required lenght from 12 to 8 char. * Introduce two portal document template to contrib dir - New Help with valid instructions - EU request to be forgotten * Replace ckeditor in portal - add back all dependencies for summernote - refactor messages for summernote
bradymiller · Jul 28, 2024 · 6f89f4b · 6f89f4b
1 parent 2fe4015
commit 6f89f4b
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 59 deletions.
diff --git a/config/config.yaml b/config/config.yaml
@@ -192,12 +192,22 @@ assets:
     angular-sanitize:
         basePath: '%assets_static_relative%/angular-sanitize/'
         script: angular-sanitize.min.js
+    angular-summernote:
+      basePath: '%assets_static_relative%/angular-summernote/dist/'
+      script: angular-summernote.min.js
     backbone:
         basePath: '%assets_static_relative%/backbone/'
         script: backbone-min.js
     checklist-model:
         basePath: '%assets_static_relative%/checklist-model/'
         script: checklist-model.js
+    summernote:
+      basePath: '%assets_static_relative%/summernote/dist/'
+      script: summernote-bs4.min.js
+      link: summernote-bs4.min.css
+    summernote-ext-nugget:
+      basePath: '%assets_static_relative%/summernote-nugget/plugins/nugget/'
+      script: summernote-ext-nugget.js
     underscore:
         basePath: '%assets_static_relative%/underscore/'
         script: underscore-min.js

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "@fortawesome/fontawesome-free": "6.4.2",
     "angular": "1.8.3",
     "angular-sanitize": "1.8.3",
+    "angular-summernote": "^0.8.1",
     "backbone": "1.5.0",
     "bootstrap": "4.6.2",
     "bootswatch": "4.6.2",
@@ -108,6 +109,7 @@
     "purecss": "3.0.0",
     "select2": "4.0.13",
     "sortablejs": "1.15.0",
+    "summernote": "^0.8.20",
     "tiff": "git+https://github.com/seikichi/tiff.js.git",
     "underscore": "1.13.6",
     "validate.js": "0.13.1"
@@ -118,6 +120,7 @@
     "jquery-panelslider": "https://github.com/eduardomb/jquery-panelslider/archive/1.0.0.tar.gz",
     "jquery-ui": "https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip",
     "jquery-ui-themes": "https://jqueryui.com/resources/download/jquery-ui-themes-1.12.1.zip",
+    "summernote-nugget": "https://github.com/pHAlkaline/summernote-plugins",
     "literallycanvas": "https://github.com/literallycanvas/literallycanvas/archive/v0.4.14.tar.gz",
     "react": "https://github.com/facebook/react/releases/download/v15.1.0/react-15.1.0.zip",
     "lforms": "https://clinicaltables.nlm.nih.gov/lforms-versions/lforms-33.0.0.zip"

diff --git a/portal/messaging/messages.php b/portal/messaging/messages.php
@@ -109,9 +109,9 @@ function getAuthPortalUsers()
     <meta charset="utf-8" />
     <?php
     if (IS_PORTAL) {
-        Header::setupHeader(['no_main-theme',  'portal-theme', 'ckeditor', 'angular', 'angular-sanitize', 'checklist-model', 'dompurify']);
+        Header::setupHeader(['no_main-theme',  'portal-theme', 'summernote', 'angular', 'angular-summernote', 'angular-sanitize', 'checklist-model', 'dompurify']);
     } else {
-        Header::setupHeader(['ckeditor', 'angular', 'angular-sanitize', 'checklist-model', 'dompurify']);
+        Header::setupHeader(['summernote', 'angular', 'angular-summernote', 'angular-sanitize', 'checklist-model', 'dompurify']);
     }
     ?>
     <title><?php echo xlt("Secure Messaging"); ?></title>
@@ -120,7 +120,7 @@ function getAuthPortalUsers()
 <body class="body_top">
     <script>
         (function () {
-            var app = angular.module("emrMessageApp", ['ngSanitize', "checklist-model"]);
+            var app = angular.module("emrMessageApp", ['ngSanitize', 'summernote', "checklist-model"]);
             app.controller('inboxCtrl', ['$scope', '$filter', '$http', '$window', function ($scope, $filter, $http, $window) {
                 $scope.date = new Date;
                 $scope.sortingOrder = 'id';
@@ -404,7 +404,7 @@ function getAuthPortalUsers()
                         compose.sender_name = $("#selForwardto option:selected").text();
                         compose.selrecip = compose.recipient_id;
                     } else {
-                        compose.inputBody = CKEDITOR.instances.inputBody.getData();
+                        compose.inputBody = $("#inputBody").summernote('code');
                     }
                     return true; // okay to submit
                 }
@@ -416,9 +416,7 @@ function getAuthPortalUsers()
                 $('#modalCompose').on('show.bs.modal', function (e) {
                     // Sets up the compose modal before we show it
                     $scope.compose = [];
-                    if ($scope.editor) {
-                        $scope.editor.destroy(true);
-                    }
+                    $('#inputBody').summernote('destroy');
                     var mode = $(e.relatedTarget).attr('data-mode');
                     $scope.compose.task = mode;
                     if (mode == 'forward') {
@@ -443,32 +441,7 @@ function getAuthPortalUsers()
                         $("textarea#finputBody").text(fmsg)
                         $scope.compose.noteid = $(e.relatedTarget).attr('data-noteid');
                     } else if (mode == 'reply') {
-                        $scope.editor = CKEDITOR.instances['inputBody'];
-                        if ($scope.editor) {
-                            $scope.editor.destroy(true);
-                        }
-                        $scope.editor = CKEDITOR.replace('inputBody', {
-                            toolbarGroups: [
-                                { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
-                                { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
-                                { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
-                                { name: 'forms', groups: [ 'forms' ] },
-                                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
-                                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
-                                { name: 'links', groups: [ 'links' ] },
-                                { name: 'insert', groups: [ 'insert' ] },
-                                { name: 'styles', groups: [ 'styles' ] },
-                                { name: 'colors', groups: [ 'colors' ] },
-                                { name: 'tools', groups: [ 'tools' ] },
-                                { name: 'others', groups: [ 'others' ] },
-                                { name: 'about', groups: [ 'about' ] }
-                            ],
-                            removeButtons: 'About,Table,Smiley,SpecialChar,PageBreak,Iframe,HorizontalRule,Anchor,Unlink,Link,NumberedList,BulletedList,Outdent,Indent,Blockquote,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Language,BidiRtl,BidiLtr,CopyFormatting,RemoveFormat,Superscript,Subscript,Strike,Underline,Italic,Bold,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,SelectAll,Scayt,Find,Replace,PasteFromWord,Templates,NewPage,ExportPdf,Maximize,ShowBlocks,Source,Save,Preview,Print,Cut,Copy,Paste,PasteText,TextColor,BGColor',
-                            height: 250,
-                            width: '100%',
-                            resize_maxHeight: 650,
-                            versionCheck: false
-                        });
+                        $('#inputBody').summernote({focus: true, height: '225px', width: '100%'});
                         $('#modalCompose .modal-header .modal-title').html(<?php xlt("Compose Reply Message"); ?>)
                         $scope.compose.task = mode;
                         //get data attributes of the clicked element (selected recipient) for replies only
@@ -489,34 +462,17 @@ function getAuthPortalUsers()
                         $scope.compose.recipient_id = recipId;
                         $scope.compose.noteid = chain;
                     } else {
-                        $scope.editor = CKEDITOR.instances['inputBody'];
-                        if ($scope.editor) {
-                            $scope.editor.destroy(true);
-                        }
-                        $scope.editor = CKEDITOR.replace('inputBody', {
-                            toolbarGroups: [
-                                { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
-                                { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
-                                { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
-                                { name: 'forms', groups: [ 'forms' ] },
-                                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
-                                { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
-                                { name: 'links', groups: [ 'links' ] },
-                                { name: 'insert', groups: [ 'insert' ] },
-                                { name: 'styles', groups: [ 'styles' ] },
-                                { name: 'colors', groups: [ 'colors' ] },
-                                { name: 'tools', groups: [ 'tools' ] },
-                                { name: 'others', groups: [ 'others' ] },
-                                { name: 'about', groups: [ 'about' ] }
-                            ],
-                            removeButtons: 'About,Table,Smiley,SpecialChar,PageBreak,Iframe,HorizontalRule,Anchor,Unlink,Link,NumberedList,BulletedList,Outdent,Indent,Blockquote,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Language,BidiRtl,BidiLtr,CopyFormatting,RemoveFormat,Superscript,Subscript,Strike,Underline,Italic,Bold,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,SelectAll,Scayt,Find,Replace,PasteFromWord,Templates,NewPage,ExportPdf,Maximize,ShowBlocks,Source,Save,Preview,Print,Cut,Copy,Paste,PasteText,TextColor,BGColor',
-                            height: 250,
+                        $('#inputBody').summernote({
                             width: '100%',
-                            resize_maxHeight: 650,
-                            versionCheck: false
+                            focus: true,
+                            height: '225px',
+                            popover: {
+                                image: [],
+                                link: [],
+                                air: []
+                            }
                         });
-
-                        $('#modalCompose .modal-header .modal-title').html(<?php xlt("Compose New Message"); ?>);
+                        $('#modalCompose .modal-header .modal-title').html(<?php xlt("Compose New Message"); ?>)
                         $scope.compose.task = 'add';
                         $(e.currentTarget).find('select[id="selSendto"]').prop("disabled", false);
                         $(e.currentTarget).find('input[name="title"]').prop("disabled", false);