diff --git a/app/components/Editor.js b/app/components/Editor.js index 12bde5811..5a7008aa1 100644 --- a/app/components/Editor.js +++ b/app/components/Editor.js @@ -4,10 +4,13 @@ import * as React from "react"; import { useTranslation } from "react-i18next"; import { withRouter, type RouterHistory } from "react-router-dom"; import styled, { withTheme } from "styled-components"; +import { light } from "shared/styles/theme"; import UiStore from "stores/UiStore"; import ErrorBoundary from "components/ErrorBoundary"; import Tooltip from "components/Tooltip"; import embeds from "../embeds"; +import useMediaQuery from "hooks/useMediaQuery"; +import { type Theme } from "types"; import { isModKey } from "utils/keyboard"; import { uploadFile } from "utils/uploadFile"; import { isInternalUrl } from "utils/urls"; @@ -29,6 +32,7 @@ export type Props = {| placeholder?: string, maxLength?: number, scrollTo?: string, + theme?: Theme, handleDOMEvents?: Object, readOnlyWriteCheckboxes?: boolean, onBlur?: (event: SyntheticEvent<>) => any, @@ -53,6 +57,7 @@ type PropsWithRef = Props & { function Editor(props: PropsWithRef) { const { id, ui, history } = props; const { t } = useTranslation(); + const isPrinting = useMediaQuery("print"); const onUploadImage = React.useCallback( async (file: File) => { @@ -175,6 +180,7 @@ function Editor(props: PropsWithRef) { tooltip={EditorTooltip} dictionary={dictionary} {...props} + theme={isPrinting ? light : props.theme} /> ); diff --git a/app/components/Star.js b/app/components/Star.js index 4333b09f4..8e16f0fb1 100644 --- a/app/components/Star.js +++ b/app/components/Star.js @@ -61,6 +61,10 @@ export const AnimatedStar = styled(StarredIcon)` &:active { transform: scale(0.95); } + + @media print { + display: none; + } `; export default Star; diff --git a/app/scenes/Document/components/Editor.js b/app/scenes/Document/components/Editor.js index 875508462..b640ed795 100644 --- a/app/scenes/Document/components/Editor.js +++ b/app/scenes/Document/components/Editor.js @@ -6,6 +6,7 @@ import Textarea from "react-autosize-textarea"; import styled from "styled-components"; import breakpoint from "styled-components-breakpoint"; import { MAX_TITLE_LENGTH } from "shared/constants"; +import { light } from "shared/styles/theme"; import parseTitle from "shared/utils/parseTitle"; import Document from "models/Document"; import ClickablePadding from "components/ClickablePadding"; @@ -202,6 +203,12 @@ const Title = styled(Textarea)` } } } + + @media print { + color: ${(props) => light.text}; + -webkit-text-fill-color: ${(props) => light.text}; + background: none; + } `; export default DocumentEditor;