From 3073cc94a29d7bd2a68557e41a9809f41cb567c5 Mon Sep 17 00:00:00 2001 From: Matt Garbis Date: Sun, 22 Apr 2018 15:22:03 -0400 Subject: [PATCH 01/11] add react-simplemde-editor dependency --- package.json | 1 + yarn.lock | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/package.json b/package.json index a90501c4ba..daade95274 100644 --- a/package.json +++ b/package.json @@ -192,6 +192,7 @@ "react-onclickoutside": "^6.5.0", "react-prevent-clickthrough": "^0.0.3", "react-redux": "^5.0.3", + "react-simplemde-editor": "^3.6.14", "reduce-reducers": "^0.1.2", "redux": "^3.6.0", "redux-actions": "^2.2.1", diff --git a/yarn.lock b/yarn.lock index ce632df324..7b20de6d4c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2354,6 +2354,16 @@ code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" +codemirror-spell-checker@*: + version "1.1.2" + resolved "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz#1c660f9089483ccb5113b9ba9ca19c3f4993371e" + dependencies: + typo-js "*" + +codemirror@*: + version "5.36.0" + resolved "https://registry.npmjs.org/codemirror/-/codemirror-5.36.0.tgz#1172ad9dc298056c06e0b34e5ccd23825ca15b40" + collapse-white-space@^1.0.0, collapse-white-space@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c" @@ -6510,6 +6520,10 @@ markdown-to-ast@~3.4.0: structured-source "^3.0.2" traverse "^0.6.6" +marked@*: + version "0.3.19" + resolved "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790" + "match-stream@>= 0.0.2 < 1": version "0.0.2" resolved "https://registry.yarnpkg.com/match-stream/-/match-stream-0.0.2.tgz#99eb050093b34dffade421b9ac0b410a9cfa17cf" @@ -8593,6 +8607,12 @@ react-redux@^5.0.3: loose-envify "^1.1.0" prop-types "^15.6.0" +react-simplemde-editor@^3.6.14: + version "3.6.14" + resolved "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-3.6.14.tgz#92d696114ee1d8b6ae186f0a7a3512e24e3ad2b4" + dependencies: + simplemde "^1.11.2" + "react@^15.6.2 || ^16.0", react@^16.0.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" @@ -9528,6 +9548,14 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" +simplemde@^1.11.2: + version "1.11.2" + resolved "https://registry.npmjs.org/simplemde/-/simplemde-1.11.2.tgz#a23a35d978d2c40ef07dec008c92f070d8e080e3" + dependencies: + codemirror "*" + codemirror-spell-checker "*" + marked "*" + sinon@^4.0.1: version "4.4.2" resolved "https://registry.yarnpkg.com/sinon/-/sinon-4.4.2.tgz#c4c41d4bd346e1d33594daec2d5df0548334fc65" @@ -10642,6 +10670,10 @@ typedarray@^0.0.6, typedarray@~0.0.5: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" +typo-js@*: + version "1.0.3" + resolved "https://registry.npmjs.org/typo-js/-/typo-js-1.0.3.tgz#54d8ebc7949f1a7810908b6002c6841526c99d5a" + ua-parser-js@0.7.12: version "0.7.12" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb" From c1ad7d88eadb5cda958056cdf837ff80746a44fc Mon Sep 17 00:00:00 2001 From: Matt Garbis Date: Sun, 22 Apr 2018 15:24:06 -0400 Subject: [PATCH 02/11] WYSIWYG-esque editor for instructions; controlled component pattern --- src/actions/index.js | 2 ++ src/actions/ui.js | 6 ++++ src/components/Instructions.jsx | 3 ++ src/components/InstructionsEditor.jsx | 34 +++++++++---------- src/containers/Instructions.js | 4 +++ src/css/application.css | 10 +++++- src/reducers/ui.js | 7 ++++ .../getCurrentProjectInstructions.js | 21 ++++++++++-- .../getCurrentProjectInstructionsUnsaved.js | 3 ++ 9 files changed, 69 insertions(+), 21 deletions(-) create mode 100644 src/selectors/getCurrentProjectInstructionsUnsaved.js diff --git a/src/actions/index.js b/src/actions/index.js index 3998f368b8..11f4e9dd1e 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -33,6 +33,7 @@ import { toggleTopBarMenu, closeTopBarMenu, startEditingInstructions, + continueEditingInstructions, cancelEditingInstructions, } from './ui'; @@ -97,6 +98,7 @@ export { toggleTopBarMenu, closeTopBarMenu, startEditingInstructions, + continueEditingInstructions, cancelEditingInstructions, logIn, logOut, diff --git a/src/actions/ui.js b/src/actions/ui.js index dda3bb7c9b..bc98a746d2 100644 --- a/src/actions/ui.js +++ b/src/actions/ui.js @@ -65,6 +65,12 @@ export const startEditingInstructions = createAction( (_projectKey, timestamp = Date.now()) => ({timestamp}), ); +export const continueEditingInstructions = createAction( + 'CONTINUE_EDITING_INSTRUCTIONS', + (projectKey, content) => ({projectKey, content}), + (_projectKey, timestamp = Date.now()) => ({timestamp}), +); + export const cancelEditingInstructions = createAction( 'CANCEL_EDITING_INSTRUCTIONS', ); diff --git a/src/components/Instructions.jsx b/src/components/Instructions.jsx index 050416f68c..59a34c9ef9 100644 --- a/src/components/Instructions.jsx +++ b/src/components/Instructions.jsx @@ -9,6 +9,7 @@ export default function Instructions({ isOpen, projectKey, onCancelEditing, + onContinueEditing, onSaveChanges, }) { if (!isEditing && !instructions || !isOpen) { @@ -25,6 +26,7 @@ export default function Instructions({ instructions={instructions} projectKey={projectKey} onCancelEditing={onCancelEditing} + onContinueEditing={onContinueEditing} onSaveChanges={onSaveChanges} /> :
@@ -41,5 +43,6 @@ Instructions.propTypes = { isOpen: PropTypes.bool.isRequired, projectKey: PropTypes.string.isRequired, onCancelEditing: PropTypes.func.isRequired, + onContinueEditing: PropTypes.func.isRequired, onSaveChanges: PropTypes.func.isRequired, }; diff --git a/src/components/InstructionsEditor.jsx b/src/components/InstructionsEditor.jsx index fcb7125f98..160bd94cba 100644 --- a/src/components/InstructionsEditor.jsx +++ b/src/components/InstructionsEditor.jsx @@ -3,16 +3,13 @@ import PropTypes from 'prop-types'; import {t} from 'i18next'; import bindAll from 'lodash/bindAll'; +import SimpleMDE from 'react-simplemde-editor'; + export default class InstructionsEditor extends React.Component { constructor() { super(); - bindAll(this, '_handleCancelEditing', '_handleSaveChanges', '_ref'); - } - - componentDidMount() { - if (!this.props.instructions) { - this._editor.focus(); - } + bindAll(this, '_handleCancelEditing', '_handleContinueEditing', + '_handleSaveChanges'); } _handleCancelEditing() { @@ -20,12 +17,11 @@ export default class InstructionsEditor extends React.Component { } _handleSaveChanges() { - const newValue = this._editor.value.trim(); - this.props.onSaveChanges(this.props.projectKey, newValue); + this.props.onSaveChanges(this.props.projectKey, this.props.instructions); } - _ref(editorElement) { - this._editor = editorElement; + _handleContinueEditing(newValue) { + this.props.onContinueEditing(this.props.projectKey, newValue); } render() { @@ -45,12 +41,15 @@ export default class InstructionsEditor extends React.Component { {t('workspace.components.instructions.cancel')}
-
-