Skip to content
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

markdown: support formatted link text #5149

Closed
wants to merge 3 commits into from
Closed

markdown: support formatted link text #5149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2c4db9f
markdown: support formatted link text
robfig Oct 22, 2023
1da7b6a
markdown: support formatting that extends to sibling nodes
robfig Oct 22, 2023
d9bbeb7
fix lint checks
robfig May 12, 2024
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
5 changes: 3 additions & 2 deletions packages/lexical-markdown/src/MarkdownExport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import type {
} from '@lexical/markdown';
import type {ElementNode, LexicalNode, TextFormatType, TextNode} from 'lexical';

import {$isLinkNode} from '@lexical/link';
import {
$getRoot,
$isDecoratorNode,
Expand Down Expand Up @@ -176,7 +177,7 @@ function getTextSibling(node: TextNode, backward: boolean): TextNode | null {
if (!sibling) {
const parent = node.getParentOrThrow();

if (parent.isInline()) {
if (parent.isInline() && !$isLinkNode(parent)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On second thought, is there a better way than special-casing LinkNode?

This creates a dependency on @lexical/link, which is less than ideal. it might be necessary here though.

@fantactuka thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would still be a special case, but I can break the dependency by inlining the test of parent.getType() === "link" or similar.

Thinking about expanding beyond that.. would it be ok to remove the code that continues formatting spans across Element nodes & always create boundaries on either side of consecutive spans of Text Nodes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've been using this change in production for 6 months and been happy with it. What needs to be done to get this upstream @acywatson ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no objection to this now. If we get the CI passing again, I'll merge it

sibling = backward
? parent.getPreviousSibling()
: parent.getNextSibling();
Expand All @@ -185,7 +186,7 @@ function getTextSibling(node: TextNode, backward: boolean): TextNode | null {

while (sibling) {
if ($isElementNode(sibling)) {
if (!sibling.isInline()) {
if (!sibling.isInline() || $isLinkNode(sibling)) {
break;
}

Expand Down
46 changes: 41 additions & 5 deletions packages/lexical-markdown/src/MarkdownImport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ import type {
import type {LexicalNode, TextNode} from 'lexical';

import {$createCodeNode} from '@lexical/code';
import {$createLinkNode} from '@lexical/link';
import {$isListItemNode, $isListNode, ListItemNode} from '@lexical/list';
import {LINK} from '@lexical/markdown';
import {$isQuoteNode} from '@lexical/rich-text';
import {$findMatchingParent} from '@lexical/utils';
import {
Expand Down Expand Up @@ -129,7 +131,7 @@ function $importBlocks(
}
}

importTextFormatTransformers(
$importTextFormatTransformers(
textNode,
textFormatTransformersIndex,
textMatchTransformers,
Expand Down Expand Up @@ -203,12 +205,46 @@ function $importCodeBlock(
// E.g. for "*Hello **world**!*" string it will create text node with
// "Hello **world**!" content and italic format and run recursively over
// its content to transform "**world**" part
function importTextFormatTransformers(
function $importTextFormatTransformers(
textNode: TextNode,
textFormatTransformersIndex: TextFormatTransformersIndex,
textMatchTransformers: Array<TextMatchTransformer>,
) {
const textContent = textNode.getTextContent();

// Look for links first.
const linkMatch = LINK.importRegExp.exec(textContent);
if (linkMatch) {
// If the link is the whole text node, then replace it and return.
// Else, split the match from previous and subsequent text nodes
// (if any) and recurse.
if (linkMatch.index === 0 && linkMatch[0].length === textContent.length) {
const [, linkText, linkUrl, linkTitle] = linkMatch;
const linkNode = $createLinkNode(linkUrl, {title: linkTitle});
const linkTextNode = $createTextNode(linkText);
linkNode.append(linkTextNode);
textNode.replace(linkNode);
$importTextFormatTransformers(
linkTextNode,
textFormatTransformersIndex,
textMatchTransformers,
);
} else {
const nodes = textNode.splitText(
linkMatch.index,
linkMatch.index + linkMatch[0].length,
);
for (const node of nodes) {
$importTextFormatTransformers(
node,
textFormatTransformersIndex,
textMatchTransformers,
);
}
}
return;
}

const match = findOutermostMatch(textContent, textFormatTransformersIndex);

if (!match) {
Expand Down Expand Up @@ -252,7 +288,7 @@ function importTextFormatTransformers(

// Recursively run over inner text if it's not inline code
if (!currentNode.hasFormat('code')) {
importTextFormatTransformers(
$importTextFormatTransformers(
currentNode,
textFormatTransformersIndex,
textMatchTransformers,
Expand All @@ -261,15 +297,15 @@ function importTextFormatTransformers(

// Run over leading/remaining text if any
if (leadingNode) {
importTextFormatTransformers(
$importTextFormatTransformers(
leadingNode,
textFormatTransformersIndex,
textMatchTransformers,
);
}

if (remainderNode) {
importTextFormatTransformers(
$importTextFormatTransformers(
remainderNode,
textFormatTransformersIndex,
textMatchTransformers,
Expand Down
11 changes: 6 additions & 5 deletions packages/lexical-markdown/src/MarkdownTransformers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,16 +361,17 @@ export const LINK: TextMatchTransformer = {
return null;
}
const title = node.getTitle();
const linkContent = title
? `[${node.getTextContent()}](${node.getURL()} "${title}")`
: `[${node.getTextContent()}](${node.getURL()})`;
const linkHref = title ? `${node.getURL()} "${title}"` : node.getURL();
const firstChild = node.getFirstChild();
// Add text styles only if link has single text node inside. If it's more
// then one we ignore it as markdown does not support nested styles for links
if (node.getChildrenSize() === 1 && $isTextNode(firstChild)) {
return exportFormat(firstChild, linkContent);
return `[${exportFormat(
firstChild,
node.getTextContent(),
)}](${linkHref})`;
} else {
return linkContent;
return `[${node.getTextContent()}](${linkHref})`;
}
},
importRegExp:
Expand Down
12 changes: 12 additions & 0 deletions packages/lexical-markdown/src/__tests__/unit/LexicalMarkdown.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,18 @@ describe('Markdown', () => {
html: '<p><code spellcheck="false" style="white-space: pre-wrap;"><span>Hello</span></code><span style="white-space: pre-wrap;"> world</span></p>',
md: '`Hello` world',
},
{
html: '<p><a href="https://lexical.dev"><code spellcheck="false" style="white-space: pre-wrap;"><span>XXX</span></code></a><span style="white-space: pre-wrap;"> world</span></p>',
md: '[`XXX`](https://lexical.dev) world',
},
{
html: '<p><span style="white-space: pre-wrap;">Hello </span><a href="https://lexical.dev"><code spellcheck="false" style="white-space: pre-wrap;"><span>XXX</span></code></a><span style="white-space: pre-wrap;"> world</span></p>',
md: 'Hello [`XXX`](https://lexical.dev) world',
},
{
html: '<p><code spellcheck="false" style="white-space: pre-wrap;"><span>Hello</span></code><span style="white-space: pre-wrap;"> </span><a href="https://lexical.dev"><code spellcheck="false" style="white-space: pre-wrap;"><span>XXY</span></code></a></p>',
md: '`Hello` [`XXY`](https://lexical.dev)',
},
{
html: '<p><s><span style="white-space: pre-wrap;">Hello</span></s><span style="white-space: pre-wrap;"> world</span></p>',
md: '~~Hello~~ world',
Expand Down
Loading