Minor fixes (#911)

* Replace full links

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

* Use dark mode hook

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

* Add overflow for graphviz and abc

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

* Cap max height of toc overlay

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

* Remove extension from css import

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

* Fix hook

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

cypress/support/config.ts

@@ -11,7 +11,7 @@ export const banner = {
 
 export const branding = {
   name: 'ACME Corp',
-  logo: 'http://localhost:3001/img/acme.png'
+  logo: '/img/acme.png'
 }
 
 beforeEach(() => {

public/api/v2/config

@@ -16,7 +16,7 @@
   "allowRegister": true,
   "branding": {
     "name": "ACME Corp",
-    "logo": "http://localhost:3001/img/acme.png"
+    "logo": "/img/acme.png"
   },
   "banner": {
       "text": "This is the test banner text",

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

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>

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(() => {

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>()
 

src/components/editor/table-of-contents/table-of-contents.scss

@@ -7,6 +7,7 @@
 .markdown-toc {
   width: 100%;
   max-width: 200px;
+  max-height: 100vh;
   overflow-y: auto;
   overflow-x: hidden;
 

src/components/markdown-renderer/replace-components/abc/abc-frame.tsx

@@ -23,5 +23,5 @@ export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
     }).catch(() => { console.error('error while loading abcjs') })
   }, [code])
 
-  return <div ref={container} className={'bg-white text-center'}/>
+  return <div ref={container} className={'bg-white text-center overflow-x-auto'}/>
 }

src/components/markdown-renderer/replace-components/flow/flowchart/flowchart.tsx

@@ -7,8 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import React, { useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../../../../redux'
+import { useIsDarkModeActivated } from '../../../../../hooks/common/use-is-dark-mode-activated'
 
 export interface FlowChartProps {
   code: string
@@ -17,8 +16,7 @@ export interface FlowChartProps {
 export const FlowChart: React.FC<FlowChartProps> = ({ code }) => {
   const diagramRef = useRef<HTMLDivElement>(null)
   const [error, setError] = useState(false)
-
-  const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeActivated = useIsDarkModeActivated()
 
   useTranslation()
 

src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx

@@ -55,7 +55,7 @@ export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
     <ShowIf condition={!!error}>
       <Alert variant={'warning'}>{error}</Alert>
     </ShowIf>
-    <div className={'text-center'} ref={container} />
+    <div className={'text-center overflow-x-auto'} ref={container} />
   </Fragment>
 }
 

src/components/markdown-renderer/replace-components/image/image-frame.tsx

@@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { getProxiedUrl } from '../../../../api/media'
 import { ApplicationState } from '../../../../redux'
-import { Frame } from './frame'
+import { LightboxedImageFrame } from './lightboxedImageFrame'
 
 export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
   const [imageUrl, setImageUrl] = useState('')
@@ -25,11 +25,11 @@ export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
 
   if (imageProxyEnabled) {
     return (
-      <Frame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
+      <LightboxedImageFrame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
     )
   }
 
   return (
-    <Frame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
+    <LightboxedImageFrame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
   )
 }

src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx

@@ -8,7 +8,7 @@ import React, { Fragment, useState } from 'react'
 import { Modal } from 'react-bootstrap'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 
-export const Frame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => {
+export const LightboxedImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => {
   const [showFullscreenImage, setShowFullscreenImage] = useState(false)
 
   return (
@@ -20,8 +20,7 @@ export const Frame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt
         dialogClassName={'text-dark'}
         show={showFullscreenImage}
         onHide={() => setShowFullscreenImage(false)}
-        size={'xl'}
-      >
+        size={'xl'}>
         <Modal.Header closeButton={true}>
           <Modal.Title className={'h6'}>
             <ForkAwesomeIcon icon={'picture-o'}/>

src/hooks/common/use-apply-dark-mode.ts

@@ -5,11 +5,10 @@
  */
 
 import { useEffect } from 'react'
-import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../redux'
+import { useIsDarkModeActivated } from './use-is-dark-mode-activated'
 
 export const useApplyDarkMode = ():void => {
-  const darkModeActivated = useSelector((state: ApplicationState) => state.darkMode.darkMode)
+  const darkModeActivated = useIsDarkModeActivated()
 
   useEffect(() => {
     if (darkModeActivated) {

src/hooks/common/use-is-dark-mode-activated.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../redux'
+
+export const useIsDarkModeActivated = (): boolean => {
+  return useSelector((state: ApplicationState) => state.darkMode.darkMode)
+}

src/style/index.scss

@@ -7,7 +7,7 @@
 @import "variables.light";
 @import "../../node_modules/bootstrap/scss/bootstrap";
 @import '../../node_modules/react-bootstrap-typeahead/css/Typeahead';
-@import "~@fontsource/source-sans-pro/index.css";
+@import "~@fontsource/source-sans-pro/index";
 @import "fonts/twemoji/twemoji";
 @import '../../node_modules/fork-awesome/css/fork-awesome.min';
 
@@ -79,3 +79,7 @@ body {
     content: initial;
   }
 }
+
+.overflow-x-auto {
+  overflow-x: auto !important;
+}