From 1920e1822f057c62ece2457093b746e1dcf4ec07 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 31 Mar 2022 18:20:24 +0300
Subject: [PATCH] new Option
---
.../components/MatchingContainerComponent.js | 12 +---
.../components/MatchingOptionComponent.js | 68 ++++++++++++++++++-
.../components/AnswerComponent.js | 6 +-
3 files changed, 70 insertions(+), 16 deletions(-)
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
index 258846bd0..1d58dc898 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js
@@ -110,6 +110,7 @@ export default ({ node, view, getPos }) => {
const readOnly = !isEditable;
const addOption = () => {
+ if (addOptionRef.current.value.trim() === '') return;
const obj = { label: addOptionRef.current.value, key: uuidv4() };
setOptions(prevOptions => [...prevOptions, obj]);
};
@@ -118,8 +119,6 @@ export default ({ node, view, getPos }) => {
setOptions(options.filter(option => option.key !== key));
};
- const addAnswer = () => {};
-
return (
<MatchingWrapper>
<span>Matching</span>
@@ -127,14 +126,6 @@ export default ({ node, view, getPos }) => {
<QuestionWrapper>
<InputsContainer>
<Option>
- {!readOnly && (
- <ActionButton
- onClick={() => addAnswer(node.attrs.id)}
- type="button"
- >
- <StyledIconAction name="plusSquare" />
- </ActionButton>
- )}
<ContainerEditor getPos={getPos} node={node} view={view} />
<DropDownComponent options={options} />
</Option>
@@ -143,7 +134,6 @@ export default ({ node, view, getPos }) => {
{!readOnly && (
<CreateOptions>
<OptionArea>
- Options:
<ul>
{options.map((option, index) => {
return (
diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
index efc17d00e..4a435943f 100644
--- a/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
+++ b/wax-prosemirror-services/src/MatchingService/components/MatchingOptionComponent.js
@@ -1,7 +1,71 @@
/* eslint-disable react/prop-types */
-import React from 'react';
+import React, { useContext } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { TextSelection } from 'prosemirror-state';
+import { Fragment } from 'prosemirror-model';
+import styled from 'styled-components';
+import { Icon } from 'wax-prosemirror-components';
+import { WaxContext } from 'wax-prosemirror-core';
import EditorComponent from './EditorComponent';
+const ActionButton = styled.button`
+ height: 24px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ padding-left: 0;
+`;
+
+const StyledIconAction = styled(Icon)`
+ height: 24px;
+ width: 24px;
+`;
+
export default ({ node, view, getPos }) => {
- return <EditorComponent getPos={getPos} node={node} view={view} />;
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const readOnly = !isEditable;
+
+ const addAnswer = () => {
+ console.log(node);
+ const nodeId = node.attrs.id;
+ const newAnswerId = uuidv4();
+ main.state.doc.descendants((editorNode, index) => {
+ if (editorNode.type.name === 'matching_option') {
+ if (editorNode.attrs.id === nodeId) {
+ main.dispatch(
+ main.state.tr.setSelection(
+ new TextSelection(
+ main.state.tr.doc.resolve(editorNode.nodeSize + index),
+ ),
+ ),
+ );
+
+ const newOption = main.state.config.schema.nodes.matching_option.create(
+ { id: newAnswerId },
+ Fragment.empty,
+ );
+ main.dispatch(main.state.tr.replaceSelectionWith(newOption));
+ }
+ }
+ });
+ };
+
+ return (
+ <>
+ {!readOnly && (
+ <ActionButton onClick={addAnswer} type="button">
+ <StyledIconAction name="plusSquare" />
+ </ActionButton>
+ )}
+ <EditorComponent getPos={getPos} node={node} view={view} />
+ </>
+ );
};
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
index 14ca939d2..eea45755e 100644
--- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/AnswerComponent.js
@@ -131,9 +131,9 @@ export default ({ node, view, getPos }) => {
);
main.dispatch(main.state.tr.replaceSelectionWith(answerOption));
// create Empty Paragraph
- setTimeout(() => {
- helpers.createEmptyParagraph(context, newAnswerId);
- }, 120);
+ // setTimeout(() => {
+ // helpers.createEmptyParagraph(context, newAnswerId);
+ // }, 120);
}
}
});
--
GitLab