✨ (#2128): add markdown-it-container

define info, warn, error and success containers

Signed-off-by: Vinicius Reis <[email protected]>

package.json

@@ -66,6 +66,7 @@
 		"highlight.js": "^10.7.2",
 		"lowlight": "^1.20.0",
 		"markdown-it": "^12.3.2",
+		"markdown-it-container": "^3.0.0",
 		"markdown-it-task-lists": "^2.1.1",
 		"prosemirror-collab": "^1.2.2",
 		"prosemirror-inputrules": "^1.1.3",

src/markdownit/containers.js

@@ -0,0 +1,25 @@
+import container from 'markdown-it-container'
+
+export const typesAvailable = ['info', 'warn', 'error', 'success']
+
+const buildRender = type => (tokens, idx, options, env, slf) => {
+	// add a class to the opening tag
+	const tag = tokens[idx]
+
+	if (tag.nesting === 1) {
+		tag.attrSet('data-container', type)
+		tag.attrJoin('class', `custom-container custom-container-${type}`)
+	}
+
+	return slf.renderToken(tokens, idx, options, env, slf)
+}
+
+export default (md) => {
+	typesAvailable.forEach(type => {
+		md.use(container, type, {
+			render: buildRender(type),
+		})
+	})
+
+	return md
+}

src/markdownit/index.js

@@ -2,11 +2,13 @@ import MarkdownIt from 'markdown-it'
 import taskLists from 'markdown-it-task-lists'
 import underline from './underline'
 import splitMixedLists from './splitMixedLists'
+import containers from './containers'
 
 const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.enable('strikethrough')
 	.use(taskLists, { enable: true, labelAfter: true })
 	.use(splitMixedLists)
 	.use(underline)
+	.use(containers)
 
 export default markdownit

src/nodes/CustomContainer.js

@@ -1,6 +1,5 @@
 import { Node, mergeAttributes } from '@tiptap/core'
-
-export const inputRegex = /^\s*>\s$/
+import { typesAvailable } from '../markdownit/containers'
 
 export default Node.create({
 
@@ -14,7 +13,7 @@ export default Node.create({
 
 	addOptions() {
 		return {
-			types: ['info', 'warn', 'error', 'success'],
+			types: typesAvailable,
 			HTMLAttributes: {
 				class: 'custom-container',
 			},
@@ -26,10 +25,10 @@ export default Node.create({
 			type: {
 				default: 'info',
 				rendered: false,
-				parseHTML: element => element.getAttribute('data-type'),
+				parseHTML: element => element.getAttribute('data-container'),
 				renderHTML: attributes => {
 					return {
-						'data-type': attributes.type,
+						'data-container': attributes.type,
 						class: attributes.type,
 					}
 				},

src/tests/markdownit.spec.js

@@ -1,22 +1,23 @@
 import markdownit from './../markdownit'
+import { typesAvailable } from './../markdownit/containers'
 
 describe('markdownit', () => {
 
 	it('renders task lists', () => {
 		const rendered = markdownit.render('* [ ] task\n* not a task')
-		expect(rendered).toBe(stripIndent(`
+		expect(stripIndent(rendered)).toBe(stripIndent(`
 			<ul class="contains-task-list">
 			<li class="task-list-item"><input class="task-list-item-checkbox" disabled="" type="checkbox"> task</li>
 			</ul>
 			<ul>
 			<li>not a task</li>
-			</ul>
-`))
+			</ul>`
+			))
 	})
 
 	it('renders bullet and task lists separately', () => {
 		const rendered = markdownit.render('* not a task\n* [ ] task')
-		expect(rendered).toBe(stripIndent(`
+		expect(stripIndent(rendered)).toBe(stripIndent(`
 			<ul>
 			<li>not a task</li>
 			</ul>
@@ -26,8 +27,25 @@ describe('markdownit', () => {
 `))
 	})
 
+	describe('custom containers', () => {
+		typesAvailable.forEach((type) => {
+			it(`render ${type}`, () => {
+				const rendered = markdownit.render(`::: ${type}\nHey there!\n:::`)
+				expect(stripIndent(rendered)).toBe(stripIndent(
+					`<div data-container="${type}" class="custom-container custom-container-${type}">
+						<p>Hey there!</p>
+					</div>`
+				))
+			})
+		})
+	})
+
 })
 
 function stripIndent(content) {
-	return content.replace(/\t/g, '').replace('\n','')
+	return content
+		.replace(/\n/g, "")
+		.replace(/[\t ]+\</g, "<")
+		.replace(/\>[\t ]+\</g, "><")
+		.replace(/\>[\t ]+$/g, ">")
 }