Skip to content

feat(richtext-lexical): support escaping markdown characters #11784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 20, 2025
Merged

feat(richtext-lexical): support escaping markdown characters #11784

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f1a76a
feat(richtext-lexical): support escaping markdown characters
AlessioGr Mar 19, 2025
d74b919
fix lint
AlessioGr Mar 19, 2025
fbdc6f6
handle links
AlessioGr Mar 20, 2025
9400be9
Merge remote-tracking branch 'origin/main' into feat/lexical-mdx-esca…
AlessioGr Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/richtext-lexical/src/packages/@lexical/markdown/MarkdownExport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,12 @@ function exportTextFormat(
// bring the whitespace back. So our returned string looks like this: " **foo** "
const frozenString = textContent.trim()
let output = frozenString

if (!node.hasFormat('code')) {
// Escape any markdown characters in the text content
output = output.replace(/([*_`~\\])/g, '\\$1')
}

// the opening tags to be added to the result
let openingTags = ''
// the closing tags to be added to the result
Expand Down
21 changes: 9 additions & 12 deletions packages/richtext-lexical/src/packages/@lexical/markdown/MarkdownImport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import type {
Transformer,
} from './MarkdownTransformers.js'

import { IS_APPLE_WEBKIT, IS_IOS, IS_SAFARI } from '../../../lexical/utils/environment.js'
import { importTextTransformers } from './importTextTransformers.js'
import { isEmptyParagraph, transformersByType } from './utils.js'

Expand Down Expand Up @@ -255,28 +254,26 @@ function createTextFormatTransformersIndex(
const tagRegExp = tag.replace(/([*^+])/g, '\\$1')
openTagsRegExp.push(tagRegExp)

if (IS_SAFARI || IS_IOS || IS_APPLE_WEBKIT) {
// Single-char tag (e.g. "*"),
if (tag.length === 1) {
fullMatchRegExpByTag[tag] = new RegExp(
`(${tagRegExp})(?![${tagRegExp}\\s])(.*?[^${tagRegExp}\\s])${tagRegExp}(?!${tagRegExp})`,
`(?<![\\\\${tagRegExp}])(${tagRegExp})((\\\\${tagRegExp})?.*?[^${tagRegExp}\\s](\\\\${tagRegExp})?)((?<!\\\\)|(?<=\\\\\\\\))(${tagRegExp})(?![\\\\${tagRegExp}])`,
)
} else {
// Multi‐char tags (e.g. "**")
fullMatchRegExpByTag[tag] = new RegExp(
`(?<![\\\\${tagRegExp}])(${tagRegExp})((\\\\${tagRegExp})?.*?[^${tagRegExp}\\s](\\\\${tagRegExp})?)((?<!\\\\)|(?<=\\\\\\\\))(${tagRegExp})(?![\\\\${tagRegExp}])`,
`(?<!\\\\)(${tagRegExp})((\\\\${tagRegExp})?.*?[^\\s](\\\\${tagRegExp})?)((?<!\\\\)|(?<=\\\\\\\\))(${tagRegExp})(?!\\\\)`,
)
}
}

return {
// Reg exp to find open tag + content + close tag
fullMatchRegExpByTag,
// Reg exp to find opening tags
openTagsRegExp: new RegExp(
(IS_SAFARI || IS_IOS || IS_APPLE_WEBKIT ? '' : `${escapeRegExp}`) +
'(' +
openTagsRegExp.join('|') +
')',
'g',
),

// Regexp to locate *any* potential opening tag (longest first).
// eslint-disable-next-line regexp/no-useless-character-class, regexp/no-empty-capturing-group, regexp/no-empty-group
openTagsRegExp: new RegExp(`${escapeRegExp}(${openTagsRegExp.join('|')})`, 'g'),
transformersByTag,
}
}
9 changes: 4 additions & 5 deletions packages/richtext-lexical/src/packages/@lexical/markdown/importTextTransformers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@ export function importTextTransformers(
textMatchTransformers,
)
}
return
} else if (foundTextMatch) {
const result = importFoundTextMatchTransformer(
textNode,
Expand Down Expand Up @@ -112,9 +111,9 @@ export function importTextTransformers(
textMatchTransformers,
)
}
return
} else {
// Done!
return
}
// Handle escape characters
const textContent = textNode.getTextContent()
const escapedText = textContent.replace(/\\([*_`~])/g, '$1')
textNode.setTextContent(escapedText)
}
2 changes: 1 addition & 1 deletion test/lexical-mdx/tableJson.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export const tableJson = {
format: 0,
mode: 'normal',
style: '',
text: ' ',
text: ' * ',
type: 'text',
version: 1,
},
Expand Down
100 changes: 98 additions & 2 deletions test/lexical-mdx/tests/default.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,13 +376,13 @@ there4
input: `
| Option | Default route | Description |
| ----------------- | ----------------------- | ----------------------------------------------- |
| \`account\` | | The user's account page. |
| \`account\` \\* | | The user's account page. |
| \`createFirstUser\` | \`/create-first-user\` | The page to create the first user. |
`,
inputAfterConvertFromEditorJSON: `
| Option | Default route | Description |
|---|---|---|
| \`account\` | | The user's account page. |
| \`account\` \\* | | The user's account page. |
| \`createFirstUser\` | \`/create-first-user\` | The page to create the first user. |
`,
rootChildren: [tableJson],
Expand All @@ -400,6 +400,19 @@ there4
},
},
},
{
input: `
<Banner>
Escaped \\*
</Banner>
`,
blockNode: {
fields: {
blockType: 'Banner',
content: textToRichText('Escaped *'),
},
},
},
{
input: `\`inline code\``,
rootChildren: [
Expand Down Expand Up @@ -1286,6 +1299,89 @@ Some line [Start of link
},
},
},
{
input: `
<Banner>
Some line [Text **bold** \\*normal\\*](/some/link)
</Banner>
`,
blockNode: {
fields: {
blockType: 'Banner',
content: {
root: {
children: [
{
children: [
{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'Some line ',
type: 'text',
version: 1,
},
{
children: [
{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: 'Text ',
type: 'text',
version: 1,
},
{
detail: 0,
format: 1,
mode: 'normal',
style: '',
text: 'bold',
type: 'text',
version: 1,
},
{
detail: 0,
format: 0,
mode: 'normal',
style: '',
text: ' *normal*',
type: 'text',
version: 1,
},
],
fields: {
linkType: 'custom',
newTab: false,
url: '/some/link',
},
format: '',
indent: 0,
type: 'link',
version: 3,
},
],
direction: null,
format: '',
indent: 0,
textFormat: 0,
textStyle: '',
type: 'paragraph',
version: 1,
},
],
direction: null,
format: '',
indent: 0,
type: 'root',
version: 1,
},
},
},
},
},
{
inputAfterConvertFromEditorJSON: `
<Banner>
Expand Down