Inline relationship? Or how to customize renderer of relationship?

[Stupidism]

I'm very interested with migrating to payloadcms now. Your solution for customization looks very promising. I'm still investigating/comparing the important features we're using with contentful. One of them is:

Our editors often inject some statistics data into our articles, whose value changes every day/week. Currently I'm using contentful inline entry to support this feature. I'd like to know how to do similar thing with payloadcms.

Of course, we can go back to text version like {statistics.xxx} just like when we use markdown beore.

[jmikrut]

Hey @Stupidism — you can actually do the same exact thing as an "inline entry" natively in Payload already!

It's the relationship element. Here is a screenshot from our public demo:

Here are the docs that talk about how to use this element.

[Stupidism]

I'm wondering if I can customize the render function of the Post Relationship Card in this rich text editor, so that I can change its css to inline to keep the paragraph whole.

[Stupidism]

@jmikrut I think I didn't make myself clear enough. I know relationships can be used as embedded blocks.

The key difference here is inline elements, like injecting a number, the current UI of relationship breaks the whole paragraph.

[jmikrut]

Ah I gotcha. You can build a custom inline element and have it allow for editors to build relationships, but the only drawback is that the relationship document(s) would have to be fetched manually or populated with a custom hook. Payload populates the relationship and upload element relations for you, but with a custom one, you'd need to do it yourself.

Look at the public demo's video embed for an example for how to build this, and then look at the SlateJS docs to see how to make an element inline.

The above approach would be good because you'd be able to maintain both a block-based relationship, and you could have your own inline relationship component.

Alternatively, if you wanted ALL of the relationship elements to be rendered inline, Payload would only need a small PR to achieve this. You'd need to be able to pass top-level plugins directly to the Slate editor, which is something that is not possible as of now. If we could pass top-level plugins, we could extend the Slate editor to consider relationship as inline.

const withInlines = editor => {
  const { isInline } = editor

  editor.isInline = element => {
    return ['relationship'].includes(element.type) || isInline(element);
  }

  return editor
}

Then with some CSS overrides, we could render it as inline within the editor easily.

Honestly though if I were you I'd just go the first route, build a custom element and handle it that way. What do you think?

[Stupidism]

@jmikrut Thanks, I will try.