From 74c77943d0d958e7c9a8ca4d006fa54d89f57bbf Mon Sep 17 00:00:00 2001
From: Vukile Langa <vukilelanga@me.com>
Date: Wed, 24 Apr 2024 13:21:06 +0200
Subject: [PATCH] fix(components): `showDelete` on standard `QuestionComponent`
---
editors/demo/src/Editors.js | 3 ++-
.../components/EditorComponent.js | 19 +++++++++++++------
.../components/QuestionComponent.js | 2 +-
3 files changed, 16 insertions(+), 8 deletions(-)
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 78a82dca4..9227cb24d 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
import React, { useState } from 'react';
import styled, { css } from 'styled-components';
import { createGlobalStyle } from 'styled-components';
@@ -90,7 +91,7 @@ const Editors = () => {
case 'oen':
return <OEN />;
default:
- return <Editoria />;
+ return <HHMI />;
}
};
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
index 9297b6c8e..53c08038f 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-plusplus */
/* eslint-disable react/prop-types */
import React, { useContext, useRef, useEffect } from 'react';
import styled from 'styled-components';
@@ -32,9 +33,10 @@ const EditorWrapper = styled.div`
border: none;
display: flex;
flex: 2 1 auto;
- width: 100%;
justify-content: left;
padding: ${props => (props.showDelete ? '0px 20px 10px 20px' : `0px`)};
+ width: 100%;
+
.ProseMirror {
white-space: break-spaces;
width: 100%;
@@ -45,8 +47,8 @@ const EditorWrapper = styled.div`
}
:empty::before {
- content: 'Type your item';
color: #aaa;
+ content: 'Type your item';
float: left;
font-style: italic;
pointer-events: none;
@@ -72,12 +74,12 @@ const EditorWrapper = styled.div`
const ActionButton = styled.button`
background: transparent;
- cursor: pointer;
- margin-top: 16px;
border: none;
- position: relative;
bottom: 14px;
+ cursor: pointer;
float: right;
+ margin-top: 16px;
+ position: relative;
`;
const StyledIconActionRemove = styled(Icon)`
@@ -94,7 +96,6 @@ const QuestionEditorComponent = ({
placeholderText = 'Type your item',
QuestionType = 'Multiple',
forceEditable = false,
- showDelete = false,
}) => {
const editorRef = useRef();
@@ -103,6 +104,10 @@ const QuestionEditorComponent = ({
app,
pmViews: { main },
} = context;
+
+ const customProps = main.props.customValues;
+ const { testMode } = customProps;
+
let questionView;
const questionId = node.attrs.id;
let isEditable = main.props.editable(editable => {
@@ -110,6 +115,8 @@ const QuestionEditorComponent = ({
});
if (forceEditable) isEditable = true;
+ const showDelete = !testMode && isEditable;
+
let finalPlugins = [FakeCursorPlugin(), gapCursor(), dropCursor()];
const createKeyBindings = () => {
diff --git a/wax-questions-service/src/MultipleChoiceQuestionService/components/QuestionComponent.js b/wax-questions-service/src/MultipleChoiceQuestionService/components/QuestionComponent.js
index 2d4338660..0f5e0f303 100644
--- a/wax-questions-service/src/MultipleChoiceQuestionService/components/QuestionComponent.js
+++ b/wax-questions-service/src/MultipleChoiceQuestionService/components/QuestionComponent.js
@@ -2,5 +2,5 @@ import React from 'react';
import EditorComponent from './EditorComponent';
export default ({ node, view, getPos }) => {
- return <EditorComponent getPos={getPos} node={node} showDelete view={view} />;
+ return <EditorComponent getPos={getPos} node={node} view={view} />;
};
--
GitLab