Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Exploring reusable components in Slate

Lets say, we currently have a component which renders a link embed like shown below. It shows the title, description, domain and author.

And now lets say, we want to make each of those editable as well.

Is it possible to still reuse the existing component or needs multiple Slate rendered components - one each for LinkEmbed, LinkTitle, LinkDescription, LinkAuthor.

//existing component
function LinkEmbed(props) {
//some logic based on props
const linkType = getLinkTypeFromSource(props.src);
//Other props like className, size, etc. might also be passed.
return (
<div>
<div>{linkData.title}</div>
<div>
<p>{props.description}</p>
<div class = "embedFooter">
<span>{props.domain}</p>
<span>{props.author}</p>
</div>
<div>{props.src}</div>
</div>
</div>
);
}
//Similar to image example, this works if the internal fields aren't editable.
function LinkEmbedWrapperForSlate(props) {
const src = props.node.data.get('src');
return <LinkEmbed src = {src} {...props.attributes} />;
}

Option 2 would be to rewrite the original LinkEmbed as a combination of components like LinkTitle, LinkDescription, etc.

And then LinkEmbedForSlate, would be a parallel component also composed of LinkTitleForSlate, LinkDescriptionForSlate, etc.

Internally, LinkTitle & LinkTitleForSlate might use the same component to render the actual text (and any logic asssociated with it).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.