{"action":"created","comment":{"url":"https://api.github.com/repos/Microsoft/pxt/pulls/comments/185097289","pull_request_review_id":116421698,"id":185097289,"diff_hunk":"@@ -0,0 +1,148 @@\n+\n+import * as React from \"react\";\n+import * as ReactDOM from \"react-dom\";\n+import * as data from \"./data\";\n+import * as marked from \"marked\";\n+\n+type ISettingsProps = pxt.editor.ISettingsProps;\n+\n+interface MarkedContentProps extends ISettingsProps {\n+    markdown: string;\n+}\n+\n+interface MarkedContentState {\n+}\n+\n+export class MarkedContent extends data.Component<MarkedContentProps, MarkedContentState> {\n+\n+    // Local cache for images, cleared when we create a new project.\n+    // Stores code => data-uri image of decompiled result\n+    private static blockSnippetCache: pxt.Map<string> = {};\n+    public static clearBlockSnippetCache() {\n+        this.blockSnippetCache = {};\n+    }\n+\n+    // This should probably be moved into some shared util between docsrenderer and the webapp\n+    private replaceAll(replIn: string, x: string, y: string) {\n+        return replIn.split(x).join(y)\n+    }\n+\n+    private htmlQuote(s: string): string {\n+        s = this.replaceAll(s, \"&\", \"&amp;\")\n+        s = this.replaceAll(s, \"<\", \"&lt;\")\n+        s = this.replaceAll(s, \">\", \"&gt;\")\n+        s = this.replaceAll(s, \"\\\"\", \"&quot;\")\n+        s = this.replaceAll(s, \"\\'\", \"&#39;\")\n+        return s;\n+    }\n+\n+    // the input already should be HTML-quoted but we want to make sure, and also quote quotes\n+    private html2Quote(s: string) {","path":"webapp/src/marked.tsx","position":40,"original_position":40,"commit_id":"3dfbf648eb390a94ca00a577b4b1d88aa333757b","original_commit_id":"3dfbf648eb390a94ca00a577b4b1d88aa333757b","user":{"login":"pelikhan","id":4175913,"avatar_url":"https://avatars0.githubusercontent.com/u/4175913?v=4","gravatar_id":"","url":"https://api.github.com/users/pelikhan","html_url":"https://github.com/pelikhan","followers_url":"https://api.github.com/users/pelikhan/followers","following_url":"https://api.github.com/users/pelikhan/following{/other_user}","gists_url":"https://api.github.com/users/pelikhan/gists{/gist_id}","starred_url":"https://api.github.com/users/pelikhan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pelikhan/subscriptions","organizations_url":"https://api.github.com/users/pelikhan/orgs","repos_url":"https://api.github.com/users/pelikhan/repos","events_url":"https://api.github.com/users/pelikhan/events{/privacy}","received_events_url":"https://api.github.com/users/pelikhan/received_events","type":"User","site_admin":false},"body":"do we still need this help? Why not just htmlEscape?","created_at":"2018-04-30T20:15:49Z","updated_at":"2018-04-30T20:15:50Z","html_url":"https://github.com/Microsoft/pxt/pull/4223#discussion_r185097289","pull_request_url":"https://api.github.com/repos/Microsoft/pxt/pulls/4223","author_association":"MEMBER","_links":{"self":{"href":"https://api.github.com/repos/Microsoft/pxt/pulls/comments/185097289"},"html":{"href":"https://github.com/Microsoft/pxt/pull/4223#discussion_r185097289"},"pull_request":{"href":"https://api.github.com/repos/Microsoft/pxt/pulls/4223"}}},"pull_request":{"url":"https://api.github.com/repos/Microsoft/pxt/pulls/4223","id":185001889,"html_url":"https://github.com/Microsoft/pxt/pull/4223","diff_url":"https://github.com/Microsoft/pxt/pull/4223.diff","patch_url":"https://github.com/Microsoft/pxt/pull/4223.patch","issue_url":"https://api.github.com/repos/Microsoft/pxt/issues/4223","number":4223,"state":"open","locked":false,"title":"Fix tutorial perf","user":{"login":"samelhusseini","id":16690124,"avatar_url":"https://avatars3.githubusercontent.com/u/16690124?v=4","gravatar_id":"","url":"https://api.github.com/users/samelhusseini","html_url":"https://github.com/samelhusseini","followers_url":"https://api.github.com/users/samelhusseini/followers","following_url":"https://api.github.com/users/samelhusseini/following{/other_user}","gists_url":"https://api.github.com/users/samelhusseini/gists{/gist_id}","starred_url":"https://api.github.com/users/samelhusseini/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samelhusseini/subscriptions","organizations_url":"https://api.github.com/users/samelhusseini/orgs","repos_url":"https://api.github.com/users/samelhusseini/repos","events_url":"https://api.github.com/users/samelhusseini/events{/privacy}","received_events_url":"https://api.github.com/users/samelhusseini/received_events","type":"User","site_admin":false},"body":"We used to load the tutorial page in an iframe of the doc pages and then split it up based on some predefined format and just displayed it in the relevant parts of the editor. \r\n\r\nThis meant that we had to re-load all editor resources in the iframe (which were already loaded in the editor and could be re-used).\r\nMarked was also already included in the package so I decided to make use of that and just render the blocks on an as needed bases (ie: when the user clicks on the hint). \r\n\r\nInstead, here's what I'm doing: \r\n- User starts the tutorial engine\r\n- We download the markdown from /docs. We parse it and store it in the state\r\n- We then look for any block / snippet tags used and concat them into one snippet that we decompile in order to find the toolbox blocks used. \r\n- Update the toolbox with the blocks filtered\r\n- We then render the first step inline (markdown react component). \r\n- When a user clicks on a hint, we also have an inline react component but this time we have the entire step's markdown in there which could include block tags, any block tags that we see, we call renderBlocks in the editor and get the block SVG. \r\n(In the meantime, we show a loading snipper as they're being decompiled)\r\n\r\n ","created_at":"2018-04-30T16:26:25Z","updated_at":"2018-04-30T20:15:50Z","closed_at":null,"merged_at":null,"merge_commit_sha":"98eaea19badb1c9d80a97f127ba510e10c0d9f39","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/Microsoft/pxt/pulls/4223/commits","review_comments_url":"https://api.github.com/repos/Microsoft/pxt/pulls/4223/comments","review_comment_url":"https://api.github.com/repos/Microsoft/pxt/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Microsoft/pxt/issues/4223/comments","statuses_url":"https://api.github.com/repos/Microsoft/pxt/statuses/3dfbf648eb390a94ca00a577b4b1d88aa333757b","head":{"label":"Microsoft:tutorialperf","ref":"tutorialperf","sha":"3dfbf648eb390a94ca00a577b4b1d88aa333757b","user":{"login":"Microsoft","id":6154722,"avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"repo":{"id":50304279,"name":"pxt","full_name":"Microsoft/pxt","owner":{"login":"Microsoft","id":6154722,"avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Microsoft/pxt","description":"Microsoft MakeCode (PXT - Programming eXperience Toolkit)","fork":false,"url":"https://api.github.com/repos/Microsoft/pxt","forks_url":"https://api.github.com/repos/Microsoft/pxt/forks","keys_url":"https://api.github.com/repos/Microsoft/pxt/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Microsoft/pxt/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Microsoft/pxt/teams","hooks_url":"https://api.github.com/repos/Microsoft/pxt/hooks","issue_events_url":"https://api.github.com/repos/Microsoft/pxt/issues/events{/number}","events_url":"https://api.github.com/repos/Microsoft/pxt/events","assignees_url":"https://api.github.com/repos/Microsoft/pxt/assignees{/user}","branches_url":"https://api.github.com/repos/Microsoft/pxt/branches{/branch}","tags_url":"https://api.github.com/repos/Microsoft/pxt/tags","blobs_url":"https://api.github.com/repos/Microsoft/pxt/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Microsoft/pxt/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Microsoft/pxt/git/refs{/sha}","trees_url":"https://api.github.com/repos/Microsoft/pxt/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Microsoft/pxt/statuses/{sha}","languages_url":"https://api.github.com/repos/Microsoft/pxt/languages","stargazers_url":"https://api.github.com/repos/Microsoft/pxt/stargazers","contributors_url":"https://api.github.com/repos/Microsoft/pxt/contributors","subscribers_url":"https://api.github.com/repos/Microsoft/pxt/subscribers","subscription_url":"https://api.github.com/repos/Microsoft/pxt/subscription","commits_url":"https://api.github.com/repos/Microsoft/pxt/commits{/sha}","git_commits_url":"https://api.github.com/repos/Microsoft/pxt/git/commits{/sha}","comments_url":"https://api.github.com/repos/Microsoft/pxt/comments{/number}","issue_comment_url":"https://api.github.com/repos/Microsoft/pxt/issues/comments{/number}","contents_url":"https://api.github.com/repos/Microsoft/pxt/contents/{+path}","compare_url":"https://api.github.com/repos/Microsoft/pxt/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Microsoft/pxt/merges","archive_url":"https://api.github.com/repos/Microsoft/pxt/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Microsoft/pxt/downloads","issues_url":"https://api.github.com/repos/Microsoft/pxt/issues{/number}","pulls_url":"https://api.github.com/repos/Microsoft/pxt/pulls{/number}","milestones_url":"https://api.github.com/repos/Microsoft/pxt/milestones{/number}","notifications_url":"https://api.github.com/repos/Microsoft/pxt/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Microsoft/pxt/labels{/name}","releases_url":"https://api.github.com/repos/Microsoft/pxt/releases{/id}","deployments_url":"https://api.github.com/repos/Microsoft/pxt/deployments","created_at":"2016-01-24T19:35:52Z","updated_at":"2018-04-30T16:11:36Z","pushed_at":"2018-04-30T19:47:12Z","git_url":"git://github.com/Microsoft/pxt.git","ssh_url":"git@github.com:Microsoft/pxt.git","clone_url":"https://github.com/Microsoft/pxt.git","svn_url":"https://github.com/Microsoft/pxt","homepage":"https://makecode.com","size":149477,"stargazers_count":505,"watchers_count":505,"language":"TypeScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":158,"mirror_url":null,"archived":false,"open_issues_count":459,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit"},"forks":158,"open_issues":459,"watchers":505,"default_branch":"master"}},"base":{"label":"Microsoft:master","ref":"master","sha":"6c8498d6d1cba39fbf36184808b4710e7ea28c6e","user":{"login":"Microsoft","id":6154722,"avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"repo":{"id":50304279,"name":"pxt","full_name":"Microsoft/pxt","owner":{"login":"Microsoft","id":6154722,"avatar_url":"https://avatars2.githubusercontent.com/u/6154722?v=4","gravatar_id":"","url":"https://api.github.com/users/Microsoft","html_url":"https://github.com/Microsoft","followers_url":"https://api.github.com/users/Microsoft/followers","following_url":"https://api.github.com/users/Microsoft/following{/other_user}","gists_url":"https://api.github.com/users/Microsoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Microsoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Microsoft/subscriptions","organizations_url":"https://api.github.com/users/Microsoft/orgs","repos_url":"https://api.github.com/users/Microsoft/repos","events_url":"https://api.github.com/users/Microsoft/events{/privacy}","received_events_url":"https://api.github.com/users/Microsoft/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Microsoft/pxt","description":"Microsoft MakeCode (PXT - Programming eXperience Toolkit)","fork":false,"url":"https://api.github.com/repos/Microsoft/pxt","forks_url":"https://api.github.com/repos/Microsoft/pxt/forks","keys_url":"https://api.github.com/repos/Microsoft/pxt/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Microsoft/pxt/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Microsoft/pxt/teams","hooks_url":"https://api.github.com/repos/Microsoft/pxt/hooks","issue_events_url":"https://api.github.com/repos/Microsoft/pxt/issues/events{/number}","events_url":"https://api.github.com/repos/Microsoft/pxt/events","assignees_url":"https://api.github.com/repos/Microsoft/pxt/assignees{/user}","branches_url":"https://api.github.com/repos/Microsoft/pxt/branches{/branch}","tags_url":"https://api.github.com/repos/Microsoft/pxt/tags","blobs_url":"https://api.github.com/repos/Microsoft/pxt/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Microsoft/pxt/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Microsoft/pxt/git/refs{/sha}","trees_url":"https://api.github.com/repos/Microsoft/pxt/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Microsoft/pxt/statuses/{sha}","languages_url":"https://api.github.com/repos/Microsoft/pxt/languages","stargazers_url":"https://api.github.com/repos/Microsoft/pxt/stargazers","contributors_url":"https://api.github.com/repos/Microsoft/pxt/contributors","subscribers_url":"https://api.github.com/repos/Microsoft/pxt/subscribers","subscription_url":"https://api.github.com/repos/Microsoft/pxt/subscription","commits_url":"https://api.github.com/repos/Microsoft/pxt/commits{/sha}","git_commits_url":"https://api.github.com/repos/Microsoft/pxt/git/commits{/sha}","comments_url":"https://api.github.com/repos/Microsoft/pxt/comments{/number}","issue_comment_url":"https://api.github.com/repos/Microsoft/pxt/issues/comments{/number}","contents_url":"https://api.github.com/repos/Microsoft/pxt/contents/{+path}","compare_url":"https://api.github.com/repos/Microsoft/pxt/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Microsoft/pxt/merges","archive_url":"https://api.github.com/repos/Microsoft/pxt/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Microsoft/pxt/downloads","issues_url":"https://api.github.com/repos/Microsoft/pxt/issues{/number}","pulls_url":"https://api.github.com/repos/Microsoft/pxt/pulls{/number}","milestones_url":"https://api.github.com/repos/Microsoft/pxt/milestones{/number}","notifications_url":"https://api.github.com/repos/Microsoft/pxt/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Microsoft/pxt/labels{/name}","releases_url":"https://api.github.com/repos/Microsoft/pxt/releases{/id}","deployments_url":"https://api.github.com/repos/Microsoft/pxt/deployments","created_at":"2016-01-24T19:35:52Z","updated_at":"2018-04-30T16:11:36Z","pushed_at":"2018-04-30T19:47:12Z","git_url":"git://github.com/Microsoft/pxt.git","ssh_url":"git@github.com:Microsoft/pxt.git","clone_url":"https://github.com/Microsoft/pxt.git","svn_url":"https://github.com/Microsoft/pxt","homepage":"https://makecode.com","size":149477,"stargazers_count":505,"watchers_count":505,"language":"TypeScript","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":158,"mirror_url":null,"archived":false,"open_issues_count":459,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit"},"forks":158,"open_issues":459,"watchers":505,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Microsoft/pxt/pulls/4223"},"html":{"href":"https://github.com/Microsoft/pxt/pull/4223"},"issue":{"href":"https://api.github.com/repos/Microsoft/pxt/issues/4223"},"comments":{"href":"https://api.github.com/repos/Microsoft/pxt/issues/4223/comments"},"review_comments":{"href":"https://api.github.com/repos/Microsoft/pxt/pulls/4223/comments"},"review_comment":{"href":"https://api.github.com/repos/Microsoft/pxt/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Microsoft/pxt/pulls/4223/commits"},"statuses":{"href":"https://api.github.com/repos/Microsoft/pxt/statuses/3dfbf648eb390a94ca00a577b4b1d88aa333757b"}},"author_association":"MEMBER"}}
{"actor":{"display_login":"pelikhan"}}