Fix Splitter issues (#1343)

Fix Splitter issues

* Replace code with hook useAdjustedRelativeSplitValue
* Add e2e tests for splitter

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

cypress/integration/splitter.spec.ts

@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe('Split view', () => {
+  beforeEach(() => {
+    cy.visitTestEditor()
+  })
+
+  it('can show both panes', () => {
+    cy.get('[data-cy="view-mode-both"]').click()
+    cy.get('.splitter.left').should('be.visible')
+    cy.get('.splitter.right').should('be.visible')
+  })
+
+  it('can show only preview pane', () => {
+    cy.get('[data-cy="view-mode-preview"]').click()
+    cy.get('.splitter.left').should('be.not.visible')
+    cy.get('.splitter.right').should('be.visible')
+  })
+
+  it('can show only editor pane', () => {
+    cy.get('[data-cy="view-mode-editor"]').click()
+    cy.get('.splitter.left').should('be.visible')
+    cy.get('.splitter.right').should('be.not.visible')
+  })
+
+  it('can change the split by dragging', () => {
+    cy.get('.splitter.left').then((leftPanebefore) => {
+      const widthBefore = leftPanebefore.outerWidth()
+
+      cy.get('[data-cy="view-mode-both"]').click()
+      cy.get('.split-divider').should('be.visible').trigger('mousedown', { buttons: 1 })
+      cy.document().trigger('mousemove', { buttons: 1, pageX: 0, pageY: 0 })
+      cy.get('.split-divider').trigger('mouseup')
+
+      cy.get('.splitter.left').should('not.eq', widthBefore)
+    })
+  })
+})

src/components/editor-page/app-bar/editor-view-mode.tsx

@@ -29,13 +29,25 @@ export const EditorViewMode: React.FC = () => {
       onChange={(value: EditorMode) => {
         setEditorMode(value)
       }}>
-      <ToggleButton value={EditorMode.PREVIEW} variant='outline-secondary' title={t('editor.viewMode.view')}>
+      <ToggleButton
+        data-cy={'view-mode-preview'}
+        value={EditorMode.PREVIEW}
+        variant='outline-secondary'
+        title={t('editor.viewMode.view')}>
         <ForkAwesomeIcon icon='eye' />
       </ToggleButton>
-      <ToggleButton value={EditorMode.BOTH} variant='outline-secondary' title={t('editor.viewMode.both')}>
+      <ToggleButton
+        data-cy={'view-mode-both'}
+        value={EditorMode.BOTH}
+        variant='outline-secondary'
+        title={t('editor.viewMode.both')}>
         <ForkAwesomeIcon icon='columns' />
       </ToggleButton>
-      <ToggleButton value={EditorMode.EDITOR} variant='outline-secondary' title={t('editor.viewMode.edit')}>
+      <ToggleButton
+        data-cy={'view-mode-editor'}
+        value={EditorMode.EDITOR}
+        variant='outline-secondary'
+        title={t('editor.viewMode.edit')}>
         <ForkAwesomeIcon icon='pencil' />
       </ToggleButton>
     </ToggleButtonGroup>

src/components/editor-page/splitter/hooks/use-adjusted-relative-split-value.ts

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useMemo } from 'react'
+
+/**
+ * Calculates the adjusted relative split value.
+ *
+ * @param showLeft Defines if the left split pane should be shown
+ * @param showRight Defines if the right split pane should be shown
+ * @param relativeSplitValue The relative size ratio of the split
+ * @return the limited (0% to 100%) relative split value. If only the left or right pane should be shown then the return value will be always 100 or 0
+ */
+export const useAdjustedRelativeSplitValue = (
+  showLeft: boolean,
+  showRight: boolean,
+  relativeSplitValue: number
+): number =>
+  useMemo(() => {
+    let splitValue: number
+    if (!showLeft && showRight) {
+      splitValue = 0
+    } else if (showLeft && !showRight) {
+      splitValue = 100
+    } else {
+      splitValue = relativeSplitValue
+    }
+
+    return Math.min(100, Math.max(0, splitValue))
+  }, [relativeSplitValue, showLeft, showRight])

src/components/editor-page/splitter/splitter.tsx

@@ -8,6 +8,7 @@ import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'r
 import { ShowIf } from '../../common/show-if/show-if'
 import { SplitDivider } from './split-divider/split-divider'
 import './splitter.scss'
+import { useAdjustedRelativeSplitValue } from './hooks/use-adjusted-relative-split-value'
 
 export interface SplitterProps {
   left: ReactElement
@@ -62,7 +63,7 @@ export const Splitter: React.FC<SplitterProps> = ({
   showRight
 }) => {
   const [relativeSplitValue, setRelativeSplitValue] = useState(50)
-  const cappedRelativeSplitValue = Math.max(0, Math.min(100, showRight ? relativeSplitValue : 100))
+  const adjustedRelativeSplitValue = useAdjustedRelativeSplitValue(showLeft, showRight, relativeSplitValue)
   const resizingInProgress = useRef(false)
   const splitContainer = useRef<HTMLDivElement>(null)
 
@@ -129,7 +130,7 @@ export const Splitter: React.FC<SplitterProps> = ({
     <div ref={splitContainer} className={`flex-fill flex-row d-flex ${additionalContainerClassName || ''}`}>
       <div
         className={`splitter left ${!showLeft ? 'd-none' : ''}`}
-        style={{ width: `calc(${cappedRelativeSplitValue}% - 5px)` }}>
+        style={{ width: `calc(${adjustedRelativeSplitValue}% - 5px)` }}>
         {left}
       </div>
       <ShowIf condition={showLeft && showRight}>
@@ -139,7 +140,7 @@ export const Splitter: React.FC<SplitterProps> = ({
       </ShowIf>
       <div
         className={`splitter right ${!showRight ? 'd-none' : ''}`}
-        style={{ width: `calc(100% - ${cappedRelativeSplitValue}%)` }}>
+        style={{ width: `calc(100% - ${adjustedRelativeSplitValue}%)` }}>
         {right}
       </div>
     </div>