First stab

package-lock.json

@@ -20,6 +20,8 @@
                 "chart.js": "^2.9.4",
                 "clipboard": "^2.0.11",
                 "css-loader": "^5.0.0",
+                "dompurify": "^3.2.7",
+                "easymde": "^2.20.0",
                 "ekko-lightbox": "^5.1.1",
                 "imagemin": "^9.0.1",
                 "jquery-slimscroll": "^1.3.8",
@@ -2039,6 +2041,15 @@
                 "source-map": "^0.6.0"
             }
         },
+        "node_modules/@types/codemirror": {
+            "version": "5.60.16",
+            "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.16.tgz",
+            "integrity": "sha512-V/yHdamffSS075jit+fDxaOAmdP2liok8NSNJnAZfDJErzOheuygHZEhAJrfmk5TEyM32MhkZjwo/idX791yxw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/tern": "*"
+            }
+        },
         "node_modules/@types/connect": {
             "version": "3.4.38",
             "dev": true,
@@ -2168,6 +2179,12 @@
             "version": "7.0.15",
             "license": "MIT"
         },
+        "node_modules/@types/marked": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
+            "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==",
+            "license": "MIT"
+        },
         "node_modules/@types/mime": {
             "version": "1.3.5",
             "dev": true,
@@ -2258,6 +2275,22 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/@types/tern": {
+            "version": "0.23.9",
+            "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
+            "integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "*"
+            }
+        },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "license": "MIT",
+            "optional": true
+        },
         "node_modules/@types/ws": {
             "version": "8.5.10",
             "dev": true,
@@ -3750,6 +3783,21 @@
                 "node": ">=6"
             }
         },
+        "node_modules/codemirror": {
+            "version": "5.65.20",
+            "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.20.tgz",
+            "integrity": "sha512-i5dLDDxwkFCbhjvL2pNjShsojoL3XHyDwsGv1jqETUoW+lzpBKKqNTUWgQwVAOa0tUm4BwekT455ujafi8payA==",
+            "license": "MIT"
+        },
+        "node_modules/codemirror-spell-checker": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
+            "integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
+            "license": "MIT",
+            "dependencies": {
+                "typo-js": "*"
+            }
+        },
         "node_modules/codepage": {
             "version": "1.15.0",
             "license": "Apache-2.0",
@@ -4617,10 +4665,13 @@
             }
         },
         "node_modules/dompurify": {
-            "version": "2.5.8",
+            "version": "3.2.7",
-            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
-            "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+            "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
-            "optional": true
+            "license": "(MPL-2.0 OR Apache-2.0)",
+            "optionalDependencies": {
+                "@types/trusted-types": "^2.0.7"
+            }
         },
         "node_modules/domutils": {
             "version": "2.8.0",
@@ -4716,6 +4767,19 @@
                 "readable-stream": "^2.0.2"
             }
         },
+        "node_modules/easymde": {
+            "version": "2.20.0",
+            "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.20.0.tgz",
+            "integrity": "sha512-V1Z5f92TfR42Na852OWnIZMbM7zotWQYTddNaLYZFVKj7APBbyZ3FYJ27gBw2grMW3R6Qdv9J8n5Ij7XRSIgXQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/codemirror": "^5.60.10",
+                "@types/marked": "^4.0.7",
+                "codemirror": "^5.65.15",
+                "codemirror-spell-checker": "1.1.2",
+                "marked": "^4.1.0"
+            }
+        },
         "node_modules/ee-first": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6803,6 +6867,13 @@
                 "url": "https://opencollective.com/core-js"
             }
         },
+        "node_modules/jspdf/node_modules/dompurify": {
+            "version": "2.5.8",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+            "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+            "license": "(MPL-2.0 OR Apache-2.0)",
+            "optional": true
+        },
         "node_modules/junk": {
             "version": "3.1.0",
             "dev": true,
@@ -7367,6 +7438,18 @@
                 "semver": "bin/semver.js"
             }
         },
+        "node_modules/marked": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+            "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+            "license": "MIT",
+            "bin": {
+                "marked": "bin/marked.js"
+            },
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -10380,6 +10463,12 @@
             "version": "0.0.6",
             "license": "MIT"
         },
+        "node_modules/typo-js": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.3.1.tgz",
+            "integrity": "sha512-elJkpCL6Z77Ghw0Lv0lGnhBAjSTOQ5FhiVOCfOuxhaoTT2xtLVbqikYItK5HHchzPbHEUFAcjOH669T2ZzeCbg==",
+            "license": "BSD-3-Clause"
+        },
         "node_modules/uint8array-extras": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.4.0.tgz",

package.json

@@ -40,6 +40,8 @@
         "chart.js": "^2.9.4",
         "clipboard": "^2.0.11",
         "css-loader": "^5.0.0",
+        "dompurify": "^3.2.7",
+        "easymde": "^2.20.0",
         "ekko-lightbox": "^5.1.1",
         "imagemin": "^9.0.1",
         "jquery-slimscroll": "^1.3.8",

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/dist/all.js": "/js/dist/all.js?id=76d88f0f91b852f7eecbce357ab5858b",
+    "/js/dist/all.js": "/js/dist/all.js?id=7c3f9e8eb2f336d70103b33d82976c96",
     "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=42f97cd5b9ee7521b04a448e7fc16ac9",
     "/css/dist/skins/_all-skins.css": "/css/dist/skins/_all-skins.css?id=d81a7ed323f68a7c5e3e9115f7fb5404",
     "/css/build/overrides.css": "/css/build/overrides.css?id=d6ec1f1e36c57f8cd96218d2a59a2580",
@@ -19,7 +19,7 @@
     "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=b2cd9f59d7e8587939ce27b2d3363d82",
     "/css/dist/skins/skin-blue-dark.css": "/css/dist/skins/skin-blue-dark.css?id=7277edd636cf46aa7786a4449ce0ead7",
     "/css/dist/skins/skin-black.css": "/css/dist/skins/skin-black.css?id=cbd06cc1d58197ccc81d4376bbaf0d28",
-    "/css/dist/all.css": "/css/dist/all.css?id=ff957e6cef08b72d32cf28fe50da645a",
+    "/css/dist/all.css": "/css/dist/all.css?id=b83f91cf2fc0fe3aae187b7e11c43cf7",
     "/css/dist/signature-pad.css": "/css/dist/signature-pad.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/dist/signature-pad.min.css": "/css/dist/signature-pad.min.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/js/select2/i18n/af.js": "/js/select2/i18n/af.js?id=4f6fcd73488ce79fae1b7a90aceaecde",

resources/assets/js/snipeit.js

@@ -22,6 +22,8 @@ require('jquery.iframe-transport'); //probably not needed anymore, if I'm honest
 require('blueimp-file-upload')
 require('bootstrap-colorpicker')
 require('bootstrap-datepicker')
+window.EasyMDE = require('easymde');
+window.DOMPurify = require('dompurify');
 require('ekko-lightbox') //TODO - this doesn't seem jquery-ish, we might need to do something weird here
                          // it *does* require Bootstrap, which requires jquery, so maybe that's OK
                          // it seems to work...

resources/views/layouts/default.blade.php

@@ -1086,6 +1086,66 @@ dir="{{ Helper::determineLanguageDirection() }}">
 
         <script nonce="{{ csrf_token() }}">
 
+            const easymde = new EasyMDE({
+                element: document.getElementById('markdown-textarea'),
+                toolbar: [
+                    "bold",
+                    "italic",
+                    "strikethrough",
+                    "quote",
+                    "code",
+                    "|",
+                    "link",
+                    "|",
+                    "heading-1",
+                    "heading-2",
+                    "heading-3",
+                    "|",
+                    "unordered-list",
+                    "ordered-list",
+                    "|",
+                    "horizontal-rule",
+                    "|",
+                    "preview",
+                    "side-by-side",
+                    "|",
+                    "undo",
+                    "redo",
+                    "|",
+                    "guide"
+                ],
+                status: [], // Optional usage
+                promptURLs: true,
+                renderingConfig: {
+                    singleLineBreaks: false,
+                    codeSyntaxHighlighting: true,
+                    sanitizerFunction: (renderedHTML) => {
+                        // Using DOMPurify and only allowing <b> tags
+                        return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: [
+                                'b',
+                                'strong',
+                                'h1',
+                                'h2',
+                                'h3',
+                                'code',
+                                'blockquote',
+                                'i',
+                                'strikethrough',
+                                'del',
+                                's',
+                                'q',
+                                'p',
+                                'br',
+                                'em',
+                                'a'
+                            ]})
+                    },
+                },
+                showIcons: ["code", "table"],
+                spellChecker: false,
+                sideBySideFullscreen: false,
+            });
+
             $.fn.datepicker.dates['{{ app()->getLocale() }}'] = {
                 days: [
                     "{{ trans('datepicker.days.sunday') }}",

resources/views/maintenances/edit.blade.php

@@ -20,6 +20,11 @@
 {{-- Page content --}}
 @section('content')
 
+  <style>
+    .editor-toolbar {
+     padding-top: 0px;
+    }
+  </style>
 <div class="row">
   <div class="col-md-9">
     @if ($item->id)
@@ -178,8 +183,10 @@
         <div class="form-group {{ $errors->has('notes') ? ' has-error' : '' }}">
           <label for="notes" class="col-md-3 control-label">{{ trans('admin/maintenances/form.notes') }}</label>
           <div class="col-md-7">
-            <textarea class="col-md-6 form-control" id="notes" name="notes">{{ old('notes', $item->notes) }}</textarea>
+
-            <p class="help-block">{!! trans('general.markdown') !!}</p>
+            <textarea class="col-md-6 form-control" rows="4" name="notes" id="markdown-textarea">{{ old('notes', $item->notes) }}</textarea>
+            <p class="help-block">
+              {!! trans('general.markdown') !!}</p>
             {!! $errors->first('notes', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
           </div>
         </div>

resources/views/maintenances/view.blade.php

@@ -173,7 +173,7 @@ use Carbon\Carbon;
                   {{ trans('admin/maintenances/form.notes') }}
                 </div>
                 <div class="col-md-9">
-                  {!! nl2br(Helper::parseEscapedMarkedownInline($maintenance->notes)) !!}
+                  {!! Helper::parseEscapedMarkedown($maintenance->notes) !!}
                 </div>
               </div> <!-- /row -->
               @endif
@@ -200,21 +200,6 @@ use Carbon\Carbon;
           </div>
         @endif
 
-        <div class="col-md-12">
-
-          <ul class="list-unstyled" style="line-height: 22px; padding-bottom: 20px;">
-
-            @if ($maintenance->notes)
-              <li>
-                <strong>{{ trans('general.notes') }}</strong>:
-                {!! nl2br(Helper::parseEscapedMarkedownInline($maintenance->notes)) !!}
-              </li>
-            @endif
-
-
-          </ul>
-      </div>
-
       @can('update', $maintenance)
         <div class="col-md-12">
           <a href="{{ route('maintenances.edit', [$maintenance->id]) }}" style="width: 100%;" class="btn btn-sm btn-warning btn-social">

webpack.mix.js

@@ -24,6 +24,7 @@ mix
       "./node_modules/blueimp-file-upload/css/jquery.fileupload-ui.css",
       "./node_modules/ekko-lightbox/dist/ekko-lightbox.css",
       "./node_modules/bootstrap-table/dist/bootstrap-table.css",
+      "./node_modules/easymde/dist/easymde.min.css",
       "./public/css/build/app.css",
       "./node_modules/select2/dist/css/select2.css",
       "./public/css/build/overrides.css",
@@ -70,8 +71,8 @@ mix
   .js(
     [
         "./resources/assets/js/snipeit.js",
-      "./resources/assets/js/snipeit_modals.js",
+        "./resources/assets/js/snipeit_modals.js",
-      "./node_modules/canvas-confetti/dist/confetti.browser.js",
+        "./node_modules/canvas-confetti/dist/confetti.browser.js",
         // The general direction we have been going is to pull these via require() directly
         // But this runs in only one place, is only 24k, and doesn't break the sourcemaps
         // (and it needs to run in 'immediate' mode, not in 'moar_scripts'), so let's just
@@ -141,7 +142,7 @@ mix
             './resources/assets/js/FileSaver.min.js',
             './node_modules/xlsx/dist/xlsx.core.min.js',
             './node_modules/bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.js',
-            './node_modules/bootstrap-table/dist/extensions/toolbar/bootstrap-table-toolbar.js'
+            './node_modules/bootstrap-table/dist/extensions/toolbar/bootstrap-table-toolbar.js',
         ],
         'public/js/dist/bootstrap-table.js'
  ).version();