{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/5794","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5794/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5794/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5794/events","html_url":"https://github.com/WordPress/gutenberg/pull/5794","id":308427719,"number":5794,"title":"[WIP] Add Inline Images","user":{"login":"jayshenk","id":10903492,"avatar_url":"https://avatars1.githubusercontent.com/u/10903492?v=4","gravatar_id":"","url":"https://api.github.com/users/jayshenk","html_url":"https://github.com/jayshenk","followers_url":"https://api.github.com/users/jayshenk/followers","following_url":"https://api.github.com/users/jayshenk/following{/other_user}","gists_url":"https://api.github.com/users/jayshenk/gists{/gist_id}","starred_url":"https://api.github.com/users/jayshenk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jayshenk/subscriptions","organizations_url":"https://api.github.com/users/jayshenk/orgs","repos_url":"https://api.github.com/users/jayshenk/repos","events_url":"https://api.github.com/users/jayshenk/events{/privacy}","received_events_url":"https://api.github.com/users/jayshenk/received_events","type":"User","site_admin":false},"labels":[{"id":596962434,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Component]%20Inserter","name":"[Component] Inserter","color":"fbca04","default":false},{"id":587343997,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Status]%20In%20Progress","name":"[Status] In Progress","color":"0052cc","default":false}],"state":"open","locked":false,"assignee":{"login":"jayshenk","id":10903492,"avatar_url":"https://avatars1.githubusercontent.com/u/10903492?v=4","gravatar_id":"","url":"https://api.github.com/users/jayshenk","html_url":"https://github.com/jayshenk","followers_url":"https://api.github.com/users/jayshenk/followers","following_url":"https://api.github.com/users/jayshenk/following{/other_user}","gists_url":"https://api.github.com/users/jayshenk/gists{/gist_id}","starred_url":"https://api.github.com/users/jayshenk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jayshenk/subscriptions","organizations_url":"https://api.github.com/users/jayshenk/orgs","repos_url":"https://api.github.com/users/jayshenk/repos","events_url":"https://api.github.com/users/jayshenk/events{/privacy}","received_events_url":"https://api.github.com/users/jayshenk/received_events","type":"User","site_admin":false},"assignees":[{"login":"jayshenk","id":10903492,"avatar_url":"https://avatars1.githubusercontent.com/u/10903492?v=4","gravatar_id":"","url":"https://api.github.com/users/jayshenk","html_url":"https://github.com/jayshenk","followers_url":"https://api.github.com/users/jayshenk/followers","following_url":"https://api.github.com/users/jayshenk/following{/other_user}","gists_url":"https://api.github.com/users/jayshenk/gists{/gist_id}","starred_url":"https://api.github.com/users/jayshenk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jayshenk/subscriptions","organizations_url":"https://api.github.com/users/jayshenk/orgs","repos_url":"https://api.github.com/users/jayshenk/repos","events_url":"https://api.github.com/users/jayshenk/events{/privacy}","received_events_url":"https://api.github.com/users/jayshenk/received_events","type":"User","site_admin":false}],"milestone":null,"comments":2,"created_at":"2018-03-26T04:12:35Z","updated_at":"2018-03-26T21:50:51Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/WordPress/gutenberg/pulls/5794","html_url":"https://github.com/WordPress/gutenberg/pull/5794","diff_url":"https://github.com/WordPress/gutenberg/pull/5794.diff","patch_url":"https://github.com/WordPress/gutenberg/pull/5794.patch"},"body":"## Description\r\nThis is a work-in-progress PR to implement inline images in text, to resolve issue #2043. It is still in the planning phase, and I'm hoping to use this PR to gather feedback to help me plan my approach.  \r\n@mtias @jasmussen @nb @mcsf @aduth \r\n\r\n## Goal\r\n\r\nThe user should be able to add inline images in text, following the steps in the mockups by @jasmussen in https://github.com/WordPress/gutenberg/issues/2043#issuecomment-373301990.\r\n\r\n## Tasks:\r\n- [ ] When the user places the caret in the Paragraph block and clicks the global inserter, an 'Inline Blocks' menu should be rendered with the 'Inline Image' button. \r\n- [ ] At the same time, a blue square should appear by the caret position to show where the image will be inserted. The block level insertion point after the block should *not* be displayed.\r\n- [ ] When the user selects the 'Inline Image' button, the media library modal should be shown.\r\n- [ ] After an image is selected, it is added inline with the text at the caret position.\r\n\r\n### Future Plans:\r\n- [ ] Add inline images in a similar way in the Classic block, and perhaps anywhere that Rich Text is used.\r\n- [ ] Enable other 'Inline Blocks' to be added using the global inserter, such as @ mentions.\r\n\r\n## Implementation Plan / Questions I'm Pondering\r\n\r\n### How to make global inserter aware that the cursor is in text?\r\nMy first commit does this by adding a `canInsertTokens` attribute to the Paragraph block. The Inserter checks whether the currently selected block has this attribute when determining whether to render the 'Inline Blocks' menu. Is this a good approach? An alternative approach might be to have an `isEditingRichText` property in the editor Redux state. In that case, actions would need to be dispatched when the cursor was placed in Rich Text, and when it left the Rich Text.\r\n\r\n### How to access the Media Library?\r\nI need to look at the existing `MediaUpload` component and see if it could be used here.\r\n\r\n### How to add image to Paragraph contents?\r\nCurrently I am thinking of using the tinyMCE `insertContent` command. I experimented with this command in the console and it was able to insert an image inline at the position of the cursor and the contents were saved correctly.\r\n\r\n### How to notify the Rich Text component of the image that was selected from the media library?\r\nExplore using Redux for this.\r\n\r\n### Displaying Insertion Point\r\nCan the `BlockInsertionPoint` component and related Redux data be extended? Or perhaps since inline token insertion has significantly different behavior, there should be a new `TokenInsertionPoint` component. Also, I need to make sure that displaying the insertion point does not alter the saved content of the Paragraph.\r\n\r\n### Code Organization\r\nShould there be an 'Inline Tokens' module that would include both the Autocompleters and Inline Images?\r\n\r\n### Testing Approach\r\nTodo\r\n\r\n## How Has This Been Tested?\r\nGlobal Inserter:\r\nPlace cursor in a Paragraph block, then click the global inserter. The 'Inline Blocks' menu should render. Now select another block or area of the editor and click on the global inserter again. The regular Block menu should render.\r\n\r\nFurther testing instructions will be added as tasks are completed.\r\n\r\n## Screenshots (jpeg or gifs if applicable):\r\nSee https://github.com/WordPress/gutenberg/issues/2043#issue-245834556 and https://github.com/WordPress/gutenberg/issues/2043#issuecomment-373301990\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [x] My code follows the WordPress code style.\r\n- [ ] My code has proper inline documentation.\r\n\r\nObviously there is still a lot to do here. I greatly appreciate any feedback and suggestions as I continue to determine the scope and plan the solution."},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/376323753","html_url":"https://github.com/WordPress/gutenberg/pull/5794#issuecomment-376323753","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/5794","id":376323753,"user":{"login":"jayshenk","id":10903492,"avatar_url":"https://avatars1.githubusercontent.com/u/10903492?v=4","gravatar_id":"","url":"https://api.github.com/users/jayshenk","html_url":"https://github.com/jayshenk","followers_url":"https://api.github.com/users/jayshenk/followers","following_url":"https://api.github.com/users/jayshenk/following{/other_user}","gists_url":"https://api.github.com/users/jayshenk/gists{/gist_id}","starred_url":"https://api.github.com/users/jayshenk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jayshenk/subscriptions","organizations_url":"https://api.github.com/users/jayshenk/orgs","repos_url":"https://api.github.com/users/jayshenk/repos","events_url":"https://api.github.com/users/jayshenk/events{/privacy}","received_events_url":"https://api.github.com/users/jayshenk/received_events","type":"User","site_admin":false},"created_at":"2018-03-26T21:50:50Z","updated_at":"2018-03-26T21:50:50Z","author_association":"CONTRIBUTOR","body":"From @jasmussen:\r\n> - In an empty paragraph, you should see the standard blocks menu, not the inline blocks menu. Even though you're in text, this is a special case. \r\n> - If you put the caret in text, click the inserter, you see inline blocks. Cool! If you click outside the menu, it should immediately close — right now you very briefly see the blocks menu appearing instead (see GIF)\r\n\r\nNoted, thanks!\r\n\r\n>  the blue line that appears after the block should not be present in this situation. That is the indicator for where block level block would go.\r\n\r\nThanks, I added that to the task description.\r\n\r\nFrom @karmatosed:\r\n> Should the action to add maybe be 'by' the block if it's inline?\r\n\r\nI could see how this might be easier for the user to find. Would it be an image button on the toolbar for the block?"}}
{"actor":{"display_login":"jayshenk"}}