diff options
author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-03-04 01:43:21 +0300 |
---|---|---|
committer | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-03-14 17:38:28 +0300 |
commit | e174ede46f95e53ef79d56bc287ed9425f62e6e6 (patch) | |
tree | 3d5bdfb93b4f0f1598ae7266ee349c9a04836a08 /src | |
parent | c07bb5078cbf76f1a05e34b851a33904f7a81266 (diff) |
✨ (#2128): add markdown-it-container
define info, warn, error and success containers
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/markdownit/containers.js | 25 | ||||
-rw-r--r-- | src/markdownit/index.js | 2 | ||||
-rw-r--r-- | src/nodes/CustomContainer.js | 9 | ||||
-rw-r--r-- | src/tests/markdownit.spec.js | 28 |
4 files changed, 54 insertions, 10 deletions
diff --git a/src/markdownit/containers.js b/src/markdownit/containers.js new file mode 100644 index 000000000..1196f9b8e --- /dev/null +++ b/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 +} diff --git a/src/markdownit/index.js b/src/markdownit/index.js index aaeafa4c9..3143f8453 100644 --- a/src/markdownit/index.js +++ b/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 diff --git a/src/nodes/CustomContainer.js b/src/nodes/CustomContainer.js index 606a6da53..a1ebd391b 100644 --- a/src/nodes/CustomContainer.js +++ b/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, } }, diff --git a/src/tests/markdownit.spec.js b/src/tests/markdownit.spec.js index 08d5cb0a9..c44713659 100644 --- a/src/tests/markdownit.spec.js +++ b/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, ">") } |