diff --git a/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js b/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js index a2dfada7f8d52fea8344cb3f61e54fbb9ee6661b..b6f5ad26d6ea07cd2757c44c9cd7f33843429f00 100644 --- a/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js +++ b/wax-prosemirror-core/src/config/defaultServices/ShortCutsService/ShortCuts.js @@ -36,9 +36,10 @@ const backSpaceShortCut = (state, dispatch, view) => { state.doc.nodesBetween($from.pos, $to.pos, (node, from) => { if (node.type.name === 'fill_the_gap_container') { - const index = $from.index($from.depth); - const $beforePos = state.doc.resolve($from.posAtIndex(index - 1)); - dispatch(state.tr.setSelection(new NodeSelection($beforePos))); + // dispatch(state.tr.delete(from, from + node.nodeSize)); + // const index = $from.index($from.depth); + // const $beforePos = state.doc.resolve($from.posAtIndex(index - 1)); + // dispatch(state.tr.setSelection(new NodeSelection($beforePos))); } }); diff --git a/wax-questions-service/src/EssayService/EssayQuestionContainerNodeView.js b/wax-questions-service/src/EssayService/EssayQuestionContainerNodeView.js new file mode 100644 index 0000000000000000000000000000000000000000..711f8ba5bf694face5f6f7d30560bf828cfe5c33 --- /dev/null +++ b/wax-questions-service/src/EssayService/EssayQuestionContainerNodeView.js @@ -0,0 +1,40 @@ +import { QuestionsNodeView } from 'wax-prosemirror-core'; + +export default class EssayQuestionContainerNodeView extends QuestionsNodeView { + constructor( + node, + view, + getPos, + decorations, + createPortal, + Component, + context, + ) { + super(node, view, getPos, decorations, createPortal, Component, context); + + this.node = node; + this.outerView = view; + this.getPos = getPos; + this.context = context; + } + + static name() { + return 'essay_container'; + } + + selectNode() { + this.context.pmViews[this.node.attrs.id].focus(); + } + + stopEvent(event) { + if (event.target.type === 'textarea' || !event.target.type) { + return true; + } + + return ( + this.context.pmViews[this.node.attrs.id] !== undefined && + event.target !== undefined && + this.context.pmViews[this.node.attrs.id].dom.contains(event.target) + ); + } +} diff --git a/wax-questions-service/src/EssayService/EssayService.js b/wax-questions-service/src/EssayService/EssayService.js index 583ce1dd0056086a173c706aa8895a22db087a94..0782fb9dd1dcd449eeacb59c52d357e634991cad 100644 --- a/wax-questions-service/src/EssayService/EssayService.js +++ b/wax-questions-service/src/EssayService/EssayService.js @@ -1,5 +1,6 @@ import { Service } from 'wax-prosemirror-core'; import EssayQuestion from './EssayQuestion'; +import EssayQuestionContainerComponent from './components/EssayQuestionContainerComponent'; import essayContainerNode from './schema/essayContainerNode'; import essayPromptNode from './schema/essayPromptNode'; import essayQuestionNode from './schema/essayQuestionNode'; @@ -7,6 +8,7 @@ import essayAnswerNode from './schema/essayAnswerNode'; import EssayQuestionComponent from './components/EssayQuestionComponent'; import EssayPromptComponent from './components/EssayPromptComponent'; import EssayAnswerComponent from './components/EssayAnswerComponent'; +import EssayQuestionContainerNodeView from './EssayQuestionContainerNodeView'; import EssayQuestionNodeView from './EssayQuestionNodeView'; import EssayPromptNodeView from './EssayPromptNodeView'; import EssayAnswerNodeView from './EssayAnswerNodeView'; @@ -34,6 +36,12 @@ class EssayService extends Service { essay_answer: essayAnswerNode, }); + addPortal({ + nodeView: EssayQuestionContainerNodeView, + component: EssayQuestionContainerComponent, + context: this.app, + }); + addPortal({ nodeView: EssayQuestionNodeView, component: EssayQuestionComponent, diff --git a/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js new file mode 100644 index 0000000000000000000000000000000000000000..7f8b8b5e5078f08e3e89a576e778ef6eef249bae --- /dev/null +++ b/wax-questions-service/src/EssayService/components/EssayQuestionContainerComponent.js @@ -0,0 +1,85 @@ +import React, { useContext, useRef, useState } from 'react'; +import { + WaxContext, + ComponentPlugin, + DocumentHelpers, + Icon, +} from 'wax-prosemirror-core'; +import { th } from '@pubsweet/ui-toolkit'; + +import styled from 'styled-components'; +import ContainerEditor from './ContainerEditor'; + +const EssayQuestionWrapper = styled.div` + margin: 0px 38px 15px 38px; + margin-top: 10px; +`; +const EssayQuestionContainerTool = styled.div` + border: 3px solid #f5f5f7; + border-bottom: none; + + span:first-of-type { + position: relative; + top: 3px; + } +`; + +const ActionButton = styled.button` + background: transparent; + cursor: pointer; + margin-top: 16px; + border: none; + position: relative; + bottom: 14px; + left: -11px; + float: right; +`; + +const StyledIconActionRemove = styled(Icon)` + height: 24px; + width: 24px; +`; + +const EssayQuestionContainer = styled.div` + border: 3px solid #f5f5f7; + margin-bottom: 30px; +`; + +export default ({ node, view, getPos }) => { + const context = useContext(WaxContext); + const { + pmViews: { main }, + } = context; + + const customProps = main.props.customValues; + const { testMode } = customProps; + + const isEditable = main.props.editable(editable => { + return editable; + }); + + const readOnly = !isEditable; + + const removeQuestion = () => {}; + + return ( + <EssayQuestionWrapper> + <div> + {!testMode && !readOnly && ( + <EssayQuestionContainerTool> + <ActionButton + aria-label="delete this question" + onClick={removeQuestion} + type="button" + > + <StyledIconActionRemove name="deleteOutlinedQuestion" /> + </ActionButton> + </EssayQuestionContainerTool> + )} + </div> + <EssayQuestionContainer className="essay-question"> + <ContainerEditor getPos={getPos} node={node} view={view} /> + </EssayQuestionContainer> + </EssayQuestionWrapper> + ); +}; diff --git a/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js index 0320b05d69c47d585e0bb9964ea820e90a41fa62..79ec1fcf8f0dd8a820cc40ee08f055e0ced6e389 100644 --- a/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js +++ b/wax-questions-service/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js @@ -119,7 +119,6 @@ export default ({ node, view, getPos }) => { return ( <FillTheGapWrapper> <div> - {/* <span> Fill The Gap</span> */} {!testMode && !readOnly && ( <FillTheGapContainerTool> <FillTheGapTool />