{"action":"created","issue":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/1044","repository_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins","labels_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/1044/labels{/name}","comments_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/1044/comments","events_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/1044/events","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/issues/1044","id":301603082,"number":1044,"title":"Focus plugin bug: ArrowUp/ArrowDown from multi-line unstyled block goes directly to atomic block","user":{"login":"efjacobson","id":6315388,"avatar_url":"https://avatars1.githubusercontent.com/u/6315388?v=4","gravatar_id":"","url":"https://api.github.com/users/efjacobson","html_url":"https://github.com/efjacobson","followers_url":"https://api.github.com/users/efjacobson/followers","following_url":"https://api.github.com/users/efjacobson/following{/other_user}","gists_url":"https://api.github.com/users/efjacobson/gists{/gist_id}","starred_url":"https://api.github.com/users/efjacobson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/efjacobson/subscriptions","organizations_url":"https://api.github.com/users/efjacobson/orgs","repos_url":"https://api.github.com/users/efjacobson/repos","events_url":"https://api.github.com/users/efjacobson/events{/privacy}","received_events_url":"https://api.github.com/users/efjacobson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-03-01T23:48:31Z","updated_at":"2018-03-07T20:37:17Z","closed_at":null,"author_association":"NONE","body":"Basically what the title says, but in more words: when using the focus plugin, if the cursor is in a multi-line unstyled block (say, on the first line) before an atomic block and you press down, the focus jumps to the atomic block. Same situation for if the unstyled block is below the atomic block and you press up.\r\n\r\nrecording: http://recordit.co/7Z8DR9Pye6\r\n\r\nAs you can see, this is on the focus plugin's [demo page](https://www.draft-js-plugins.com/plugin/focus), but I also made a [codesandbox](https://codesandbox.io/s/n0k2kk390m).\r\n\r\nIn the recording you can see that the cursor starts at the first position, which is the first of five lines. Pressing down once skips the other four lines and goes directly to the colored rectangle. Then, pressing down proceeds as expected, line by line, through the second text block. Then you can see the same situation in reverse.\r\n\r\nPresumably, the expected behavior here is that the cursor would always proceed line by line until right before the atomic block, instead of jumping.\r\n\r\nI'll be working on my own solution, will post any findings as I come across them.\r\n\r\nThanks for all your hard work - the plugins are great!"},"comment":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/comments/371276197","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/issues/1044#issuecomment-371276197","issue_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/1044","id":371276197,"user":{"login":"efjacobson","id":6315388,"avatar_url":"https://avatars1.githubusercontent.com/u/6315388?v=4","gravatar_id":"","url":"https://api.github.com/users/efjacobson","html_url":"https://github.com/efjacobson","followers_url":"https://api.github.com/users/efjacobson/followers","following_url":"https://api.github.com/users/efjacobson/following{/other_user}","gists_url":"https://api.github.com/users/efjacobson/gists{/gist_id}","starred_url":"https://api.github.com/users/efjacobson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/efjacobson/subscriptions","organizations_url":"https://api.github.com/users/efjacobson/orgs","repos_url":"https://api.github.com/users/efjacobson/repos","events_url":"https://api.github.com/users/efjacobson/events{/privacy}","received_events_url":"https://api.github.com/users/efjacobson/received_events","type":"User","site_admin":false},"created_at":"2018-03-07T20:37:17Z","updated_at":"2018-03-07T20:37:17Z","author_association":"NONE","body":"@freedomlang and others:\r\n\r\nI've come up with an mvp fix for this, see [this gist](https://gist.github.com/efjacobson/f2a34413d26ad5adb1fbfab6ac82630a)\r\n\r\nThis is an altered version of the focus plugin's `index.js`. As you'll see, there is a new function `getLines` that returns the lines in the current text block. Then, there is logic in `onDownArrow` and `onUpArrow` to determine if the plugin's behavior should kick in.\r\n\r\nIn order to use it, you will need to pass a class name in when you create the focus plugin, like so:\r\n\r\n```\r\nthis.focusPlugin = createFocusPlugin({\r\n  testClass: 'line-length-tester',\r\n});\r\n```\r\n\r\nYou will need to create that class such that it is styled exactly the same way your text blocks are styled. `getLines` will then create a span element with said style and add words to it until the line breaks, allowing the lines to be split up and returned as they would in the editor.\r\n\r\nHere it is in action:\r\n\r\n![focus-plugin-fix](https://user-images.githubusercontent.com/6315388/37116755-0ab47570-2204-11e8-8f79-2424f147388a.gif)\r\n\r\nThere are some clear optimizations that could happen here - a cache could be implemented to only get the lines when necessary, and the whole process could be skipped if a class was not supplied, or if some other flag was set in config. Also - it is not perfect: on up arrow, if the cursor is at the final position of the first line, it will skip the block. Not sure how to address that yet as the alternative is that if it is at the first position of the second line, it will skip the block. The current implementation seemed better and suits my needs for the time being.\r\n\r\nI'd be happy to discuss improvements, and move forward with a PR, if a maintainer is interested. For the time being, however, I'm just doing this locally. If no one seems interested I may end up publishing my own fork of the focus plugin.\r\n\r\nStanding by."}}
{"actor":{"display_login":"efjacobson"}}