Improve markdown transformers #3886

Godefroy · 2023-02-11T11:45:45Z

I need to import a markdown document with tables containing markdown in each cell.

Problem: $convertFromMarkdownString is currently not called inside of table cells and doesn't take a target node as a parameter, it uses root node only.

The TABLE transformer needs to be adapted, as well as createMarkdownImport (which is used by $convertFromMarkdownString) and createMarkdownExport.

This pull request adds:

Markdown import inside table cells
Markdown export inside table cells
Table row header import
Emoji import

You can test with this markdown example:

| Table | Col 1 | Col 2 |
|-------|-------|-------|
| Line 1 | *Content* | Multi\nlines |
| Line 2 | Emoji :smile: | `Code` |

facebook-github-bot · 2023-02-11T11:45:50Z

Hi @Godefroy!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

vercel · 2023-02-11T11:45:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 8, 2023 at 7:59PM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 8, 2023 at 7:59PM (UTC)

facebook-github-bot · 2023-02-11T14:27:01Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

acywatson

CI integrity is failing for some reason - looks like prettier

packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts

packages/lexical-markdown/src/index.ts

Godefroy · 2023-03-08T20:00:26Z

Thanks @acywatson for the code review! I adapted my code.

Also, I took the liberty to remove root.selectEnd(); from createMarkdownImport because I think it's not its job and it was causing the equivalent of an autoFocus when importing a markdown.

acywatson · 2023-03-21T12:01:24Z

packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts

    }

    return output.join('\n');
  },
  regExp: TABLE_ROW_REG_EXP,
  replace: (parentNode, _1, match) => {
+    // Header row
+    if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {


@zurfyx will this be a problem for the tables works you're currently doing? I doubt it, but wanted to check.

acywatson · 2023-03-21T12:01:50Z

packages/lexical-playground/src/plugins/EmojiPickerPlugin/index.tsx

@@ -95,7 +95,7 @@ export default function EmojiPickerPlugin() {

  useEffect(() => {
    // @ts-ignore
-    import('./emoji-list.ts').then((file) => setEmojis(file.default));
+    import('../../utils/emoji-list.ts').then((file) => setEmojis(file.default));


thanks for this

acywatson · 2023-03-21T12:03:13Z

packages/lexical-markdown/src/MarkdownImport.ts

@@ -41,16 +42,16 @@ type TextFormatTransformersIndex = Readonly<{

 export function createMarkdownImport(
  transformers: Array<Transformer>,
-): (markdownString: string) => void {
+): (markdownString: string, node?: ElementNode) => void {


I'm ok with this - maybe a nit to call it targetNode or something that indicates that it's the parent of whatever the import creates.

Separately, why shouldn't markdown work more like HTML, where you just get back some nodes and then insert them wherever you want?

@fantactuka

I'm ok with this change.

Separately, why shouldn't markdown work more like HTML, where you just get back some nodes and then insert them wherever you want?

Yep, should be changed to work that way

vadimkantorov · 2023-12-13T15:27:47Z

Does Lexical/Playground support working with elements like this (Toggle elements mixed with Markdown) and importing/exporting them from/to markdown?

<details>
<summary>

# hello world

</summary>

## sec1
abc

## sec2
def

</details>

hello world

sec1

abc

sec2

def

Godefroy added 2 commits February 11, 2023 12:39

Add markdown import/export for table cells

2543afb

Add emoji markdown transformer

feaead7

Godefroy requested review from trueadm, zurfyx, fantactuka, acywatson, tylerjbainbridge and thegreatercurve as code owners February 11, 2023 11:45

Godefroy mentioned this pull request Feb 11, 2023

Feature: Add optional element parameter to createMarkdownImport #3631

Closed

vercel bot deployed to Preview – lexical February 11, 2023 11:46 View deployment

vercel bot deployed to Preview – lexical-playground February 11, 2023 11:48 View deployment

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Feb 11, 2023

acywatson requested changes Feb 13, 2023

View reviewed changes

packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts Outdated Show resolved Hide resolved

packages/lexical-playground/src/plugins/MarkdownTransformers/index.ts Outdated Show resolved Hide resolved

packages/lexical-markdown/src/index.ts Outdated Show resolved Hide resolved

Fix linter errors

5a223c3

vercel bot deployed to Preview – lexical February 19, 2023 17:03 View deployment

vercel bot deployed to Preview – lexical-playground February 19, 2023 17:04 View deployment

Refactor after code review

059db33

vercel bot deployed to Preview – lexical March 8, 2023 19:58 View deployment

vercel bot deployed to Preview – lexical-playground March 8, 2023 19:59 View deployment

Godefroy requested review from acywatson and removed request for fantactuka, zurfyx, trueadm, thegreatercurve and tylerjbainbridge March 8, 2023 20:00

acywatson approved these changes Mar 21, 2023

View reviewed changes

fantactuka merged commit 04fdcb2 into facebook:main Mar 21, 2023

This was referenced Mar 24, 2023

v0.9.1 #4191

Merged

Restore MD selection #4232

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve markdown transformers #3886

Improve markdown transformers #3886

Godefroy commented Feb 11, 2023

facebook-github-bot commented Feb 11, 2023

vercel bot commented Feb 11, 2023 •

edited

facebook-github-bot commented Feb 11, 2023

acywatson left a comment

Godefroy commented Mar 8, 2023

acywatson Mar 21, 2023

acywatson Mar 21, 2023

acywatson Mar 21, 2023

fantactuka Mar 21, 2023

vadimkantorov commented Dec 13, 2023 •

edited

hello world

sec1

sec2

Improve markdown transformers #3886

Improve markdown transformers #3886

Conversation

Godefroy commented Feb 11, 2023

facebook-github-bot commented Feb 11, 2023

Action Required

Process

vercel bot commented Feb 11, 2023 • edited

facebook-github-bot commented Feb 11, 2023

acywatson left a comment

Choose a reason for hiding this comment

Godefroy commented Mar 8, 2023

acywatson Mar 21, 2023

Choose a reason for hiding this comment

acywatson Mar 21, 2023

Choose a reason for hiding this comment

acywatson Mar 21, 2023

Choose a reason for hiding this comment

fantactuka Mar 21, 2023

Choose a reason for hiding this comment

vadimkantorov commented Dec 13, 2023 • edited

hello world

sec1

sec2

vercel bot commented Feb 11, 2023 •

edited

vadimkantorov commented Dec 13, 2023 •

edited