Canvas based Dx - integrate rich text + shortcuts

public/css/style.css

@@ -1039,6 +1039,12 @@ table.table-edit-sheet tbody tr td>select:focus {
     background: #fff;
     outline: 3px solid #4b88a633;
 }
+table.table-edit-sheet .ql-toolbar {
+    border-top: 0 !important;
+}
+table.table-edit-sheet .ql-container {
+    border-bottom: 0 !important;
+}
 .w-35 {
     width: 35%;
 }

resources/views/app/patient/canvas-sections/dx/form.blade.php

@@ -28,12 +28,12 @@ $formID = rand(0, 100000);
     <table class="table table-sm table-bordered mb-2 table-edit-sheet">
         <thead>
         <tr class="bg-light">
-            <th class="border-bottom-0">Title</th>
-            <th class="border-bottom-0">ICD</th>
-            <th class="border-bottom-0">Chr/Act.</th>
-            <th class="border-bottom-0 w-35">Detail</th>
-            <th class="border-bottom-0 w-35">Plan</th>
-            <th class="border-bottom-0"></th>
+            <th class="px-2 text-secondary border-bottom-0">Title</th>
+            <th class="px-2 text-secondary border-bottom-0">ICD</th>
+            <th class="px-2 text-secondary border-bottom-0">Chr/Act.</th>
+            <th class="px-2 text-secondary border-bottom-0 w-35">Detail</th>
+            <th class="px-2 text-secondary border-bottom-0 w-35">Plan</th>
+            <th class="px-2 text-secondary border-bottom-0"></th>
         </tr>
         </thead>
         <tbody>
@@ -47,8 +47,14 @@ $formID = rand(0, 100000);
                     <option value="Acute">Acute</option>
                 </select>
             </td>
-            <td><input type="text" class="form-control form-control-sm" v-model="item.detail"></td>
-            <td><input type="text" class="form-control form-control-sm" v-model="item.plan"></td>
+            <td><textarea type="text" class="form-control form-control-sm"
+                          dx-rte :data-index="index" data-field="detail"
+                          v-model="item.detail"></textarea>
+            </td>
+            <td><textarea type="text" class="form-control form-control-sm"
+                          dx-rte :data-index="index" data-field="plan"
+                          v-model="item.plan"></textarea>
+            </td>
             <td class="px-2">
                 <a href="#" v-on:click.prevent="removeItem(index)"
                    class="on-hover-opaque text-danger mt-1 d-inline-block">
@@ -75,7 +81,7 @@ $formID = rand(0, 100000);
                     items: <?= json_encode($contentData['items']) ?>
                 },
                 mounted: function() {
-
+                    this.initRTE();
                 },
                 watch: {
                     $data: {
@@ -89,6 +95,7 @@ $formID = rand(0, 100000);
                 },
                 methods: {
                     addItem: function() {
+                        let self = this;
                         this.items.push({
                             title: '',
                             icd: '',
@@ -97,6 +104,7 @@ $formID = rand(0, 100000);
                             plan: '',
                         });
                         Vue.nextTick(function() {
+                            self.initRTE();
                             $('.canvas-dx-title').last().focus();
                         });
                     },
@@ -115,7 +123,62 @@ $formID = rand(0, 100000);
                             plItems.push(plObject);
                         }
                         return plItems;
-                    }
+                    },
+                    initRTE: function() {
+                        let self = this;
+                        $('#dxSection textarea[dx-rte]').each(function() {
+
+                            $(this).wrap(
+                                $('<div class="rte-holder"/>')
+                                    .attr('data-shortcuts', '')
+                            );
+
+                            // give a unique id to this editor instance
+                            var editorID = Math.ceil(Math.random() * 99999);
+
+                            $('<div data-editor-id="' + editorID + '" data-field="' + this.name + '"/>')
+                                .html(this.value)
+                                .insertBefore(this);
+
+                            let vueField = $(this).attr('data-field'), vueIndex = +$(this).attr('data-index');
+
+                            $(this).remove();
+
+                            var qe = new Quill('[data-editor-id="' + editorID + '"]', {
+                                theme: 'snow',
+                                modules: {
+                                    keyboard: {
+                                        bindings: {
+                                            handleEnter: {
+                                                key: 13,
+                                                handler: function() {
+                                                    if(!$('.stag-shortcuts:visible').length) return true;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            });
+
+                            var toolbar = $(qe.container).prev('.ql-toolbar');
+
+                            // add button for new shortcut
+                            var newSCButton = $('<button class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
+                                'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
+                            toolbar.append(newSCButton);
+
+                            qe.on('text-change', function() {
+                                // ti.val(qe.root.innerHTML);
+                                self.items[vueIndex][vueField] = qe.root.innerHTML;
+                            });
+
+                            $(qe.container)
+                                .find('.ql-editor[contenteditable]')
+                                .attr('data-editor-id', editorID)
+                                .attr('with-shortcuts', 1);
+
+                        });
+                    },
                 }
             });
         }