feat: initial image path state to allow for the path to be different … (

#242) * Added initial image path state to allow for the path to be different than the image source, for example the path might be a file path and the image source may be base64 encoded file * Update image preview hook example with base64 --------- Co-authored-by: Finlay Sawyer <finlay.sawyer@bp.com>
mdx-editor · Dec 20, 2023 · a1104bf · a1104bf
1 parent aa684b7
commit a1104bf
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/examples/images.tsx b/src/examples/images.tsx
@@ -54,11 +54,13 @@ export function ImageWithPreviewHook() {
   return (
     <>
       <MDXEditor
-        markdown={markdownWithHtmlImages}
+        markdown="Preview hook that returns static base64: ![alt text](/attachments/my_image.png)"
         plugins={[
           imagePlugin({
-            disableImageResize: true,
-            imagePreviewHandler: async (imageSource) => Promise.resolve(`${imageSource}?grayscale`)
+            imagePreviewHandler: async () =>
+              Promise.resolve(
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAYCAYAAABurXSEAAAAAXNSR0IArs4c6QAAAGJlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAABJKGAAcAAAASAAAAUKABAAMAAAABAAEAAKACAAQAAAABAAAALaADAAQAAAABAAAAGAAAAABBU0NJSQAAAFNjcmVlbnNob3QGyMkKAAAB1GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj40NTwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgq7qfQQAAADGUlEQVRYCWP8DwQMQwwwDTH3gp076mh6xdpoSA+7kH795g3DspWrGV68eAn229Vr18H8P3/+kO5XUJGHDeQWlfxX0zHAJvX/y5cv/wUlZP5390/EKo9N8PSZs2A9Bw4eAktPnDINzP/27Rs25XjFcKbpf3//Mnz/8QNrKABNBIv/+/cPqzytBXE6mtYWU2I+1Rz9+fMXhsbWdgZTa3sGOVVNBmDyYrhz9y5Jbtuzbz9DXFIqg5CkLIOtsxtDc3snw/fv3zHMoIqj/wKTUnpOHgMwnTLYWFkyJCfEMezavZchIDSS4e27dxiWYhM4dOQoQ1h0HMNtoEfLiwsZtDU1GfonTWFIz85jAJmPDFiQOehsYIYDWhyBLszw+/dvFLEdu/cw7Ni1m2HGlIkMYcFBYLmQwABwaM1dsIihrKgART02TnF5FYOCvBzDzs0bGfj4eMFKdLS1GOqaWhgOHDrM4OzoANdGMKQ5ODgY0DEnJyfcABDj/IWLYL6CnBzDhUuXwfg3tCg7ceoUilpsHFDg3L13jyEqIhzuYJC62OhIsPJLl6+gaMMb0jw8PAwrFi9A0QDigCwBpVsYOHfhApjp4RcIE4LTV69eh7NxMe49eACWUpSXR1HCz8fHAHLDrdt3UMTxOhpFJR6OproGw4GDhxluX73IwMSEGnnofGzGyEhLg4WfPX+OIg3KhKAAAiUbZIBqA7IMCWx9PR2w6mvXbzAICgjA8aHDRxjOnD1H0CQhQUEGKUlJhg2btwDzC6KG3L5zN1ivjo42ihlUcbSHqyuDupoqQ3RCMsO0mbMZtmzfwZBTUMSQmJbJ8ODhIxQLcXGqykvBeSMxLZ1h3YZNDBMmT2VIycxmMDTQZ3Cyt0PRhjN5MKJFM7IuRkZGMBdGg3L7qqWLGEoraxhqGprAcqC02FBTxZAUH4uslYEBTS/MjKjwUIavX78yzJo7H+xYkCYvDzeGvs4OBvSMzwiq5FFNpYz3C1gcfvzwkUFYWAgjfRNr8vsPHxh4gZ5mYcEeplR3NLEOo0QdVdI0JQ4gR++oo8kJNXL0AADsUIxP1kwKcwAAAABJRU5ErkJggg=='
+              )
           }),
           diffSourcePlugin(),
           jsxPlugin(),

diff --git a/src/plugins/image/ImageEditor.tsx b/src/plugins/image/ImageEditor.tsx
@@ -93,6 +93,7 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEd
   const [disableImageResize] = imagePluginHooks.useEmitterValues('disableImageResize')
   const [imagePreviewHandler] = imagePluginHooks.useEmitterValues('imagePreviewHandler')
   const [imageSource, setImageSource] = React.useState<string | null>(null)
+  const [initialImagePath, setInitialImagePath] = React.useState<string | null>(null)
   const openEditImageDialog = imagePluginHooks.usePublisher('openEditImageDialog')
   const [iconComponentFor] = corePluginHooks.useEmitterValues('iconComponentFor')
 
@@ -148,6 +149,7 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEd
   React.useEffect(() => {
     if (imagePreviewHandler) {
       const callPreviewHandler = async () => {
+        if (!initialImagePath) setInitialImagePath(src)
         const updatedSrc = await imagePreviewHandler(src)
         setImageSource(updatedSrc)
       }
@@ -267,7 +269,7 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEd
             openEditImageDialog({
               nodeKey: nodeKey,
               initialValues: {
-                src: imageSource,
+                src: !initialImagePath ? imageSource : initialImagePath,
                 title: title || '',
                 altText: alt || ''
               }