Move yaml-array warning to documentrenderpane (#916)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

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 { TocAst } from 'markdown-it-toc-done-right'
-import { Dropdown } from 'react-bootstrap'
+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<HTMLDivElement>
+  documentRenderPaneRef?: RefObject<HTMLDivElement>
   wide?: boolean
 }
 
@@ -37,29 +41,42 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = ({
   onMouseEnterRenderer,
   onScrollRenderer,
   onTaskCheckedChange,
-  rendererReference,
+  documentRenderPaneRef,
   wide
 }) => {
   const [tocAst, setTocAst] = useState<TocAst>()
-  const { width } = useResizeObserver(rendererReference ? { ref: rendererReference } : undefined)
+  const { width } = useResizeObserver(documentRenderPaneRef ? { ref: documentRenderPaneRef } : undefined)
   const realWidth = width || 0
+  const rendererRef = useRef<HTMLDivElement|null>(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 (
     <div className={`bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 ${extraClasses ?? ''}`}
-      ref={rendererReference} onScroll={onScrollRenderer} onMouseEnter={onMouseEnterRenderer}>
+         ref={documentRenderPaneRef} onScroll={onScrollRenderer} onMouseEnter={onMouseEnterRenderer}>
       <div className={'col-md'}/>
       <div className={'bg-light flex-fill'}>
+        <ShowIf condition={yamlDeprecatedTags}>
+          <Alert variant='warning' dir='auto'>
+            <Trans i18nKey='editor.deprecatedTags' />
+            <br/>
+            <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} href={links.faq} className={'text-primary'}/>
+          </Alert>
+        </ShowIf>
+        <div >
         <FullMarkdownRenderer
+          rendererRef={rendererRef}
           className={'flex-fill mb-3'}
           content={markdownContent}
           onFirstHeadingChange={onFirstHeadingChange}
-          onLineMarkerPositionChanged={onLineMarkerPositionChanged}
+          onLineMarkerPositionChanged={changeLineMarker}
           onMetaDataChange={onMetadataChange}
           onTaskCheckedChange={onTaskCheckedChange}
           onTocChange={(tocAst) => setTocAst(tocAst)}
           wide={wide}
         />
+        </div>
       </div>
 
       <div className={'col-md'}>

src/components/editor/document-renderer-pane/scrolling-document-render-pane.tsx

@@ -33,7 +33,7 @@ export const ScrollingDocumentRenderPane: React.FC<DocumentRenderPaneProps & Scr
   return (
     <DocumentRenderPane
       extraClasses={'overflow-y-scroll'}
-      rendererReference={renderer}
+      documentRenderPaneRef={renderer}
       wide={wide}
       onFirstHeadingChange={onFirstHeadingChange}
       onLineMarkerPositionChanged={setLineMarks}

src/components/editor/document-renderer-pane/use-adapted-line-markers-callback.ts

@@ -0,0 +1,25 @@
+/*
+SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+
+SPDX-License-Identifier: AGPL-3.0-only
+*/
+
+import { RefObject, useCallback } from 'react'
+import { LineMarkerPosition } from '../../markdown-renderer/types'
+
+export const useAdaptedLineMarkerCallback = (documentRenderPaneRef: RefObject<HTMLDivElement> | undefined,
+                                             rendererRef: RefObject<HTMLDivElement | null>,
+                                             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])
+}

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<HTMLDivElement>
 }
 
 export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & AdditionalMarkdownRendererProps> = ({
@@ -41,13 +38,13 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
   onTocChange,
   content,
   className,
-  wide
+  wide,
+  rendererRef
 }) => {
   const allReplacers = useReplacerInstanceListCreator(onTaskCheckedChange)
   useTranslation()
 
   const [yamlError, setYamlError] = useState(false)
-  const yamlDeprecatedTags = useSelector((state: ApplicationState) => state.documentContent.metadata.deprecatedTagsSyntax)
 
   const rawMetaRef = useRef<RawYAMLMetadata>()
   const firstHeadingRef = useRef<string>()
@@ -81,7 +78,7 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
   }, [])
 
   return (
-    <div className={'position-relative'}>
+    <div ref={rendererRef} className={'position-relative'}>
       <ShowIf condition={yamlError}>
         <Alert variant='warning' dir='auto'>
           <Trans i18nKey='editor.invalidYaml'>
@@ -89,13 +86,6 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
           </Trans>
         </Alert>
       </ShowIf>
-      <ShowIf condition={yamlDeprecatedTags}>
-        <Alert variant='warning' dir='auto'>
-          <Trans i18nKey='editor.deprecatedTags' />
-          <br/>
-          <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} href={links.faq} className={'text-primary'}/>
-        </Alert>
-      </ShowIf>
       <BasicMarkdownRenderer className={className} wide={wide} content={content} componentReplacers={allReplacers}
         markdownIt={markdownIt} documentReference={documentElement}
         onBeforeRendering={clearMetadata}/>