From 95c563255dfa93a00b509379dfda6dc00fb5459a Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Tue, 22 Dec 2020 21:45:11 +0100
Subject: [PATCH] Add support for editor-mode URL parameters (#873)

---
 cypress/integration/editorMode.spec.ts        | 24 +++++++++++++++++++
 .../editor/app-bar/editor-view-mode.tsx       |  2 +-
 src/components/editor/editor.tsx              | 10 ++++++--
 3 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 cypress/integration/editorMode.spec.ts

diff --git a/cypress/integration/editorMode.spec.ts b/cypress/integration/editorMode.spec.ts
new file mode 100644
index 000000000..57c9708b0
--- /dev/null
+++ b/cypress/integration/editorMode.spec.ts
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+describe('Editor mode from URL parameter is used', () => {
+  it('mode view', () => {
+    cy.visit('/n/features?view')
+    cy.get('.splitter.left').should('have.class', 'd-none')
+    cy.get('.splitter.right').should('not.have.class', 'd-none')
+  })
+  it('mode both', () => {
+    cy.visit('/n/features?both')
+    cy.get('.splitter.left').should('not.have.class', 'd-none')
+    cy.get('.splitter.separator').should('exist')
+    cy.get('.splitter.right').should('not.have.class', 'd-none')
+  })
+  it('mode edit', () => {
+    cy.visit('/n/features?edit')
+    cy.get('.splitter.left').should('not.have.class', 'd-none')
+    cy.get('.splitter.right').should('have.class', 'd-none')
+  })
+})
diff --git a/src/components/editor/app-bar/editor-view-mode.tsx b/src/components/editor/app-bar/editor-view-mode.tsx
index 7b6552b28..43c5b81cc 100644
--- a/src/components/editor/app-bar/editor-view-mode.tsx
+++ b/src/components/editor/app-bar/editor-view-mode.tsx
@@ -15,7 +15,7 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 export enum EditorMode {
   PREVIEW = 'view',
   BOTH = 'both',
-  EDITOR = 'edit',
+  EDITOR = 'edit'
 }
 
 export const EditorViewMode: React.FC = () => {
diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx
index cb2b1bf32..5b5281a0f 100644
--- a/src/components/editor/editor.tsx
+++ b/src/components/editor/editor.tsx
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { useParams } from 'react-router'
+import { useLocation, useParams } from 'react-router'
 import useMedia from 'use-media'
 import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
 import { useDocumentTitle } from '../../hooks/common/use-document-title'
@@ -42,6 +42,7 @@ const TASK_REGEX = /(\s*[-*] )(\[[ xX]])( .*)/
 export const Editor: React.FC = () => {
   const { t } = useTranslation()
   const { id } = useParams<EditorPathParams>()
+  const { search } = useLocation()
   const untitledNote = t('editor.untitledNote')
   const markdownContent = useSelector((state: ApplicationState) => state.documentContent.content)
   const isWide = useMedia({ minWidth: 576 })
@@ -60,7 +61,12 @@ export const Editor: React.FC = () => {
 
   useEffect(() => {
     setDocumentContent(editorTestContent)
-  }, [])
+    const requestedMode = search.substr(1)
+    const mode = Object.values(EditorMode).find(mode => mode === requestedMode)
+    if (mode) {
+      setEditorMode(mode)
+    }
+  }, [search])
 
   const updateDocumentTitle = useCallback(() => {
     const noteTitle = extractNoteTitle(untitledNote, noteMetadata.current, firstHeading.current)