Exploring reusable components in Slate

Basic Explanation.md

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.

ExistingLinkEmbed.js

//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>
	);
}

OptionOne-LinkEmbedRevisedForSlate.js

//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} />;
}

OptionTwo.md

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).