{"action":"created","issue":{"url":"https://api.github.com/repos/asciidoctor/asciidoctor/issues/1560","labels_url":"https://api.github.com/repos/asciidoctor/asciidoctor/issues/1560/labels{/name}","comments_url":"https://api.github.com/repos/asciidoctor/asciidoctor/issues/1560/comments","events_url":"https://api.github.com/repos/asciidoctor/asciidoctor/issues/1560/events","html_url":"https://github.com/asciidoctor/asciidoctor/issues/1560","id":114436189,"number":1560,"title":"Binding between AST block and output (DOM)","user":{"login":"Mogztter","id":333276,"avatar_url":"https://avatars.githubusercontent.com/u/333276?v=3","gravatar_id":"","url":"https://api.github.com/users/Mogztter","html_url":"https://github.com/Mogztter","followers_url":"https://api.github.com/users/Mogztter/followers","following_url":"https://api.github.com/users/Mogztter/following{/other_user}","gists_url":"https://api.github.com/users/Mogztter/gists{/gist_id}","starred_url":"https://api.github.com/users/Mogztter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Mogztter/subscriptions","organizations_url":"https://api.github.com/users/Mogztter/orgs","repos_url":"https://api.github.com/users/Mogztter/repos","events_url":"https://api.github.com/users/Mogztter/events{/privacy}","received_events_url":"https://api.github.com/users/Mogztter/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-10-31T21:45:52Z","updated_at":"2015-11-11T11:24:02Z","closed_at":null,"body":"I want to create a web editor, with plain text on one side and the rendering on the other side.\r\nWhen I select line 142 on my text editor, I want to automatically scroll to corresponding line on the rendering pane.\r\n\r\nTo achieve this I think we need a binding between input and output.\r\n\r\nLet's say that we can retrieve the corresponding AST block(s) for a specific line range on the document:\r\n\r\n```ruby\r\nblocks = document.blocks_in_range(142, 150)\r\n```\r\n\r\nThen we could read a unique identifier on an AST block and search that identifier on the HTML DOM:\r\n\r\n```javascript\r\nvar blockId = block.id;\r\n$('#' + blockId).scroll();\r\n```\r\n\r\nMaybe this can be achieve with a `PostProcessor` ? But we still need a way to retrieve blocks from a line range.\r\n\r\nWith this feature and partial rendering we could update part of the DOM. Instant live reload even with long document :boom:"},"comment":{"url":"https://api.github.com/repos/asciidoctor/asciidoctor/issues/comments/155740035","html_url":"https://github.com/asciidoctor/asciidoctor/issues/1560#issuecomment-155740035","issue_url":"https://api.github.com/repos/asciidoctor/asciidoctor/issues/1560","id":155740035,"user":{"login":"Mogztter","id":333276,"avatar_url":"https://avatars.githubusercontent.com/u/333276?v=3","gravatar_id":"","url":"https://api.github.com/users/Mogztter","html_url":"https://github.com/Mogztter","followers_url":"https://api.github.com/users/Mogztter/followers","following_url":"https://api.github.com/users/Mogztter/following{/other_user}","gists_url":"https://api.github.com/users/Mogztter/gists{/gist_id}","starred_url":"https://api.github.com/users/Mogztter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Mogztter/subscriptions","organizations_url":"https://api.github.com/users/Mogztter/orgs","repos_url":"https://api.github.com/users/Mogztter/repos","events_url":"https://api.github.com/users/Mogztter/events{/privacy}","received_events_url":"https://api.github.com/users/Mogztter/received_events","type":"User","site_admin":false},"created_at":"2015-11-11T11:24:02Z","updated_at":"2015-11-11T11:24:02Z","body":"I think we already have everything we need.\r\n\r\nThe [source line number is available on Block](https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/abstract_block.rb#L89) when `sourcemap` option is set to true (related [test case](https://github.com/asciidoctor/asciidoctor/blob/master/test/document_test.rb#L292)) and we can [set an id on Node](https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/abstract_node.rb#L23).\r\n\r\nBasically we can retrieve a block from a source line number, get the node id and scroll! I will create a simple example with Asciidoctor.js to showcase this \"feature\"."}}