Fix SlideShow-Only-Page and Document-Read-Only-Page

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-10-14 20:00:16 +02:00
parent 36e445e631
commit dc0068420a
6 changed files with 108 additions and 41 deletions

View file

@ -0,0 +1,12 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
describe("Document read only page", () => {
it('renders the document mode', () => {
cy.visit('/s/test')
cy.getMarkdownBody().should("exist")
})
})

View file

@ -0,0 +1,12 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
describe("Slideshow only page", () => {
it('renders slide show mode', () => {
cy.visit('/p/test')
cy.getReveal().should("exist")
})
})

View file

@ -0,0 +1,43 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { Fragment } from 'react'
import { useTranslation } from 'react-i18next'
import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
import { useNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-note-markdown-content-without-frontmatter'
import { useApplicationState } from '../../hooks/common/use-application-state'
import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
import { DocumentInfobar } from './document-infobar'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
export const DocumentReadOnlyPageContent: React.FC = () => {
useTranslation()
const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
const noteDetails = useApplicationState((state) => state.noteDetails)
useSendFrontmatterInfoFromReduxToRenderer()
return (
<Fragment>
<DocumentInfobar
changedAuthor={noteDetails.lastChange.userName ?? ''}
changedTime={noteDetails.lastChange.timestamp}
createdAuthor={'Test'}
createdTime={noteDetails.createTime}
editable={true}
noteId={noteDetails.id}
viewCount={noteDetails.viewCount}
/>
<RenderIframe
frameClasses={'flex-fill h-100 w-100'}
markdownContent={markdownContent}
onFirstHeadingChange={updateNoteTitleByFirstHeading}
rendererType={RendererType.DOCUMENT}
/>
</Fragment>
)
}

View file

@ -4,41 +4,23 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router'
import React from 'react'
import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
import { useDocumentTitleWithNoteTitle } from '../../hooks/common/use-document-title-with-note-title'
import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
import { MotdModal } from '../common/motd-modal/motd-modal'
import { ShowIf } from '../common/show-if/show-if'
import { AppBar, AppBarMode } from '../editor-page/app-bar/app-bar'
import { EditorPagePathParams } from '../editor-page/editor-page'
import { useLoadNoteFromServer } from '../editor-page/hooks/useLoadNoteFromServer'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
import { DocumentInfobar } from './document-infobar'
import { ErrorWhileLoadingNoteAlert } from './ErrorWhileLoadingNoteAlert'
import { LoadingNoteAlert } from './LoadingNoteAlert'
import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
import { useApplicationState } from '../../hooks/common/use-application-state'
import { useNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-note-markdown-content-without-frontmatter'
import { EditorToRendererCommunicatorContextProvider } from '../editor-page/render-context/editor-to-renderer-communicator-context-provider'
import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
import { UiNotifications } from '../notifications/ui-notifications'
import { DocumentReadOnlyPageContent } from './document-read-only-page-content'
export const DocumentReadOnlyPage: React.FC = () => {
useTranslation()
const { id } = useParams<EditorPagePathParams>()
useApplyDarkMode()
useDocumentTitleWithNoteTitle()
const onFirstHeadingChange = useCallback(updateNoteTitleByFirstHeading, [])
const [error, loading] = useLoadNoteFromServer()
const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
const noteDetails = useApplicationState((state) => state.noteDetails)
useSendFrontmatterInfoFromReduxToRenderer()
return (
<EditorToRendererCommunicatorContextProvider>
<UiNotifications />

View file

@ -0,0 +1,30 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
import { useTranslation } from 'react-i18next'
import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
import { useNoteMarkdownContentWithoutFrontmatter } from '../../hooks/common/use-note-markdown-content-without-frontmatter'
export const SlideShowPageContent: React.FC = () => {
const markdownContent = useNoteMarkdownContentWithoutFrontmatter()
useTranslation()
useSendFrontmatterInfoFromReduxToRenderer()
return (
<div className={'vh-100 vw-100'}>
<RenderIframe
frameClasses={'h-100 w-100'}
markdownContent={markdownContent}
rendererType={RendererType.SLIDESHOW}
onFirstHeadingChange={updateNoteTitleByFirstHeading}
/>
</div>
)
}

View file

@ -5,34 +5,22 @@
*/
import React from 'react'
import { RenderIframe } from '../editor-page/renderer-pane/render-iframe'
import { useNoteMarkdownContent } from '../../hooks/common/use-note-markdown-content'
import { useTranslation } from 'react-i18next'
import { useLoadNoteFromServer } from '../editor-page/hooks/useLoadNoteFromServer'
import { ShowIf } from '../common/show-if/show-if'
import { updateNoteTitleByFirstHeading } from '../../redux/note-details/methods'
import { RendererType } from '../render-page/window-post-message-communicator/rendering-message'
import { useSendFrontmatterInfoFromReduxToRenderer } from '../editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer'
import { EditorToRendererCommunicatorContextProvider } from '../editor-page/render-context/editor-to-renderer-communicator-context-provider'
import { SlideShowPageContent } from './slide-show-page-content'
import { useDocumentTitleWithNoteTitle } from '../../hooks/common/use-document-title-with-note-title'
export const SlideShowPage: React.FC = () => {
const markdownContent = useNoteMarkdownContent()
useTranslation()
useSendFrontmatterInfoFromReduxToRenderer()
const [error, loading] = useLoadNoteFromServer()
useDocumentTitleWithNoteTitle()
return (
<ShowIf condition={!error && !loading}>
<div className={'vh-100 vw-100'}>
<RenderIframe
frameClasses={'h-100 w-100'}
markdownContent={markdownContent}
rendererType={RendererType.SLIDESHOW}
onFirstHeadingChange={updateNoteTitleByFirstHeading}
/>
</div>
</ShowIf>
<EditorToRendererCommunicatorContextProvider>
<ShowIf condition={!error && !loading}>
<SlideShowPageContent />
</ShowIf>
</EditorToRendererCommunicatorContextProvider>
)
}