feat: codeview enhancements (#43)

* feat: install dompurify

* fix: sanitize note content

* chore: build

Co-authored-by: Johnny Almonte <[email protected]>

.eslintrc

@@ -10,6 +10,6 @@
   "globals": {
     "$": true,
     "ComponentRelay": true,
-    "filterXSS": true
+    "DOMPurify": true
   }
 }

package.json

@@ -18,6 +18,7 @@
     "@standardnotes/eslint-config-extensions": "1.0.1",
     "bootstrap": "3.4.1",
     "css-loader": "^5.1.0",
+    "dompurify": "^2.2.6",
     "eslint": "^7.20.0",
     "html-webpack-plugin": "^5.2.0",
     "jquery": "^3.5.1",
@@ -31,7 +32,6 @@
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-merge": "^5.7.3",
-    "webpack-merge-and-include-globally": "^2.3.3",
-    "xss": "^1.0.8"
+    "webpack-merge-and-include-globally": "^2.3.3"
   }
 }

src/main.js

@@ -63,7 +63,7 @@ document.addEventListener('DOMContentLoaded', function () {
         lastValue = $('#summernote').summernote('code');
         note.clientData = clientData;
 
-        note.content.text = lastValue;
+        note.content.text = DOMPurify.sanitize(lastValue);
         note.content.preview_plain = truncateString(strip(lastValue));
         note.content.preview_html = null;
       });
@@ -86,7 +86,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     clientData = note.clientData;
-    let newText = filterXSS(note.content.text);
+    let newText = DOMPurify.sanitize(note.content.text);
 
     if (newText == lastValue) {
       return;
@@ -137,7 +137,7 @@ document.addEventListener('DOMContentLoaded', function () {
         ['para', ['ul', 'ol', 'paragraph']],
         ['height', ['height']],
         ['insert', ['table', 'link', 'hr', 'picture', 'video']],
-        ['misc', ['codeview', 'help']]
+        ['misc', ['custom-codeview', 'help']]
       ],
       fontNames: [
         'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
@@ -152,7 +152,34 @@ document.addEventListener('DOMContentLoaded', function () {
             + 'and copying an image URL instead.');
         }
       },
-      codeviewFilter: true
+      codeviewFilter: true,
+      buttons: {
+        'custom-codeview': function(context) {
+          const ui = $.summernote.ui;
+          const button = ui.button({
+            contents: '<i class="note-icon-code"/>',
+            tooltip: 'Code View',
+            codeviewButton: true,
+            click: function() {
+              /**
+               * Check if changing from Codeview to Editor.
+               * If so, we want to sanitize content before switching to the Editor.
+               */
+              const isCodeviewActive = $('#summernote').summernote('codeview.isActivated');
+
+              if (isCodeviewActive) {
+                const currentContent = $('#summernote').summernote('code');
+                const sanitizedContent = DOMPurify.sanitize(currentContent);
+                $('#summernote').summernote('code', sanitizedContent);
+              }
+
+              context.invoke('codeview.toggle');
+            }
+          });
+
+          return button.render();
+        }
+      }
     });
 
     // summernote.change

webpack.config.js

@@ -44,7 +44,7 @@ module.exports = {
           'node_modules/bootstrap/dist/js/bootstrap.min.js',
           'node_modules/summernote/dist/summernote.min.js',
           'node_modules/@standardnotes/component-relay/dist/dist.js',
-          'node_modules/xss/dist/xss.js'
+          'node_modules/dompurify/dist/purify.min.js'
         ],
         "vendor.css": [
           'node_modules/bootstrap/dist/css/bootstrap.min.css',

yarn.lock

@@ -1776,7 +1776,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.20.0, commander@^2.20.3:
+commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -1936,11 +1936,6 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-[email protected]:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
-  integrity sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=
-
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2137,6 +2132,11 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+dompurify@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.2.6.tgz#54945dc5c0b45ce5ae228705777e8e59d7b2edc4"
+  integrity sha512-7b7ZArhhH0SP6W2R9cqK6RjaU82FZ2UPM7RO8qN1b1wyvC/NY1FNWcX1Pu00fFOAnzEORtwXe4bPaClg6pUybQ==
+
 domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -5903,14 +5903,6 @@ ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-xss@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.8.tgz#32feb87feb74b3dcd3d404b7a68ababf10700535"
-  integrity sha512-3MgPdaXV8rfQ/pNn16Eio6VXYPTkqwa0vc7GkiymmY/DqR1SE/7VPAAVZz1GJsJFrllMYO3RHfEaiUGjab6TNw==
-  dependencies:
-    commander "^2.20.3"
-    cssfilter "0.0.10"
-
 y18n@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"