@terrible-lexical/markdown

/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ import {CodeNode} from '@terrible-lexical/code/src'; import {createHeadlessEditor} from '@terrible-lexical/headless/src'; import {$generateHtmlFromNodes, $generateNodesFromDOM} from '@terrible-lexical/html/src'; import {LinkNode} from '@terrible-lexical/link/src'; import {ListItemNode, ListNode} from '@terrible-lexical/list/src'; import {HeadingNode, QuoteNode} from '@terrible-lexical/rich-text/src'; import {$getRoot, $insertNodes} from 'terrible-lexical'; import { $convertFromMarkdownString, $convertToMarkdownString, LINK, TextMatchTransformer, TRANSFORMERS, } from '../..'; describe('Markdown', () => { type Input = Array<{ html: string; md: string; skipExport?: true; skipImport?: true; }>; const URL = 'https://lexical.dev'; const IMPORT_AND_EXPORT: Input = [ {html: '<h1>Hello world</h1>', md: '# Hello world'}, {html: '<h2>Hello world</h2>', md: '## Hello world'}, {html: '<h3>Hello world</h3>', md: '### Hello world'}, {html: '<h4>Hello world</h4>', md: '#### Hello world'}, {html: '<h5>Hello world</h5>', md: '##### Hello world'}, {html: '<h6>Hello world</h6>', md: '###### Hello world'}, { // Multiline paragraphs html: 'Hello world !', md: ['Hello', 'world', '!'].join('\n'), }, { html: '<blockquote>Hello world!</blockquote>', md: '> Hello\n> world!', }, { // Miltiline list items html: '<ul><li value="1">Hello</li><li value="2">world ! !</li></ul>', md: '- Hello\n- world\n!\n!', }, { html: '<ul><li value="1">Hello</li><li value="2">world</li></ul>', md: '- Hello\n- world', }, { html: '<ul><li value="1">Level 1</li><li value="2"><ul><li value="1">Level 2</li><li value="2"><ul><li value="1">Level 3</li></ul></li></ul></li></ul>Hello world', md: '- Level 1\n - Level 2\n - Level 3\n\nHello world', }, { // Import only: export will use "-" instead of "*" html: '<ul><li value="1">Level 1</li><li value="2"><ul><li value="1">Level 2</li><li value="2"><ul><li value="1">Level 3</li></ul></li></ul></li></ul>Hello world', md: '* Level 1\n * Level 2\n * Level 3\n\nHello world', skipExport: true, }, { html: '<ol><li value="1">Hello</li><li value="2">world</li></ol>', md: '1. Hello\n2. world', }, { html: '<ol start="25"><li value="25">Hello</li><li value="26">world</li></ol>', md: '25. Hello\n26. world', }, { html: 'Hello world', md: '*Hello* world', }, { html: 'Hello world', md: '**Hello** world', }, { html: 'Hello world', md: '***Hello*** world', }, { html: '<code>Hello</code> world', md: '`Hello` world', }, { html: '<s>Hello</s> world', md: '~~Hello~~ world', }, { html: '<a href="https://lexical.dev">Hello</a> world', md: '[Hello](https://lexical.dev) world', }, { html: '<a href="https://lexical.dev" title="Hello world">Hello</a> world', md: '[Hello](https://lexical.dev "Hello world") world', }, { html: '<a href="https://lexical.dev" title="Title with \\" escaped character">Hello</a> world', md: '[Hello](https://lexical.dev "Title with \\" escaped character") world', }, { html: 'Hello <s>world</s>!', md: 'Hello ~~***world***~~!', }, { html: 'Hello world!', md: '*Hello **world**!*', }, { // Import only: export will use * instead of _ due to registered transformers order html: 'Hello world', md: '_Hello_ world', skipExport: true, }, { // Import only: export will use * instead of _ due to registered transformers order html: 'Hello world', md: '__Hello__ world', skipExport: true, }, { // Import only: export will use * instead of _ due to registered transformers order html: 'Hello world', md: '___Hello___ world', skipExport: true, }, { // Import only: export will use * instead of _ due to registered transformers order html: 'Hello <s>world</s>!', md: 'Hello ~~__*world*__~~!', skipExport: true, }, { html: '<pre spellcheck="false">Code</pre>', md: '```\nCode\n```', }, { html: '<pre spellcheck="false">Code</pre>', md: '```\nCode\n```', }, { // Import only: extra empty lines will be removed for export html: 'Helloworld', md: ['Hello', '', '', '', 'world'].join('\n'), skipExport: true, }, { // Import only: multiline quote will be prefixed with ">" on each line during export html: '<blockquote>Hello world !</blockquote>', md: '> Hello\nworld\n!', skipExport: true, }, { // Import only: ensures that left side of splitText is processed for text match transformers html: 'Hello <a href="https://lexical.dev">world</a>! Hello $world$! <a href="https://lexical.dev">Hello</a> world! Hello $world$!', md: `Hello [world](${URL})! Hello $world$! [Hello](${URL}) world! Hello $world$!`, skipExport: true, }, ]; const HIGHLIGHT_TEXT_MATCH_IMPORT: TextMatchTransformer = { ...LINK, importRegExp: /\$([^$]+?)\$/, replace: (textNode) => { textNode.setFormat('highlight'); }, }; for (const {html, md, skipImport} of IMPORT_AND_EXPORT) { if (skipImport) { continue; } it(`can import "${md.replace(/\n/g, '\\n')}"`, () => { const editor = createHeadlessEditor({ nodes: [ HeadingNode, ListNode, ListItemNode, QuoteNode, CodeNode, LinkNode, ], }); editor.update( () => $convertFromMarkdownString(md, [ ...TRANSFORMERS, HIGHLIGHT_TEXT_MATCH_IMPORT, ]), { discrete: true, }, ); expect( editor.getEditorState().read(() => $generateHtmlFromNodes(editor)), ).toBe(html); }); } for (const {html, md, skipExport} of IMPORT_AND_EXPORT) { if (skipExport) { continue; } it(`can export "${md.replace(/\n/g, '\\n')}"`, () => { const editor = createHeadlessEditor({ nodes: [ HeadingNode, ListNode, ListItemNode, QuoteNode, CodeNode, LinkNode, ], }); editor.update( () => { const parser = new DOMParser(); const dom = parser.parseFromString(html, 'text/html'); const nodes = $generateNodesFromDOM(editor, dom); $getRoot().select(); $insertNodes(nodes); }, { discrete: true, }, ); expect( editor .getEditorState() .read(() => $convertToMarkdownString(TRANSFORMERS)), ).toBe(md); }); } });