From 0180c75e5506819bc24567620612bb6159478457 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Tue, 2 Feb 2021 23:13:31 +0100 Subject: [PATCH] Remove wider mode #999 Signed-off-by: Tilman Vatteroth --- CHANGELOG.md | 1 - package.json | 1 - .../app-bar/help-button/cheatsheet.tsx | 4 +-- src/components/editor-page/editor-page.tsx | 9 ----- .../renderer-pane/render-iframe.tsx | 10 +----- .../basic-markdown-renderer.tsx | 3 +- .../full-markdown-renderer.tsx | 5 +-- .../use-replacer-instance-list-creator.ts | 2 -- .../possible-wider-replacer.scss | 14 -------- .../possible-wider-replacer.tsx | 35 ------------------- src/components/markdown-renderer/types.d.ts | 3 +- .../iframe-editor-to-renderer-communicator.ts | 7 ---- .../iframe-renderer-to-editor-communicator.ts | 8 ----- .../render-page/markdown-document.tsx | 23 ++++++------ src/components/render-page/render-page.tsx | 3 -- .../render-page/rendering-message.ts | 7 ---- yarn.lock | 5 --- 17 files changed, 15 insertions(+), 125 deletions(-) delete mode 100644 src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.scss delete mode 100644 src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 955392c85..397e24121 100644 --- a/CHANGELOG.md +++ b/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 '@ \' or '@ \' after the HedgeDoc logo and text - Images will be loaded via proxy if an image proxy is configured in the backend diff --git a/package.json b/package.json index 5967e09a3..f4a5c3280 100644 --- a/package.json +++ b/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", diff --git a/src/components/editor-page/app-bar/help-button/cheatsheet.tsx b/src/components/editor-page/app-bar/help-button/cheatsheet.tsx index 58cf4d0ea..9326c99c5 100644 --- a/src/components/editor-page/app-bar/help-button/cheatsheet.tsx +++ b/src/components/editor-page/app-bar/help-button/cheatsheet.tsx @@ -55,9 +55,7 @@ export const Cheatsheet: React.FC = () => { + markdownIt={markdownIt}/> diff --git a/src/components/editor-page/editor-page.tsx b/src/components/editor-page/editor-page.tsx index 2504931a7..f2efefc6b 100644 --- a/src/components/editor-page/editor-page.tsx +++ b/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.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'}/> diff --git a/src/components/editor-page/renderer-pane/render-iframe.tsx b/src/components/editor-page/renderer-pane/render-iframe.tsx index 753ca58e6..a64a7bda3 100644 --- a/src/components/editor-page/renderer-pane/render-iframe.tsx +++ b/src/components/editor-page/renderer-pane/render-iframe.tsx @@ -23,7 +23,6 @@ export const RenderIframe: React.FC = ( onFrontmatterChange, scrollState, onFirstHeadingChange, - wide, onScroll, onMakeScrollSource, extraClasses @@ -46,8 +45,7 @@ export const RenderIframe: React.FC = ( 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 = ( } }, [iframeCommunicator, rendererReady, scrollState]) - useEffect(() => { - if (rendererReady) { - iframeCommunicator.sendSetWide(wide ?? false) - } - }, [iframeCommunicator, rendererReady, wide]) - useEffect(() => { if (rendererReady) { iframeCommunicator.sendSetBaseUrl(window.location.toString()) diff --git a/src/components/markdown-renderer/basic-markdown-renderer.tsx b/src/components/markdown-renderer/basic-markdown-renderer.tsx index 5fac5a6c6..ef5708a63 100644 --- a/src/components/markdown-renderer/basic-markdown-renderer.tsx +++ b/src/components/markdown-renderer/basic-markdown-renderer.tsx @@ -26,7 +26,6 @@ export const BasicMarkdownRenderer: React.FC +
{markdownReactDom} diff --git a/src/components/markdown-renderer/full-markdown-renderer.tsx b/src/components/markdown-renderer/full-markdown-renderer.tsx index 5c4209370..a973b81c9 100644 --- a/src/components/markdown-renderer/full-markdown-renderer.tsx +++ b/src/components/markdown-renderer/full-markdown-renderer.tsx @@ -40,7 +40,6 @@ export const FullMarkdownRenderer: React.FC + onAfterRendering={checkYamlErrorState}/>
) } diff --git a/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts b/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts index e77adecb9..bbcdda704 100644 --- a/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts +++ b/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(), diff --git a/src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.scss b/src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.scss deleted file mode 100644 index bc7d4d101..000000000 --- a/src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.scss +++ /dev/null @@ -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; - } - } diff --git a/src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx b/src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx deleted file mode 100644 index f13273cbb..000000000 --- a/src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx +++ /dev/null @@ -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` - } - } -} diff --git a/src/components/markdown-renderer/types.d.ts b/src/components/markdown-renderer/types.d.ts index 3dc5af620..8ec13a79e 100644 --- a/src/components/markdown-renderer/types.d.ts +++ b/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 } diff --git a/src/components/render-page/iframe-editor-to-renderer-communicator.ts b/src/components/render-page/iframe-editor-to-renderer-communicator.ts index 5e1704553..0db06e2d4 100644 --- a/src/components/render-page/iframe-editor-to-renderer-communicator.ts +++ b/src/components/render-page/iframe-editor-to-renderer-communicator.ts @@ -99,13 +99,6 @@ export class IframeEditorToRendererCommunicator extends IframeCommunicator { 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 void): void { - this.onSetWideHandler = handler - } - public onSetScrollState (handler?: (scrollState: ScrollState) => void): void { this.onSetScrollStateHandler = handler } @@ -91,9 +86,6 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator void onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void documentRenderPaneRef?: MutableRefObject - wide?: boolean, markdownContent: string, baseUrl?: string onImageClick?: ImageClickHandler @@ -38,7 +37,6 @@ export const MarkdownDocument: React.FC = ( onFrontmatterChange, onMakeScrollSource, onTaskCheckedChange, - wide, baseUrl, markdownContent, onImageClick, @@ -60,17 +58,16 @@ export const MarkdownDocument: React.FC = (
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}/>
diff --git a/src/components/render-page/render-page.tsx b/src/components/render-page/render-page.tsx index 102bbf33b..73fc83436 100644 --- a/src/components/render-page/render-page.tsx +++ b/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({ firstLineInView: 1, scrolledPercentage: 0 }) const [baseUrl, setBaseUrl] = useState() @@ -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 = () => {