Add a callback for click link in link-dialog plugin.

[newproplus]

Add a callback for click link in link-dialog plugin.

So, developers can get the url that user clicked, and do some more actions.

[newproplus]

demo code like:

export const MdxEditor: React.FC<MdxEditorComponentProps> = ({ content, onEmitChange, onEmitOpen }) => {
	const onChange = (aaa: string) => {
		if (onEmitChange) onEmitChange(aaa)
	}

	const allPlugins = () => [
		linkDialogPlugin({
			onClickLinkCallback: (url: string) => {
				onEmitOpen(url)
			},
		}),
	]

	return (
		<MDXEditor
			markdown={content}
			onChange={onChange}
			plugins={allPlugins()}
		/>
	)
}

[petyosi]

Question for you: would it be easier if we have something like this:

type LinkPreviewDialogClickHandler = React.MouseEventHandler<HTMLAnchorElement>
// ... 
const onLinkPreviewDialogClick$ =  Cell<LinkPreviewDialogClickHandler | null>(null)
// ...
<a href={linkDialogState.url} onClick={useCellValue(onLinkPreviewDialogClick$)}

Then your code would look like:

		linkDialogPlugin({
			onPreviewDialogLinkClick: (e) => {
                                  e.preventDefault();
				onEmitOpen(e.target.url);
			},
		}),

Let me know if this makes sense.

[newproplus]

sorry, @petyosi I tred to use const onLinkPreviewDialogClick$ = Cell<LinkPreviewDialogClickHandler | null>(null), it will cause error when I clicked on the link:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

If I chang it to export let onLinkPreviewDialogClick$: LinkPreviewDialogClickHandler | null = null, and just call onLinkPreviewDialogClick$, it works.

Meybe just return a url string to callback funtion is more easier.

[github-actions]

🎉 This PR is included in version 2.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[petyosi]

I updated your PR to follow the gurx pattern.

Your previous implementation was overriding a module-level variable value. Take a look at how it works now - it's great that you're actively contributing to the project, so understanding the internal state management is going to be of good help.