fix(properties-panel): make sure to always paste as plain text

Related to bpmn-io/bpmn-js-properties-panel#265
bpmn-io · Mar 11, 2020 · f3b16a9 · f3b16a9
1 parent e2ffe55
commit f3b16a9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/lib/PropertiesPanel.js b/lib/PropertiesPanel.js
@@ -525,6 +525,16 @@ PropertiesPanel.prototype._bindListeners = function(container) {
   domDelegate.bind(container, 'input, textarea, [contenteditable]', 'input', debounce(handleChange, DEBOUNCE_DELAY));
   domDelegate.bind(container, 'input, textarea, select, [contenteditable]', 'change', handleChange);
 
+  // paste as plain text only
+  domDelegate.bind(container, '[contenteditable]', 'paste', handlePaste);
+
+  function handlePaste(event) {
+    var text = (event.clipboardData || window.clipboardData).getData('text');
+    document.execCommand('insertText', false, text);
+
+    event.preventDefault();
+  }
+
   domDelegate.bind(container, '[data-action]', 'click', function onClick(event) {
 
     // triggers on all inputs

diff --git a/test/spec/PropertiesPanelSpec.js b/test/spec/PropertiesPanelSpec.js
@@ -253,5 +253,10 @@ describe('properties-panel', function() {
   });
 
 
+  describe('listeners', function() {
 
+    // Cannot be tested due to paste events not affecting document's contents per default.
+    // Cf. https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
+    it('should paste to [contenteditable] as plain text');
+  });
 });
diff --git a/test/spec/properties/PropertiesProvider.js b/test/spec/properties/PropertiesProvider.js
@@ -220,6 +220,15 @@ function createGroups(element, cmmnFactory) {
             }
           }
         ]
+      },
+      {
+        id: 'inputs',
+        entries: [
+          {
+            id: 'contenteditable',
+            html: '<div>Content editable:<div contenteditable></div></div>'
+          }
+        ]
       }
     ];
   }