From 4627c5a6bf00b07df78974f4634b69861391ba8a Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Tue, 10 Nov 2020 14:48:10 +0100 Subject: [PATCH 1/4] 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 { From bce13d0210e35264fbe176a129f6c9ec84665be7 Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Tue, 10 Nov 2020 14:50:12 +0100 Subject: [PATCH 2/4] Cleanup --- src/editor/widgets/comment/TextEntryField.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/editor/widgets/comment/TextEntryField.jsx b/src/editor/widgets/comment/TextEntryField.jsx index e32def7..b1e3ae1 100644 --- a/src/editor/widgets/comment/TextEntryField.jsx +++ b/src/editor/widgets/comment/TextEntryField.jsx @@ -15,10 +15,7 @@ export default class TextEntryField extends Component { // Focus on render onRender = ref => { - /* - if (ref && this.props.editable) - setTimeout(() => ref.focus(), 1); - */ + // Note: we could use this to set automatic focus (but leave this out for now) } render() { From 6f286a5023c358dff6d127652f111b9e7d89e6bf Mon Sep 17 00:00:00 2001 From: deepBlue Date: Wed, 11 Nov 2020 16:17:29 +0300 Subject: [PATCH 3/4] tr language file tr language file --- src/i18n/messages_tr.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/i18n/messages_tr.json diff --git a/src/i18n/messages_tr.json b/src/i18n/messages_tr.json new file mode 100644 index 0000000..b64396a --- /dev/null +++ b/src/i18n/messages_tr.json @@ -0,0 +1,10 @@ +{ + "Add a comment...": "Yorum ekle...", + "Add a reply...": "Cevap ekle...", + "Add tag...": "Tag Ekle...", + "Cancel": "İptal", + "Close": "Kapat", + "Edit": "Düzenle", + "Delete": "Sil", + "Ok": "Tamam" +} \ No newline at end of file From f762de6725ef6c9067d076ad0c0e2dafb25244d8 Mon Sep 17 00:00:00 2001 From: Rainer Simon Date: Wed, 11 Nov 2020 14:24:47 +0100 Subject: [PATCH 4/4] Registered TR locale for timeago --- src/i18n/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/i18n/index.js b/src/i18n/index.js index 74819f5..4225b25 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -18,6 +18,7 @@ import hi from 'timeago.js/lib/lang/hi_IN'; import it from 'timeago.js/lib/lang/it'; import pt from 'timeago.js/lib/lang/pt_BR'; import sv from 'timeago.js/lib/lang/sv'; +import tr from 'timeago.js/lib/lang/tr'; // import ur from 'timeago.js/lib/lang/ur'; // Not currently supported by TimeAgo timeago.register('ar', ar); @@ -29,5 +30,6 @@ timeago.register('hi', hi); timeago.register('it', it); timeago.register('pt', pt); timeago.register('sv', sv); +timeago.register('tr', tr); -export default i18n; \ No newline at end of file +export default i18n;