add SerializeAddon in demo page

demo/client.ts

@@ -43,6 +43,7 @@ declare let window: IWindowWithTerminal;
 let term;
 let fitAddon: FitAddon;
 let searchAddon: SearchAddon;
+let serializeAddon: SerializeAddon;
 let protocol;
 let socketURL;
 let socket;
@@ -96,6 +97,7 @@ if (document.location.pathname === '/test') {
   createTerminal();
   document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
   document.getElementById('webgl').addEventListener('click', () => term.loadAddon(new WebglAddon()));
+  document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
 }
 
 function createTerminal(): void {
@@ -116,6 +118,8 @@ function createTerminal(): void {
   typedTerm.loadAddon(searchAddon);
   fitAddon = new FitAddon();
   typedTerm.loadAddon(fitAddon);
+  serializeAddon = new SerializeAddon();
+  typedTerm.loadAddon(serializeAddon);
 
   window.term = term;  // Expose `term` to window for debugging purposes
   term.onResize((size: { cols: number, rows: number }) => {
@@ -323,3 +327,16 @@ function updateTerminalSize(): void {
   terminalContainer.style.height = height;
   fitAddon.fit();
 }
+
+function serializeButtonHandler(): void {
+  const output = serializeAddon.serialize();
+  const outputString = JSON.stringify(output);
+  console.log('serialize output', outputString);
+
+  document.getElementById('serialize-output').innerText = outputString;
+
+  if ((document.getElementById('write-to-terminal') as HTMLInputElement).checked) {
+    term.reset();
+    term.write(output);
+  }
+}

demo/index.html

@@ -20,6 +20,12 @@
         <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
         <label>Whole word<input type="checkbox" id="whole-word"/></label>
       </p>
+      <div>
+        <h3>SerializeAddon</h3>
+        <button id="serialize">Serialize the content of terminal</button>
+        <label>write to terminal<input type="checkbox" id="write-to-terminal"></label>
+        <label>Output <code id="serialize-output"></code></label>
+      </div>
     </div>
     <div>
       <h3>Options</h3>

demo/style.css

@@ -30,3 +30,9 @@ p {
     padding-left: 20px;
     vertical-align: top;
 }
+
+code {
+    padding: 2px 4px;
+    color: #c7254e;
+    background-color: #f9f2f4;
+}