Tui.editor: space character in filename would broken markdown image preview

Created on 19 May 2020  路  4Comments  路  Source: nhn/tui.editor

Describe the bug

When trying to add an image with markdown syntax
in case of space character in the image path
conversion to html does not work properly

To Reproduce

from toast ui editor examples

https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic

  1. example of working properly
![image](https://uicdn.toast.com/toastui/img/tui-editor-bi.png)

image

  1. example of not working properly

in this example, there is space character in tui-editor-bi .png

![image](https://uicdn.toast.com/toastui/img/tui-editor-bi .png)

image

Expected behavior

converted html should contains img tag like below

````

image

````

Screenshots

image

Desktop (please complete the following information):

  • OS: windows 10
  • Browser : chrome
  • Version : 81.0.4044.138
  • @toast-ui/editor @version 2.1.0 | Wed Apr 29 2020

Smartphone (please complete the following information):

N/A

Additional context

I think this is problem of toastmark

Bug

Most helpful comment

As specified in CommonMark, you need to enclose a URI with <> if it contains spaces.
https://spec.commonmark.org/0.29/#example-485

All 4 comments

As specified in CommonMark, you need to enclose a URI with <> if it contains spaces.
https://spec.commonmark.org/0.29/#example-485

I didn't know about CommonMark specification. thanks about that.

but then, when using toolbar to add link (add image by link, add link) and if link has space character, <> should applied.
or space character should be replace by %20

actually I found this problem when I try to add image link contains space character using 'add image link' toolbar

@lovemine But when the image is a URL, can a URL be created with spaces in it? I don't think I've ever seen a URL with spaces. 馃

  • Wrong
https://uicdn.toast.com/toastui/img/tui-editor-bi .png
  • Correct
https://uicdn.toast.com/toastui/img/tui-editor-bi%20.png

So, when inputting URL in 'add image link' in the image popup, it seems that the correct action is to enter the URL normally converted to %20.

You may be right.
It may be looks so weird that HTTP URL which contains space character.
also I don't think I've ever seen a URL with spaces neither.

many url uses dash(-) or underscore(_) rather than using space character.
and more, some software automatically change space character to other(dash) character.

but my concern is not about HTML URL but markdown syntax.

In markdown editing,
link contains space character is more readable rather than %20. This is especially true if there are many space characters in link. and using %20 makes modify content more difficult.

I think this is just readability problem of markdown document.
Rendered html link should use %20. that's ok.
But I think markdown text should support human readability.

It looks like tui editor changes space characters in link to %20 when rendering html even use <> syntax.
So, use space character in markdown syntax link should be no harm.

Actually, tui editor will change some characters(especially CJK character) to %xx when change editing mode from wysiwyg mode to markdown mode.
When writing markdown link include CJK names, link would be unrecognizable by human.
I think this should be fixed too. Because markdown document can be read by the markdown document itself. so, must be able to use URLs that are named in someone's native language.

Anyway, my customer uses some images which named with contains space character.
I recommend them to use dash(-) for space character.
But you know. Some customer just want to use space character.
And some of them are not programmers nor technician.
They won't understand why the space character was automatically changed to% 20.

so, I think use '<>' in markdown syntax would be better way.

thank you for your concern about this.

You may close this issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hrvoj3e picture hrvoj3e  路  3Comments

koliyo picture koliyo  路  4Comments

gincheong picture gincheong  路  4Comments

kelvinkoko picture kelvinkoko  路  3Comments

tirli picture tirli  路  5Comments