{"action":"created","issue":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/746","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/746/labels{/name}","comments_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/746/comments","events_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/746/events","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/pull/746","id":230908857,"number":746,"title":"add react-portal to emojis and mentions","user":{"login":"mattkrick","id":5514175,"avatar_url":"https://avatars3.githubusercontent.com/u/5514175?v=3","gravatar_id":"","url":"https://api.github.com/users/mattkrick","html_url":"https://github.com/mattkrick","followers_url":"https://api.github.com/users/mattkrick/followers","following_url":"https://api.github.com/users/mattkrick/following{/other_user}","gists_url":"https://api.github.com/users/mattkrick/gists{/gist_id}","starred_url":"https://api.github.com/users/mattkrick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattkrick/subscriptions","organizations_url":"https://api.github.com/users/mattkrick/orgs","repos_url":"https://api.github.com/users/mattkrick/repos","events_url":"https://api.github.com/users/mattkrick/events{/privacy}","received_events_url":"https://api.github.com/users/mattkrick/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2017-05-24T03:16:10Z","updated_at":"2017-05-30T16:25:56Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/pulls/746","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/pull/746","diff_url":"https://github.com/draft-js-plugins/draft-js-plugins/pull/746.diff","patch_url":"https://github.com/draft-js-plugins/draft-js-plugins/pull/746.patch"},"body":"## Implementation\r\n\r\nIn #341 you said you were open to a PR, so here's a minimal example of what is possible when we use a portal to break out of the DOM tree. \r\n\r\n## Demo\r\n\r\nNothing fancy to show, it looks the same!\r\n\r\n## Use-case\r\n\r\nAs you can see in the example, even though the parent div is `position: relative` & `overflow: hidden`, the full menu still shows. This is the same strategy that facebook uses. If we don't make this change, then a designer could very easily bork the entire menu by simply changing the styles of a nearby component. A good summary of this issue (albeit with a different conclusion) is here: https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701. Ideally, we can switch over all plugins that produce a modal.\r\n\r\nIf closing animations, multiple menus, or more complex logic is required, we could switch to a more complex portal component that I made (https://github.com/mattkrick/react-portal-hoc), but as the name implies that is a higher-order component & I figured I'd start simple.\r\n\r\n\r\n### NOTE BREAKING CHANGE FOR `popoverComponent`\r\nThe current implementation of `popoverComponent` accepts a component _instance_. \r\nThis is troubling for a couple reasons:\r\n- The instance _must_ be an `HTMLElement` (span, div, etc.)  \r\n- The instance _must_ handle the props passed into it & any extra props in future versions will cause a breaking change since they may not be suitable for the element\r\n- the instance _must_ handle `ref` appropriately, otherwise the modal won't appear\r\n- The `ref` is may be stale & set to `null`. This makes portals impossible & was the main reason for fixing it\r\n\r\nReading the history of the feature, I see it's for using material-ui. Unfortunately, as it is currently written, this is about the only 3rd party package it is useful with because most others don't expect a `ref`.\r\nThe path to upgrade would look something like this:\r\n```\r\nconst popoverComponent = ({popoverRef, children, closePortal, ...props}) => <Paper ref={props.popoverRef} {...props}>{children}</Paper>\r\n```\r\n\r\nWith that small tweak, it'll work for everybody! (portals included)"},"comment":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/comments/304932759","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/pull/746#issuecomment-304932759","issue_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/746","id":304932759,"user":{"login":"nikgraf","id":223045,"avatar_url":"https://avatars2.githubusercontent.com/u/223045?v=3","gravatar_id":"","url":"https://api.github.com/users/nikgraf","html_url":"https://github.com/nikgraf","followers_url":"https://api.github.com/users/nikgraf/followers","following_url":"https://api.github.com/users/nikgraf/following{/other_user}","gists_url":"https://api.github.com/users/nikgraf/gists{/gist_id}","starred_url":"https://api.github.com/users/nikgraf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nikgraf/subscriptions","organizations_url":"https://api.github.com/users/nikgraf/orgs","repos_url":"https://api.github.com/users/nikgraf/repos","events_url":"https://api.github.com/users/nikgraf/events{/privacy}","received_events_url":"https://api.github.com/users/nikgraf/received_events","type":"User","site_admin":false},"created_at":"2017-05-30T16:25:56Z","updated_at":"2017-05-30T16:25:56Z","body":"Makes sense. Let's wait with this change for a bit to avoid confusion and we can do a breaking change when Fiber comes out (which supports Portal out of the box … see https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js#L272)"}}
{"actor":{"display_login":"nikgraf"}}