HarryChen0506/react-markdown-editor-lite

[BUG]

Closed this issue · 0 comments

Please note 提问前请注意

  • Your problem is NOT related to markdown rendering (eg some markdown syntax doesn't display correctly). For these problems you should ask help from the markdown renderer you are using.
  • Please submit according to this template, otherwise issue may be closed directly.
  • 你的问题与markdown渲染无关(例如,某些 Markdown 语法无法正确显示)。这些问题你应该询问你所使用的 Markdown 渲染器。
  • 请按照此模板提交,否则 issue 可能会被直接关闭。

Your environment

For example, Windows 10, Chrome 80.0.
例如:Windows 10,Chrome 80.0

Description

For example, click a button, input some text, and something went wrong.
例如:点击某个按钮,输入某些文本,然后发现问题。

Reproduction URL

Please make a minimal reproduction with codesandbox.
If your bug involves a build setup, please create a project using create-react-app and provide the link to a GitHub repository.
请使用codesandbox建立一个最小复现。
如果您遇到的错误涉及构建设置,请使用create-react-app创建一个项目,并提供GitHub仓库链接。

How to set the URL for image markdown dynamically?

When the user click on Image icon, I want to,

  • upload an image to cloud and get the URL
  • update image markdown with dynamic URL & display it on the editor.

But it is not updating the dynamic URL in the editor.

Image markdown is displayed without URL.

 const handleFileUpload = async (file: File) => {
    const response = await dispatch(uploadFile(file))
    const markdown = `![${file.name}](${response.payload})`
    console.log('Markdown', markdown)
    setValue('content', markdown)
    setContent(markdown)
  }

 <Controller
              name='content'
              control={control}
              render={({ field: { value, onChange } }) => (
                <MdEditor
                  value={value}
                  style={{ height: '500px' }}
                  renderHTML={text => mdParser.render(text)}
                  onChange={({ text }) => {
                    onChange(text)
                    handleEditorChange({ text })
                  }}
                  onImageUpload={handleFileUpload}
                />
              )}
            ></Controller>