diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js index 5e40c26b5e182d1c9a1abc7e04b1a47123602afb..c579e50c93e2323bba43857c4e07041d723637cd 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js +++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js @@ -114,6 +114,7 @@ const EditorComponent = ({ node, view, getPos }) => { ), ); context.updateView({}, questionId); + console.log(context.view.main.state.selection); // Kludge to prevent issues due to the fact that the whole // footnote is node-selected (and thus DOM-selected) when // the parent editor is focused. @@ -139,7 +140,7 @@ const EditorComponent = ({ node, view, getPos }) => { }, questionId, ); - questionView.focus(); + if (questionView.hasFocus()) questionView.focus(); }, []); const dispatchTransaction = tr => { diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js index ab009e8956392a22d1cbc9e3cf76ed88a11cae1e..0e51110d7cd46d86129e9cc37f2d7d5a51911fb7 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js +++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/QuestionComponent.js @@ -86,7 +86,7 @@ export default ({ node, view, getPos }) => { return editable; }); - const [feadBack, setFeedBack] = useState(''); + const [feadBack, setFeedBack] = useState(node.attrs.feedback); const feedBackRef = useRef(null); @@ -95,6 +95,7 @@ export default ({ node, view, getPos }) => { }; const handleKeyDown = e => { + e.stopPropagation(); if (e.key === 'Backspace') { context.view.main.dispatch( context.view.main.state.tr.setSelection( @@ -145,6 +146,25 @@ export default ({ node, view, getPos }) => { }); }; + const saveFeedBack = () => { + setTimeout(() => { + context.view.main.dispatch( + context.view.main.state.tr.setNodeMarkup(getPos(), undefined, { + ...node.attrs, + feedback: feadBack, + }), + ); + }, 150); + }; + + const onFocus = () => { + context.view.main.dispatch( + context.view.main.state.tr.setSelection( + new TextSelection(context.view.main.state.tr.doc.resolve(0)), + ), + ); + }; + const questionNumber = 1; const readOnly = !isEditable; const showAddIcon = true; @@ -171,6 +191,8 @@ export default ({ node, view, getPos }) => { ref={feedBackRef} type="text" value={feadBack} + onBlur={saveFeedBack} + onFocus={onFocus} /> </FeedBack> </QuestionWrapper> diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js index 74a6d96c5e5d4dd689ff16177e52c20f5809a984..46f1fda2084d69517ff32d653e9b27e97659a196 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js +++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/helpers/helpers.js @@ -24,6 +24,7 @@ const createEmptyParagraph = (context, newAnswerId) => { ), ), ); + context.view[newAnswerId].focus(); }; export default { diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js index 10503330cf0bb5a76625b861b232273bc698baca..371f84ada30d33a47c5ed7936b1ef5d25428b96d 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js +++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js @@ -2,7 +2,7 @@ const multipleChoiceNode = { attrs: { id: { default: '' }, correct: { default: false }, - feedback: { default: false }, + feedback: { default: '' }, }, group: 'block', content: 'block*', diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js index f3f4a0734f50b6f0e3101f855e67d02f6eddc7e8..e0f3b57ac42f93e9c2c77d5f581fdf04bb753b9c 100644 --- a/editors/demo/src/HHMI/layout/EditorElements.js +++ b/editors/demo/src/HHMI/layout/EditorElements.js @@ -111,6 +111,10 @@ export default css` } } + .mutiple-choice.ProseMirror-selectednode { + outline: none; + } + sup, sub { line-height: 0;