From 4627c5a6bf00b07df78974f4634b69861391ba8a Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Tue, 10 Nov 2020 14:48:10 +0100 Subject: [PATCH] Replaced contentEditable DIV with textarea --- package-lock.json | 36 +++++++++++++------ package.json | 2 +- src/editor/widgets/comment/CommentWidget.jsx | 4 +-- src/editor/widgets/comment/TextEntryField.jsx | 16 ++++----- src/relations/editor/RelationEditor.jsx | 4 --- .../editor/widgets/comment/_comment.scss | 8 ++++- 6 files changed, 42 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index eed2613..e077a0b 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index e93574b..928f480 100644 --- a/package.json +++ b/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", diff --git a/src/editor/widgets/comment/CommentWidget.jsx b/src/editor/widgets/comment/CommentWidget.jsx index 9d42f8d..04d6a8d 100644 --- a/src/editor/widgets/comment/CommentWidget.jsx +++ b/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 }); diff --git a/src/editor/widgets/comment/TextEntryField.jsx b/src/editor/widgets/comment/TextEntryField.jsx index ba7726a..e32def7 100644 --- a/src/editor/widgets/comment/TextEntryField.jsx +++ b/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 ( - diff --git a/src/relations/editor/RelationEditor.jsx b/src/relations/editor/RelationEditor.jsx index c436881..b80491b 100644 --- a/src/relations/editor/RelationEditor.jsx +++ b/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 { diff --git a/themes/default/editor/widgets/comment/_comment.scss b/themes/default/editor/widgets/comment/_comment.scss index a83281d..e8c7f86 100644 --- a/themes/default/editor/widgets/comment/_comment.scss +++ b/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 {