Remove wider mode #999

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

CHANGELOG.md

@@ -49,7 +49,6 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 - Better support for RTL-languages (and LTR-content in a RTL-page)
 - Users may now change their display name and password (only email accounts) on the new profile page
 - Highlighted code blocks can now use line wrapping and line numbers at once
-- Images, videos, and other non-text content is now wider in View Mode
 - Notes may now be deleted directly from the history page
 - HedgeDoc instances can be branded either with a '@ \<custom string\>' or '@ \<custom logo\>' after the HedgeDoc logo and text
 - Images will be loaded via proxy if an image proxy is configured in the backend

package.json

@@ -101,7 +101,6 @@
         "redux": "4.0.5",
         "ts-mockery": "1.2.0",
         "typescript": "4.1.3",
-        "use-media": "1.4.0",
         "use-resize-observer": "7.0.0",
         "uuid": "8.3.2",
         "vega": "5.19.1",

src/components/editor-page/app-bar/help-button/cheatsheet.tsx

@@ -55,9 +55,7 @@ export const Cheatsheet: React.FC = () => {
               <td>
                 <BasicMarkdownRenderer
                   content={code}
-                  wide={false}
-                  markdownIt={markdownIt}
-                />
+                  markdownIt={markdownIt}/>
               </td>
               <td className={'markdown-body'}>
                 <HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'}/>

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

@@ -8,7 +8,6 @@ import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router'
-import useMedia from 'use-media'
 import { useApplyDarkMode } from '../../hooks/common/use-apply-dark-mode'
 import { useDocumentTitleWithNoteTitle } from '../../hooks/common/use-document-title-with-note-title'
 import { useNoteMarkdownContent } from '../../hooks/common/use-note-markdown-content'
@@ -47,7 +46,6 @@ export const EditorPage: React.FC = () => {
   useTranslation()
   const { search } = useLocation()
   const markdownContent = useNoteMarkdownContent()
-  const isWide = useMedia({ minWidth: 576 }, true)
   const scrollSource = useRef<ScrollSource>(ScrollSource.EDITOR)
 
   const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
@@ -66,12 +64,6 @@ export const EditorPage: React.FC = () => {
     }
   }, [search])
 
-  useEffect(() => {
-    if (!isWide && editorMode === EditorMode.BOTH) {
-      setEditorMode(EditorMode.PREVIEW)
-    }
-  }, [editorMode, isWide])
-
   const onMarkdownRendererScroll = useCallback((newScrollState: ScrollState) => {
     if (scrollSource.current === ScrollSource.RENDERER && editorSyncScroll) {
       setScrollState((old) => ({ editorScrollState: newScrollState, rendererScrollState: old.rendererScrollState }))
@@ -128,7 +120,6 @@ export const EditorPage: React.FC = () => {
                   onTaskCheckedChange={SetCheckboxInMarkdownContent}
                   onFrontmatterChange={setNoteFrontmatter}
                   onScroll={onMarkdownRendererScroll}
-                  wide={editorMode === EditorMode.PREVIEW}
                   scrollState={scrollState.rendererScrollState}/>
               }
               containerClassName={'overflow-hidden'}/>

src/components/editor-page/renderer-pane/render-iframe.tsx

@@ -23,7 +23,6 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
     onFrontmatterChange,
     scrollState,
     onFirstHeadingChange,
-    wide,
     onScroll,
     onMakeScrollSource,
     extraClasses
@@ -46,8 +45,7 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
   useEffect(() => iframeCommunicator.onSetScrollSourceToRenderer(onMakeScrollSource), [iframeCommunicator, onMakeScrollSource])
   useEffect(() => iframeCommunicator.onTaskCheckboxChange(onTaskCheckedChange), [iframeCommunicator, onTaskCheckedChange])
   useEffect(() => iframeCommunicator.onImageClicked(setLightboxDetails), [iframeCommunicator])
-  useEffect(() => iframeCommunicator.onRendererReady(() => setRendererReady(true)), [darkMode, iframeCommunicator, scrollState, wide])
-
+  useEffect(() => iframeCommunicator.onRendererReady(() => setRendererReady(true)), [darkMode, iframeCommunicator, scrollState])
   useEffect(() => {
     if (rendererReady) {
       iframeCommunicator.sendSetDarkmode(darkMode)
@@ -62,12 +60,6 @@ export const RenderIframe: React.FC<MarkdownDocumentProps> = (
     }
   }, [iframeCommunicator, rendererReady, scrollState])
 
-  useEffect(() => {
-    if (rendererReady) {
-      iframeCommunicator.sendSetWide(wide ?? false)
-    }
-  }, [iframeCommunicator, rendererReady, wide])
-
   useEffect(() => {
     if (rendererReady) {
       iframeCommunicator.sendSetBaseUrl(window.location.toString())

src/components/markdown-renderer/basic-markdown-renderer.tsx

@@ -26,7 +26,6 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
   {
     className,
     content,
-    wide,
     componentReplacers,
     markdownIt,
     documentReference,
@@ -38,7 +37,7 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
   const markdownReactDom = useConvertMarkdownToReactDom(trimmedContent, markdownIt, componentReplacers, onBeforeRendering, onAfterRendering)
 
   return (
-    <div className={`${className ?? ''} d-flex flex-column align-items-center ${wide ? 'wider' : ''}`}>
+    <div className={`${className ?? ''} d-flex flex-column align-items-center`}>
       <DocumentLengthLimitReachedAlert contentLength={content.length}/>
       <div ref={documentReference} className={'markdown-body w-100 d-flex flex-column align-items-center'}>
         {markdownReactDom}

src/components/markdown-renderer/full-markdown-renderer.tsx

@@ -40,7 +40,6 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
     onTocChange,
     content,
     className,
-    wide,
     rendererRef,
     baseUrl,
     onImageClick
@@ -94,14 +93,12 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
       <InvalidYamlAlert showYamlError={showYamlError}/>
       <BasicMarkdownRenderer
         className={className}
-        wide={wide}
         content={content}
         componentReplacers={allReplacers}
         markdownIt={markdownIt}
         documentReference={documentElement}
         onBeforeRendering={clearFrontmatter}
-        onAfterRendering={checkYamlErrorState}
-      />
+        onAfterRendering={checkYamlErrorState}/>
     </div>
   )
 }

src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts

@@ -19,7 +19,6 @@ import { LinemarkerReplacer } from '../replace-components/linemarker/linemarker-
 import { LinkReplacer } from '../replace-components/link-replacer/link-replacer'
 import { MarkmapReplacer } from '../replace-components/markmap/markmap-replacer'
 import { MermaidReplacer } from '../replace-components/mermaid/mermaid-replacer'
-import { PossibleWiderReplacer } from '../replace-components/possible-wider/possible-wider-replacer'
 import { QuoteOptionsReplacer } from '../replace-components/quote-options/quote-options-replacer'
 import { SequenceDiagramReplacer } from '../replace-components/sequence-diagram/sequence-diagram-replacer'
 import { TaskListReplacer } from '../replace-components/task-list/task-list-replacer'
@@ -32,7 +31,6 @@ export const useReplacerInstanceListCreator = (onTaskCheckedChange?: (lineInMark
   () => [
     new LinkReplacer(baseUrl),
     new LinemarkerReplacer(),
-    new PossibleWiderReplacer(),
     new GistReplacer(),
     new YoutubeReplacer(),
     new VimeoReplacer(),

src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.scss

@@ -1,14 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-.wider .markdown-body {
-    max-width: 1500px;
-    width: 100%;
-
-    &>.wider-possible {
-      max-width: 1500px;
-    }
-  }

src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx

@@ -1,35 +0,0 @@
-/*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
-
-import { DomElement } from 'domhandler'
-import { ComponentReplacer } from '../ComponentReplacer'
-import './possible-wider-replacer.scss'
-
-const enabledTags = ['img', 'app-youtube', 'app-vimeo', 'app-asciinema', 'app-pdf']
-
-/**
- * This replacer doesn't actually replace something.
- * It just uses the ComponentReplacer-Class to get access to the DOM and
- * appends the "wider-possible" class to paragraphs with special content.
- */
-export class PossibleWiderReplacer extends ComponentReplacer {
-  public getReplacement (node: DomElement): (undefined) {
-    if (node.name !== 'p') {
-      return
-    }
-    if (!node.children || node.children.length === 0) {
-      return
-    }
-
-    if (node.children.find((subNode) => subNode.name && enabledTags.includes(subNode.name))) {
-      if (!node.attribs) {
-        node.attribs = {}
-      }
-
-      node.attribs.class = `${node.attribs.class ?? ''} wider-possible`
-    }
-  }
-}

src/components/markdown-renderer/types.d.ts

@@ -16,6 +16,5 @@ export interface LineMarkerPosition {
 
 export interface AdditionalMarkdownRendererProps {
   className?: string,
-  content: string,
-  wide?: boolean,
+  content: string
 }

src/components/render-page/iframe-editor-to-renderer-communicator.ts

@@ -99,13 +99,6 @@ export class IframeEditorToRendererCommunicator extends IframeCommunicator<Edito
     })
   }
 
-  public sendSetWide (isWide: boolean): void {
-    this.sendMessageToOtherSide({
-      type: RenderIframeMessageType.SET_WIDE,
-      activated: isWide
-    })
-  }
-
   public sendScrollState (scrollState?: ScrollState): void {
     if (!scrollState) {
       return

src/components/render-page/iframe-renderer-to-editor-communicator.ts

@@ -17,7 +17,6 @@ import {
 export class IframeRendererToEditorCommunicator extends IframeCommunicator<RendererToEditorIframeMessage, EditorToRendererIframeMessage> {
   private onSetMarkdownContentHandler?: ((markdownContent: string) => void)
   private onSetDarkModeHandler?: ((darkModeActivated: boolean) => void)
-  private onSetWideHandler?: ((wide: boolean) => void)
   private onSetScrollStateHandler?: ((scrollState: ScrollState) => void)
   private onSetBaseUrlHandler?: ((baseUrl: string) => void)
 
@@ -33,10 +32,6 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
     this.onSetDarkModeHandler = handler
   }
 
-  public onSetWide (handler?: (wide: boolean) => void): void {
-    this.onSetWideHandler = handler
-  }
-
   public onSetScrollState (handler?: (scrollState: ScrollState) => void): void {
     this.onSetScrollStateHandler = handler
   }
@@ -91,9 +86,6 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
       case RenderIframeMessageType.SET_DARKMODE:
         this.onSetDarkModeHandler?.(renderMessage.activated)
         return false
-      case RenderIframeMessageType.SET_WIDE:
-        this.onSetWideHandler?.(renderMessage.activated)
-        return false
       case RenderIframeMessageType.SET_SCROLL_STATE:
         this.onSetScrollStateHandler?.(renderMessage.scrollState)
         return false

src/components/render-page/markdown-document.tsx

@@ -25,7 +25,6 @@ export interface MarkdownDocumentProps extends ScrollProps {
   onFrontmatterChange?: (frontmatter: NoteFrontmatter | undefined) => void
   onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void
   documentRenderPaneRef?: MutableRefObject<HTMLDivElement | null>
-  wide?: boolean,
   markdownContent: string,
   baseUrl?: string
   onImageClick?: ImageClickHandler
@@ -38,7 +37,6 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
     onFrontmatterChange,
     onMakeScrollSource,
     onTaskCheckedChange,
-    wide,
     baseUrl,
     markdownContent,
     onImageClick,
@@ -60,17 +58,16 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
       <div className={'bg-light markdown-document-content'}>
         <YamlArrayDeprecationAlert/>
         <FullMarkdownRenderer
-          rendererRef={rendererRef}
-          className={'flex-fill pt-4 mb-3'}
-          content={markdownContent}
-          onFirstHeadingChange={onFirstHeadingChange}
-          onLineMarkerPositionChanged={onLineMarkerPositionChanged}
-          onFrontmatterChange={onFrontmatterChange}
-          onTaskCheckedChange={onTaskCheckedChange}
-          onTocChange={(tocAst) => setTocAst(tocAst)}
-          wide={wide}
-          baseUrl={baseUrl}
-          onImageClick={onImageClick}/>
+            rendererRef={rendererRef}
+            className={'flex-fill pt-4 mb-3'}
+            content={markdownContent}
+            onFirstHeadingChange={onFirstHeadingChange}
+            onLineMarkerPositionChanged={onLineMarkerPositionChanged}
+            onFrontmatterChange={onFrontmatterChange}
+            onTaskCheckedChange={onTaskCheckedChange}
+            onTocChange={(tocAst) => setTocAst(tocAst)}
+            baseUrl={baseUrl}
+            onImageClick={onImageClick}/>
 
       </div>
 

src/components/render-page/render-page.tsx

@@ -19,7 +19,6 @@ export const RenderPage: React.FC = () => {
   useApplyDarkMode()
 
   const [markdownContent, setMarkdownContent] = useState('')
-  const [isWide, setWide] = useState(false)
   const [scrollState, setScrollState] = useState<ScrollState>({ firstLineInView: 1, scrolledPercentage: 0 })
   const [baseUrl, setBaseUrl] = useState<string>()
 
@@ -39,7 +38,6 @@ export const RenderPage: React.FC = () => {
   useEffect(() => iframeCommunicator.onSetBaseUrl(setBaseUrl), [iframeCommunicator])
   useEffect(() => iframeCommunicator.onSetMarkdownContent(setMarkdownContent), [iframeCommunicator])
   useEffect(() => iframeCommunicator.onSetDarkMode(setDarkMode), [iframeCommunicator])
-  useEffect(() => iframeCommunicator.onSetWide(setWide), [iframeCommunicator])
   useEffect(() => iframeCommunicator.onSetScrollState(setScrollState), [iframeCommunicator, scrollState])
 
   const onTaskCheckedChange = useCallback((lineInMarkdown: number, checked: boolean) => {
@@ -84,7 +82,6 @@ export const RenderPage: React.FC = () => {
       <MarkdownDocument
         extraClasses={'bg-light'}
         markdownContent={markdownContent}
-        wide={isWide}
         onTaskCheckedChange={onTaskCheckedChange}
         onFirstHeadingChange={onFirstHeadingChange}
         onMakeScrollSource={onMakeScrollSource}

src/components/render-page/rendering-message.ts

@@ -10,7 +10,6 @@ export enum RenderIframeMessageType {
   SET_MARKDOWN_CONTENT = 'SET_MARKDOWN_CONTENT',
   RENDERER_READY = 'RENDERER_READY',
   SET_DARKMODE = 'SET_DARKMODE',
-  SET_WIDE = 'SET_WIDE',
   ON_TASK_CHECKBOX_CHANGE = 'ON_TASK_CHECKBOX_CHANGE',
   ON_FIRST_HEADING_CHANGE = 'ON_FIRST_HEADING_CHANGE',
   SET_SCROLL_SOURCE_TO_RENDERER = 'SET_SCROLL_SOURCE_TO_RENDERER',
@@ -45,11 +44,6 @@ export interface ImageClickedMessage {
   details: ImageDetails
 }
 
-export interface SetWideMessage {
-  type: RenderIframeMessageType.SET_WIDE,
-  activated: boolean
-}
-
 export interface SetMarkdownContentMessage {
   type: RenderIframeMessageType.SET_MARKDOWN_CONTENT,
   content: string
@@ -79,7 +73,6 @@ export interface OnFrontmatterChangeMessage {
 export type EditorToRendererIframeMessage =
   SetMarkdownContentMessage |
   SetDarkModeMessage |
-  SetWideMessage |
   SetScrollStateMessage |
   SetBaseUrlMessage
 

yarn.lock

@@ -14310,11 +14310,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-media@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/use-media/-/use-media-1.4.0.tgz#e777bf1f382a7aacabbd1f9ce3da2b62e58b2a98"
-  integrity sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA==
-
 use-resize-observer@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-7.0.0.tgz#15f0efbd5a4e08a8cc51901f21a89ba836f2116e"