Splice data-urls out of rich text module textarea and offer link and guidance

[jywarren]

After #175, we should instead of just warning about a data-url, we should actually splice it out along with showing a warning. This would mean using similar regex to in #175 but actually removing the entire data-URL from the Rich Text Editor textarea.

We should also insert a link in the message shown that allows the person to open the data-url image in a new window, save it, and drag it back in, and guidance to tell them to take these steps, maybe in Step 1, Step 2, Step 3 format and a message like:

"Sorry, this editor can't handle images of this format. Please open it in a new window, save it, and drag it back into the editor."

[rexagod]

@jywarren Here's a preview.

Major changes

• DURIs are recognized by regex pattern, reducing redundant string matching code, thus better readability.
• 'keydown' required another key to be pressed after pasting the DURI. Fixed that by triggering events on 'keyup'.
• DURI is 'spliced' and replaced by a reasonable message, thus preventing users to think that this maybe some uncontrolled behaviour.
• Instead of opening a new tab and then saving the file, the user can straightaway download the file in one step only. Also, Google has restricted hrefs and even some srcs to open up DURIs from a security point of view, google it.
• <ul> display of instructions, and I think that's pretty much it.

[jywarren]

This is FANTASTIC -- very very exciting work! Tremendous building upon #178 as well.

Great holistic approach to solving this!

Two things I wonder:

1. if whether we might not want to splice in the warning message into the actual post text, as some people might forget to remove it. We might in parallel think about a future feature to be able to show alerts inline which are only displayed in edit mode, perhaps using the HTML comment syntax like <!-- comment here --> -- but that would be a separate project.
2. I definitely appreciate the goal of not making people confused when their image disappears. I think we need potentially to be sure their attention is captured by /something/. Some ideas:
   a. we could make the text more compact so it's a little less confusing when text of this type ends up in the final published post -- maybe (Image not saved due to data-url format; see message below or [click here](https://publiclab.org/data-url-error) for help.) -- i'm thinking if someone doesn't notice and it gets published, it should offer useful help in that context too.
   b. could we use a JavaScript alert() message as well to be sure we get the user's attention, or is that going too far?
   c. mainly, i wonder in really long posts, if the message at the bottom is too far to find.

But generally this is fantastic. Just offering a few more ideas to refine it slightly, but we could almost certainly go ahead with this PR if you'd like.

Thank you so much!

[rexagod]

@jywarren I thought on this for a while and implemented an idea of my own while keeping all your aforementioned points in mind which, I hope, would satisfy all the concerns.

Now instead of the warning message nothing pops up, this is, the DURI is replaced by a null string as soon as it is pasted and along with this, the page automatically moves down to the instructions message (yellow box). In my opinion, this seems to be a cleaner solution for short as well as long texts.

So should I submit a new PR reflecting this change, or are you content with the previous one, or maybe even something else? Do let me know!

[jywarren]

Sure that sounds great!

…

On Tue, Dec 18, 2018, 7:05 PM Pranshu Srivastava ***@***.*** wrote: @jywarren <https://github.com/jywarren> I thought on this for a while and implemented an idea of my own while keeping all your aforementioned points in mind which, I hope, would satisfy all the concerns. [image: publiclab editor] <https://user-images.githubusercontent.com/33557095/50190501-7d3d9b80-034f-11e9-853a-d389a9427d8d.gif> Now instead of the warning message nothing pops up, this is, the DURI is replaced by a null string as soon as it is pasted and along with this, the page automatically moves down to the instructions message (yellow box). In my opinion, this seems to be a cleaner solution for short as well as long texts. So should I submit a new PR reflecting this change, or are you content with the previous one, or maybe even something else? Do let me know! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#182 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJw4i70UjstqaymagioFJUi_5k6vzks5u6YKzgaJpZM4ZSZSw> .