update markdown-it-anchor (#892)

* update markdown-it-anchor * Update markdown-it-types * Regenerate yarn.lock Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Update dependency vega-embed to v6.15.0 Signed-off-by: Renovate Bot <bot@renovateapp.com> started work on iframe for document-render-pane Signed-off-by: Philip Molares <philip.molares@udo.edu> Fix iframe condition Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add license header Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add render-page and adjust code for it Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add scrolling to toc Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add space to the top of document rendering Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Forward css extra classes in scrolling-document-render-pane.tsx Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> dont use portals to render Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Communicate with iframe Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Hide column if viewport is too small Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Fix rebase issue Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add ready event for child frame Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Simplify method Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add dark mode hook Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Send dark mode messages Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Rename file Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Remove import Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Extract code into hook Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Correct types Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add iswide and dummy log functions Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Add more events Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Open links always in new tabs and correct internal links Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Change iframe to sandbox which can only open one url Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Only open external links in new tab Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Rename component Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Improve path protection Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Lazy load router pages Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Regenerate yarn lock Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> Fix callback dependency Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
hedgedoc · Dec 27, 2020 · 261d80b · 261d80b
1 parent 5095504
commit 261d80b
Show file tree

Hide file tree

Showing 30 changed files with 516 additions and 78 deletions.
diff --git a/src/components/editor/app-bar/dark-mode-button.tsx b/src/components/editor/app-bar/dark-mode-button.tsx
@@ -7,14 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 import React from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../../redux'
+import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated'
 import { setDarkMode } from '../../../redux/dark-mode/methods'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 
 const DarkModeButton: React.FC = () => {
   const { t } = useTranslation()
-  const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeEnabled = useIsDarkModeActivated()
 
   return (
     <ToggleButtonGroup

diff --git a/src/components/editor/app-bar/navbar-branding.tsx b/src/components/editor/app-bar/navbar-branding.tsx
@@ -6,9 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react'
 import { Navbar } from 'react-bootstrap'
-import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { ApplicationState } from '../../../redux'
+import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated'
 import { Branding } from '../../common/branding/branding'
 import {
   HedgeDocLogoSize,
@@ -17,7 +16,7 @@ import {
 } from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
 
 export const NavbarBranding: React.FC = () => {
-  const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeActivated = useIsDarkModeActivated()
 
   return (
     <Navbar.Brand>

diff --git a/src/components/editor/document-bar/revisions/revision-modal.tsx b/src/components/editor/document-bar/revisions/revision-modal.tsx
@@ -13,6 +13,7 @@ import { useParams } from 'react-router'
 import { getAllRevisions, getRevision } from '../../../../api/revisions'
 import { Revision, RevisionListEntry } from '../../../../api/revisions/types'
 import { UserResponse } from '../../../../api/users/types'
+import { useIsDarkModeActivated } from '../../../../hooks/common/use-is-dark-mode-activated'
 import { ApplicationState } from '../../../../redux'
 import { CommonModal, CommonModalProps } from '../../../common/modals/common-modal'
 import { ShowIf } from '../../../common/show-if/show-if'
@@ -27,7 +28,7 @@ export const RevisionModal: React.FC<CommonModalProps> = ({ show, onHide, icon,
   const [selectedRevision, setSelectedRevision] = useState<Revision | null>(null)
   const [error, setError] = useState(false)
   const revisionAuthorListMap = useRef(new Map<number, UserResponse[]>())
-  const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeEnabled = useIsDarkModeActivated()
   const { id } = useParams<{ id: string }>()
 
   useEffect(() => {

diff --git a/src/components/editor/document-renderer-pane/document-iframe.tsx b/src/components/editor/document-renderer-pane/document-iframe.tsx
@@ -0,0 +1,123 @@
+/*
+SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
+
+SPDX-License-Identifier: AGPL-3.0-only
+*/
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-activated'
+import {
+  EditorToRendererIframeMessage,
+  postMessageToIframe,
+  RendererToEditorIframeMessage,
+  RenderIframeMessageType,
+  SetDarkModeMessage,
+  SetMarkdownContentMessage,
+  SetScrollState,
+  SetWideMessage
+} from '../../render-page/rendering-message'
+import { useWindowMessageEventListener } from '../../render-page/use-window-message-event-listener'
+import { ScrollingDocumentRenderPaneProps } from './scrolling-document-render-pane'
+
+export const DocumentIframe: React.FC<ScrollingDocumentRenderPaneProps> = ({ markdownContent, onTaskCheckedChange, onMetadataChange, scrollState, onFirstHeadingChange, wide,onScroll, onMakeScrollSource}) => {
+  const frameReference = useRef<HTMLIFrameElement>(null)
+  const darkMode = useIsDarkModeActivated()
+
+  const postMessage = useCallback((message: EditorToRendererIframeMessage) => {
+    if (!frameReference.current?.contentWindow) {
+      return
+    }
+    postMessageToIframe(frameReference.current.contentWindow, message)
+  }, [])
+
+  const sendMarkdown = useCallback(() => {
+    const message: SetMarkdownContentMessage = {
+      type: RenderIframeMessageType.MARKDOWN_CONTENT,
+      content: markdownContent
+    }
+    postMessage(message)
+  }, [markdownContent, postMessage])
+
+  useEffect(() => {
+    sendMarkdown()
+  }, [markdownContent, sendMarkdown])
+
+  useEffect(() => {
+    const message: SetDarkModeMessage = {
+      type: RenderIframeMessageType.DARKMODE,
+      activated: darkMode
+    }
+    postMessage(message)
+  }, [darkMode, postMessage])
+
+  useEffect(() => {
+    if (!scrollState) {
+      return
+    }
+    const message: SetScrollState = {
+      type: RenderIframeMessageType.SET_SCROLL_STATE,
+      scrollState
+    }
+    postMessage(message)
+  }, [postMessage, scrollState])
+
+  useEffect(() => {
+    const message: SetWideMessage = {
+      type: RenderIframeMessageType.SET_WIDE,
+      activated: wide ?? false
+    }
+    postMessage(message)
+  }, [wide, postMessage])
+
+  const processMessage = useCallback((event: MessageEvent<RendererToEditorIframeMessage>) => {
+    const renderMessage = event.data
+    switch (renderMessage.type) {
+      case RenderIframeMessageType.RENDERER_READY:
+        sendMarkdown()
+        break
+      case RenderIframeMessageType.ON_MAKE_SCROLL_SOURCE:
+        if (onMakeScrollSource) {
+          onMakeScrollSource();
+        }
+        break;
+      case RenderIframeMessageType.ON_FIRST_HEADING_CHANGE:
+        if (onFirstHeadingChange) {
+          onFirstHeadingChange(renderMessage.firstHeading);
+        }
+        break;
+      case RenderIframeMessageType.ON_TASK_CHECKBOX_CHANGE:
+        if (onTaskCheckedChange) {
+          onTaskCheckedChange(renderMessage.lineInMarkdown, renderMessage.checked);
+        }
+        break;
+      case RenderIframeMessageType.ON_META_DATA_CHANGE:
+        if(onMetadataChange) {
+          onMetadataChange(renderMessage.metaData);
+        }
+        break
+      case RenderIframeMessageType.SET_SCROLL_STATE:
+        if (onScroll) {
+          onScroll(renderMessage.scrollState)
+        }
+    }
+  }, [onFirstHeadingChange, onMakeScrollSource, onMetadataChange, onScroll, onTaskCheckedChange, sendMarkdown])
+
+  useWindowMessageEventListener(processMessage);
+
+  const onLoad = useCallback(() => {
+    if (!frameReference.current || !frameReference.current.contentWindow) {
+      return
+    }
+    const frameWindow = frameReference.current.contentWindow;
+    try {
+      if (frameWindow.location.origin !== window.location.origin && frameWindow.location.pathname !== '/render') {
+        frameReference.current.src = '/render'
+      }
+    } catch {
+      frameReference.current.src = '/render'
+    }
+  }, [])
+
+  return (
+    <iframe sandbox={'allow-same-origin allow-scripts allow-popups'} onLoad={onLoad} title="render" src={'/render'} ref={frameReference} className={"h-100 w-100 border-0"}/>
+  )
+}
diff --git a/src/components/editor/document-renderer-pane/document-render-pane.tsx b/src/components/editor/document-renderer-pane/document-render-pane.tsx
@@ -4,12 +4,10 @@ SPDX-FileCopyrightText: 2020 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 React, { MutableRefObject, useCallback, useRef, useState } from 'react'
 import { Dropdown } from 'react-bootstrap'
-import { useSelector } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
-import { TocAst } from 'markdown-it-toc-done-right'
-import { ApplicationState } from '../../../redux'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../common/show-if/show-if'
 import { FullMarkdownRenderer } from '../../markdown-renderer/full-markdown-renderer'
@@ -19,14 +17,16 @@ import { YAMLMetaData } from '../yaml-metadata/yaml-metadata'
 
 export interface DocumentRenderPaneProps {
   extraClasses?: string
-  onFirstHeadingChange: (firstHeading: string | undefined) => void
+  onFirstHeadingChange?: (firstHeading: string | undefined) => void
   onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void
-  onMetadataChange: (metaData: YAMLMetaData | undefined) => void
+  onMetadataChange?: (metaData: YAMLMetaData | undefined) => void
   onMouseEnterRenderer?: () => void
   onScrollRenderer?: () => void
-  onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void
-  rendererReference?: RefObject<HTMLDivElement>
-  wide?: boolean
+  onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
+  rendererReference?: MutableRefObject<HTMLDivElement|undefined>
+  wide?: boolean,
+  markdownContent: string,
+  permalinkUrlSchema?: string
 }
 
 export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = ({
@@ -38,31 +38,40 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps> = ({
   onScrollRenderer,
   onTaskCheckedChange,
   rendererReference,
-  wide
+  wide,
+  permalinkUrlSchema,
+  markdownContent
 }) => {
   const [tocAst, setTocAst] = useState<TocAst>()
-  const { width } = useResizeObserver(rendererReference ? { ref: rendererReference } : undefined)
+  const containerReference = useRef<HTMLDivElement>()
+  const { width } = useResizeObserver({ref: containerReference.current})
   const realWidth = width || 0
-  const markdownContent = useSelector((state: ApplicationState) => state.documentContent.content)
+  const setContainerReference = useCallback((instance: HTMLDivElement|null) => {
+    if (rendererReference) {
+      rendererReference.current = instance || undefined
+    }
+    containerReference.current = instance || undefined
+  }, [rendererReference]);
 
   return (
-    <div className={`bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 ${extraClasses ?? ''}`}
-      ref={rendererReference} onScroll={onScrollRenderer} onMouseEnter={onMouseEnterRenderer}>
-      <div className={'col-md'}/>
-      <div className={'bg-light flex-fill'}>
+    <div className={`bg-light m-0 pb-5 row ${extraClasses ?? ''}`}
+      ref={setContainerReference} onScroll={onScrollRenderer} onMouseEnter={onMouseEnterRenderer}>
+      <div className={'col-md d-none d-md-block'}/>
+      <div className={'bg-light col'}>
         <FullMarkdownRenderer
-          className={'flex-fill mb-3'}
+          className={'flex-fill pt-4 mb-3'}
           content={markdownContent}
           onFirstHeadingChange={onFirstHeadingChange}
           onLineMarkerPositionChanged={onLineMarkerPositionChanged}
           onMetaDataChange={onMetadataChange}
           onTaskCheckedChange={onTaskCheckedChange}
           onTocChange={(tocAst) => setTocAst(tocAst)}
           wide={wide}
+          permalinkUrlSchema={permalinkUrlSchema}
         />
       </div>
 
-      <div className={'col-md'}>
+      <div className={'col-md pt-4'}>
         <ShowIf condition={realWidth >= 1280 && !!tocAst}>
           <TableOfContents ast={tocAst as TocAst} className={'position-fixed'}/>
         </ShowIf>

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
@@ -5,25 +5,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 */
 
 import React, { useMemo, useRef, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../../redux'
 import { LineMarkerPosition } from '../../markdown-renderer/types'
 import { useScrollToLineMark } from '../scroll/hooks/use-scroll-to-line-mark'
 import { useUserScroll } from '../scroll/hooks/use-user-scroll'
 import { ScrollProps } from '../scroll/scroll-props'
 import { DocumentRenderPane, DocumentRenderPaneProps } from './document-render-pane'
 
-export const ScrollingDocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps> = ({
+type ImplementedProps = 'onLineMarkerPositionChanged' |  'onScrollRenderer' | 'rendererReference' | 'onMouseEnterRenderer'
+
+export type ScrollingDocumentRenderPaneProps = Omit<(DocumentRenderPaneProps & ScrollProps), ImplementedProps>
+
+export const ScrollingDocumentRenderPane: React.FC<ScrollingDocumentRenderPaneProps> = ({
   scrollState,
   wide,
   onFirstHeadingChange,
   onMakeScrollSource,
   onMetadataChange,
   onScroll,
-  onTaskCheckedChange
+  onTaskCheckedChange,
+  markdownContent,
+  extraClasses,
+  permalinkUrlSchema
 }) => {
-  const markdownContent = useSelector((state: ApplicationState) => state.documentContent.content)
-  const renderer = useRef<HTMLDivElement>(null)
+  const renderer = useRef<HTMLDivElement|undefined>(undefined)
   const [lineMarks, setLineMarks] = useState<LineMarkerPosition[]>()
 
   const contentLineCount = useMemo(() => markdownContent.split('\n').length, [markdownContent])
@@ -32,7 +36,7 @@ export const ScrollingDocumentRenderPane: React.FC<DocumentRenderPaneProps & Scr
 
   return (
     <DocumentRenderPane
-      extraClasses={'overflow-y-scroll'}
+      extraClasses={`overflow-y-scroll h-100 ${extraClasses||''}`}
       rendererReference={renderer}
       wide={wide}
       onFirstHeadingChange={onFirstHeadingChange}
@@ -41,6 +45,8 @@ export const ScrollingDocumentRenderPane: React.FC<DocumentRenderPaneProps & Scr
       onMouseEnterRenderer={onMakeScrollSource}
       onScrollRenderer={userScroll}
       onTaskCheckedChange={onTaskCheckedChange}
+      markdownContent={markdownContent}
+      permalinkUrlSchema={permalinkUrlSchema}
     />
   )
 }
diff --git a/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx b/src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx
@@ -7,9 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { Picker } from 'emoji-picker-element'
 import { CustomEmoji, EmojiClickEvent, EmojiClickEventDetail } from 'emoji-picker-element/shared'
 import React, { useEffect, useRef } from 'react'
-import { useSelector } from 'react-redux'
 import { useClickAway } from 'react-use'
-import { ApplicationState } from '../../../../../redux'
+import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated'
 import './emoji-picker.scss'
 import forkawesomeIcon from './forkawesome.png'
 import { ForkAwesomeIcons } from './icon-names'
@@ -41,7 +40,7 @@ const twemojiStyle = (): HTMLStyleElement => {
 }
 
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({ show, onEmojiSelected, onDismiss }) => {
-  const darkModeEnabled = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeEnabled = useIsDarkModeActivated()
   const pickerContainerRef = useRef<HTMLDivElement>(null)
   const pickerRef = useRef<Picker>()