mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-23 19:47:03 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjust editor config (#976)

Browse source 
* Adjust editor config

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Tilman Vatteroth 2021-02-03 22:13:04 +01:00 • committed by GitHub
parent 0180c75e55
commit e12dc523f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
301 changed files with 4393 additions and 3741 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/render-page/iframe-communicator.ts
View file

@ -8,36 +8,36 @@ export abstract class IframeCommunicator<SEND, RECEIVE> {
protected otherSide?: Window
protected otherOrigin?: string
constructor () {
window.addEventListener("message", this.handleEvent.bind(this))
constructor() {
window.addEventListener('message', this.handleEvent.bind(this))
}
public unregisterEventListener (): void {
window.removeEventListener("message", this.handleEvent.bind(this))
public unregisterEventListener(): void {
window.removeEventListener('message', this.handleEvent.bind(this))
}
public setOtherSide (otherSide: Window, otherOrigin: string): void {
public setOtherSide(otherSide: Window, otherOrigin: string): void {
this.otherSide = otherSide
this.otherOrigin = otherOrigin
}
public unsetOtherSide (): void {
public unsetOtherSide(): void {
this.otherSide = undefined
this.otherOrigin = undefined
}
public getOtherSide (): Window | undefined {
public getOtherSide(): Window | undefined {
return this.otherSide
}
protected sendMessageToOtherSide (message: SEND): void {
protected sendMessageToOtherSide(message: SEND): void {
if (this.otherSide === undefined || this.otherOrigin === undefined) {
console.error("Can't send message because otherSide is null", message)
console.error('Can\'t send message because otherSide is null', message)
return
}
this.otherSide.postMessage(message, this.otherOrigin)
}
protected abstract handleEvent (event: MessageEvent<RECEIVE>): void;
protected abstract handleEvent(event: MessageEvent<RECEIVE>): void;
}

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

@ -4,15 +4,15 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { NoteFrontmatter } from "../editor-page/note-frontmatter/note-frontmatter"
import { ScrollState } from "../editor-page/synced-scroll/scroll-props"
import { IframeCommunicator } from "./iframe-communicator"
import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
import { ScrollState } from '../editor-page/synced-scroll/scroll-props'
import { IframeCommunicator } from './iframe-communicator'
import {
EditorToRendererIframeMessage,
ImageDetails,
RendererToEditorIframeMessage,
RenderIframeMessageType
} from "./rendering-message"
} from './rendering-message'
export class IframeEditorToRendererCommunicator extends IframeCommunicator<EditorToRendererIframeMessage, RendererToEditorIframeMessage> {
private onSetScrollSourceToRendererHandler?: () => void
@ -23,31 +23,66 @@ export class IframeEditorToRendererCommunicator extends IframeCommunicator<Edito
private onRendererReadyHandler?: () => void
private onImageClickedHandler?: (details: ImageDetails) => void
public onFrontmatterChange (handler?: (frontmatter?: NoteFrontmatter) => void): void {
public onFrontmatterChange(handler?: (frontmatter?: NoteFrontmatter) => void): void {
this.onFrontmatterChangeHandler = handler
}
public onImageClicked (handler?: (details: ImageDetails) => void): void {
public onImageClicked(handler?: (details: ImageDetails) => void): void {
this.onImageClickedHandler = handler
}
public onRendererReady (handler?: () => void): void {
public onRendererReady(handler?: () => void): void {
this.onRendererReadyHandler = handler
}
public onSetScrollSourceToRenderer (handler?: () => void): void {
public onSetScrollSourceToRenderer(handler?: () => void): void {
this.onSetScrollSourceToRendererHandler = handler
}
public onTaskCheckboxChange (handler?: (lineInMarkdown: number, checked: boolean) => void): void {
public onTaskCheckboxChange(handler?: (lineInMarkdown: number, checked: boolean) => void): void {
this.onTaskCheckboxChangeHandler = handler
}
public onFirstHeadingChange (handler?: (heading?: string) => void): void {
public onFirstHeadingChange(handler?: (heading?: string) => void): void {
this.onFirstHeadingChangeHandler = handler
}
protected handleEvent (event: MessageEvent<RendererToEditorIframeMessage>): boolean | undefined {
public onSetScrollState(handler?: (scrollState: ScrollState) => void): void {
this.onSetScrollStateHandler = handler
}
public sendSetBaseUrl(baseUrl: string): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_BASE_URL,
baseUrl
})
}
public sendSetMarkdownContent(markdownContent: string): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_MARKDOWN_CONTENT,
content: markdownContent
})
}
public sendSetDarkmode(darkModeActivated: boolean): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_DARKMODE,
activated: darkModeActivated
})
}
public sendScrollState(scrollState?: ScrollState): void {
if (!scrollState) {
return
}
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_SCROLL_STATE,
scrollState
})
}
protected handleEvent(event: MessageEvent<RendererToEditorIframeMessage>): boolean | undefined {
const renderMessage = event.data
switch (renderMessage.type) {
case RenderIframeMessageType.RENDERER_READY:
@ -73,39 +108,4 @@ export class IframeEditorToRendererCommunicator extends IframeCommunicator<Edito
return false
}
}
public onSetScrollState (handler?: (scrollState: ScrollState) => void): void {
this.onSetScrollStateHandler = handler
}
public sendSetBaseUrl (baseUrl: string): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_BASE_URL,
baseUrl
})
}
public sendSetMarkdownContent (markdownContent: string): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_MARKDOWN_CONTENT,
content: markdownContent
})
}
public sendSetDarkmode (darkModeActivated: boolean): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_DARKMODE,
activated: darkModeActivated
})
}
public sendScrollState (scrollState?: ScrollState): void {
if (!scrollState) {
return
}
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_SCROLL_STATE,
scrollState
})
}
}

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

@ -4,15 +4,15 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { NoteFrontmatter } from "../editor-page/note-frontmatter/note-frontmatter"
import { ScrollState } from "../editor-page/synced-scroll/scroll-props"
import { IframeCommunicator } from "./iframe-communicator"
import { NoteFrontmatter } from '../editor-page/note-frontmatter/note-frontmatter'
import { ScrollState } from '../editor-page/synced-scroll/scroll-props'
import { IframeCommunicator } from './iframe-communicator'
import {
EditorToRendererIframeMessage,
ImageDetails,
RendererToEditorIframeMessage,
RenderIframeMessageType
} from "./rendering-message"
} from './rendering-message'
export class IframeRendererToEditorCommunicator extends IframeCommunicator<RendererToEditorIframeMessage, EditorToRendererIframeMessage> {
private onSetMarkdownContentHandler?: ((markdownContent: string) => void)
@ -20,29 +20,29 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
private onSetScrollStateHandler?: ((scrollState: ScrollState) => void)
private onSetBaseUrlHandler?: ((baseUrl: string) => void)
public onSetBaseUrl (handler?: (baseUrl: string) => void): void {
public onSetBaseUrl(handler?: (baseUrl: string) => void): void {
this.onSetBaseUrlHandler = handler
}
public onSetMarkdownContent (handler?: (markdownContent: string) => void): void {
public onSetMarkdownContent(handler?: (markdownContent: string) => void): void {
this.onSetMarkdownContentHandler = handler
}
public onSetDarkMode (handler?: (darkModeActivated: boolean) => void): void {
public onSetDarkMode(handler?: (darkModeActivated: boolean) => void): void {
this.onSetDarkModeHandler = handler
}
public onSetScrollState (handler?: (scrollState: ScrollState) => void): void {
public onSetScrollState(handler?: (scrollState: ScrollState) => void): void {
this.onSetScrollStateHandler = handler
}
public sendRendererReady (): void {
public sendRendererReady(): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.RENDERER_READY
})
}
public sendTaskCheckBoxChange (lineInMarkdown: number, checked: boolean): void {
public sendTaskCheckBoxChange(lineInMarkdown: number, checked: boolean): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.ON_TASK_CHECKBOX_CHANGE,
checked,
@ -50,34 +50,41 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
})
}
public sendFirstHeadingChanged (firstHeading: string | undefined): void {
public sendFirstHeadingChanged(firstHeading: string | undefined): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.ON_FIRST_HEADING_CHANGE,
firstHeading
})
}
public sendSetScrollSourceToRenderer (): void {
public sendSetScrollSourceToRenderer(): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_SCROLL_SOURCE_TO_RENDERER
})
}
public sendSetFrontmatter (frontmatter: NoteFrontmatter | undefined): void {
public sendSetFrontmatter(frontmatter: NoteFrontmatter | undefined): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.ON_SET_FRONTMATTER,
frontmatter: frontmatter
})
}
public sendSetScrollState (scrollState: ScrollState): void {
public sendSetScrollState(scrollState: ScrollState): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.SET_SCROLL_STATE,
scrollState
})
}
protected handleEvent (event: MessageEvent<EditorToRendererIframeMessage>): boolean | undefined {
public sendClickedImageUrl(details: ImageDetails): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.IMAGE_CLICKED,
details: details
})
}
protected handleEvent(event: MessageEvent<EditorToRendererIframeMessage>): boolean | undefined {
const renderMessage = event.data
switch (renderMessage.type) {
case RenderIframeMessageType.SET_MARKDOWN_CONTENT:
@ -94,11 +101,4 @@ export class IframeRendererToEditorCommunicator extends IframeCommunicator<Rende
return false
}
}
public sendClickedImageUrl (details: ImageDetails): void {
this.sendMessageToOtherSide({
type: RenderIframeMessageType.IMAGE_CLICKED,
details: details
})
}
}

50
src/components/render-page/markdown-document.tsx
View file

@ -52,39 +52,39 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(internalDocumentRenderPaneRef, rendererRef, contentLineCount, scrollState, onScroll)
return (
<div className={`markdown-document ${extraClasses ?? ''}`}
ref={internalDocumentRenderPaneRef} onScroll={onUserScroll} onMouseEnter={onMakeScrollSource}>
<div className={'markdown-document-side'}/>
<div className={'bg-light markdown-document-content'}>
<div className={ `markdown-document ${ extraClasses ?? '' }` }
ref={ internalDocumentRenderPaneRef } onScroll={ onUserScroll } onMouseEnter={ onMakeScrollSource }>
<div className={ 'markdown-document-side' }/>
<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)}
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>
<div className={'markdown-document-side pt-4'}>
<ShowIf condition={!!tocAst}>
<ShowIf condition={width >= 1100}>
<TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl}/>
<div className={ 'markdown-document-side pt-4' }>
<ShowIf condition={ !!tocAst }>
<ShowIf condition={ width >= 1100 }>
<TableOfContents ast={ tocAst as TocAst } className={ 'sticky' } baseUrl={ baseUrl }/>
</ShowIf>
<ShowIf condition={width < 1100}>
<div className={'markdown-toc-sidebar-button'}>
<Dropdown drop={'up'}>
<Dropdown.Toggle id="toc-overlay-button" variant={'secondary'} className={'no-arrow'}>
<ForkAwesomeIcon icon={'list-ol'}/>
<ShowIf condition={ width < 1100 }>
<div className={ 'markdown-toc-sidebar-button' }>
<Dropdown drop={ 'up' }>
<Dropdown.Toggle id="toc-overlay-button" variant={ 'secondary' } className={ 'no-arrow' }>
<ForkAwesomeIcon icon={ 'list-ol' }/>
</Dropdown.Toggle>
<Dropdown.Menu>
<div className={'p-2'}>
<TableOfContents ast={tocAst as TocAst} baseUrl={baseUrl}/>
<div className={ 'p-2' }>
<TableOfContents ast={ tocAst as TocAst } baseUrl={ baseUrl }/>
</div>
</Dropdown.Menu>
</Dropdown>

22
src/components/render-page/render-page.tsx
View file

@ -78,18 +78,18 @@ export const RenderPage: React.FC = () => {
}
return (
<div className={"vh-100 w-100"}>
<div className={ 'vh-100 w-100' }>
<MarkdownDocument
extraClasses={'bg-light'}
markdownContent={markdownContent}
onTaskCheckedChange={onTaskCheckedChange}
onFirstHeadingChange={onFirstHeadingChange}
onMakeScrollSource={onMakeScrollSource}
onFrontmatterChange={onFrontmatterChange}
scrollState={scrollState}
onScroll={onScroll}
baseUrl={baseUrl}
onImageClick={onImageClick}/>
extraClasses={ 'bg-light' }
markdownContent={ markdownContent }
onTaskCheckedChange={ onTaskCheckedChange }
onFirstHeadingChange={ onFirstHeadingChange }
onMakeScrollSource={ onMakeScrollSource }
onFrontmatterChange={ onFrontmatterChange }
scrollState={ scrollState }
onScroll={ onScroll }
baseUrl={ baseUrl }
onImageClick={ onImageClick }/>
</div>
)
}