From 5aca835a4b021a9796e9fe4cb7ba62e65911567c Mon Sep 17 00:00:00 2001 From: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com> Date: Fri, 20 Jan 2023 15:59:30 -0500 Subject: [PATCH] Fix problem editor margins and borders (#203) * 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> --- package-lock.json | 2 +- package.json | 2 +- src/colors.scss | 1 - .../AnswerWidget/AnswersContainer.jsx | 9 +- .../AnswerWidget/AnswersContainer.test.jsx | 44 +- .../AnswersContainer.test.jsx.snap | 26 +- .../EditProblemView/AnswerWidget/hook.test.js | 12 + .../EditProblemView/AnswerWidget/hooks.js | 21 +- .../EditProblemView/AnswerWidget/index.jsx | 2 +- .../EditProblemView/AnswerWidget/index.scss | 6 +- .../EditProblemView/QuestionWidget/index.jsx | 15 +- .../EditProblemView/QuestionWidget/index.scss | 28 ++ .../SettingsWidget/SettingsOption.jsx | 2 +- .../SettingsOption.test.jsx.snap | 4 +- .../__snapshots__/index.test.jsx.snap | 334 +++++++------- .../EditProblemView/SettingsWidget/index.jsx | 111 +++-- .../SwitchToAdvancedEditorCard.jsx | 2 +- .../SwitchToAdvancedEditorCard.test.jsx.snap | 4 +- .../__snapshots__/index.test.jsx.snap | 2 + .../components/EditProblemView/index.jsx | 2 +- src/editors/containers/ProblemEditor/hooks.js | 13 - src/editors/data/constants/tinyMCEStyles.js | 428 +++++++++--------- src/index.scss | 1 - 23 files changed, 592 insertions(+), 479 deletions(-) delete mode 100644 src/colors.scss create mode 100644 src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.scss diff --git a/package-lock.json b/package-lock.json index 930a72c40..27075c386 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index bc07d0ddb..fc5f9b095 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/colors.scss b/src/colors.scss deleted file mode 100644 index f3c642859..000000000 --- a/src/colors.scss +++ /dev/null @@ -1 +0,0 @@ -$black: #000; \ No newline at end of file diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx index eea060eb5..42c079a4f 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx @@ -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 ( -
+
{answers.map((answer) => ( ({ + FormattedMessage: ({ defaultMessage }) => (

{defaultMessage}

), + injectIntl: (args) => args, + intlShape: {}, +})); + +jest.mock('./AnswerOption', () => () =>
MockAnswerOption
); + jest.mock('../../../../../data/redux', () => ({ actions: { problem: { @@ -25,10 +38,37 @@ describe('AnswersContainer', () => { }; describe('render', () => { test('snapshot: renders correct default', () => { - expect(shallow()).toMatchSnapshot(); + act(() => { + expect(shallow()).toMatchSnapshot(); + }); }); test('snapshot: renders correctly with answers', () => { - expect(shallow()).toMatchSnapshot(); + act(() => { + expect(shallow( + , + )).toMatchSnapshot(); + }); + }); + + test('with react-testing-library', async () => { + let container = null; + await act(async () => { + const wrapper = render( + , + ); + 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', () => { diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap index fef7eb828..07078350c 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap @@ -2,7 +2,7 @@ exports[`AnswersContainer render snapshot: renders correct default 1`] = `
- - - - - - - - - - - - - - - - - - - - - - - - - +
+
-
-`; - -exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = ` -
-
-

- -

- - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - - - - - - - + + - - - -
+ + + + + + + + + + + + + + + + + + + + + + + +
+`; + +exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = ` +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
`; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx index cef24d973..b8f0aa374 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx @@ -33,68 +33,65 @@ export const SettingsWidget = ({ const { isAdvancedCardsVisible, showAdvancedCards } = showAdvancedSettingsCards(); return (
-
-

- -

- - - - - - - - - - - - +
+ +
+ + + + + + + + + + + + - - - - - - - - - + + - - - - - - - - - - - - - - - + - - - -
+ + + + + + + + + + + + + + + + + + + + + + +
); }; diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx index 297854a5b..e68e10351 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx @@ -12,7 +12,7 @@ export const SwitchToAdvancedEditorCard = ({ }) => { const [isConfirmOpen, setConfirmOpen] = React.useState(false); return ( - + { setConfirmOpen(false); }} diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap index 07768a93c..cbe4b6508 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCard 1`] = ` - + @@ -38,6 +39,7 @@ exports[`EditorProblemView component renders simple view 1`] = ` getContent={[Function]} > diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx index 710c3e635..f43ddd1d2 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx @@ -24,7 +24,7 @@ export const EditProblemView = ({ return ( - + {isAdvancedProblemType ? ( diff --git a/src/editors/containers/ProblemEditor/hooks.js b/src/editors/containers/ProblemEditor/hooks.js index fea936b0c..63ab97f6b 100644 --- a/src/editors/containers/ProblemEditor/hooks.js +++ b/src/editors/containers/ProblemEditor/hooks.js @@ -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 }; -}; diff --git a/src/editors/data/constants/tinyMCEStyles.js b/src/editors/data/constants/tinyMCEStyles.js index a5c9f4f55..d201a86fd 100644 --- a/src/editors/data/constants/tinyMCEStyles.js +++ b/src/editors/data/constants/tinyMCEStyles.js @@ -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({}); diff --git a/src/index.scss b/src/index.scss index 491817e5c..e69de29bb 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1 +0,0 @@ -@import './colors.scss'; \ No newline at end of file