keystatic icon indicating copy to clipboard operation
keystatic copied to clipboard

When a mark has more MD "marks" inside, the mark is duplicated (on MDX)

Open filipesmedeiros opened this issue 1 year ago • 1 comments

Hey!

When you create a mark, and mark a piece of content/text with it, it gets wrapped with the <Mark> (or whatever name). All good. Like this:

<Mark>Some marked text.</Mark>

But if you have something inside that mark, like a link, it will actually override the content with a weird markup:

<Mark>Some </Mark>[<Mark>marked</Mark>](https://example.com)<Mark> text</Mark>

instead of

<Mark>Some [marked](http://example.com) text.</Mark>

If I manually go to the MDX file and correct it, the WYSIWYG editor render the same as before (correctly), but every time I save the file, it overrides again with the whacky markup.

I am not sure if this happens with other inner marks like bold. I can test if necessary.

Thank you so much for this tool!

filipesmedeiros avatar Apr 19 '24 22:04 filipesmedeiros

After investigating a bit further, I found out that this is not a new discovery, it seems:

https://github.com/Thinkmill/keystatic/blob/a5f9080718c8d956d203b0e0c964d5b598efc32f/packages/keystatic/src/form/fields/markdoc/editor/mdx/serialize.ts#L57

Now, I believe this is coming directly from ProseMirror. It is sending us a structure like:

[
  {
    "type": "text",
    "marks": [
      {
        "type": "Highlight",
        "attrs": {
          "props": { "value": { "variant": "success" }, "extraFiles": [] }
        }
      }
    ],
    "text": "something "
  },
  {
    "type": "text",
    "marks": [
      {
        "type": "Highlight",
        "attrs": {
          "props": { "value": { "variant": "success" }, "extraFiles": [] }
        }
      },
      { "type": "bold" }
    ],
    "text": "bold"
  }
]

for this MDX: <Highlight variant="success">something **bold**</Highlight>.

So we would need to "glue together" all nodes inside a custom mark that are in a row.

filipesmedeiros avatar Apr 27 '24 18:04 filipesmedeiros