mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-19 01:35:18 -04:00
9e6edb0aeb
* Added regexes to replace name and time extras * Added [color=#abc] replacements inside of blockquotes This works with the following "algorithm": 1. Transform any [color=]-Tags with a valid css color into a codimd-quote-options element. 2. While transforming blockquotes, check if one of their paragraphs contains a codimd-quote-options element. If multiple are found, only the first one will be used. 3. Remove the codimd-quote-options element and set the border-left-color of the blockquote appropriately. * Added correct CSS styling of blockquote extras * Added tag icon when [color=...] is used outside a blockquote In version 1.6 of CodiMD the [color=...] tag renders a tag-icon in the specified color when used outside of a blockquote paragraph. * Added changelog entry * Flip if-else in quote-options for better readability * Flip another if-else in quote-options for better readability
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import React, { Fragment, useEffect, useState } from 'react'
|
|
import { useSelector } from 'react-redux'
|
|
import useMedia from 'use-media'
|
|
import { ApplicationState } from '../../redux'
|
|
import { setEditorModeConfig } from '../../redux/editor/methods'
|
|
import { Splitter } from '../common/splitter/splitter'
|
|
import { InfoBanner } from '../landing/layout/info-banner'
|
|
import { EditorWindow } from './editor-window/editor-window'
|
|
import { MarkdownRenderer } from './markdown-renderer/markdown-renderer'
|
|
import { EditorMode } from './task-bar/editor-view-mode'
|
|
import { TaskBar } from './task-bar/task-bar'
|
|
|
|
const Editor: React.FC = () => {
|
|
const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
|
|
const [markdownContent, setMarkdownContent] = useState(`# Embedding demo
|
|
[TOC]
|
|
|
|
## Blockquote
|
|
> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
> [color=red] [name=John Doe] [time=2020-06-21 22:50]
|
|
|
|
## Slideshare
|
|
{%slideshare mazlan1/internet-of-things-the-tip-of-an-iceberg %}
|
|
|
|
## Gist
|
|
https://gist.github.com/schacon/1
|
|
|
|
## YouTube
|
|
https://www.youtube.com/watch?v=KgMpKsp23yY
|
|
|
|
## Vimeo
|
|
https://vimeo.com/23237102
|
|
|
|
## PDF
|
|
{%pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf %}
|
|
|
|
## Code highlighting
|
|
\`\`\`javascript=
|
|
let a = 1
|
|
\`\`\`
|
|
|
|
`)
|
|
const isWide = useMedia({ minWidth: 576 })
|
|
const [firstDraw, setFirstDraw] = useState(true)
|
|
|
|
useEffect(() => {
|
|
setFirstDraw(false)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!firstDraw && !isWide && editorMode === EditorMode.BOTH) {
|
|
setEditorModeConfig(EditorMode.PREVIEW)
|
|
}
|
|
}, [editorMode, firstDraw, isWide])
|
|
|
|
return (
|
|
<Fragment>
|
|
<InfoBanner/>
|
|
<div className={'d-flex flex-column vh-100'}>
|
|
<TaskBar/>
|
|
<Splitter
|
|
showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
|
|
left={<EditorWindow onContentChange={content => setMarkdownContent(content)} content={markdownContent}/>}
|
|
showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
|
|
right={<MarkdownRenderer content={markdownContent}/>}
|
|
containerClassName={'overflow-hidden'}/>
|
|
</div>
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
export { Editor }
|