add to demo: svg, comment, style, script

diff --git a/demo.html b/demo.html
index 4559b7b..6d10f46 100644 (file)
--- a/demo.html
+++ b/demo.html
@@ -23,15 +23,23 @@
        <h1>Peach HTML5 Editor test page (compiled version)</h1>
        <p>This color scheme is just temporary, for testing the cursor and annotations on a variaty of background colors</p>
        <form action="#" method="get">
-       <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in">&lt;H1>Headline!&lt;/h1>&lt;p&gt;  normal text that is hopefully long enough that it will wrap     around\rand
-spill onto a second line.&lt;/p>    &lt;p  >Text   with lots of extra whitespace
+       <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in">
+       &lt;script&gt;console.log("this code should not run in the editor")&lt;/script&gt;
+       &lt;!-- comments are preserved --&gt;
+       &lt;style&gt;h1 { color: #fdf; }&lt;/style&gt;
+       &lt;H1 style="padding: 0; margin: 0 0 7px 0"&gt;Headline!&lt;/h1&gt;
 
+       &lt;div&gt;SVG works: &lt;svg style="display: inline-block; vertical-align: bottom"xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 55 55"&gt;&lt;path d="M27.5 0l6.57 19.87 20.93.11-16.868 12.39 6.364 19.938L27.5 40.094 10.504 52.308l6.364-19.938L0 19.98l20.93-.11z" overflow="visible" fill-rule="evenodd"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;
 
+       &lt;p&gt;  normal text that is hopefully long enough that it will wrap  around\rand
+spill onto a second line.&lt;/p&gt;    &lt;p  &gt;Text   with lots of extra whitespace
 
-       in the original html  and no closing p tag       &lt;p>normal paragraph&lt;/p>
-       &lt;p>testing &amp;lt;br&amp;gt; e f&lt;br>g   &lt;br>  h i j &lt;a href="http://example.com">Click me!</a> o p q r&lt;/p>
-       &lt;div style="border: 2px solid #fab">
-       &lt;p> y z     &lt;strong&gt;Bold &lt;em&gt; Italic + Bold&lt;/strong&gt; Italic &lt;/em&gt; Normal&lt;/p&gt;
+
+
+       in the original html  and no closing p tag       &lt;p&gt;normal paragraph&lt;/p&gt;
+       &lt;p&gt;testing &amp;lt;br&amp;gt; e f&lt;br&gt;g   &lt;br&gt;  h i j &lt;a href="http://example.com"&gt;Click me!&lt;/a&gt; o p q r&lt;/p&gt;
+       &lt;div style="border: 2px solid #fab"&gt;
+       &lt;p&gt; y z     &lt;strong&gt;Bold &lt;em&gt; Italic + Bold&lt;/strong&gt; Italic &lt;/em&gt; Normal&lt;/p&gt;
 &lt;p style="white-space: pre-wrap"&gt;this &amp;lt;p&amp;gt; has     white-space: pre-wrap&lt;/p&gt;
 
 &lt;div style="color: black; background: white;"&gt;
@@ -43,9 +51,9 @@ spill onto a second line.&lt;/p>    &lt;p  >Text   with lots of extra whitespace
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
-&lt;p>  Above, there's a white div containing 3 divs. The third contains a div which contains just a non-breaking space (&amp;amp;nbsp;)&lt;/p>
-&lt;p>final paragraph.&lt;/p>
-&lt;/div>
+&lt;p&gt;  Above, there's a white div containing 3 divs. The third contains a div which contains just a non-breaking space (&amp;amp;nbsp;)&lt;/p&gt;
+&lt;p&gt;final paragraph.&lt;/p&gt;
+&lt;/div&gt;
        </textarea></p>
        <p><input id="button" type="submit" value="loading..." disabled></p>
        </form>