github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-24 18:56:32 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix: forced dark mode for iframe

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-11 16:50:43 +02:00
parent 0240f13f94
commit ff11976868
No known key found for this signature in database
GPG key ID: 42498463316F048B
3 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/editor-page/renderer-pane/hooks/use-send-dark-mode-status-to-renderer.ts
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import { useApplicationState } from '../../../../hooks/common/use-application-state' import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { DarkModePreference } from '../../../../redux/dark-mode/types'
import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer' import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer'
import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message' import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
import { useMemo } from 'react' import { useMemo } from 'react'
@ -14,16 +15,23 @@ import { useMemo } from 'react'
* @param forcedDarkMode Overwrites the value from the global application states if set. * @param forcedDarkMode Overwrites the value from the global application states if set.
* @param rendererReady Defines if the target renderer is ready * @param rendererReady Defines if the target renderer is ready
*/ */
export const useSendDarkModeStatusToRenderer = (forcedDarkMode: boolean | undefined, rendererReady: boolean): void => { export const useSendDarkModeStatusToRenderer = (
rendererReady: boolean,
forcedDarkMode: DarkModePreference = DarkModePreference.AUTO
): void => {
const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference) const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference)
const darkMode = useMemo(() => {
return forcedDarkMode === DarkModePreference.AUTO ? darkModePreference : forcedDarkMode
}, [darkModePreference, forcedDarkMode])
useSendToRenderer( useSendToRenderer(
useMemo( useMemo(
() => ({ () => ({
type: CommunicationMessageType.SET_DARKMODE, type: CommunicationMessageType.SET_DARKMODE,
preference: darkModePreference preference: darkMode
}), }),
[darkModePreference] [darkMode]
), ),
rendererReady rendererReady
) )

5
frontend/src/components/editor-page/renderer-pane/render-iframe.tsx
View file

@ -3,6 +3,7 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import type { DarkModePreference } from '../../../redux/dark-mode/types'
import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute' import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
import { Logger } from '../../../utils/logger' import { Logger } from '../../../utils/logger'
import { isTestMode } from '../../../utils/test-modes' import { isTestMode } from '../../../utils/test-modes'
@ -28,7 +29,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } fr
export interface RenderIframeProps extends RendererProps { export interface RenderIframeProps extends RendererProps {
rendererType: RendererType rendererType: RendererType
forcedDarkMode?: boolean forcedDarkMode?: DarkModePreference
frameClasses?: string frameClasses?: string
onRendererStatusChange?: undefined | ((rendererReady: boolean) => void) onRendererStatusChange?: undefined | ((rendererReady: boolean) => void)
adaptFrameHeightToContent?: boolean adaptFrameHeightToContent?: boolean
@ -144,7 +145,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
) )
useEffectOnRenderTypeChange(rendererType, onIframeLoad) useEffectOnRenderTypeChange(rendererType, onIframeLoad)
useSendDarkModeStatusToRenderer(forcedDarkMode, rendererReady) useSendDarkModeStatusToRenderer(rendererReady, forcedDarkMode)
useSendMarkdownToRenderer(markdownContentLines, rendererReady) useSendMarkdownToRenderer(markdownContentLines, rendererReady)
useSendScrollState(scrollState, rendererReady) useSendScrollState(scrollState, rendererReady)

3
frontend/src/components/intro-page/intro-custom-content.tsx
View file

@ -3,6 +3,7 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import { DarkModePreference } from '../../redux/dark-mode/types'
import { Logger } from '../../utils/logger' import { Logger } from '../../utils/logger'
import { AsyncLoadingBoundary } from '../common/async-loading-boundary/async-loading-boundary' import { AsyncLoadingBoundary } from '../common/async-loading-boundary/async-loading-boundary'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe' import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
@ -31,7 +32,7 @@ export const IntroCustomContent: React.FC = () => {
frameClasses={'w-100 overflow-y-hidden'} frameClasses={'w-100 overflow-y-hidden'}
markdownContentLines={value as string[]} markdownContentLines={value as string[]}
rendererType={RendererType.SIMPLE} rendererType={RendererType.SIMPLE}
forcedDarkMode={true} forcedDarkMode={DarkModePreference.DARK}
adaptFrameHeightToContent={true} adaptFrameHeightToContent={true}
/> />
</AsyncLoadingBoundary> </AsyncLoadingBoundary>