mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-24 20:14:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Extract toc button (#1302)

Browse source 
* Extract toc button

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-06-07 22:09:13 +02:00 • committed by GitHub
parent 4e9b059d2e
commit 4720f2d36b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 99 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/components/editor-page/document-renderer-pane/hooks/use-adapted-line-markers-callback.ts
View file

@ -1,37 +0,0 @@
/*
* 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>,
onLineMarkerPositionChanged: ((lineMarkerPosition: LineMarkerPosition[]) => void) | undefined
): ((lineMarkerPosition: LineMarkerPosition[]) => void) => {
return useCallback(
(linkMarkerPositions) => {
if (
!onLineMarkerPositionChanged ||
!documentRenderPaneRef ||
!documentRenderPaneRef.current ||
!rendererRef.current
) {
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]
)
}

37
src/components/editor-page/document-renderer-pane/hooks/use-on-iframe-load.ts
View file

@ -1,37 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { RefObject, useCallback, useRef } from 'react'
import { IframeEditorToRendererCommunicator } from '../../../render-page/iframe-editor-to-renderer-communicator'
export const useOnIframeLoad = (
frameReference: RefObject<HTMLIFrameElement>,
iframeCommunicator: IframeEditorToRendererCommunicator,
rendererOrigin: string,
renderPageUrl: string,
onNavigateAway: () => void
): (() => void) => {
const sendToRenderPage = useRef<boolean>(true)
return useCallback(() => {
const frame = frameReference.current
if (!frame || !frame.contentWindow) {
iframeCommunicator.unsetOtherSide()
return
}
if (sendToRenderPage.current) {
iframeCommunicator.setOtherSide(frame.contentWindow, rendererOrigin)
sendToRenderPage.current = false
return
} else {
onNavigateAway()
console.error('Navigated away from unknown URL')
frame.src = renderPageUrl
sendToRenderPage.current = true
}
}, [frameReference, iframeCommunicator, onNavigateAway, renderPageUrl, rendererOrigin])
}

37
src/components/editor-page/document-renderer-pane/show-on-prop-change-image-lightbox.tsx
View file

@ -1,37 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useCallback, useEffect, useState } from 'react'
import { ImageLightboxModal } from '../../markdown-renderer/replace-components/image/image-lightbox-modal'
import { ImageDetails } from '../../render-page/rendering-message'
export interface ShowOnPropChangeImageLightboxProps {
details?: ImageDetails
}
export const ShowOnPropChangeImageLightbox: React.FC<ShowOnPropChangeImageLightboxProps> = ({ details }) => {
const [show, setShow] = useState<boolean>(false)
const hideLightbox = useCallback(() => {
setShow(false)
}, [])
useEffect(() => {
if (details) {
setShow(true)
}
}, [details])
return (
<ImageLightboxModal
show={show}
onHide={hideLightbox}
src={details?.src}
alt={details?.alt}
title={details?.title}
/>
)
}

2
src/components/editor-page/editor-pane/editor-pane.tsx
View file

@ -164,7 +164,7 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({
)
const onCursorActivity = useCallback(
(editorWithActivity) => {
(editorWithActivity: Editor) => {
setStatusBarInfo(createStatusInfo(editorWithActivity, maxLength))
},
[maxLength]

12
src/components/editor-page/table-of-contents/table-of-contents.scss
View file

@ -62,15 +62,3 @@
}
}
}
.markdown-toc-sidebar-button {
position: fixed;
right: 70px;
bottom: 30px;
& > .dropup {
position: sticky;
bottom: 20px;
right: 0;
}
}