mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-23 19:47:03 -04:00
Move and rename files (2/4) (#987)
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth
GitHub
parent
1b7abf9f27
commit
123f959fb3
145 changed files with 586 additions and 301 deletions
|
|
@ -4,8 +4,8 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { NoteFrontmatter } from "../editor/note-frontmatter/note-frontmatter"
|
||||
import { ScrollState } from "../editor/scroll/scroll-props"
|
||||
import { NoteFrontmatter } from "../editor-page/note-frontmatter/note-frontmatter"
|
||||
import { ScrollState } from "../editor-page/synced-scroll/scroll-props"
|
||||
import { IframeCommunicator } from "./iframe-communicator"
|
||||
import {
|
||||
EditorToRendererIframeMessage,
|
||||
|
|
@ -18,7 +18,7 @@ export class IframeEditorToRendererCommunicator extends IframeCommunicator<Edito
|
|||
private onSetScrollSourceToRendererHandler?: () => void
|
||||
private onTaskCheckboxChangeHandler?: (lineInMarkdown: number, checked: boolean) => void
|
||||
private onFirstHeadingChangeHandler?: (heading?: string) => void
|
||||
private onFrontmatterChangeHandler?: (metaData?: NoteFrontmatter) => void
|
||||
private onFrontmatterChangeHandler?: (frontmatter?: NoteFrontmatter) => void
|
||||
private onSetScrollStateHandler?: (scrollState: ScrollState) => void
|
||||
private onRendererReadyHandler?: () => void
|
||||
private onImageClickedHandler?: (details: ImageDetails) => void
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { NoteFrontmatter } from "../editor/note-frontmatter/note-frontmatter"
|
||||
import { ScrollState } from "../editor/scroll/scroll-props"
|
||||
import { NoteFrontmatter } from "../editor-page/note-frontmatter/note-frontmatter"
|
||||
import { ScrollState } from "../editor-page/synced-scroll/scroll-props"
|
||||
import { IframeCommunicator } from "./iframe-communicator"
|
||||
import {
|
||||
EditorToRendererIframeMessage,
|
||||
|
|
|
|||
100
src/components/render-page/markdown-document.tsx
Normal file
100
src/components/render-page/markdown-document.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/*
|
||||
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
import { TocAst } from 'markdown-it-toc-done-right'
|
||||
import React, { MutableRefObject, useMemo, useRef, useState } from 'react'
|
||||
import { Dropdown } from 'react-bootstrap'
|
||||
import useResizeObserver from 'use-resize-observer'
|
||||
import { ForkAwesomeIcon } from '../common/fork-awesome/fork-awesome-icon'
|
||||
import { ShowIf } from '../common/show-if/show-if'
|
||||
import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
|
||||
import { YamlArrayDeprecationAlert } from '../editor-page/renderer-pane/yaml-array-deprecation-alert'
|
||||
import { useSyncedScrolling } from '../editor-page/synced-scroll/hooks/use-synced-scrolling'
|
||||
import { ScrollProps } from '../editor-page/synced-scroll/scroll-props'
|
||||
import { TableOfContents } from '../editor-page/table-of-contents/table-of-contents'
|
||||
import { FullMarkdownRenderer } from '../markdown-renderer/full-markdown-renderer'
|
||||
import { ImageClickHandler } from '../markdown-renderer/replace-components/image/image-replacer'
|
||||
|
||||
export interface MarkdownDocumentProps extends ScrollProps {
|
||||
extraClasses?: string
|
||||
onFirstHeadingChange?: (firstHeading: string | undefined) => void
|
||||
onFrontmatterChange?: (frontmatter: NoteFrontmatter | undefined) => void
|
||||
onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
|
||||
documentRenderPaneRef?: MutableRefObject<HTMLDivElement | null>
|
||||
wide?: boolean,
|
||||
markdownContent: string,
|
||||
baseUrl?: string
|
||||
onImageClick?: ImageClickHandler
|
||||
}
|
||||
|
||||
export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
|
||||
{
|
||||
extraClasses,
|
||||
onFirstHeadingChange,
|
||||
onFrontmatterChange,
|
||||
onMakeScrollSource,
|
||||
onTaskCheckedChange,
|
||||
wide,
|
||||
baseUrl,
|
||||
markdownContent,
|
||||
onImageClick,
|
||||
onScroll,
|
||||
scrollState
|
||||
}) => {
|
||||
const rendererRef = useRef<HTMLDivElement | null>(null)
|
||||
const internalDocumentRenderPaneRef = useRef<HTMLDivElement>(null)
|
||||
const [tocAst, setTocAst] = useState<TocAst>()
|
||||
const width = useResizeObserver({ ref: internalDocumentRenderPaneRef.current }).width ?? 0
|
||||
|
||||
const contentLineCount = useMemo(() => markdownContent.split('\n').length, [markdownContent])
|
||||
const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(internalDocumentRenderPaneRef, rendererRef, contentLineCount, scrollState, onScroll)
|
||||
|
||||
return (
|
||||
<div className={`overflow-y-scroll h-100 bg-light m-0 pb-5 row ${extraClasses ?? ''}`}
|
||||
ref={internalDocumentRenderPaneRef} onScroll={onUserScroll} onMouseEnter={onMakeScrollSource}>
|
||||
<div className={'col-md d-none d-md-block'}/>
|
||||
<div className={'bg-light col'}>
|
||||
<YamlArrayDeprecationAlert/>
|
||||
<div>
|
||||
<FullMarkdownRenderer
|
||||
rendererRef={rendererRef}
|
||||
className={'flex-fill pt-4 mb-3'}
|
||||
content={markdownContent}
|
||||
onFirstHeadingChange={onFirstHeadingChange}
|
||||
onLineMarkerPositionChanged={onLineMarkerPositionChanged}
|
||||
onFrontmatterChange={onFrontmatterChange}
|
||||
onTaskCheckedChange={onTaskCheckedChange}
|
||||
onTocChange={(tocAst) => setTocAst(tocAst)}
|
||||
wide={wide}
|
||||
baseUrl={baseUrl}
|
||||
onImageClick={onImageClick}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={'col-md pt-4'}>
|
||||
<ShowIf condition={!!tocAst}>
|
||||
<ShowIf condition={width >= 1280}>
|
||||
<TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl}/>
|
||||
</ShowIf>
|
||||
<ShowIf condition={width < 1280}>
|
||||
<div className={'markdown-toc-sidebar-button'}>
|
||||
<Dropdown drop={'up'}>
|
||||
<Dropdown.Toggle id="toc-overlay-button" variant={'secondary'} className={'no-arrow'}>
|
||||
<ForkAwesomeIcon icon={'list-ol'}/>
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu>
|
||||
<div className={'p-2'}>
|
||||
<TableOfContents ast={tocAst as TocAst} baseUrl={baseUrl}/>
|
||||
</div>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</ShowIf>
|
||||
</ShowIf>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -9,11 +9,11 @@ import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
|
|||
import { ApplicationState } from '../../redux'
|
||||
import { setDarkMode } from '../../redux/dark-mode/methods'
|
||||
import { setNoteFrontmatter } from '../../redux/note-details/methods'
|
||||
import { DocumentRenderPane } from '../editor/document-renderer-pane/document-render-pane'
|
||||
import { NoteFrontmatter } from '../editor/note-frontmatter/note-frontmatter'
|
||||
import { ScrollState } from '../editor/scroll/scroll-props'
|
||||
import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
|
||||
import { ScrollState } from '../editor-page/synced-scroll/scroll-props'
|
||||
import { ImageClickHandler } from '../markdown-renderer/replace-components/image/image-replacer'
|
||||
import { IframeRendererToEditorCommunicator } from './iframe-renderer-to-editor-communicator'
|
||||
import { MarkdownDocument } from './markdown-document'
|
||||
|
||||
export const RenderPage: React.FC = () => {
|
||||
useApplyDarkMode()
|
||||
|
|
@ -81,7 +81,7 @@ export const RenderPage: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className={"vh-100 w-100"}>
|
||||
<DocumentRenderPane
|
||||
<MarkdownDocument
|
||||
extraClasses={'w-100'}
|
||||
markdownContent={markdownContent}
|
||||
wide={isWide}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
import { NoteFrontmatter } from '../editor/note-frontmatter/note-frontmatter'
|
||||
import { ScrollState } from '../editor/scroll/scroll-props'
|
||||
import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
|
||||
import { ScrollState } from '../editor-page/synced-scroll/scroll-props'
|
||||
|
||||
export enum RenderIframeMessageType {
|
||||
SET_MARKDOWN_CONTENT = 'SET_MARKDOWN_CONTENT',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue