Handle contenteditable paste as plain text

examples/css/darktheme.css

@@ -25,9 +25,13 @@ tr.jsoneditor-selected {
 }
 
 div.jsoneditor-field[contenteditable=true]:focus,
+div.jsoneditor-field[contenteditable=plaintext-only]:focus,
 div.jsoneditor-field[contenteditable=true]:hover,
+div.jsoneditor-field[contenteditable=plaintext-only]:hover,
 div.jsoneditor-value[contenteditable=true]:focus,
+div.jsoneditor-value[contenteditable=plaintext-only]:focus,
 div.jsoneditor-value[contenteditable=true]:hover,
+div.jsoneditor-value[contenteditable=plaintext-only]:hover,
 div.jsoneditor-field.jsoneditor-highlight,
 div.jsoneditor-value.jsoneditor-highlight {
   background-color: #808080;

src/js/Node.js

@@ -2235,7 +2235,7 @@ export class Node {
     if (domField) {
       if (this.fieldEditable) {
         // parent is an object
-        domField.contentEditable = this.editable.field
+        setContentEditable(domField, this.editable.field)
         domField.spellcheck = false
         domField.className = 'jsoneditor-field'
       } else {
@@ -2428,7 +2428,7 @@ export class Node {
       } else {
         // create an editable or read-only div
         domValue = document.createElement('div')
-        domValue.contentEditable = this.editable.value
+        setContentEditable(domValue, this.editable.value)
         domValue.spellcheck = false
         domValue.innerHTML = this._escapeHTML(this.value)
       }
@@ -4775,6 +4775,21 @@ function getField (node) {
 function hasOwnProperty (object, key) {
   return Object.prototype.hasOwnProperty.call(object, key)
 }
+/**
+ * Safe way to set "contentEditable"
+ * @param {HTMLElement} div
+ * @param {boolean} enable
+ */
+function setContentEditable (element, enable) {
+  if (element) {
+    try {
+      element.contentEditable = enable ? 'plaintext-only' : false
+    } catch {
+      // fallback for browsers not supporting 'plaintext-only'
+      element.contentEditable = enable
+    }
+  }
+}
 
 // TODO: find a nicer solution to resolve this circular dependency between Node and AppendNode
 //       idea: introduce properties .isAppendNode and .isNode and use that instead of instanceof AppendNode checks

src/js/treemode.js

@@ -360,7 +360,7 @@ treemode.getName = function () {
  * - to the first button in the top menu
  */
 treemode.focus = function () {
-  let input = this.scrollableContent.querySelector('[contenteditable=true]')
+  let input = this.scrollableContent.querySelector('[contenteditable=plaintext-only]') || this.scrollableContent.querySelector('[contenteditable=true]')
   if (input) {
     input.focus()
   } else if (this.node.dom.expand) {

src/scss/jsoneditor/_editor.scss

@@ -293,9 +293,13 @@ a.jsoneditor-value.jsoneditor-url:focus {
   color: variables.$jse-number;
 }
 div.jsoneditor-field[contenteditable="true"]:focus,
+div.jsoneditor-field[contenteditable="plaintext-only"]:focus,
 div.jsoneditor-field[contenteditable="true"]:hover,
+div.jsoneditor-field[contenteditable="plaintext-only"]:hover,
 div.jsoneditor-value[contenteditable="true"]:focus,
+div.jsoneditor-value[contenteditable="plaintext-only"]:focus,
 div.jsoneditor-value[contenteditable="true"]:hover,
+div.jsoneditor-value[contenteditable="plaintext-only"]:hover,
 div.jsoneditor-field.jsoneditor-highlight,
 div.jsoneditor-value.jsoneditor-highlight {
   background-color: variables.$jse-busy;