From b690ac024ef30e457addd47ba82d8bda30f01203 Mon Sep 17 00:00:00 2001 From: Ze Yu Date: Wed, 26 Feb 2020 18:57:09 +0800 Subject: [PATCH] Unify markdown-it parser variants The markdown-it parser used for attributes in components uses a different set of plugins from the one used throughout markbind. Let's unify the two variants to reduce the potential amount of maintainence needed, and standardise the usable markdown syntax throughout markbind. --- .eslintignore | 1 - docs/userGuide/syntax/boxes.mbdf | 2 +- docs/userGuide/syntax/footnotes.mbdf | 7 +++++ docs/userGuide/syntax/textStyles.mbdf | 10 +++---- src/Site.js | 2 +- src/lib/markbind/src/lib/markdown-it/index.js | 8 ++++-- .../markdown-it-dimmed.js | 0 .../markdown-it-emoji-fixed.js | 0 .../markdown-it-escape-special-tags.js | 2 +- .../markdown-it-icons.js | 0 .../src/lib/vue-attribute-renderer/index.js | 28 ------------------- .../markbind/src/parsers/componentParser.js | 6 ++-- test/unit/markdown-it-icons.test.js | 2 +- 13 files changed, 24 insertions(+), 44 deletions(-) rename src/lib/markbind/src/lib/{markdown-it-shared => markdown-it}/markdown-it-dimmed.js (100%) rename src/lib/markbind/src/lib/{markdown-it-shared => markdown-it}/markdown-it-emoji-fixed.js (100%) rename src/lib/markbind/src/lib/{markdown-it-shared => markdown-it}/markdown-it-escape-special-tags.js (98%) rename src/lib/markbind/src/lib/{markdown-it-shared => markdown-it}/markdown-it-icons.js (100%) delete mode 100644 src/lib/markbind/src/lib/vue-attribute-renderer/index.js diff --git a/.eslintignore b/.eslintignore index 5855520002..673cba7722 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,5 @@ *.min.* src/lib/markbind/src/lib/markdown-it/* -src/lib/markbind/src/lib/vue-attribute-renderer/* src/lib/markbind/src/lib/markdown-it-shared/* !.eslintrc.js diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf index ed7c8c216e..5179a6615b 100644 --- a/docs/userGuide/syntax/boxes.mbdf +++ b/docs/userGuide/syntax/boxes.mbdf @@ -70,7 +70,7 @@ dismissible info - + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. diff --git a/docs/userGuide/syntax/footnotes.mbdf b/docs/userGuide/syntax/footnotes.mbdf index 7ae4379b6b..9cb6ad107c 100644 --- a/docs/userGuide/syntax/footnotes.mbdf +++ b/docs/userGuide/syntax/footnotes.mbdf @@ -44,6 +44,13 @@ note.] + + +Normal footnotes won't work when used inside the attributes of markbind components! +
+For example, it won't work in the `header` attribute of [panels](../usingComponents.html#panels). + + ```html diff --git a/docs/userGuide/syntax/textStyles.mbdf b/docs/userGuide/syntax/textStyles.mbdf index 52ccc99bae..f0f06e29ab 100644 --- a/docs/userGuide/syntax/textStyles.mbdf +++ b/docs/userGuide/syntax/textStyles.mbdf @@ -41,12 +41,12 @@ Syntax added by MarkBind: ```markdown -****Super Bold****, ++Underline++, ==Highlight==, %%Dim%% +****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~ ``` -****Super Bold****, ++Underline++, ==Highlight==, %%Dim%% +****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~ @@ -57,11 +57,11 @@ Syntax added by MarkBind: ```markdown **Bold**, _Italic_, ___Bold and Italic___, `Inline Code` -~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%% +~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~ ``` **Bold**, _Italic_, ___Bold and Italic___, `Inline Code` -~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%% - \ No newline at end of file +~~Strike through~~, ****Super Bold****, ++Underline++, ==Highlight==, %%Dim%%, Super^script^, Sub~script~ + diff --git a/src/Site.js b/src/Site.js index 916cf0b9d7..9d276ddb80 100644 --- a/src/Site.js +++ b/src/Site.js @@ -10,7 +10,7 @@ const walkSync = require('walk-sync'); const MarkBind = require('./lib/markbind/src/parser'); const injectHtmlParser2SpecialTags = require('./lib/markbind/src/patches/htmlparser2'); const injectMarkdownItSpecialTags = require( - './lib/markbind/src/lib/markdown-it-shared/markdown-it-escape-special-tags'); + './lib/markbind/src/lib/markdown-it/markdown-it-escape-special-tags'); const _ = {}; _.difference = require('lodash/difference'); diff --git a/src/lib/markbind/src/lib/markdown-it/index.js b/src/lib/markbind/src/lib/markdown-it/index.js index d89a5e31cb..72b06c0d3d 100644 --- a/src/lib/markbind/src/lib/markdown-it/index.js +++ b/src/lib/markbind/src/lib/markdown-it/index.js @@ -8,15 +8,17 @@ const slugify = require('@sindresorhus/slugify'); // markdown-it plugins markdownIt.use(require('markdown-it-mark')) .use(require('markdown-it-ins')) + .use(require('markdown-it-sub')) + .use(require('markdown-it-sup')) .use(require('markdown-it-imsize'), {autofill: false}) .use(require('markdown-it-table-of-contents')) .use(require('markdown-it-task-lists'), {enabled: true}) .use(require('markdown-it-linkify-images'), {imgClass: 'img-fluid'}) .use(require('markdown-it-attrs')) - .use(require('../markdown-it-shared/markdown-it-dimmed')) + .use(require('./markdown-it-dimmed')) .use(require('./markdown-it-radio-button')) .use(require('./markdown-it-block-embed')) - .use(require('../markdown-it-shared/markdown-it-icons')) + .use(require('./markdown-it-icons')) .use(require('./markdown-it-footnotes')); // fix link @@ -134,7 +136,7 @@ markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => { } }; -const fixedNumberEmojiDefs = require('../markdown-it-shared/markdown-it-emoji-fixed'); +const fixedNumberEmojiDefs = require('./markdown-it-emoji-fixed'); markdownIt.use(require('markdown-it-emoji'), { defs: fixedNumberEmojiDefs }); diff --git a/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-dimmed.js b/src/lib/markbind/src/lib/markdown-it/markdown-it-dimmed.js similarity index 100% rename from src/lib/markbind/src/lib/markdown-it-shared/markdown-it-dimmed.js rename to src/lib/markbind/src/lib/markdown-it/markdown-it-dimmed.js diff --git a/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-emoji-fixed.js b/src/lib/markbind/src/lib/markdown-it/markdown-it-emoji-fixed.js similarity index 100% rename from src/lib/markbind/src/lib/markdown-it-shared/markdown-it-emoji-fixed.js rename to src/lib/markbind/src/lib/markdown-it/markdown-it-emoji-fixed.js diff --git a/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-escape-special-tags.js b/src/lib/markbind/src/lib/markdown-it/markdown-it-escape-special-tags.js similarity index 98% rename from src/lib/markbind/src/lib/markdown-it-shared/markdown-it-escape-special-tags.js rename to src/lib/markbind/src/lib/markdown-it/markdown-it-escape-special-tags.js index 04823cd36e..d0b31c2a9b 100644 --- a/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-escape-special-tags.js +++ b/src/lib/markbind/src/lib/markdown-it/markdown-it-escape-special-tags.js @@ -1,4 +1,4 @@ -const markdownIt = require('../markdown-it'); +const markdownIt = require('./index'); /* Custom patch for the api to escape content in certain special tags diff --git a/src/lib/markbind/src/lib/markdown-it-shared/markdown-it-icons.js b/src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js similarity index 100% rename from src/lib/markbind/src/lib/markdown-it-shared/markdown-it-icons.js rename to src/lib/markbind/src/lib/markdown-it/markdown-it-icons.js diff --git a/src/lib/markbind/src/lib/vue-attribute-renderer/index.js b/src/lib/markbind/src/lib/vue-attribute-renderer/index.js deleted file mode 100644 index aa3f724955..0000000000 --- a/src/lib/markbind/src/lib/vue-attribute-renderer/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - * markdownIt instance using a different set of plugins for parsing and rendering - * markdown in vue components' attributes. - * - * Todo standardise this with the main markdown parser - */ - -const markdownIt = require('markdown-it')({ - html: true, - linkify: true, -}); - -markdownIt.use(require('markdown-it-mark')) - .use(require('markdown-it-ins')) - .use(require('markdown-it-sub')) - .use(require('markdown-it-sup')) - .use(require('../markdown-it-shared/markdown-it-dimmed')) - .use(require('../markdown-it-shared/markdown-it-icons')) - .use(require('markdown-it-imsize'), { - autofill: false, - }); - -const fixedNumberEmojiDefs = require('../markdown-it-shared/markdown-it-emoji-fixed'); -markdownIt.use(require('markdown-it-emoji'), { - defs: fixedNumberEmojiDefs, -}); - -module.exports = markdownIt; diff --git a/src/lib/markbind/src/parsers/componentParser.js b/src/lib/markbind/src/parsers/componentParser.js index c9ed5eead3..e7054e79f6 100644 --- a/src/lib/markbind/src/parsers/componentParser.js +++ b/src/lib/markbind/src/parsers/componentParser.js @@ -3,7 +3,7 @@ const cheerio = require('cheerio'); const _ = {}; _.has = require('lodash/has'); -const vueAttrRenderer = require('../lib/vue-attribute-renderer'); +const md = require('../lib/markdown-it'); cheerio.prototype.options.xmlMode = true; // Enable xml mode for self-closing tag cheerio.prototype.options.decodeEntities = false; // Don't escape HTML entities @@ -27,9 +27,9 @@ function _parseAttributeWithoutOverride(node, attribute, isInline, slotName = at if (!hasAttributeSlot && _.has(node.attribs, attribute)) { let rendered; if (isInline) { - rendered = vueAttrRenderer.renderInline(node.attribs[attribute]); + rendered = md.renderInline(node.attribs[attribute]); } else { - rendered = vueAttrRenderer.render(node.attribs[attribute]); + rendered = md.render(node.attribs[attribute]); } const attributeSlotElement = cheerio.parseHTML( diff --git a/test/unit/markdown-it-icons.test.js b/test/unit/markdown-it-icons.test.js index f7b601bc4e..5d852e82f0 100644 --- a/test/unit/markdown-it-icons.test.js +++ b/test/unit/markdown-it-icons.test.js @@ -1,7 +1,7 @@ const expectedOcticon = require('@primer/octicons')['git-pull-request'].toSVG(); const markdownIt = require('markdown-it')() - .use(require('../../src/lib/markbind/src/lib/markdown-it-shared/markdown-it-icons')); + .use(require('../../src/lib/markbind/src/lib/markdown-it/markdown-it-icons')); test('markdown-it-icons renders icon syntax correctly', () => { const source = ':fab-font-awesome: :glyphicon-home: :octicon-git-pull-request:';