mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-24 20:14:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add custom intro page by fetching markdown content from a file (#697)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-02-08 15:03:11 +01:00 • committed by GitHub
parent 4b2e2a7c93
commit 7f6e0e53a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 373 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/editor-page/editor-page.tsx
View file

@ -32,6 +32,7 @@ import { RenderIframe } from './renderer-pane/render-iframe'
import { Sidebar } from './sidebar/sidebar'
import { Splitter } from './splitter/splitter'
import { DualScrollState, ScrollState } from './synced-scroll/scroll-props'
import { RendererType } from '../render-page/rendering-message'
export interface EditorPagePathParams {
id: string
@ -115,13 +116,15 @@ export const EditorPage: React.FC = () => {
showRight={ editorMode === EditorMode.PREVIEW || editorMode === EditorMode.BOTH }
right={
<RenderIframe
frameClasses={'h-100 w-100'}
markdownContent={ markdownContent }
onMakeScrollSource={ setRendererToScrollSource }
onFirstHeadingChange={ updateNoteTitleByFirstHeading }
onTaskCheckedChange={ SetCheckboxInMarkdownContent }
onFrontmatterChange={ setNoteFrontmatter }
onScroll={ onMarkdownRendererScroll }
scrollState={ scrollState.rendererScrollState }/>
scrollState={ scrollState.rendererScrollState }
rendererType={ RendererType.DOCUMENT }/>
}
containerClassName={ 'overflow-hidden' }/>
<Sidebar/>

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

@ -10,13 +10,20 @@ import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-a
import { ApplicationState } from '../../../redux'
import { isTestMode } from '../../../utils/is-test-mode'
import { IframeEditorToRendererCommunicator } from '../../render-page/iframe-editor-to-renderer-communicator'
import { MarkdownDocumentProps } from '../../render-page/markdown-document'
import { ImageDetails } from '../../render-page/rendering-message'
import { RendererProps } from '../../render-page/markdown-document'
import { ImageDetails, RendererType } from '../../render-page/rendering-message'
import { ScrollState } from '../synced-scroll/scroll-props'
import { useOnIframeLoad } from './hooks/use-on-iframe-load'
import { ShowOnPropChangeImageLightbox } from './show-on-prop-change-image-lightbox'
export const RenderIframe: React.FC<MarkdownDocumentProps> = (
export interface RenderIframeProps extends RendererProps {
onRendererReadyChange?: (rendererReady: boolean) => void
rendererType: RendererType,
forcedDarkMode?: boolean
frameClasses?: string
}
export const RenderIframe: React.FC<RenderIframeProps> = (
{
markdownContent,
onTaskCheckedChange,
@ -25,9 +32,13 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
onFirstHeadingChange,
onScroll,
onMakeScrollSource,
extraClasses
frameClasses,
onRendererReadyChange,
rendererType,
forcedDarkMode
}) => {
const darkMode = useIsDarkModeActivated()
const savedDarkMode = useIsDarkModeActivated()
const darkMode = forcedDarkMode ?? savedDarkMode
const [rendererReady, setRendererReady] = useState<boolean>(false)
const [lightboxDetails, setLightboxDetails] = useState<ImageDetails | undefined>(undefined)
@ -37,6 +48,11 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
const resetRendererReady = useCallback(() => setRendererReady(false), [])
const iframeCommunicator = useMemo(() => new IframeEditorToRendererCommunicator(), [])
const onIframeLoad = useOnIframeLoad(frameReference, iframeCommunicator, rendererOrigin, renderPageUrl, resetRendererReady)
const [frameHeight, setFrameHeight] = useState<number>(0)
useEffect(() => {
onRendererReadyChange?.(rendererReady)
}, [onRendererReadyChange, rendererReady])
useEffect(() => () => iframeCommunicator.unregisterEventListener(), [iframeCommunicator])
useEffect(() => iframeCommunicator.onFirstHeadingChange(onFirstHeadingChange), [iframeCommunicator,
@ -49,8 +65,15 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
useEffect(() => iframeCommunicator.onTaskCheckboxChange(onTaskCheckedChange), [iframeCommunicator,
onTaskCheckedChange])
useEffect(() => iframeCommunicator.onImageClicked(setLightboxDetails), [iframeCommunicator])
useEffect(() => iframeCommunicator.onRendererReady(() => setRendererReady(true)), [darkMode, iframeCommunicator,
scrollState])
useEffect(() => iframeCommunicator.onRendererReady(() => {
iframeCommunicator.sendSetBaseConfiguration({
baseUrl: window.location.toString(),
rendererType
})
setRendererReady(true)
}), [darkMode, rendererType, iframeCommunicator, rendererReady, scrollState])
useEffect(() => iframeCommunicator.onHeightChange(setFrameHeight), [iframeCommunicator])
useEffect(() => {
if (rendererReady) {
iframeCommunicator.sendSetDarkmode(darkMode)
@ -65,12 +88,6 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
}
}, [iframeCommunicator, rendererReady, scrollState])
useEffect(() => {
if (rendererReady) {
iframeCommunicator.sendSetBaseUrl(window.location.toString())
}
}, [iframeCommunicator, rendererReady])
useEffect(() => {
if (rendererReady) {
iframeCommunicator.sendSetMarkdownContent(markdownContent)
@ -79,8 +96,9 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
return <Fragment>
<ShowOnPropChangeImageLightbox details={ lightboxDetails }/>
<iframe data-cy={ 'documentIframe' } onLoad={ onIframeLoad } title="render" src={ renderPageUrl }
<iframe style={ { height: `${ frameHeight }px` } } data-cy={ 'documentIframe' } onLoad={ onIframeLoad }
title="render" src={ renderPageUrl }
{ ...isTestMode() ? {} : { sandbox: 'allow-downloads allow-same-origin allow-scripts allow-popups' } }
ref={ frameReference } className={ `h-100 w-100 border-0 ${ extraClasses ?? '' }` }/>
ref={ frameReference } className={ `border-0 ${ frameClasses ?? '' }` }/>
</Fragment>
}