enh(NcRichText): use remark-gfm fo flavored markdown

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/NcRichText/NcRichText.vue

@@ -31,11 +31,13 @@ This component displays rich text with optional autolink or [Markdown support](h
 		<textarea v-model="text" />
 		<NcCheckboxRadioSwitch v-model="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch v-model="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model="useExtendedMarkdown" type="checkbox">Use extended Markdown</NcCheckboxRadioSwitch>
 
 		<NcRichText
-			:class="{'plain-text': !useMarkdown }"
+			:class="{'plain-text': !useMarkdown && !useExtendedMarkdown }"
 			:text="text" :autolink="autolink" :arguments="args"
-			:use-markdown="useMarkdown" />
+			:use-markdown="useMarkdown"
+			:use-extended-markdown="useExtendedMarkdown"/>
 	</div>
 </template>
 <script>
@@ -51,9 +53,17 @@ Some examples for markdown syntax:
 3. example of \`inline code\`
 
 > blockquote example
+
+- [ ] task
+- [x] task completed
+
+| Table header | Column A | Column B |
+| -- | -- | -- |
+| Table row | value A | value B |
 `,
 			autolink: true,
 			useMarkdown: true,
+			useExtendedMarkdown: true,
 			args: {
 				file: 'MyDocument.odt',
 				username: {
@@ -239,7 +249,8 @@ import { remarkAutolink } from './autolink.js'
 import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
 
 import { unified } from 'unified'
-import markdown from 'remark-parse'
+import remarkParse from 'remark-parse'
+import remarkGfm from 'remark-gfm'
 import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
 import rehype2react from 'rehype-react'
@@ -299,6 +310,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/** Provide GitHub Flavored Markdown syntax */
+		useExtendedMarkdown: {
+			type: Boolean,
+			default: false,
+		},
 		autolink: {
 			type: Boolean,
 			default: true,
@@ -338,11 +354,13 @@ export default {
 		},
 		renderMarkdown() {
 			const renderedMarkdown = unified()
-				.use(markdown)
+				.use(remarkParse)
 				.use(remarkAutolink, {
 					autolink: this.autolink,
 					useMarkdown: this.useMarkdown,
+					useExtendedMarkdown: this.useExtendedMarkdown,
 				})
+				.use(this.useExtendedMarkdown ? remarkGfm : undefined)
 				.use(breaks)
 				.use(remark2rehype, {
 					handlers: {
@@ -419,7 +437,7 @@ export default {
 		},
 	},
 	render() {
-		return this.useMarkdown
+		return this.useMarkdown || this.useExtendedMarkdown
 			? this.renderMarkdown()
 			: this.renderPlaintext()
 	},

src/components/NcRichText/autolink.js

@@ -22,10 +22,10 @@ const NcLink = {
 	},
 }
 
-export const remarkAutolink = function({ autolink, useMarkdown }) {
+export const remarkAutolink = function({ autolink, useMarkdown, useExtendedMarkdown }) {
 	return function(tree) {
-
-		if (!useMarkdown || !autolink) {
+		// remark-gfm has its own autolink parser
+		if (useExtendedMarkdown || !useMarkdown || !autolink) {
 			return
 		}