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

Add Alerts (#234)

Browse source 
* Add alert banners

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
mrdrogdrog 2020-06-20 20:17:33 +02:00 • committed by GitHub
parent 4852727f92
commit 2c81b746aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 46 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/editor/markdown-preview/container-plugins/alert.ts Normal file
View file

@ -0,0 +1,15 @@
import Renderer from 'markdown-it/lib/renderer'
import Token from 'markdown-it/lib/token'
type RenderContainerReturn = (tokens: Token[], index: number, options: any, env: any, self: Renderer) => void;
type ValidAlertLevels = ('warning' | 'danger' | 'success' | 'info')
export const validAlertLevels: ValidAlertLevels[] = ['success', 'danger', 'info', 'warning']
export const createRenderContainer = (level: ValidAlertLevels): RenderContainerReturn => {
return (tokens: Token[], index: number, options: any, env: any, self: Renderer) => {
tokens[index].attrJoin('role', 'alert')
tokens[index].attrJoin('class', 'alert')
tokens[index].attrJoin('class', `alert-${level}`)
return self.renderToken(tokens, index, options)
}
}

4
src/components/editor/markdown-preview/markdown-preview.scss
View file

@ -3,4 +3,8 @@
.markdown-body {
max-width: 758px;
font-family: 'Source Sans Pro', "twemoji", sans-serif;
.alert > p, .alert > ul {
margin-bottom: 0;
}
}

17
src/components/editor/markdown-preview/markdown-preview.tsx
View file

@ -1,15 +1,17 @@
import MarkdownIt from 'markdown-it'
import emoji from 'markdown-it-emoji'
import markdownItRegex from 'markdown-it-regex'
import taskList from 'markdown-it-task-lists'
import abbreviation from 'markdown-it-abbr'
import markdownItContainer from 'markdown-it-container'
import definitionList from 'markdown-it-deflist'
import subscript from 'markdown-it-sub'
import superscript from 'markdown-it-sup'
import emoji from 'markdown-it-emoji'
import inserted from 'markdown-it-ins'
import marked from 'markdown-it-mark'
import markdownItRegex from 'markdown-it-regex'
import subscript from 'markdown-it-sub'
import superscript from 'markdown-it-sup'
import taskList from 'markdown-it-task-lists'
import React, { ReactElement, useMemo } from 'react'
import ReactHtmlParser, { convertNodeToElement, Transform } from 'react-html-parser'
import { createRenderContainer, validAlertLevels } from './container-plugins/alert'
import { MarkdownItParserDebugger } from './markdown-it-plugins/parser-debugger'
import './markdown-preview.scss'
import { replaceGistLink } from './regex-plugins/replace-gist-link'
@ -57,6 +59,11 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => {
md.use(markdownItRegex, replaceVimeoLink)
md.use(markdownItRegex, replaceGistLink)
md.use(MarkdownItParserDebugger)
validAlertLevels.forEach(level => {
md.use(markdownItContainer, level, { render: createRenderContainer(level) })
})
return md
}, [])