Replaced contentEditable DIV with textarea

package-lock.json

@@ -1570,6 +1570,11 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "autosize": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz",
+      "integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA=="
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -2313,6 +2318,11 @@
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz",
       "integrity": "sha512-mKDjINe3tc6hGelUMNDzuhorIUZ7kS7BwyY0r2wQd2HOH2tRuJykiC06iSEX8y1TuhNzvz4GcJnK16mM2J1NMQ=="
     },
+    "computed-style": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz",
+      "integrity": "sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3294,11 +3304,6 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
-    "fast-deep-equal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
-    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -5025,6 +5030,14 @@
         "leven": "^3.1.0"
       }
     },
+    "line-height": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/line-height/-/line-height-0.3.1.tgz",
+      "integrity": "sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk=",
+      "requires": {
+        "computed-style": "~0.1.3"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -6969,13 +6982,14 @@
         }
       }
     },
-    "react-contenteditable": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.3.tgz",
-      "integrity": "sha512-3sOt9x6A7SzHqJgFRqKfaUnIh2tdxrdnJcE/0g1dN/g3twsqNxMxUCJGWvZUUDIQjUzqdSz6tsnGdddrPr5UNg==",
+    "react-autosize-textarea": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz",
+      "integrity": "sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==",
       "requires": {
-        "fast-deep-equal": "^2.0.1",
-        "prop-types": "^15.7.1"
+        "autosize": "^4.0.2",
+        "line-height": "^0.3.1",
+        "prop-types": "^15.5.6"
       }
     },
     "react-is": {

package.json

@@ -46,7 +46,7 @@
     "downshift": "^5.4.6",
     "node-polyglot": "^2.4.0",
     "preact": "^10.4.1",
-    "react-contenteditable": "^3.3.3",
+    "react-autosize-textarea": "^7.1.0",
     "react-transition-group": "^4.3.0",
     "timeago-react": "^3.0.1",
     "tiny-emitter": "^2.1.0",

src/editor/widgets/comment/CommentWidget.jsx

@@ -37,8 +37,8 @@ const CommentWidget = props => {
   const comments = all.filter(b => b != draftReply);
 
   const onEditReply = evt => {
-    const prev = draftReply.value.trim();
-    const updated = evt.target.value.trim();
+    const prev = draftReply.value;
+    const updated = evt.target.value;
 
     if (prev.length === 0 && updated.length > 0) {
       props.onAppendBody({ ...draftReply, value: updated });

src/editor/widgets/comment/TextEntryField.jsx

@@ -1,13 +1,9 @@
 import React, { Component } from 'preact/compat';
-import ContentEditable from 'react-contenteditable';
+import TextareaAutosize from 'react-autosize-textarea';
 import i18n from '../../../i18n';
 
 /** 
  * A basic text entry field, for reuse in different widgets.
- * 
- * Note that react-contenteditable seems to have compatibility 
- * issues with React hooks, therefore this component is 
- * implemented as a class.
  */
 export default class TextEntryField extends Component {
 
@@ -19,17 +15,19 @@ export default class TextEntryField extends Component {
 
   // Focus on render
   onRender = ref => {
+    /*
     if (ref && this.props.editable)
       setTimeout(() => ref.focus(), 1);
+    */
   }
 
   render() {
     return (
-      <ContentEditable
-        innerRef={this.onRender}
+      <TextareaAutosize
+        ref={this.onRender}
         className="r6o-editable-text" 
-        html={this.props.content}
-        data-placeholder={this.props.placeholder || i18n.t('Add a comment...')}
+        value={this.props.content}
+        placeholder={this.props.placeholder || i18n.t('Add a comment...')}
         disabled={!this.props.editable}
         onChange={this.props.onChange}
         onKeyDown={this.onKeyDown} />

src/relations/editor/RelationEditor.jsx

@@ -17,10 +17,6 @@ const getContent = relation => {
  * to be used separately by the implementing application. We
  * still keep it in the /recogito-relations folder though, so that
  * all code that belongs together stays together.
- * 
- * Note that react-contenteditable seems to have compatibility 
- * issues with React hooks, therefore this component is implemented 
- * as a class.
  */
 export default class RelationEditor extends Component {
 

themes/default/editor/widgets/comment/_comment.scss

@@ -6,7 +6,13 @@
 
   .r6o-editable-text,
   .r6o-readonly-comment {
-    padding:8px 10px;
+    padding:10px;
+    width:100%;
+    box-sizing:border-box;
+    outline:none;
+    border:none;
+    background-color:transparent;
+    resize:none;
   }
 
   .r6o-lastmodified {