Custom hook for image previews

[FinlayBP]

Firstly, thanks for the great work on the editor!

We're currently using React-Markdown integrated with React-Markdown-Editor-Lite, but are in the process of moving to mdx-editor. I'm using the imagePlugin alongside the imageUploadHandler hook, which is working great. We did have one other requirement though, which is a hook that can handle image previews. For context, we're using a git repository as the backend for our markdown and assets, so need a way to fetch images programmatically.

To help visualise, here's roughly what this looks like currently using react-markdown components:

<ReactMarkdown
  value={markdownContent}
  components={{
    img: ({ node }: { node: ImageElement }) =>
      handleImagePreview({node}),
  }}
 />

The handleImagePreview function then fetches the image from our repository as base64, and returns an updated React node:

export function handleImagePreview({ node }) {
   ...
  // update the image source with our fetched content
  ref.current.src = b64Content;
  
  // return our updated image node
  return React.createElement(node.tagName, {
    ...node.properties,
    ref,
    src
  });

I appeciate this is a bit of a niche requirement, but do you know of a simple way to extend the existing image plugin to make this possible? Or, is it easier to create a new plugin based on the existing one?

[petyosi]

Hey there,

Let me see if I understand correctly: you keep the actual source (as in, the path) in the markdown, but you want to use a base64 string as the image src only in edit mode? How do you determine the base64 content - is it a derivative of the path?

It's relatively easy to plug such sort of a hook within the existing lifecycle of the plugin. I'm not sure how adventurous you feel about it, happy to provide some guidance. I can also get to doing that, but it will likely take me a few days.

[FinlayBP]

Yep, that's right on. The path (src) remains the same in the markdown, but the rich preview shows the base64. And correct, we use the path alongside some other page state to fetch the relevant base64 image.

I'm more than happy to give it a shot with some guidance - thanks for your time, much appreciated.

[petyosi]

Great! I think that the disableImageResize commit is showing everything you need, basically.

• A new node (disableImageResize) is added to the imagePluginSystem. In your case, it should store the callback hook;
• A new parameter value is added to the plugin, and then connected to the system node;
• The value of the node is then accessed in the ImageEditor React component through the imagePluginHooks. From there on, you should be able to figure out how to override the source with that callback.

You can run npm run dev to launch the examples interface used for local development. Feel free to leave an example in the commit, so that I can check the intended usage. Let me know if this makes sense or you need any help.