daviferreira/medium-editor — pull request #280 by Dayjo (2014-08-19 15:02:14+00:00)
Title: Add "Open in New Window?" option to link form (+ other updates)

There's actually a range of changes in this pull request, necessary for the ultimate goal of adding an 'open in new window' option to the "Anchor Form".

### List of Changes

#### 1. Anchor Form Markup
I've added classes to the inputs and anchors for better / more specific selectors. This is the changes to all the css files, and the update to the anchor test spec.

----

#### 2. No Longer use 'blur' to determine exiting the anchor form
This sort of thing is usually a bit of a nightmare (got the same problem with my static-toolbar branch, but will have to implement the same solution).

Because you can't reliably just add the blur event to the toolbar / anchor form div without it firing when you go between the input, and the checkbox or the anchors, I've had to add click and focus events to the document, and check whether the target element is within the toolbar or not.

You can see this here; https://github.com/createdotnet/medium-editor/blob/link-target-option/src/js/medium-editor.js#L931-L943 which is using the new function "[isDescendant](https://github.com/createdotnet/medium-editor/blob/link-target-option/src/js/medium-editor.js#L28-L37)".

Welcome to suggestions on how to make this better.

------

#### 3. Added a save button to the anchor form
I'm not entirely sure how best to do this. I feel, especially for my users, that it's 100% necessary. Whilst I'm happy to hit enter to save the link, I think a lot of users might not immediately understand how to do this.

**Should this be an option?**
**How should it look?** - Currently it's just another anchor with the tick symbol in (which I've not done the css for yet)

![](http://cl.ly/image/1r0n1L240d1t/Image%202014-08-19%20at%203.46.53%20pm.png)

------

#### 4. Added the "Open in New Window" option

Adding ` anchorTarget: true,` to your editor options is enough to include this in the anchor form. I've added a target attribute to the `createLink()`.

**How should/could this look?** - Currently It's just a label with a checkbox (label should be language-file-ified). Originally I was just going to have a simple icon/switch but my UX guy said that it's easier/clearer to have a label and checkbox, then perhaps it could be styled per theme.

![](http://cl.ly/image/2k1S0P30281O/Image%202014-08-19%20at%203.45.27%20pm.png)

-----

Obviously suggestions are welcome, there were definitely a few times that I felt like I was 'hacking' things, but once I'd got the tests running again I was happy.