diff --git a/cypress/component/richtext.cy.ts b/cypress/component/richtext.cy.ts index 9a156b91bb..0185312932 100644 --- a/cypress/component/richtext.cy.ts +++ b/cypress/component/richtext.cy.ts @@ -228,6 +228,59 @@ describe('NcRichText', () => { }) }) + describe('strikethrough text', () => { + it('strikethrough text (with single tilda syntax)', () => { + mount(NcRichText, { + props: { + text: '~strikethrough single~', + useExtendedMarkdown: true, + }, + }) + + cy.get('del').should('have.text', 'strikethrough single') + }) + + it('strikethrough text (with double tilda syntax)', () => { + mount(NcRichText, { + props: { + text: '~~strikethrough double~~', + useExtendedMarkdown: true, + }, + }) + + cy.get('del').should('have.text', 'strikethrough double') + }) + + it('strikethrough text (several in line with different syntax)', () => { + const outputs = ['strikethrough single', 'strikethrough double'] + mount(NcRichText, { + props: { + text: 'normal text ~strikethrough single~ normal text ~~strikethrough double~~ normal text', + useExtendedMarkdown: true, + }, + }) + + cy.get('del').should('have.length', 2) + cy.get('del').each((item, index) => { + expect(item).have.text(outputs[index]) + }) + }) + + it('strikethrough text (between normal texts with different syntax)', () => { + mount(NcRichText, { + props: { + text: 'text~strikethrough~text~~strikethrough~~text', + useExtendedMarkdown: true, + }, + }) + + cy.get('del').should('have.length', 2) + cy.get('del').each((item) => { + expect(item).have.text('strikethrough') + }) + }) + }) + describe('inline code', () => { it('inline code (single with backticks syntax)', () => { mount(NcRichText, { @@ -515,6 +568,48 @@ describe('NcRichText', () => { }) }) + describe('task lists', () => { + it('task list (with `- [ ]` and `- [x]` syntax divided with space from text)', () => { + const testCases = [ + { input: '- [ ] item 1', output: 'item 1', checked: false }, + { input: '- [x] item 2', output: 'item 2', checked: true }, + { input: '- [ ] item 3', output: 'item 3', checked: false }, + ] + + mount(NcRichText, { + props: { + text: testCases.map(i => i.input).join('\n'), + useExtendedMarkdown: true, + }, + }) + + cy.get('ul').should('exist') + cy.get('li').should('have.length', testCases.length) + cy.get('li').each((item, index) => { + expect(item).have.text(testCases[index].output) + }) + cy.get('input:checked').should('have.length', testCases.filter(test => test.checked).length) + }) + }) + + describe('tables', () => { + it('table (with `-- | --` syntax)', () => { + mount(NcRichText, { + props: { + text: 'Table | Column A | Column B\n-- | -- | --\nRow 1 | Value A1 | Value B1\nRow 2 | Value A2 | Value B2', + useExtendedMarkdown: true, + }, + }) + + cy.get('table').should('exist') + cy.get('thead').should('exist') + cy.get('tbody').should('exist') + cy.get('tr').should('have.length', 3) + cy.get('th').should('have.length', 3) + cy.get('td').should('have.length', 6) + }) + }) + describe('dividers', () => { it('dividers (with different syntax)', () => { mount(NcRichText, { diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue index d358b6a971..7cc73c7e7b 100644 --- a/src/components/NcRichText/NcRichText.vue +++ b/src/components/NcRichText/NcRichText.vue @@ -79,6 +79,46 @@ textarea { ``` +### Flavored Markdown + +This component can support [Github Flavored Markdown](https://github.github.com/gfm/). +It adds such elements, as tables, task lists, strikethrough, and supports autolinks by default + +```vue +