{"action":"created","issue":{"url":"https://api.github.com/repos/froala/wysiwyg-editor/issues/1552","repository_url":"https://api.github.com/repos/froala/wysiwyg-editor","labels_url":"https://api.github.com/repos/froala/wysiwyg-editor/issues/1552/labels{/name}","comments_url":"https://api.github.com/repos/froala/wysiwyg-editor/issues/1552/comments","events_url":"https://api.github.com/repos/froala/wysiwyg-editor/issues/1552/events","html_url":"https://github.com/froala/wysiwyg-editor/issues/1552","id":181871403,"number":1552,"title":"Unexpected behavior when creating a link on an inline SVG+use","user":{"login":"ndimatteo","id":737188,"avatar_url":"https://avatars.githubusercontent.com/u/737188?v=3","gravatar_id":"","url":"https://api.github.com/users/ndimatteo","html_url":"https://github.com/ndimatteo","followers_url":"https://api.github.com/users/ndimatteo/followers","following_url":"https://api.github.com/users/ndimatteo/following{/other_user}","gists_url":"https://api.github.com/users/ndimatteo/gists{/gist_id}","starred_url":"https://api.github.com/users/ndimatteo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ndimatteo/subscriptions","organizations_url":"https://api.github.com/users/ndimatteo/orgs","repos_url":"https://api.github.com/users/ndimatteo/repos","events_url":"https://api.github.com/users/ndimatteo/events{/privacy}","received_events_url":"https://api.github.com/users/ndimatteo/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2016-10-09T07:22:42Z","updated_at":"2016-10-11T20:34:58Z","closed_at":"2016-10-11T19:45:30Z","body":"I created a pretty simple dropdown that inserts an inline SVG+use, wrapped in a link tag. Code is here:\r\n````javascript\r\n$.FroalaEditor.RegisterCommand('insertSocial', {\r\n  title: 'Insert Social Icon',\r\n  focus: true,\r\n  undo: true,\r\n  type: 'dropdown',\r\n  refreshAfterCallback: true,\r\n  options: {\r\n    'facebook': \"<svg class='icon'><use xlink:href='#icon-facebook'></use></svg> Facebook\",\r\n    'twitter': \"<svg class='icon'><use xlink:href='#icon-twitter'></use></svg> Twitter\",\r\n    'instagram': \"<svg class='icon'><use xlink:href='#icon-instagram'></use></svg> Instagram\",\r\n    'linkedin': \"<svg class='icon'><use xlink:href='#icon-linkedin'></use></svg> Linkedin\",\r\n    'google': \"<svg class='icon'><use xlink:href='#icon-google'></use></svg> Google\",\r\n    'youtube': \"<svg class='icon'><use xlink:href='#icon-youtube'></use></svg> YouTube\",\r\n    'vimeo': \"<svg class='icon'><use xlink:href='#icon-vimeo'></use></svg> Vimeo\",\r\n    'tumblr': \"<svg class='icon'><use xlink:href='#icon-tumblr'></use></svg> Tumblr\",\r\n    'yelp': \"<svg class='icon'><use xlink:href='#icon-yelp'></use></svg> Yelp\",\r\n    'rss': \"<svg class='icon'><use xlink:href='#icon-rss'></use></svg> RSS Feed\",\r\n  },\r\n  callback: function(cmd, val) {\r\n    this.html.insert('<a href=\"#'+val+'\" target=\"_blank\" class=\"social-link\"><svg class=\"icon\"><use xlink:href=\"#icon-'+val+'\"></use></svg></a>');\r\n  }\r\n});\r\n````\r\nIt inserts great, but once it's inserted the link+SVG icon are near impossible to edit and the cursor is totally jacked.\r\n\r\n##### Expected behavior.\r\nThe expected behavior should be similar to that of a text link or an IMG link:\r\n1. I should be able to click the linked item and bring up the link options consistently\r\n2. I should be able to move my cursor before and after each link+svg\r\n3. I should be able to freely delete the link+svg on backspace\r\n\r\n##### Actual behavior.\r\n- After inserting a second icon, the cursor randomly jumps to between the first and second icon, and then I can't move the cursor after the second icon anymore:\r\n![2010-insert_multiple](https://cloud.githubusercontent.com/assets/737188/19218696/d94eb59c-8dce-11e6-9e7c-b39c59d4fcbc.gif)\r\n\r\n- I'm unable to click and edit the link, the link options seem to arbitrarily show sometimes and other times not at all:\r\n![2010-click_issue](https://cloud.githubusercontent.com/assets/737188/19218698/e5170df2-8dce-11e6-867d-687ab03bdd20.gif)\r\n\r\n- If I arrow the cursor back from a different line it sporadically skips place and jumps to the far left of the line (you'll see it show between both icons for a split second then jump to the far left, all on it's own):\r\n![2010-cursor_jumping](https://cloud.githubusercontent.com/assets/737188/19218703/f3213ba2-8dce-11e6-9c8e-b59fb3520a59.gif)\r\n\r\n- If I backspace from another line it removes all of the SVG links, rather than one at a time:\r\n![2010-deleting_all](https://cloud.githubusercontent.com/assets/737188/19218707/fc697e90-8dce-11e6-9a25-959e27d8801a.gif)\r\n\r\nLet us know if you can assist, as adding icons like this is a pretty big feature for us. Thanks!\r\n\r\n##### Steps to reproduce the problem.\r\nSimply insert an inline SVG with the <use> tag and with a link wrapped around it then try to interact with it via the editor.\r\n\r\n##### OS.\r\nMac / OSX Yosemite 10.10.5 (14F27)\r\n\r\n##### Browser.\r\nGoogle Chrome / Version 53.0.2785.143 (64-bit)\r\n"},"comment":{"url":"https://api.github.com/repos/froala/wysiwyg-editor/issues/comments/253037410","html_url":"https://github.com/froala/wysiwyg-editor/issues/1552#issuecomment-253037410","issue_url":"https://api.github.com/repos/froala/wysiwyg-editor/issues/1552","id":253037410,"user":{"login":"stefanneculai","id":637004,"avatar_url":"https://avatars.githubusercontent.com/u/637004?v=3","gravatar_id":"","url":"https://api.github.com/users/stefanneculai","html_url":"https://github.com/stefanneculai","followers_url":"https://api.github.com/users/stefanneculai/followers","following_url":"https://api.github.com/users/stefanneculai/following{/other_user}","gists_url":"https://api.github.com/users/stefanneculai/gists{/gist_id}","starred_url":"https://api.github.com/users/stefanneculai/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stefanneculai/subscriptions","organizations_url":"https://api.github.com/users/stefanneculai/orgs","repos_url":"https://api.github.com/users/stefanneculai/repos","events_url":"https://api.github.com/users/stefanneculai/events{/privacy}","received_events_url":"https://api.github.com/users/stefanneculai/received_events","type":"User","site_admin":false},"created_at":"2016-10-11T20:34:58Z","updated_at":"2016-10-11T20:34:58Z","body":"Could you please make a jsFiddle? We are shooting in the dark without having the hands on the code to play with it. Thank you.\n\n> On 11 Oct 2016, at 23:33, Nick DiMatteo <notifications@github.com> wrote:\n> \n> @stefanneculai Ah good call, it was because I set it after. However now that it's in there, and I can confirm all the events are firing properly, the original issue still remains... The cursor is sporadic and I still can't really click and edit the URL with ease... am I missing something here?\n> \n> ―\n> You are receiving this because you were mentioned.\n> Reply to this email directly, view it on GitHub, or mute the thread.\n> \n"}}
{"actor":{"display_login":"stefanneculai"}}