From d25ae09273908954a24b1d45fdeb80f779795a31 Mon Sep 17 00:00:00 2001 From: ruzniaievdm Date: Thu, 3 Aug 2023 19:44:07 +0300 Subject: [PATCH] feat: Add TinyMceWidget on export (#365) --- .../AnswerWidget/AnswerOption.test.jsx | 2 + .../ExplanationWidget/index.test.jsx | 2 + .../QuestionWidget/index.test.jsx | 2 + .../containers/TextEditor/index.test.jsx | 2 + .../__snapshots__/index.test.jsx.snap | 45 ++++++++++++++++--- .../sharedComponents/TinyMceWidget/index.jsx | 11 +++-- .../TinyMceWidget/index.test.jsx | 3 ++ src/index.jsx | 4 ++ 8 files changed, 62 insertions(+), 9 deletions(-) diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx index 59a0be48b..69a4cba2f 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx @@ -5,6 +5,8 @@ import { selectors } from '../../../../../data/redux'; import { AnswerOption, mapStateToProps } from './AnswerOption'; jest.mock('../../../../../data/redux', () => ({ + __esModule: true, + default: jest.fn(), selectors: { problem: { answers: jest.fn(state => ({ answers: state })), diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx index 178da1e86..aaca85768 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx @@ -6,6 +6,8 @@ import { selectors } from '../../../../../data/redux'; import { ExplanationWidget, mapStateToProps } from '.'; jest.mock('../../../../../data/redux', () => ({ + __esModule: true, + default: jest.fn(), selectors: { problem: { settings: jest.fn(state => ({ question: state })), diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx index 80b288a7b..7f76acd6a 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx @@ -6,6 +6,8 @@ import { selectors } from '../../../../../data/redux'; import { QuestionWidget, mapStateToProps } from '.'; jest.mock('../../../../../data/redux', () => ({ + __esModule: true, + default: jest.fn(), actions: { problem: { updateQuestion: jest.fn().mockName('actions.problem.updateQuestion'), diff --git a/src/editors/containers/TextEditor/index.test.jsx b/src/editors/containers/TextEditor/index.test.jsx index 196f5028b..b17d90040 100644 --- a/src/editors/containers/TextEditor/index.test.jsx +++ b/src/editors/containers/TextEditor/index.test.jsx @@ -42,6 +42,8 @@ jest.mock('react', () => { }); jest.mock('../../data/redux', () => ({ + __esModule: true, + default: jest.fn(), actions: { app: { initializeEditor: jest.fn().mockName('actions.app.initializeEditor'), diff --git a/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap index 3be7c557b..7c034be85 100644 --- a/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap +++ b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap @@ -1,7 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = ` - + - + `; exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = ` - + - + `; exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] = ` - + - + `; diff --git a/src/editors/sharedComponents/TinyMceWidget/index.jsx b/src/editors/sharedComponents/TinyMceWidget/index.jsx index 35db0cca7..f00c803fa 100644 --- a/src/editors/sharedComponents/TinyMceWidget/index.jsx +++ b/src/editors/sharedComponents/TinyMceWidget/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { connect } from 'react-redux'; +import { Provider, connect } from 'react-redux'; import PropTypes from 'prop-types'; import { Editor } from '@tinymce/tinymce-react'; @@ -21,6 +21,7 @@ import 'tinymce/plugins/image'; import 'tinymce/plugins/imagetools'; import 'tinymce/plugins/quickbars'; +import store from '../../data/store'; import { selectors } from '../../data/redux'; import ImageUploadModal from '../ImageUploadModal'; import SourceCodeModal from '../SourceCodeModal'; @@ -37,6 +38,7 @@ export const TinyMceWidget = ({ isLibrary, lmsEndpointUrl, studioEndpointUrl, + updateContent, ...props }) => { const { isImgOpen, openImgModal, closeImgModal } = hooks.imgModalToggle(); @@ -46,7 +48,7 @@ export const TinyMceWidget = ({ const imageSelection = hooks.selectedImage(null); return ( - <> + {isLibrary ? null : ( - + ); }; TinyMceWidget.defaultProps = { @@ -97,6 +100,7 @@ TinyMceWidget.defaultProps = { id: null, disabled: false, editorContentHtml: undefined, + updateContent: () => ({}), }; TinyMceWidget.propTypes = { editorType: PropTypes.string, @@ -108,6 +112,7 @@ TinyMceWidget.propTypes = { id: PropTypes.string, disabled: PropTypes.bool, editorContentHtml: PropTypes.string, + updateContent: PropTypes.func, }; export const mapStateToProps = (state) => ({ diff --git a/src/editors/sharedComponents/TinyMceWidget/index.test.jsx b/src/editors/sharedComponents/TinyMceWidget/index.test.jsx index d328c401e..913a0c5ed 100644 --- a/src/editors/sharedComponents/TinyMceWidget/index.test.jsx +++ b/src/editors/sharedComponents/TinyMceWidget/index.test.jsx @@ -23,6 +23,8 @@ jest.mock('../ImageUploadModal', () => 'ImageUploadModal'); jest.mock('../SourceCodeModal', () => 'SourceCodeModal'); jest.mock('../../data/redux', () => ({ + __esModule: true, + default: jest.fn(), selectors: { app: { lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })), @@ -64,6 +66,7 @@ describe('TinyMceWidget', () => { studioEndpointUrl: 'sOmEoThERvaLue.cOm', disabled: false, id: 'sOMeiD', + updateContent: () => ({}), }; describe('snapshots', () => { imgModalToggle.mockReturnValue({ diff --git a/src/index.jsx b/src/index.jsx index 682dfec98..245c375de 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -5,6 +5,8 @@ import VideoSelectorPage from './editors/VideoSelectorPage'; import DraggableList, { SortableItem } from './editors/sharedComponents/DraggableList'; import ErrorAlert from './editors/sharedComponents/ErrorAlerts/ErrorAlert'; import Footer from './footer'; +import { TinyMceWidget } from './editors/sharedComponents/TinyMceWidget'; +import { prepareEditorRef } from './editors/sharedComponents/TinyMceWidget/hooks'; export { messages, @@ -14,5 +16,7 @@ export { SortableItem, ErrorAlert, Footer, + TinyMceWidget, + prepareEditorRef, }; export default Placeholder;