diff --git a/src/components/editor/document-renderer-pane/document-render-pane.tsx b/src/components/editor/document-renderer-pane/document-render-pane.tsx index c5be406bb..460d94442 100644 --- a/src/components/editor/document-renderer-pane/document-render-pane.tsx +++ b/src/components/editor/document-renderer-pane/document-render-pane.tsx @@ -4,18 +4,22 @@ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) SPDX-License-Identifier: AGPL-3.0-only */ -import React, { RefObject, useState } from 'react' -import { Dropdown } from 'react-bootstrap' +import { TocAst } from 'markdown-it-toc-done-right' +import React, { RefObject, useRef, useState } from 'react' +import { Alert, Dropdown } from 'react-bootstrap' +import { Trans } from 'react-i18next' import { useSelector } from 'react-redux' import useResizeObserver from 'use-resize-observer' -import { TocAst } from 'markdown-it-toc-done-right' +import links from '../../../links.json' import { ApplicationState } from '../../../redux' import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon' +import { TranslatedExternalLink } from '../../common/links/translated-external-link' import { ShowIf } from '../../common/show-if/show-if' import { FullMarkdownRenderer } from '../../markdown-renderer/full-markdown-renderer' import { LineMarkerPosition } from '../../markdown-renderer/types' import { TableOfContents } from '../table-of-contents/table-of-contents' import { YAMLMetaData } from '../yaml-metadata/yaml-metadata' +import { useAdaptedLineMarkerCallback } from './use-adapted-line-markers-callback' export interface DocumentRenderPaneProps { extraClasses?: string @@ -25,7 +29,7 @@ export interface DocumentRenderPaneProps { onMouseEnterRenderer?: () => void onScrollRenderer?: () => void onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void - rendererReference?: RefObject + documentRenderPaneRef?: RefObject wide?: boolean } @@ -37,29 +41,42 @@ export const DocumentRenderPane: React.FC = ({ onMouseEnterRenderer, onScrollRenderer, onTaskCheckedChange, - rendererReference, + documentRenderPaneRef, wide }) => { const [tocAst, setTocAst] = useState() - const { width } = useResizeObserver(rendererReference ? { ref: rendererReference } : undefined) + const { width } = useResizeObserver(documentRenderPaneRef ? { ref: documentRenderPaneRef } : undefined) const realWidth = width || 0 + const rendererRef = useRef(null) const markdownContent = useSelector((state: ApplicationState) => state.documentContent.content) + const yamlDeprecatedTags = useSelector((state: ApplicationState) => state.documentContent.metadata.deprecatedTagsSyntax) + const changeLineMarker = useAdaptedLineMarkerCallback(documentRenderPaneRef, rendererRef, onLineMarkerPositionChanged) return (
+ ref={documentRenderPaneRef} onScroll={onScrollRenderer} onMouseEnter={onMouseEnterRenderer}>
+ + + +
+ +
+
+
setTocAst(tocAst)} wide={wide} /> +
diff --git a/src/components/editor/document-renderer-pane/scrolling-document-render-pane.tsx b/src/components/editor/document-renderer-pane/scrolling-document-render-pane.tsx index 95d5a870f..05df54acc 100644 --- a/src/components/editor/document-renderer-pane/scrolling-document-render-pane.tsx +++ b/src/components/editor/document-renderer-pane/scrolling-document-render-pane.tsx @@ -33,7 +33,7 @@ export const ScrollingDocumentRenderPane: React.FC | undefined, + rendererRef: RefObject, + onLineMarkerPositionChanged: ((lineMarkerPosition: LineMarkerPosition[]) => void) | undefined): ((lineMarkerPosition: LineMarkerPosition[]) => void) => { + return useCallback((linkMarkerPositions) => { + if (!onLineMarkerPositionChanged) { + return + } + const documentRenderPaneTop = (documentRenderPaneRef?.current?.offsetTop ?? 0) + const rendererTop = (rendererRef.current?.offsetTop ?? 0) + const offset = rendererTop - documentRenderPaneTop + onLineMarkerPositionChanged(linkMarkerPositions.map(oldMarker => ({ + line: oldMarker.line, + position: oldMarker.position + offset + }))) + }, [documentRenderPaneRef, onLineMarkerPositionChanged, rendererRef]) +} diff --git a/src/components/markdown-renderer/full-markdown-renderer.tsx b/src/components/markdown-renderer/full-markdown-renderer.tsx index 11cdbd485..c47ff5819 100644 --- a/src/components/markdown-renderer/full-markdown-renderer.tsx +++ b/src/components/markdown-renderer/full-markdown-renderer.tsx @@ -4,15 +4,11 @@ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) SPDX-License-Identifier: AGPL-3.0-only */ -import React, { useCallback, useMemo, useRef, useState } from 'react' +import { TocAst } from 'markdown-it-toc-done-right' +import React, { RefObject, useCallback, useMemo, useRef, useState } from 'react' import { Alert } from 'react-bootstrap' import { Trans, useTranslation } from 'react-i18next' -import { TocAst } from 'markdown-it-toc-done-right' -import { useSelector } from 'react-redux' -import { ApplicationState } from '../../redux' import { InternalLink } from '../common/links/internal-link' -import links from '../../links.json' -import { TranslatedExternalLink } from '../common/links/translated-external-link' import { ShowIf } from '../common/show-if/show-if' import { RawYAMLMetadata, YAMLMetaData } from '../editor/yaml-metadata/yaml-metadata' import { BasicMarkdownRenderer } from './basic-markdown-renderer' @@ -31,6 +27,7 @@ export interface FullMarkdownRendererProps { onMetaDataChange?: (yamlMetaData: YAMLMetaData | undefined) => void onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void onTocChange?: (ast: TocAst) => void + rendererRef?: RefObject } export const FullMarkdownRenderer: React.FC = ({ @@ -41,13 +38,13 @@ export const FullMarkdownRenderer: React.FC { const allReplacers = useReplacerInstanceListCreator(onTaskCheckedChange) useTranslation() const [yamlError, setYamlError] = useState(false) - const yamlDeprecatedTags = useSelector((state: ApplicationState) => state.documentContent.metadata.deprecatedTagsSyntax) const rawMetaRef = useRef() const firstHeadingRef = useRef() @@ -81,7 +78,7 @@ export const FullMarkdownRenderer: React.FC +
@@ -89,13 +86,6 @@ export const FullMarkdownRenderer: React.FC - - - -
- -
-