Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix problem editor margins and borders (#203)

Browse Source 
* fix: fix border and allow customizing of tinymce style

* fix: make tinymce widget look like on figma

* fix: update settingsoptions card border

* fix: header typography

* fix: spacings

* chore: update snapshots

* Update src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* fix: html and react problems in problem editor

* chore: update snapshots

* chore: apply pr suggestions

* chore: fix test coverage

* chore: fix lint

* chore: fix tests

* chore: fix lint

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
This commit is contained in:
Jesper Hodge
2023-01-20 15:59:30 -05:00
committed by GitHub
parent d6d3363866
commit 5aca835a4b
23 changed files with 592 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@@ -38,7 +38,7 @@
"@edx/frontend-platform": "2.4.0",
"@edx/paragon": "^20.27.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/react": "12.1.1",
"@testing-library/react": "^12.1.1",
"@testing-library/user-event": "^13.5.0",
"codecov": "3.8.3",
"enzyme": "3.11.0",

2
package.json
View File

@@ -38,7 +38,7 @@
"@edx/frontend-platform": "2.4.0",
"@edx/paragon": "^20.27.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/react": "12.1.1",
"@testing-library/react": "^12.1.1",
"@testing-library/user-event": "^13.5.0",
"codecov": "3.8.3",
"enzyme": "3.11.0",

1
src/colors.scss
View File

@@ -1 +0,0 @@
$black: #000;

9
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx
View File

@@ -6,7 +6,7 @@ import { Add } from '@edx/paragon/icons';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import messages from './messages';
import { initializeAnswerContainer } from '../../../hooks';
import { useAnswerContainer, isSingleAnswerProblem } from './hooks';
import { actions, selectors } from '../../../../../data/redux';
import { answerOptionProps } from '../../../../../data/services/cms/types';
import AnswerOption from './AnswerOption';
@@ -18,9 +18,12 @@ export const AnswersContainer = ({
addAnswer,
updateField,
}) => {
const { hasSingleAnswer } = initializeAnswerContainer({ answers, problemType, updateField });
const hasSingleAnswer = isSingleAnswerProblem(problemType);
useAnswerContainer({ answers, problemType, updateField });
return (
<div className="border rounded border-light-700 py-4 pl-4 pr-3">
<div className="border border-light-700 rounded py-4 pl-4 pr-3">
{answers.map((answer) => (
<AnswerOption
key={answer.id}

44
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx
View File

@@ -1,9 +1,22 @@
/* eslint-disable react/prop-types */
import React from 'react';
import { shallow } from 'enzyme';
import { act, render, waitFor } from '@testing-library/react';
import { actions, selectors } from '../../../../../data/redux';
import * as module from './AnswersContainer';
import { AnswersContainer as AnswersContainerWithoutHOC } from './AnswersContainer';
jest.mock('@edx/frontend-platform/i18n', () => ({
FormattedMessage: ({ defaultMessage }) => (<p>{defaultMessage}</p>),
injectIntl: (args) => args,
intlShape: {},
}));
jest.mock('./AnswerOption', () => () => <div>MockAnswerOption</div>);
jest.mock('../../../../../data/redux', () => ({
actions: {
problem: {
@@ -25,10 +38,37 @@ describe('AnswersContainer', () => {
};
describe('render', () => {
test('snapshot: renders correct default', () => {
expect(shallow(<module.AnswersContainer {...props} />)).toMatchSnapshot();
act(() => {
expect(shallow(<module.AnswersContainer {...props} />)).toMatchSnapshot();
});
});
test('snapshot: renders correctly with answers', () => {
expect(shallow(<module.AnswersContainer answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]} {...props} />)).toMatchSnapshot();
act(() => {
expect(shallow(
<module.AnswersContainer
{...props}
answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
/>,
)).toMatchSnapshot();
});
});
test('with react-testing-library', async () => {
let container = null;
await act(async () => {
const wrapper = render(
<AnswersContainerWithoutHOC
{...props}
answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
/>,
);
container = wrapper.container;
});
await waitFor(() => expect(container.querySelector('button')).toBeTruthy());
await new Promise(resolve => setTimeout(resolve, 500));
expect(props.updateField).toHaveBeenCalledWith(expect.objectContaining({ correctAnswerCount: 2 }));
});
});
describe('mapStateToProps', () => {

26
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
View File

@@ -2,7 +2,7 @@
exports[`AnswersContainer render snapshot: renders correct default 1`] = `
<div
className="border rounded border-light-700 py-4 pl-4 pr-3"
className="border border-light-700 rounded py-4 pl-4 pr-3"
>
<Button
className="pl-0 text-primary-500"
@@ -20,8 +20,30 @@ exports[`AnswersContainer render snapshot: renders correct default 1`] = `
exports[`AnswersContainer render snapshot: renders correctly with answers 1`] = `
<div
className="border rounded border-light-700 py-4 pl-4 pr-3"
className="border border-light-700 rounded py-4 pl-4 pr-3"
>
<Component
answer={
Object {
"correct": true,
"id": "a",
"title": "sOMetITlE",
}
}
hasSingleAnswer={false}
key="a"
/>
<Component
answer={
Object {
"correct": true,
"id": "b",
"title": "sOMetITlE",
}
}
hasSingleAnswer={false}
key="b"
/>
<Button
className="pl-0 text-primary-500"
onClick={[MockFunction]}

12
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hook.test.js
View File

@@ -1,5 +1,6 @@
import { useEffect } from 'react';
import { MockUseState } from '../../../../../../testUtils';
import { ProblemTypeKeys } from '../../../../../data/constants/problem';
import * as module from './hooks';
jest.mock('react', () => {
@@ -52,4 +53,15 @@ describe('Answer Options Hooks', () => {
expect(state.setState[key]).toHaveBeenCalledWith(true);
});
});
describe('isSingleAnswerProblem()', () => {
test('singleSelect', () => {
expect(module.isSingleAnswerProblem(ProblemTypeKeys.SINGLESELECT)).toBe(true);
});
test('multiSelect', () => {
expect(module.isSingleAnswerProblem(ProblemTypeKeys.MULTISELECT)).toBe(false);
});
test('dropdown', () => {
expect(module.isSingleAnswerProblem(ProblemTypeKeys.DROPDOWN)).toBe(true);
});
});
});

21
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js
View File

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { StrictDict } from '../../../../../utils';
import * as module from './hooks';
import { actions } from '../../../../../data/redux';
import { ProblemTypeKeys } from '../../../../../data/constants/problem';
export const state = StrictDict({
isFeedbackVisible: (val) => useState(val),
@@ -37,6 +38,22 @@ export const prepareFeedback = (answer) => {
};
};
export default {
state, removeAnswer, setAnswer, prepareFeedback,
export const isSingleAnswerProblem = (problemType) => (
problemType === ProblemTypeKeys.DROPDOWN || problemType === ProblemTypeKeys.SINGLESELECT
);
export const useAnswerContainer = ({ answers, updateField }) => {
useEffect(() => {
let answerCount = 0;
answers.forEach(answer => {
if (answer.correct) {
answerCount += 1;
}
});
updateField({ correctAnswerCount: answerCount });
}, []);
};
export default {
state, removeAnswer, setAnswer, prepareFeedback, isSingleAnswerProblem, useAnswerContainer,
};

2
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
View File

@@ -15,7 +15,7 @@ const AnswerWidget = ({
const problemStaticData = ProblemTypes[problemType];
return (
<div>
<div className="p-3 text-primary-500">
<div className="mt-4 mb-3 text-primary-500">
<div className="h4">
<FormattedMessage {...messages.answerWidgetTitle} />
</div>

6
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.scss
View File

@@ -1,5 +1,3 @@
@import '../../../../../../colors.scss';
.answer-option {
.answer-option-flex-item-1 {
flex-basis: 8.33%;
@@ -27,8 +25,8 @@
}
&:focus, &:hover {
border-bottom: 1px solid $black;
border-bottom: 1px solid #000;
}
}
}
}
}

15
src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
View File

@@ -6,6 +6,7 @@ import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
import * as hooks from '../../../hooks';
import { selectors, actions } from '../../../../../data/redux';
import { messages } from './messages';
import './index.scss';
// This widget should be connected, grab all questions from store, update them as needed.
export const QuestionWidget = ({
@@ -15,12 +16,11 @@ export const QuestionWidget = ({
const { editorRef, refReady, setEditorRef } = hooks.prepareEditorRef();
if (!refReady) { return null; }
return (
<div>
<div>
<h1>
<FormattedMessage {...messages.questionWidgetTitle} />
</h1>
<Editor {
<div className="question-widget">
<div className="h4">
<FormattedMessage {...messages.questionWidgetTitle} />
</div>
<Editor {
...hooks.problemEditorConfig({
setEditorRef,
editorRef,
@@ -28,8 +28,7 @@ export const QuestionWidget = ({
updateQuestion,
})
}
/>
</div>
/>
</div>
);
};

28
src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.scss Normal file
View File

@@ -0,0 +1,28 @@
.question-widget {
.tox-tinymce {
border-radius: 0.375rem;
}
.tox {
.tox-toolbar__primary {
background: none;
}
}
.tox-statusbar {
border-top: none;
}
.tox-toolbar__group:not(:last-of-type) {
// TODO: Find a way to override the border without !important
border-right: none !important;
&:after {
content: '';
position: relative;
left: 5px;
border: 1px solid #eae6e5;
height: 24px;
}
}
}

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.jsx
View File

@@ -12,7 +12,7 @@ export const SettingsOption = ({
const { isCardCollapsed, toggleCardCollapse } = showFullCard();
return (
<Card>
<Card className="border border-light-700 shadow-none">
<Card.Section className="settingsCardTitleSection">
<Collapsible.Advanced
open={isCardCollapsed}

4
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap
View File

@@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SettingsOption render snapshot: renders correct 1`] = `
<Card>
<Card
className="border border-light-700 shadow-none"
>
<Card.Section
className="settingsCardTitleSection"
>

334
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
View File

@@ -2,182 +2,182 @@
exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
<div>
<div>
<h3>
<FormattedMessage
defaultMessage="Settings"
description="Settings Title"
id="authoring.problemeditor.settings.settingsWidgetTitle"
/>
</h3>
<Container>
<Row>
<Col>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
/>
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="mt-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row>
<Advanced
open={true}
>
<Body
className="collapsible-body"
>
<Button
className="my-3 ml-2"
size="inline"
variant="link"
>
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Button>
</Body>
</Advanced>
</Row>
<Advanced
open={false}
>
<Body
className="collapsible-body"
>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
</Body>
</Advanced>
</Col>
</Row>
</Container>
<div
className="h4"
>
<FormattedMessage
defaultMessage="Settings"
description="Settings Title"
id="authoring.problemeditor.settings.settingsWidgetTitle"
/>
</div>
</div>
`;
exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = `
<div>
<div>
<h3>
<FormattedMessage
defaultMessage="Settings"
description="Settings Title"
id="authoring.problemeditor.settings.settingsWidgetTitle"
/>
</h3>
<Container>
<Row>
<Col>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
/>
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="mt-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row>
<Advanced
open={false}
>
<Body
className="collapsible-body"
>
<Button
className="my-3 ml-2"
size="inline"
variant="link"
>
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Button>
</Body>
</Advanced>
</Row>
<Container>
<Row>
<Col>
<Row
className="mb-2"
>
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
/>
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="mt-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row>
<Advanced
open={true}
>
<Body
className="collapsible-body"
>
<Row
className="my-2"
<Button
className="my-3 ml-2"
size="inline"
variant="link"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Button>
</Body>
</Advanced>
</Col>
</Row>
</Container>
</div>
</Row>
<Advanced
open={false}
>
<Body
className="collapsible-body"
>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
</Body>
</Advanced>
</Col>
</Row>
</Container>
</div>
`;
exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = `
<div>
<div
className="h4"
>
<FormattedMessage
defaultMessage="Settings"
description="Settings Title"
id="authoring.problemeditor.settings.settingsWidgetTitle"
/>
</div>
<Container>
<Row>
<Col>
<Row
className="mb-2"
>
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
/>
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="mt-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row>
<Advanced
open={false}
>
<Body
className="collapsible-body"
>
<Button
className="my-3 ml-2"
size="inline"
variant="link"
>
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Button>
</Body>
</Advanced>
</Row>
<Advanced
open={true}
>
<Body
className="collapsible-body"
>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
</Body>
</Advanced>
</Col>
</Row>
</Container>
</div>
`;

111
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
View File

@@ -33,68 +33,65 @@ export const SettingsWidget = ({
const { isAdvancedCardsVisible, showAdvancedCards } = showAdvancedSettingsCards();
return (
<div>
<div>
<h3>
<FormattedMessage {...messages.settingsWidgetTitle} />
</h3>
<Container>
<Row>
<Col>
<Row className="my-2">
<TypeCard
answers={answers}
correctAnswerCount={correctAnswerCount}
problemType={problemType}
updateField={updateField}
updateAnswer={updateAnswer}
/>
</Row>
<Row className="my-2">
<ScoringCard scoring={settings.scoring} updateSettings={updateSettings} />
</Row>
<Row className="mt-2">
<HintsCard hints={settings.hints} updateSettings={updateSettings} />
</Row>
<div className="h4">
<FormattedMessage {...messages.settingsWidgetTitle} />
</div>
<Container>
<Row>
<Col>
<Row className="mb-2">
<TypeCard
answers={answers}
correctAnswerCount={correctAnswerCount}
problemType={problemType}
updateField={updateField}
updateAnswer={updateAnswer}
/>
</Row>
<Row className="my-2">
<ScoringCard scoring={settings.scoring} updateSettings={updateSettings} />
</Row>
<Row className="mt-2">
<HintsCard hints={settings.hints} updateSettings={updateSettings} />
</Row>
<Row>
<Collapsible.Advanced open={!isAdvancedCardsVisible}>
<Collapsible.Body className="collapsible-body">
<Button
className="my-3 ml-2"
variant="link"
size="inline"
onClick={showAdvancedCards}
>
<FormattedMessage {...messages.showAdvanceSettingsButtonText} />
</Button>
</Collapsible.Body>
</Collapsible.Advanced>
</Row>
<Collapsible.Advanced open={isAdvancedCardsVisible}>
<Row>
<Collapsible.Advanced open={!isAdvancedCardsVisible}>
<Collapsible.Body className="collapsible-body">
<Row className="my-2">
<ShowAnswerCard showAnswer={settings.showAnswer} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<ResetCard showResetButton={settings.showResetButton} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<MatlabCard matLabApiKey={settings.matLabApiKey} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<SwitchToAdvancedEditorCard />
</Row>
<Button
className="my-3 ml-2"
variant="link"
size="inline"
onClick={showAdvancedCards}
>
<FormattedMessage {...messages.showAdvanceSettingsButtonText} />
</Button>
</Collapsible.Body>
</Collapsible.Advanced>
</Col>
</Row>
</Container>
</div>
</Row>
<Collapsible.Advanced open={isAdvancedCardsVisible}>
<Collapsible.Body className="collapsible-body">
<Row className="my-2">
<ShowAnswerCard showAnswer={settings.showAnswer} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<ResetCard showResetButton={settings.showResetButton} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<MatlabCard matLabApiKey={settings.matLabApiKey} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<SwitchToAdvancedEditorCard />
</Row>
</Collapsible.Body>
</Collapsible.Advanced>
</Col>
</Row>
</Container>
</div>
);
};

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx
View File

@@ -12,7 +12,7 @@ export const SwitchToAdvancedEditorCard = ({
}) => {
const [isConfirmOpen, setConfirmOpen] = React.useState(false);
return (
<Card>
<Card className="border border-light-700 shadow-none">
<BaseModal
isOpen={isConfirmOpen}
close={() => { setConfirmOpen(false); }}

4
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
View File

@@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCard 1`] = `
<Card>
<Card
className="border border-light-700 shadow-none"
>
<BaseModal
close={[Function]}
confirmAction={

2
src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
View File

@@ -5,6 +5,7 @@ exports[`EditorProblemView component renders raw editor 1`] = `
getContent={[Function]}
>
<Container
className="mt-3 px-4"
fluid={true}
>
<Row>
@@ -38,6 +39,7 @@ exports[`EditorProblemView component renders simple view 1`] = `
getContent={[Function]}
>
<Container
className="mt-3 px-4"
fluid={true}
>
<Row>

2
src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
View File

@@ -24,7 +24,7 @@ export const EditProblemView = ({
return (
<EditorContainer getContent={getContent}>
<Container fluid>
<Container fluid className="mt-3 px-4">
<Row>
<Col xs={9}>
{isAdvancedProblemType ? (

13
src/editors/containers/ProblemEditor/hooks.js
View File

@@ -1,7 +1,6 @@
import {
useRef, useCallback, useState, useEffect,
} from 'react';
import { ProblemTypeKeys } from '../../data/constants/problem';
import tinyMCEStyles from '../../data/constants/tinyMCEStyles';
import { StrictDict } from '../../utils';
import * as module from './hooks';
@@ -42,15 +41,3 @@ export const prepareEditorRef = () => {
useEffect(() => setRefReady(true), [setRefReady]);
return { editorRef, refReady, setEditorRef };
};
export const initializeAnswerContainer = ({ answers, problemType, updateField }) => {
const hasSingleAnswer = problemType === ProblemTypeKeys.DROPDOWN || problemType === ProblemTypeKeys.SINGLESELECT;
let answerCount = 0;
answers.forEach(answer => {
if (answer.correct) {
answerCount += 1;
}
});
updateField({ correctAnswerCount: answerCount });
return { hasSingleAnswer };
};

428
src/editors/data/constants/tinyMCEStyles.js
View File

@@ -1,214 +1,220 @@
export default `@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
const getStyles = () => (
`@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
.mce-content-body *[contentEditable=false] {
cursor: default;
}
.mce-content-body *[contentEditable=true] {
cursor: text;
}
.mce-content-body div.mce-resizehandle {
background-color: #4099ff;
border-color: #4099ff;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
height: 10px;
position: absolute;
width: 10px;
z-index: 1298;
}
.mce-content-body div.mce-resizehandle:hover {
background-color: #4099ff;
}
.mce-content-body div.mce-resizehandle:nth-of-type(1) {
cursor: nwse-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(2) {
cursor: nesw-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(3) {
cursor: nwse-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(4) {
cursor: nesw-resize;
}
.mce-content-body .mce-resize-backdrop {
z-index: 10000;
}
.mce-content-body .mce-clonedresizable {
cursor: default;
opacity: 0.5;
outline: 1px dashed black;
position: absolute;
z-index: 10001;
}
.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
border: 0;
}
.mce-content-body .mce-resize-helper {
background: #555;
background: rgba(0, 0, 0, 0.75);
border: 1px;
border-radius: 3px;
color: white;
display: none;
font-family: sans-serif;
font-size: 12px;
line-height: 14px;
margin: 5px 10px;
padding: 5px;
position: absolute;
white-space: nowrap;
z-index: 10002;
}
.mce-content-body img[data-mce-selected],
.mce-content-body video[data-mce-selected],
.mce-content-body audio[data-mce-selected],
.mce-content-body object[data-mce-selected],
.mce-content-body embed[data-mce-selected],
.mce-content-body table[data-mce-selected] {
outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false][data-mce-selected] {
cursor: not-allowed;
outline: 3px solid #b4d7ff;
}
.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
outline: none;
}
.mce-content-body *[data-mce-selected="inline-boundary"] {
background-color: #b4d7ff;
}
.mce-content-body .mce-edit-focus {
outline: 3px solid #b4d7ff;
}
.mce-content-body img::-moz-selection {
background: none;
}
.mce-content-body img::selection {
background: none;
}
.mce-content-body {
padding: 10px;
background-color: #fff;
font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
scrollbar-3dlight-color: #F0F0EE;
scrollbar-arrow-color: #676662;
scrollbar-base-color: #F0F0EE;
scrollbar-darkshadow-color: #DDDDDD;
scrollbar-face-color: #E0E0DD;
scrollbar-highlight-color: #F0F0EE;
scrollbar-shadow-color: #F0F0EE;
scrollbar-track-color: #F5F5F5;
}
.mce-content-body h1,
.mce-content-body .hd-1 {
color: #3c3c3c;
font-weight: normal;
font-size: 2em;
line-height: 1.4em;
margin: 0 0 1.41575em 0;
}
.mce-content-body h2,
.mce-content-body .hd-2 {
letter-spacing: 1px;
margin-bottom: 15px;
color: #646464;
font-weight: 300;
font-size: 1.2em;
line-height: 1.2em;
text-transform: uppercase;
}
.mce-content-body h3,
.mce-content-body .hd-3 {
margin: 0 0 10px 0;
font-size: 1.1125em;
font-weight: 400;
text-transform: initial;
}
.mce-content-body .hd-3,
.mce-content-body h4,
.mce-content-body .hd-4,
.mce-content-body h5,
.mce-content-body .hd-5,
.mce-content-body h6,
.mce-content-body .hd-6 {
margin: 0 0 10px 0;
font-weight: 600;
}
.mce-content-body h4,
.mce-content-body .hd-4 {
font-size: 1em;
}
.mce-content-body h5,
.mce-content-body .hd-5 {
font-size: 0.83em;
}
.mce-content-body h6,
.mce-content-body .hd-6 {
font-size: 0.75em;
}
.mce-content-body p {
margin-bottom: 1.416em;
font-size: 1em;
line-height: 1.6em !important;
color: #3c3c3c;
}
.mce-content-body em, .mce-content-body i {
font-style: italic;
}
.mce-content-body strong, .mce-content-body b {
font-weight: bold;
}
.mce-content-body p + p, .mce-content-body ul + p, .mce-content-body ol + p {
margin-top: 20px;
}
.mce-content-body ol, .mce-content-body ul {
margin: 1em 0;
padding: 0 0 0 1em;
color: #3c3c3c;
}
.mce-content-body ol li, .mce-content-body ul li {
margin-bottom: 0.708em;
}
.mce-content-body ol {
list-style: decimal outside none;
margin: 0;
}
.mce-content-body ul {
list-style: disc outside none;
margin: 0;
}
.mce-content-body a, .mce-content-body a:link, .mce-content-body a:visited, .mce-content-body a:hover, .mce-content-body a:active {
color: #0075b4;
text-decoration: none;
}
.mce-content-body img {
max-width: 100%;
height: auto;
}
.mce-content-body pre {
margin: 1em 0;
color: #3c3c3c;
font-family: monospace, serif;
font-size: 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
.mce-content-body code {
font-family: monospace, serif;
.mce-content-body *[contentEditable=false] {
cursor: default;
}
.mce-content-body *[contentEditable=true] {
cursor: text;
}
.mce-content-body div.mce-resizehandle {
background-color: #4099ff;
border-color: #4099ff;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
height: 10px;
position: absolute;
width: 10px;
z-index: 1298;
}
.mce-content-body div.mce-resizehandle:hover {
background-color: #4099ff;
}
.mce-content-body div.mce-resizehandle:nth-of-type(1) {
cursor: nwse-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(2) {
cursor: nesw-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(3) {
cursor: nwse-resize;
}
.mce-content-body div.mce-resizehandle:nth-of-type(4) {
cursor: nesw-resize;
}
.mce-content-body .mce-resize-backdrop {
z-index: 10000;
}
.mce-content-body .mce-clonedresizable {
cursor: default;
opacity: 0.5;
outline: 1px dashed black;
position: absolute;
z-index: 10001;
}
.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
border: 0;
}
.mce-content-body .mce-resize-helper {
background: #555;
background: rgba(0, 0, 0, 0.75);
border: 1px;
border-radius: 3px;
color: white;
display: none;
font-family: sans-serif;
font-size: 12px;
line-height: 14px;
margin: 5px 10px;
padding: 5px;
position: absolute;
white-space: nowrap;
z-index: 10002;
}
.mce-content-body img[data-mce-selected],
.mce-content-body video[data-mce-selected],
.mce-content-body audio[data-mce-selected],
.mce-content-body object[data-mce-selected],
.mce-content-body embed[data-mce-selected],
.mce-content-body table[data-mce-selected] {
outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
outline: 3px solid #b4d7ff;
}
.mce-content-body *[contentEditable=false][data-mce-selected] {
cursor: not-allowed;
outline: 3px solid #b4d7ff;
}
.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
outline: none;
}
.mce-content-body *[data-mce-selected="inline-boundary"] {
background-color: #b4d7ff;
}
.mce-content-body .mce-edit-focus {
outline: 3px solid #b4d7ff;
}
.mce-content-body img::-moz-selection {
background: none;
}
.mce-content-body img::selection {
background: none;
}
.mce-content-body {
padding: 10px;
background-color: #fff;
font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
scrollbar-3dlight-color: #F0F0EE;
scrollbar-arrow-color: #676662;
scrollbar-base-color: #F0F0EE;
scrollbar-darkshadow-color: #DDDDDD;
scrollbar-face-color: #E0E0DD;
scrollbar-highlight-color: #F0F0EE;
scrollbar-shadow-color: #F0F0EE;
scrollbar-track-color: #F5F5F5;
}
.mce-content-body h1,
.mce-content-body .hd-1 {
color: #3c3c3c;
font-weight: normal;
font-size: 2em;
line-height: 1.4em;
margin: 0 0 1.41575em 0;
}
.mce-content-body h2,
.mce-content-body .hd-2 {
letter-spacing: 1px;
margin-bottom: 15px;
color: #646464;
font-weight: 300;
font-size: 1.2em;
line-height: 1.2em;
text-transform: uppercase;
}
.mce-content-body h3,
.mce-content-body .hd-3 {
margin: 0 0 10px 0;
font-size: 1.1125em;
font-weight: 400;
text-transform: initial;
}
.mce-content-body .hd-3,
.mce-content-body h4,
.mce-content-body .hd-4,
.mce-content-body h5,
.mce-content-body .hd-5,
.mce-content-body h6,
.mce-content-body .hd-6 {
margin: 0 0 10px 0;
font-weight: 600;
}
.mce-content-body h4,
.mce-content-body .hd-4 {
font-size: 1em;
}
.mce-content-body h5,
.mce-content-body .hd-5 {
font-size: 0.83em;
}
.mce-content-body h6,
.mce-content-body .hd-6 {
font-size: 0.75em;
}
.mce-content-body p {
margin-bottom: 1.416em;
font-size: 1em;
line-height: 1.6em !important;
color: #3c3c3c;
}
.mce-content-body em, .mce-content-body i {
font-style: italic;
}
.mce-content-body strong, .mce-content-body b {
font-weight: bold;
}
.mce-content-body p + p, .mce-content-body ul + p, .mce-content-body ol + p {
margin-top: 20px;
}
.mce-content-body ol, .mce-content-body ul {
margin: 1em 0;
padding: 0 0 0 1em;
color: #3c3c3c;
}
.mce-content-body ol li, .mce-content-body ul li {
margin-bottom: 0.708em;
}
.mce-content-body ol {
list-style: decimal outside none;
margin: 0;
}
.mce-content-body ul {
list-style: disc outside none;
margin: 0;
}
.mce-content-body a, .mce-content-body a:link, .mce-content-body a:visited, .mce-content-body a:hover, .mce-content-body a:active {
color: #0075b4;
text-decoration: none;
}
.mce-content-body img {
max-width: 100%;
height: auto;
}
.mce-content-body pre {
margin: 1em 0;
color: #3c3c3c;
padding: 0;
}`;
font-family: monospace, serif;
font-size: 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
.mce-content-body code {
font-family: monospace, serif;
background: none;
color: #3c3c3c;
padding: 0;
}`
);
export { getStyles };
export default getStyles({});

1
src/index.scss
View File

@@ -1 +0,0 @@
@import './colors.scss';