Improve demo (REPL, sandbox) on the main page (#1615)

* Improve demo (REPL, sandbox) on the main page

* Update button label

* Update textarea styles

* Change input event listeners to change

* Stack editor/render views vertically

* Add animation to options panel

* Open options panel and maximize view when hash is `demo`

* Fix clipboard text building

* Add -ms prefix to flex-direction

* Set width for [type="color"]

* Add macro example to the demo

website/pages/index.html

@@ -25,6 +25,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
     <link rel="stylesheet" href="static/index.css">
 
+    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.1/dist/clipboard.min.js" integrity="sha256-hIvIxeqhGZF+VVeM55k0mJvWpQ6gTkWk3Emc+NmowYA=" crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
     <script defer src="js/index.js" type="text/javascript"></script>
   </head>
@@ -48,14 +49,18 @@
           View on GitHub
         </a>
       </div>
-      <div class="demo" id="demo">
+      <div class="demo">
         <div class="demo-left">
           <div class="demo-instructions">
             <label for="demo-input">Type an expression:</label>
+            <a id="options" aria-label="Options">
+              <svg class="svg-inline--fa fa-cog fa-w-16" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg>
+            </a>
           </div>
           <textarea id="demo-input" spellcheck="false">
-f(x) = \int_{-\infty}^\infty
-    \hat f(\xi)\,e^{2 \pi i \xi x}
+% \f is defined as f(#1) using the macro
+\f{x} = \int_{-\infty}^\infty
+    \hat \f\xi\,e^{2 \pi i \xi x}
     \,d\xi</textarea>
         </div>
         <div class="demo-right">
@@ -118,6 +123,44 @@ f(x) = \int_{-\infty}^\infty
         <br><a href="https://github.com/Khan/KaTeX/blob/master/LICENSE">MIT License</a> · Built from the hard work of <a href="https://github.com/Khan/KaTeX/graphs/contributors">many contributors</a>
       </span>
     </div></div>
+
+    <div id="options-panel">
+      <h3>KaTeX Options</h3>
+      <table>
+        <tr>
+          <td><label for="displayMode">displayMode</label></td>
+          <td><input type="checkbox" id="displayMode" checked/></td>
+        </tr>
+        <tr>
+          <td><label for="throwOnError">throwOnError</label></td>
+          <td><input type="checkbox" id="throwOnError" checked/></td>
+        </tr>
+        <tr>
+          <td><label for="errorColor">errorColor</label></td>
+          <td><input type="color" id="errorColor" value="#cc0000"/></td>
+        </tr>
+        <tr>
+          <td><label for="strict">strict</label></td>
+          <td>
+            <select id="strict">
+              <option value="error">error</option>
+              <option value="warn" selected>warn</option>
+              <option value="ignore">ignore</option>
+            </select>
+          </td>
+        </tr>
+      </table>
+      <h4><label for="macros">macros</label></h4>
+      <textarea id="macros" placeholder="JSON">
+{
+    "\\f": "f(#1)"
+}</textarea>
+
+      <h3>Editor Options</h3>
+      <div><button id="maximize">Maximize editor</button></div>
+      <div><button id="code">Copy KaTeX code</button></div>
+      <div><button id="permalink">Copy Permalink</button></div>
+    </div>
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),