Add read-only view (/s/note) (#563)

* Update Link classes to allow tooltips/titles

* Added read-only-view, Move note title extraction into separate file

(cherry picked from commit be23083ca3966f26b1b841d5cf4f21e299c8a55a)
(cherry picked from commit cbc595d3fc336b0a649c396dfae30fa08082384c)

* Optimized look of document-infobar

(cherry picked from commit 0176668b156da3fd7c534161a839ca0e3495119c)

# Conflicts:
#	src/components/editor/document-bar/document-info/document-info-time-line.tsx

* Show help-button only in Editor-variant of AppBar

(cherry picked from commit 3c26e1619c774fe162cb3d8fae9e79ced92c9c3e)

* Update CHANGELOG

(cherry picked from commit d0d29e7d408515cc8f86df45d13fff60d741873e)

* Move motd-banner to top of page

(cherry picked from commit 43a9a274bf5da3fdf640ec905ab38153c81b014b)

* Refactor isInline to size property

(cherry picked from commit cb4ee74b7c97ec9711946f28924e9c890b752ea3)

# Conflicts:
#	src/components/editor/document-bar/document-info/document-info-time-line.tsx

* Add size attribute to user-avatar

(cherry picked from commit 9629b58911b9d4f3aed81ef8c271fbc8e5a15aa4)

* Add mode-enum to app-bar

(cherry picked from commit 08f95be58974468c1e2897b475e5e3235b79c230)

* Split DocumentRenderPane into scrollable- and non-scrollable variant

(cherry picked from commit 44dd27edfd967745c548f7ae1fd2047e812cdc22)

* Removed unnecessary className
This commit is contained in:
Erik Michelson 2020-10-12 21:58:00 +02:00 committed by GitHub
parent 36679753d7
commit 9e9108ec9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 379 additions and 143 deletions

View file

@ -6,11 +6,12 @@ import { ApplicationState } from '../../redux'
import { setEditorMode } from '../../redux/editor/methods'
import { ApplyDarkMode } from '../common/apply-dark-mode/apply-dark-mode'
import { DocumentTitle } from '../common/document-title/document-title'
import { extractNoteTitle } from '../common/document-title/note-title-extractor'
import { MotdBanner } from '../common/motd-banner/motd-banner'
import { AppBar } from './app-bar/app-bar'
import { AppBar, AppBarMode } from './app-bar/app-bar'
import { EditorMode } from './app-bar/editor-view-mode'
import { DocumentBar } from './document-bar/document-bar'
import { DocumentRenderPane } from './document-renderer-pane/document-render-pane'
import { ScrollingDocumentRenderPane } from './document-renderer-pane/scrolling-document-render-pane'
import { EditorPane } from './editor-pane/editor-pane'
import { editorTestContent } from './editorTestContent'
import { DualScrollState, ScrollState } from './scroll/scroll-props'
@ -49,14 +50,9 @@ export const Editor: React.FC = () => {
}))
const updateDocumentTitle = useCallback(() => {
if (noteMetadata.current?.title && noteMetadata.current?.title !== '') {
setDocumentTitle(noteMetadata.current.title)
} else if (noteMetadata.current?.opengraph && noteMetadata.current?.opengraph.get('title') && noteMetadata.current?.opengraph.get('title') !== '') {
setDocumentTitle(noteMetadata.current.opengraph.get('title') ?? untitledNote)
} else {
setDocumentTitle((firstHeading.current ?? untitledNote).trim())
}
}, [untitledNote])
const noteTitle = extractNoteTitle(untitledNote, noteMetadata.current, firstHeading.current)
setDocumentTitle(noteTitle)
}, [noteMetadata, firstHeading, untitledNote])
const onFirstHeadingChange = useCallback((newFirstHeading: string | undefined) => {
firstHeading.current = newFirstHeading
@ -114,7 +110,7 @@ export const Editor: React.FC = () => {
<MotdBanner/>
<DocumentTitle title={documentTitle}/>
<div className={'d-flex flex-column vh-100'}>
<AppBar/>
<AppBar mode={AppBarMode.EDITOR}/>
<DocumentBar title={documentTitle} noteContent={markdownContent} updateNoteContent={(newContent) => setMarkdownContent(newContent)}/>
<Splitter
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
@ -129,7 +125,7 @@ export const Editor: React.FC = () => {
}
showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
right={
<DocumentRenderPane
<ScrollingDocumentRenderPane
content={markdownContent}
onFirstHeadingChange={onFirstHeadingChange}
onMakeScrollSource={() => { scrollSource.current = ScrollSource.RENDERER }}