Implement marks for custom element

[NourIM]

Hi @thompsonsj! I'm so grateful for this amazing library .. it's really saving my days!

I'm facing small issue when it come to convert SlateToHtml for custom element, I'm having the following slate presentation

{ "type": "placeholder", "value": "name", "children": [{ "text": "name", "bold": true }] }

and this is how I translate it in configPaylod

    placeholder: ({ node, children = [] }) => {
      const value = `${'${' + node.value + '}'}`
      return new Element(
        'placeholder',
        {},
        [new Text(value)]
      )
    }

and the result is

<placeholder>${name}</placeholder><strong></strong>

but it should be wrapped with the strong tag like this

<strong><placeholder>${name}</placeholder></strong>

Can you help, please?

[thompsonsj]

Hey @NourIM ! Thank you for the kind comment!

This is a tricky one - I haven't faced this kind of problem before.

In this case, slate-serializers can be configured to return <placeholder><strong>${name}</strong></placeholder> but I don't think it can do <strong><placeholder>${name}</placeholder></strong>. This is because the strong text is a child of placeholder in the Slate JSON.

To achieve this, some DOM object manipulation is required using domutils. This ensures that text nodes within placeholder are modified while preserving any other HTML tags that might be in there.

See #78 for an example of how text in children can be modified. In that case, I only modify the first text node that I find, but this might be ok in your case seeing as placeholder text is likely to only contain one text node.

[NourIM]

Brilliant @thompsonsj! Thank you!
Yes, having marks inside the element makes sense, not the opposite!

Again, much appreciated!