github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 03:06:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -9,6 +9,7 @@
"@types/codemirror": "0.0.96",
"@types/jest": "26.0.0",
"@types/markdown-it": "10.0.1",
"@types/markdown-it-container": "^2.0.3",
"@types/node": "12.12.47",
"@types/node-sass": "4.11.1",
"@types/react": "16.9.38",
@ -40,6 +41,7 @@
"markdown-it": "11.0.0",
"markdown-it-abbr": "^1.0.4",
"markdown-it-deflist": "^2.0.3",
"markdown-it-container": "^3.0.0",
"markdown-it-emoji": "1.4.0",
"markdown-it-ins": "^3.0.0",
"markdown-it-mark": "^3.0.0",

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
}, [])

14
yarn.lock
View file

@ -1587,7 +1587,14 @@
resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-2.1.0.tgz#ea3dd64c4805597311790b61e872cbd1ed2cd806"
integrity sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==
"@types/markdown-it@10.0.1":
"@types/markdown-it-container@^2.0.3":
version "2.0.3"
resolved "https://registry.yarnpkg.com/@types/markdown-it-container/-/markdown-it-container-2.0.3.tgz#436de4c019d7d71b60f759037fd4d03611569eb8"
integrity sha512-ouJluaEGWV7clX7NVMRjkQfS/a11hFXDG1U04l8vrS1P2UgAFPlgMpk1rAPgK0MWU1NhcBYWVW7w/SpgePLs0A==
dependencies:
"@types/markdown-it" "*"
"@types/markdown-it@*", "@types/markdown-it@10.0.1":
version "10.0.1"
resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-10.0.1.tgz#94e252ab689c8e9ceb9aff2946e0a458390105eb"
integrity sha512-L1ibTdA5IUe/cRBlf3N3syAOBQSN1WCMGtAWir6mKxibiRl4LmpZM4jLz+7zAqiMnhQuAP1sqZOF9wXgn2kpEg==
@ -7280,6 +7287,11 @@ markdown-it-deflist@^2.0.3:
resolved "https://registry.yarnpkg.com/markdown-it-deflist/-/markdown-it-deflist-2.0.3.tgz#5727db04184d3cb2bc6ee4a9641e3a1091d5fd6f"
integrity sha512-/BNZ8ksW42bflm1qQLnRI09oqU2847Z7MVavrR0MORyKLtiUYOMpwtlAfMSZAQU9UCvaUZMpgVAqoS3vpToJxw==
markdown-it-container@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b"
integrity sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==
markdown-it-emoji@1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz#9bee0e9a990a963ba96df6980c4fddb05dfb4dcc"