rrweb-player
Version:
rrweb's replayer UI
3 lines • 159 kB
JavaScript
/* eslint-disable */
// prettier-ignore
const events = [{"type":4,"data":{"href":"https://demoit.app/e/react#ReactHooks.js","width":1166,"height":705},"timestamp":1544756766750,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":2,"data":{"node":{"type":0,"childNodes":[{"type":1,"name":"html","publicId":"","systemId":"","id":2},{"type":2,"tagName":"html","attributes":{"lang":"en","class":"gr__demoit_app"},"childNodes":[{"type":2,"tagName":"head","attributes":{},"childNodes":[{"type":3,"textContent":"\n ","id":5},{"type":2,"tagName":"meta","attributes":{"charset":"UTF-8"},"childNodes":[],"id":6},{"type":3,"textContent":"\n ","id":7},{"type":2,"tagName":"title","attributes":{},"childNodes":[{"type":3,"textContent":"demoit","id":9}],"id":8},{"type":3,"textContent":"\n ","id":10},{"type":2,"tagName":"link","attributes":{"_cssText":"@font-face { font-family: \"Fira Mono\"; font-style: normal; font-weight: 400; src: local(\"Fira Mono Regular\"), local(\"FiraMono-Regular\"), url('https://demoit.app/static/demoit/font/FiraMono.woff2') format(\"woff2\"); unicode-range: U+460-52F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }.CodeMirror { font-family: \"PT Mono\", monospace; height: 300px; color: black; direction: ltr; }.CodeMirror-lines { padding: 4px 0px; }.CodeMirror pre { padding: 0px 4px; }.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; }.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background-color: rgb(247, 247, 247); white-space: nowrap; }.CodeMirror-linenumber { padding: 0px 3px 0px 5px; min-width: 20px; text-align: right; color: rgb(153, 153, 153); white-space: nowrap; }.CodeMirror-guttermarker { color: black; }.CodeMirror-guttermarker-subtle { color: rgb(153, 153, 153); }.CodeMirror-cursor { border-left: 1px solid black; border-right: 0px; width: 0px; }.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }.cm-fat-cursor .CodeMirror-cursor { width: auto; background: rgb(119, 238, 119); border: 0px !important; }.cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }.cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); animation: blink 1.06s steps(1, end) 0s infinite normal none running; }.cm-animate-fat-cursor { width: auto; border: 0px; animation: blink 1.06s steps(1, end) 0s infinite normal none running; background-color: rgb(119, 238, 119); }@-webkit-keyframes blink { \n 50% { background-color: transparent; }\n}@keyframes blink { \n 50% { background-color: transparent; }\n}.cm-tab { display: inline-block; text-decoration: inherit; }.CodeMirror-rulers { position: absolute; left: 0px; right: 0px; top: -50px; bottom: -20px; overflow: hidden; }.CodeMirror-ruler { border-left: 1px solid rgb(204, 204, 204); top: 0px; bottom: 0px; position: absolute; }.cm-s-default .cm-header { color: blue; }.cm-s-default .cm-quote { color: rgb(0, 153, 0); }.cm-negative { color: rgb(221, 68, 68); }.cm-positive { color: rgb(34, 153, 34); }.cm-header, .cm-strong { font-weight: bold; }.cm-em { font-style: italic; }.cm-link { text-decoration: underline; }.cm-strikethrough { text-decoration: line-through; }.cm-s-default .cm-keyword { color: rgb(119, 0, 136); }.cm-s-default .cm-atom { color: rgb(34, 17, 153); }.cm-s-default .cm-number { color: rgb(17, 102, 68); }.cm-s-default .cm-def { color: rgb(0, 0, 255); }.cm-s-default .cm-variable-2 { color: rgb(0, 85, 170); }.cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: rgb(0, 136, 85); }.cm-s-default .cm-comment { color: rgb(170, 85, 0); }.cm-s-default .cm-string { color: rgb(170, 17, 17); }.cm-s-default .cm-string-2 { color: rgb(255, 85, 0); }.cm-s-default .cm-meta { color: rgb(85, 85, 85); }.cm-s-default .cm-qualifier { color: rgb(85, 85, 85); }.cm-s-default .cm-builtin { color: rgb(51, 0, 170); }.cm-s-default .cm-bracket { color: rgb(153, 153, 119); }.cm-s-default .cm-tag { color: rgb(17, 119, 0); }.cm-s-default .cm-attribute { color: rgb(0, 0, 204); }.cm-s-default .cm-hr { color: rgb(153, 153, 153); }.cm-s-default .cm-link { color: rgb(0, 0, 204); }.cm-s-default .cm-error { color: red; }.cm-invalidchar { color: red; }.CodeMirror-composing { border-bottom: 2px solid; }div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 187, 0); }div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(170, 34, 34); }.CodeMirror-matchingtag { background: rgba(255, 150, 0, 0.3); }.CodeMirror-activeline-background { background: rgb(232, 242, 255); }.CodeMirror { position: relative; overflow: hidden; background: white; }.CodeMirror-scroll { margin-bottom: -30px; margin-right: -30px; padding-bottom: 30px; height: 100%; outline: 0px; position: relative; overflow: scroll !important; }.CodeMirror-sizer { position: relative; border-right: 30px solid transparent; }.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; }.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden scroll; }.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: scroll hidden; }.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; min-height: 100%; z-index: 3; }.CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -30px; }.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; }.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }.CodeMirror-gutter-wrapper ::selection { background-color: transparent; }.CodeMirror-lines { cursor: text; min-height: 1px; }.CodeMirror pre { border-radius: 0px; border-width: 0px; background: transparent; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; font-variant-ligatures: contextual; }.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }.CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; }.CodeMirror-rtl pre { direction: rtl; }.CodeMirror-code { outline: 0px; }.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { box-sizing: content-box; }.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }.CodeMirror-cursor { position: absolute; pointer-events: none; }.CodeMirror-measure pre { position: static; }div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; }div.CodeMirror-dragcursors { visibility: visible; }.CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }.CodeMirror-selected { background: rgb(217, 217, 217); }.CodeMirror-focused .CodeMirror-selected { background: rgb(215, 212, 240); }.CodeMirror-crosshair { cursor: crosshair; }.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgb(215, 212, 240); }.cm-searching { background-color: rgba(255, 255, 0, 0.4); }.cm-force-border { padding-right: 0.1px; }@media print {\n .CodeMirror div.CodeMirror-cursors { visibility: hidden; }\n}.cm-tab-wrap-hack::after { content: \"\"; }span.CodeMirror-selectedtext { background: 0px center; }html { box-sizing: border-box; width: 100%; height: 100%; }*, ::before, ::after { box-sizing: inherit; }body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: \"Fira Mono\", monospace; font-size: 14px; line-height: 14px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); }.right { float: right; }svg { fill: currentcolor; }.centered { height: 100%; display: flex; align-items: center; justify-content: center; }.mt1 { margin-top: 1em !important; }.app { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 8000; }.app.dark { background: rgb(32, 48, 58); color: rgb(254, 254, 254); }.app .layout { height: calc(100% - 8px); transition: height 200ms ease-out 0s; }.gutter.gutter-horizontal { cursor: ew-resize; float: left; height: 100%; background: rgb(234, 234, 234); }.gutter.gutter-vertical { cursor: ns-resize; width: 100%; background: rgb(234, 234, 234); }.dark .gutter.gutter-horizontal, .dark .gutter.gutter-vertical { background: rgb(46, 65, 76); }.editor-section { vertical-align: top; height: 100%; }.CodeMirror { height: 100%; transition: opacity 300ms ease 0s; opacity: 1; }.CodeMirror-lines { padding: 1em; }.CodeMirror-selected { background-color: rgb(255, 255, 255) !important; }.output { padding: 1em; position: relative; overflow: auto; }.console { position: relative; overflow: auto; }.console p { margin: 0px; padding: 0.5em; white-space: pre-wrap; }.js-code-editor { height: 100%; width: 100%; overflow: auto; line-height: 1.3em; float: left; z-index: 90; }.status-bar { width: 100%; height: 8px; background: rgb(204, 204, 204); cursor: pointer; transition: height 200ms ease-out 0s; overflow: hidden; }.dark .status-bar { background: rgb(0, 0, 0); }.status-bar > div { display: none; }.status-bar a { display: inline-block; color: rgb(0, 0, 0); text-decoration: none; padding: 8px; cursor: pointer; }.dark .status-bar a { color: rgb(165, 165, 165); }.status-bar a:hover { color: rgb(76, 0, 0); }.dark .status-bar a:hover { color: rgb(123, 109, 109); }.status-bar a.active { font-weight: bold; }.status-bar a svg { transform: translateY(3px); }.popup { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 8100; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.8); transition: opacity 200ms ease 0s, width 200ms ease-out 0s; opacity: 0; }.popup section { position: absolute; min-width: 600px; max-width: 90%; max-height: 90%; overflow-y: auto; padding: 1em; background: rgb(46, 46, 46); border-radius: 0.2em; box-shadow: rgb(0, 0, 0) 0px 0px 5px 3px; top: 50%; left: 50%; transform: translate(-50%, -50%); }.popup section.multiple-pages { padding: 0px; }.popup .close { background: 0px center; color: rgb(255, 255, 255); border: 0px; position: absolute; top: 0.4em; right: 0.5em; cursor: pointer; outline: 0px; }.popup .close:hover { color: rgb(153, 153, 153); background: 0px center; }.popup .multiple-pages .close { top: 4px; right: 0px; }.popup p { margin: 0px 0px 1em; padding: 0px; line-height: 1.2em; }.popup h1 { padding: 0px; margin: 1em 0px; }.popup h2 { padding: 0px; margin: 0px 0px 1em; }.popup button { padding: 0.6em 1em; background: 0px center; cursor: pointer; border-radius: 4px; border: 2px solid rgb(82, 82, 82); color: rgb(255, 255, 255); outline: 0px; display: inline-block; text-transform: uppercase; font-weight: bold; }.popup button:hover { background: rgb(49, 49, 49); }.popup .right { float: right; }.popup .secondary span { display: inline-block; transform: translateY(-5px); margin-left: 7px; }.popup hr { margin: 1em 0px; border-color: rgb(49, 49, 49); }.popup input, .popup textarea { width: 100%; border: 1px solid rgb(82, 82, 82); padding: 0.6em; display: block; border-radius: 4px; outline: 0px; margin-bottom: 1em; }.popup textarea { height: 162px; }.popup a { color: inherit; }.popup a:hover { text-decoration: none; }.popup .sub-nav { list-style: none; margin: 0px; padding: 0px; background: rgb(64, 64, 64); }.popup .sub-nav li { display: inline-block; margin: 0px; padding: 0px; background: rgb(64, 64, 64); }.popup .sub-nav li a { display: block; text-decoration: none; padding: 1em; text-transform: uppercase; border-right: 1px solid rgb(14, 14, 14); }.popup .sub-nav li a:hover { color: rgb(153, 153, 153); }.popup .sub-nav li.active { background: rgb(46, 46, 46); }.popup .content { padding: 1em; }@keyframes bubble { \n 0% { transform: scale(0.5); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(0.5); }\n}.spinner { width: 20px; height: 20px; background: rgb(0, 0, 0); border-radius: 10px; animation: bubble 1s ease 0s infinite normal none running; }.cm-s-light.CodeMirror { background: rgb(255, 255, 255); color: rgb(36, 41, 46); }.cm-s-light .CodeMirror-gutters { background: rgb(255, 255, 255); border-right-width: 0px; }.cm-s-light .CodeMirror-guttermarker { color: white; }.cm-s-light .CodeMirror-guttermarker-subtle { color: rgb(208, 208, 208); }.cm-s-light .CodeMirror-linenumber { color: rgb(149, 157, 165); padding: 0px 16px; }.cm-s-light .CodeMirror-cursor { border-left: 1px solid rgb(36, 41, 46); }.cm-s-light .CodeMirror-activeline-background { background: rgb(250, 251, 252); }.cm-s-light .CodeMirror-matchingbracket { text-decoration: underline; color: rgb(36, 41, 46) !important; }.cm-s-light .CodeMirror-lines { font-family: inherit; font-size: inherit; background: rgb(255, 255, 255); line-height: 1.5; }.cm-s-light .cm-comment { color: rgb(106, 115, 125); }.cm-s-light .cm-constant { color: rgb(0, 92, 197); }.cm-s-light .cm-entity { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(111, 66, 193); }.cm-s-light .cm-keyword { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(215, 58, 73); }.cm-s-light .cm-storage { color: rgb(215, 58, 73); }.cm-s-light .cm-string { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(3, 148, 30); }.cm-s-light .cm-support { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 92, 197); }.cm-s-light .cm-variable { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(227, 98, 9); }.cm-s-light .cm-tag { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(13, 110, 171); }.cm-s-light .cm-string-2 { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(3, 148, 30); }.CodeMirror-selectedtext { color: rgb(0, 0, 0) !important; background: rgb(209, 216, 224) !important; }.cm-s-dark.CodeMirror { background: rgb(32, 48, 58); color: rgb(243, 243, 243); }.cm-s-dark .CodeMirror-gutters { background: rgb(32, 48, 58); border-right-width: 0px; }.cm-s-dark .CodeMirror-guttermarker { color: black; }.cm-s-dark .CodeMirror-guttermarker-subtle { color: rgb(208, 208, 208); }.cm-s-dark .CodeMirror-linenumber { color: rgb(149, 157, 165); padding: 0px 16px; }.cm-s-dark .CodeMirror-cursor { border-left: 1px solid rgb(243, 243, 243); }.cm-s-dark .CodeMirror-activeline-background { background: rgb(58, 58, 58); }.cm-s-dark .CodeMirror-matchingbracket { text-decoration: underline; color: rgb(255, 255, 255) !important; }.cm-s-dark .CodeMirror-lines { font-family: inherit; font-size: inherit; background: rgb(32, 48, 58); line-height: 1.5; }.cm-s-dark .cm-comment { color: rgb(106, 115, 125); }.cm-s-dark .cm-constant { color: rgb(0, 92, 197); }.cm-s-dark .cm-entity { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(111, 66, 193); }.cm-s-dark .cm-keyword { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(178, 194, 226); }.cm-s-dark .cm-storage { color: rgb(178, 194, 226); }.cm-s-dark .cm-string { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(142, 175, 134); }.cm-s-dark .cm-support { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 92, 197); }.cm-s-dark .cm-variable { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(222, 183, 156); }.cm-s-dark .cm-def { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(222, 183, 156); }.cm-s-dark .cm-tag { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(175, 191, 230); }.cm-s-dark .cm-string-2 { font-weight: normal; font-style: normal; text-decoration: none; color: rgb(142, 175, 134); }.CodeMirror-selectedtext { color: rgb(0, 0, 0) !important; background: rgb(209, 216, 224) !important; }"},"childNodes":[],"id":11},{"type":3,"textContent":"\n ","id":12},{"type":2,"tagName":"link","attributes":{"rel":"shortcut icon","type":"image/png","href":"https://demoit.app/e/img/demoit_64x64.png"},"childNodes":[],"id":13},{"type":3,"textContent":"\n ","id":14},{"type":2,"tagName":"meta","attributes":{"name":"viewport","content":"user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"},"childNodes":[],"id":15},{"type":3,"textContent":"\n","id":16}],"id":4},{"type":3,"textContent":"\n","id":17},{"type":2,"tagName":"body","attributes":{"data-gr-c-s-loaded":"true"},"childNodes":[{"type":3,"textContent":"\n ","id":19},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-output"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":21}],"id":20},{"type":3,"textContent":"\n\n ","id":22},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-console"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":24}],"id":23},{"type":3,"textContent":"\n\n ","id":25},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-editor"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":27}],"id":26},{"type":3,"textContent":"\n\n ","id":28},{"type":2,"tagName":"script","attributes":{"type":"text/template","id":"template-code-preview"},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":30}],"id":29},{"type":3,"textContent":"\n\n ","id":31},{"type":2,"tagName":"div","attributes":{"class":"app light"},"childNodes":[{"type":3,"textContent":"\n ","id":33},{"type":2,"tagName":"div","attributes":{"class":"status-bar","style":"height: 36px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"data-export":"buttons","style":"display: block;"},"childNodes":[{"type":2,"tagName":"a","attributes":{"data-export":"file","href":"javascript:void(0);","class":"active"},"childNodes":[{"type":3,"textContent":"ReactHooks.js","id":37}],"id":36},{"type":2,"tagName":"a","attributes":{"data-export":"newFileButton","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"},"childNodes":[],"isSVG":true,"id":40}],"isSVG":true,"id":39}],"id":38},{"type":2,"tagName":"a","attributes":{"data-export":"closeButton","class":"right","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"},"childNodes":[],"isSVG":true,"id":43}],"isSVG":true,"id":42}],"id":41},{"type":2,"tagName":"a","attributes":{"data-export":"settingsButton","class":"right","href":"javascript:void(0)"},"childNodes":[{"type":2,"tagName":"svg","attributes":{"width":"14","height":"14","viewBox":"0 0 1792 1792","xmlns":"http://www.w3.org/2000/svg"},"childNodes":[{"type":2,"tagName":"path","attributes":{"d":"M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"},"childNodes":[],"isSVG":true,"id":46}],"isSVG":true,"id":45}],"id":44}],"id":35}],"id":34},{"type":3,"textContent":"\n ","id":47},{"type":2,"tagName":"div","attributes":{"class":"layout","style":"height: calc(100% - 36px); filter: none;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"editor-section editor","style":"height: calc(70% - 1px);"},"childNodes":[{"type":3,"textContent":"\n ","id":50},{"type":2,"tagName":"div","attributes":{"class":"js-code-editor"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror cm-s-light CodeMirror-focused"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"overflow: hidden; position: relative; width: 3px; height: 0px; top: 140px; left: 363px;"},"childNodes":[{"type":2,"tagName":"textarea","attributes":{"autocorrect":"off","autocapitalize":"off","spellcheck":"false","style":"position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;","tabindex":"0"},"childNodes":[],"id":54}],"id":53},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-vscrollbar","tabindex":"-1","cm-not-content":"true","style":"bottom: 0px; display: block;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"min-width: 1px; height: 679px;"},"childNodes":[],"id":56}],"id":55},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-hscrollbar","tabindex":"-1","cm-not-content":"true"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"height: 100%; min-height: 1px; width: 0px;"},"childNodes":[],"id":58}],"id":57},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-scrollbar-filler","cm-not-content":"true"},"childNodes":[],"id":59},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-gutter-filler","cm-not-content":"true"},"childNodes":[],"id":60},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-scroll","tabindex":"-1"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-sizer","style":"margin-left: 0px; margin-bottom: -15px; border-right-width: 15px; min-height: 679px; min-width: 773.828px; padding-right: 15px; padding-bottom: 0px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"style":"position: relative; top: 0px;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-lines","role":"presentation"},"childNodes":[{"type":2,"tagName":"div","attributes":{"role":"presentation","style":"position: relative; outline: none;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-measure"},"childNodes":[],"id":66},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-measure"},"childNodes":[],"id":67},{"type":2,"tagName":"div","attributes":{"style":"position: relative; z-index: 1;"},"childNodes":[],"id":68},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursors","style":"visibility: hidden;"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-cursor","style":"left: 349px; top: 273px; height: 21px;"},"childNodes":[{"type":3,"textContent":" ","id":71}],"id":70}],"id":69},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-code","role":"presentation","style":""},"childNodes":[{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"const","id":76}],"id":75},{"type":3,"textContent":" ","id":77},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"base","id":79}],"id":78},{"type":3,"textContent":" ","id":80},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":82}],"id":81},{"type":3,"textContent":" ","id":83},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Date","id":85}],"id":84},{"type":3,"textContent":".","id":86},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"now","id":88}],"id":87},{"type":3,"textContent":"()","id":89}],"id":74}],"id":73},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"","id":93}],"id":92}],"id":91}],"id":90},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"class","id":97}],"id":96},{"type":3,"textContent":" ","id":98},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"App","id":100}],"id":99},{"type":3,"textContent":" ","id":101},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"extends","id":103}],"id":102},{"type":3,"textContent":" ","id":104},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"React","id":106}],"id":105},{"type":3,"textContent":".","id":107},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"Component","id":109}],"id":108},{"type":3,"textContent":" {","id":110}],"id":95}],"id":94},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":113},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"constructor","id":115}],"id":114},{"type":3,"textContent":"(","id":116},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"props","id":118}],"id":117},{"type":3,"textContent":") {","id":119}],"id":112}],"id":111},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":122},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"super","id":124}],"id":123},{"type":3,"textContent":"(","id":125},{"type":2,"tagName":"span","attributes":{"class":"cm-variable-2"},"childNodes":[{"type":3,"textContent":"props","id":127}],"id":126},{"type":3,"textContent":");","id":128}],"id":121}],"id":120},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":131},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":133}],"id":132},{"type":3,"textContent":".","id":134},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"state","id":136}],"id":135},{"type":3,"textContent":" ","id":137},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":139}],"id":138},{"type":3,"textContent":" {","id":140}],"id":130}],"id":129},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":143},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"count","id":145}],"id":144},{"type":3,"textContent":": ","id":146},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"0","id":148}],"id":147},{"type":3,"textContent":",","id":149}],"id":142}],"id":141},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":152},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"time","id":154}],"id":153},{"type":3,"textContent":": ","id":155},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"base","id":157}],"id":156},{"type":3,"textContent":",","id":158}],"id":151}],"id":150},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" };","id":161}],"id":160}],"id":159},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" }","id":164}],"id":163}],"id":162},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":167}],"id":166}],"id":165},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":170},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"componentDidMount","id":172}],"id":171},{"type":3,"textContent":"() {","id":173}],"id":169}],"id":168},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":176},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"setInterval","id":178}],"id":177},{"type":3,"textContent":"(() ","id":179},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=>","id":181}],"id":180},{"type":3,"textContent":" {","id":182}],"id":175}],"id":174},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":185},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":187}],"id":186},{"type":3,"textContent":".","id":188},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"setState","id":190}],"id":189},{"type":3,"textContent":"({ ","id":191},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"time","id":193}],"id":192},{"type":3,"textContent":": ","id":194},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Date","id":196}],"id":195},{"type":3,"textContent":".","id":197},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"now","id":199}],"id":198},{"type":3,"textContent":"() })","id":200}],"id":184}],"id":183},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" }, ","id":203},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1000","id":205}],"id":204},{"type":3,"textContent":");","id":206}],"id":202}],"id":201},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" }","id":209}],"id":208}],"id":207},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":212}],"id":211}],"id":210},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":215},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"render","id":217}],"id":216},{"type":3,"textContent":"() {","id":218}],"id":214}],"id":213},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":221},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"const","id":223}],"id":222},{"type":3,"textContent":" { ","id":224},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"count","id":226}],"id":225},{"type":3,"textContent":", ","id":227},{"type":2,"tagName":"span","attributes":{"class":"cm-def"},"childNodes":[{"type":3,"textContent":"time","id":229}],"id":228},{"type":3,"textContent":" } ","id":230},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=","id":232}],"id":231},{"type":3,"textContent":" ","id":233},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":235}],"id":234},{"type":3,"textContent":".","id":236},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"state","id":238}],"id":237},{"type":3,"textContent":";","id":239}],"id":220}],"id":219},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":242},{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[{"type":3,"textContent":" ","id":244}],"id":243},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"return","id":246}],"id":245},{"type":3,"textContent":" (","id":247}],"id":241}],"id":240},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":250},{"type":2,"tagName":"span","attributes":{"class":"cm-tab","role":"presentation","cm-text":"\t"},"childNodes":[{"type":3,"textContent":" ","id":252}],"id":251},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":254}],"id":253},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"section","id":256}],"id":255},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":258}],"id":257}],"id":249}],"id":248},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":261},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":263}],"id":262},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":265}],"id":264},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":267}],"id":266},{"type":3,"textContent":"Time {","id":268},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"Math","id":270}],"id":269},{"type":3,"textContent":".","id":271},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"round","id":273}],"id":272},{"type":3,"textContent":"((","id":274},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"time","id":276}],"id":275},{"type":3,"textContent":" ","id":277},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"-","id":279}],"id":278},{"type":3,"textContent":" ","id":280},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"base","id":282}],"id":281},{"type":3,"textContent":") ","id":283},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"/","id":285}],"id":284},{"type":3,"textContent":" ","id":286},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1000","id":288}],"id":287},{"type":3,"textContent":")}","id":289},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":291}],"id":290},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":293}],"id":292},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":295}],"id":294}],"id":260}],"id":259},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":298},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":300}],"id":299},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":302}],"id":301},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":304}],"id":303},{"type":3,"textContent":"Counter {","id":305},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"count","id":307}],"id":306},{"type":3,"textContent":"}","id":308},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":310}],"id":309},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"div","id":312}],"id":311},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":314}],"id":313}],"id":297}],"id":296},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":317},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":319}],"id":318},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"button","id":321}],"id":320},{"type":3,"textContent":" ","id":322},{"type":2,"tagName":"span","attributes":{"class":"cm-attribute"},"childNodes":[{"type":3,"textContent":"onClick","id":324}],"id":323},{"type":3,"textContent":"={() ","id":325},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"=>","id":327}],"id":326},{"type":3,"textContent":" ","id":328},{"type":2,"tagName":"span","attributes":{"class":"cm-keyword"},"childNodes":[{"type":3,"textContent":"this","id":330}],"id":329},{"type":3,"textContent":".","id":331},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"setState","id":333}],"id":332},{"type":3,"textContent":"({ ","id":334},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"count","id":336}],"id":335},{"type":3,"textContent":": ","id":337},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"count","id":339}],"id":338},{"type":3,"textContent":" ","id":340},{"type":2,"tagName":"span","attributes":{"class":"cm-operator"},"childNodes":[{"type":3,"textContent":"+","id":342}],"id":341},{"type":3,"textContent":" ","id":343},{"type":2,"tagName":"span","attributes":{"class":"cm-number"},"childNodes":[{"type":3,"textContent":"1","id":345}],"id":344},{"type":3,"textContent":" })}","id":346},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":348}],"id":347},{"type":3,"textContent":"click to count","id":349},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":351}],"id":350},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"button","id":353}],"id":352},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":355}],"id":354}],"id":316}],"id":315},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" ","id":358},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"</","id":360}],"id":359},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"section","id":362}],"id":361},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":">","id":364}],"id":363}],"id":357}],"id":356},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" )","id":367}],"id":366}],"id":365},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":" }","id":370}],"id":369}],"id":368},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":3,"textContent":"}","id":373}],"id":372}],"id":371},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"","id":377}],"id":376}],"id":375}],"id":374},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"ReactDOM","id":381}],"id":380},{"type":3,"textContent":".","id":382},{"type":2,"tagName":"span","attributes":{"class":"cm-property"},"childNodes":[{"type":3,"textContent":"render","id":384}],"id":383},{"type":3,"textContent":"(","id":385},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"<","id":387}],"id":386},{"type":2,"tagName":"span","attributes":{"class":"cm-tag"},"childNodes":[{"type":3,"textContent":"App","id":389}],"id":388},{"type":3,"textContent":" ","id":390},{"type":2,"tagName":"span","attributes":{"class":"cm-tag cm-bracket"},"childNodes":[{"type":3,"textContent":"/>","id":392}],"id":391},{"type":3,"textContent":", ","id":393},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"document","id":395}],"id":394},{"type":3,"textContent":".","id":396},{"type":2,"tagName":"span","attributes":{"class":"cm-variable"},"childNodes":[{"type":3,"textContent":"querySelector","id":398}],"id":397},{"type":3,"textContent":"(","id":399},{"type":2,"tagName":"span","attributes":{"class":"cm-string"},"childNodes":[{"type":3,"textContent":"'.output'","id":401}],"id":400},{"type":3,"textContent":"));","id":402}],"id":379}],"id":378},{"type":2,"tagName":"pre","attributes":{"class":" CodeMirror-line ","role":"presentation"},"childNodes":[{"type":2,"tagName":"span","attributes":{"role":"presentation","style":"padding-right: 0.1px;"},"childNodes":[{"type":2,"tagName":"span","attributes":{"cm-text":""},"childNodes":[{"type":3,"textContent":"","id":406}],"id":405}],"id":404}],"id":403}],"id":72}],"id":65}],"id":64}],"id":63}],"id":62},{"type":2,"tagName":"div","attributes":{"style":"position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 679px;"},"childNodes":[],"id":407},{"type":2,"tagName":"div","attributes":{"class":"CodeMirror-gutters","style":"display: none; height: 694px;"},"childNodes":[],"id":408}],"id":61}],"id":52}],"id":51},{"type":3,"textContent":"\n ","id":409}],"id":49},{"type":2,"tagName":"div","attributes":{"class":"gutter gutter-vertical","style":"height: 2px;"},"childNodes":[],"id":410},{"type":2,"tagName":"div","attributes":{"class":"editor-section","style":"height: calc(30% - 1px);"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"editor-section output","id":"output","style":"float: left; width: calc(50% - 1px);"},"childNodes":[{"type":2,"tagName":"section","attributes":{},"childNodes":[{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"Time ","id":415},{"type":3,"textContent":"0","id":416}],"id":414},{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"Counter ","id":418},{"type":3,"textContent":"0","id":419}],"id":417},{"type":2,"tagName":"button","attributes":{},"childNodes":[{"type":3,"textContent":"click to count","id":421}],"id":420}],"id":413}],"id":412},{"type":2,"tagName":"div","attributes":{"class":"gutter gutter-horizontal","style":"width: 2px;"},"childNodes":[],"id":422},{"type":2,"tagName":"div","attributes":{"class":"editor-section console","style":"float: left; width: calc(50% - 1px);"},"childNodes":[{"type":2,"tagName":"div","attributes":{"class":"centered"},"childNodes":[{"type":2,"tagName":"div","attributes":{},"childNodes":[{"type":3,"textContent":"console.log(...)","id":426}],"id":425}],"id":424}],"id":423}],"id":411}],"id":48},{"type":3,"textContent":"\n ","id":427}],"id":32},{"type":3,"textContent":"\n\n ","id":428},{"type":2,"tagName":"script","attributes":{},"childNodes":[{"type":3,"textContent":"SCRIPT_PLACEHOLDER","id":430}],"id":429},{"type":3,"textContent":"\n ","id":431},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/static/demoit/demoit.js"},"childNodes":[],"id":432},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/editor.js"},"childNodes":[],"id":433},{"type":3,"textContent":"\n\n\n","id":434},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/react-16.7.0-alpha.0.js"},"childNodes":[],"id":435},{"type":2,"tagName":"script","attributes":{"src":"https://demoit.app/e/resources/react-dom.16.7.0-alpha.0.js"},"childNodes":[],"id":436}],"id":18}],"id":3}],"id":1},"initialOffset":{"left":0,"top":0}},"timestamp":1544756766761,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":69,"attributes":{"style":""}}],"removes":[],"adds":[]},"timestamp":1544756767101,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":1158,"y":93,"id":55,"timeOffset":-1}]},"timestamp":1544756767119,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[{"id":416,"value":"1"}],"attributes":[],"removes":[],"adds":[]},"timestamp":1544756767141,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":1,"positions":[{"x":1019,"y":171,"id":174,"timeOffset":-469},{"x":934,"y":230,"id":207,"timeOffset":-435},{"x":921,"y":239,"id":210,"timeOffset":-403},{"x":926,"y":238,"id":207,"timeOffset":-377}]},"timestamp":1544756767620,"sessionId":"8dda0c07-b950-47ec-a5ea-3d25746042bf"},{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id"