Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow 'openLinksInNewWindow' affect the link inside the svg when 'smoothLivePreview' is true #15

Open
RamiroPastor opened this issue Jul 15, 2018 · 3 comments
Assignees

Comments

@RamiroPastor
Copy link

RamiroPastor commented Jul 15, 2018

var svg =
      '<div class="youtube-preview" style="width:%2; height:%3; background-color:#333; position:relative;">' +
      '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ' +
      ...
      '</svg>' +
      '<div style="text-align:center; padding-top:10px; color:#fff"><a (TARGET "_BLANK" HERE) href="%1">%1</a></div>' +
'</div>',

Is it reasonable? Also sorry if i don't do it myself but i have very low experience with Git and JS

@tivie tivie self-assigned this Aug 8, 2018
@RamiroPastor
Copy link
Author

RamiroPastor commented Sep 4, 2018

Ok thanks.

Anyway i manually removed the link and added a simple paragraph along the lines of "your video will be correcty embedded" with a more readable color.

I did this because the link wasn't readable because of its blue color; i checked the code now and it has a "color:#fff" in the div wrapping the link, but it doesn't affect the link itself (at least not in firefox).
However, i just tried <a style="color:#fff" href="%1">%1</a> and it works as expected, even though i still prefer to clearly inform that that particular element of the preview is not in a "final view state"

¿Maybe the color issue is my own problem?

@tivie
Copy link
Member

tivie commented Sep 5, 2018

I had a good look at it and I really don't know why the link is even there in the first place. (I think it was an artifact from smoothLivePreview is supposed to be used in live editors, as a placeholder, to reduce the burden placed in the browser.

For instance, let's say you're using angular to create a live editor like this one. Every time the user types one character, showdown reads all text and parses it. Now, let's say you have 5 youtube videos in your live md text. Then it means everytime the user types a character, those 5 videos are recreated again (means 5 requests to youtube + loading the iframe).

That can be extremely laggy.

using smoothLivePreview prevents this since all is shown to the user is an image (or a SVG)

@RamiroPastor
Copy link
Author

RamiroPastor commented Sep 5, 2018

Yes, i use it in a live previewer also.

Even if there is only 1 video, it will constantly flicker (or completely disappear) as you type because the iframe starts empty and then fills itself with the video thumbnail.

So using smoothLivePreview is a clear choice here.

But then i see 2 problems with the svg placeholder:

  • The link inside it is not readable in blue color (this is how i see it in firefox, even with a "color: white" in the wrapping div)
  • The end user may be confused, not knowing that the svg placeholder will be correctly replaced by the real iframe in the final view (when i finally parse the complete user input without smoothLivePreview)
  • Link always opens in the same tab (although i now know how to manually fix that and always open in new tab)

My own initial approach to solving these was switching the link for a simple informative line "your video will be correctly embedded"
However, i currently think that it can get confusing if the end user puts a lot of videos, so keeping the link can be a good idea

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants