Show output on the development page

Adds an extra pane to show the current HTML of the editor, which can be handy during development.
dalferth · Oct 27, 2022 · 001b1d7 · 001b1d7
1 parent bcd69bd
commit 001b1d7
Showing 1 changed file with 23 additions and 1 deletion.
diff --git a/assets/index.html b/assets/index.html
@@ -8,10 +8,28 @@
     <link rel="icon" href="data:,">
     <link rel="stylesheet" type="text/css" href="trix.css">
     <style type="text/css">
+      * {
+        box-sizing: border-box;
+      }
+
       main {
         margin: 20px auto;
         max-width: 700px;
       }
+
+      #output {
+        margin: 1rem 0 0;
+      }
+
+      #output textarea {
+        width: 100%;
+        height: 6rem;
+        resize: vertical;
+        font-family: monospace;
+        border-radius: 5px;
+        border: solid 1px #444;
+        padding: 10px;
+      }
     </style>
     <script type="module" src="trix.esm.js"></script>
     <script type="module" src="inspector.js"></script>
@@ -56,7 +74,11 @@
   </head>
   <body>
     <main>
-      <trix-editor autofocus class="trix-content"></trix-editor>
+      <trix-editor autofocus class="trix-content" input="input"></trix-editor>
+      <details id="output">
+        <summary>Output</summary>
+        <textarea readonly id="input"></textarea>
+      </details>
     </main>
   </body>
 </html>