Move example code into example/ dir

So that it can be used as a base for generating glitch projects

.gitignore

@@ -7,3 +7,4 @@
 .tern-port
 /src/collab/demo-instances.json
 /CHANGELOG.md
+/example/build/

Makefile

@@ -36,7 +36,7 @@ public/examples/prosemirror.js: bin/library.js $(foreach LIB,$(CORE),$(wildcard
 	mkdir -p $(dir $@)
 	node bin/build-library.js > $@
 
-public/examples/%/example.js: pages/examples/%/example.js
+public/examples/%/example.js: example/%/index.js
 	mkdir -p $(dir $@)
 	node bin/build-example.js $< > $@
 

example/basic/index.html

@@ -0,0 +1,20 @@
+<div id=editor style="margin-bottom: 23px"></div>
+
+<div style="display: none" id="content">
+  <h3>Hello ProseMirror</h3>
+
+  <p>This is editable text. You can focus it and start typing.</p>
+
+  <p>To apply styling, you can select a piece of text and manipulate
+  its styling from the menu. The basic schema
+  supports <em>emphasis</em>, <strong>strong
+  text</strong>, <a href="http://marijnhaverbeke.nl/blog">links</a>, <code>code
+  font</code>, and <img src="/img/smiley.png"> images.</p>
+
+  <p>Block-level structure can be manipulated with key bindings (try
+  ctrl-shift-2 to create a level 2 heading, or enter in an empty
+  textblock to exit the parent block), or through the menu.</p>
+
+  <p>Try using the “list” item in the menu to wrap this paragraph in
+  a numbered list.</p>
+</div>

example/codemirror/index.html

@@ -0,0 +1,24 @@
+<div id="editor"></div>
+
+<div id=content style="display: none">
+<h3>The code block is a code editor</h3>
+<p>This editor has been wired up to render code blocks as instances of
+the <a href="http://codemirror.net">CodeMirror</a> code editor, which
+provides syntax highlighting, auto-indentation, and similar.</p>
+<pre>
+function max(a, b) {
+  return a > b ? a : b
+}</pre>
+<p>The content of the code editor is kept in sync with the content of
+the code block in the rich text editor, so that it is as if you're
+directly editing the outer document, using a more convenient
+interface.</p>
+</div>
+
+<style>
+  .CodeMirror {
+    border: 1px solid #eee;
+    height: auto;
+  }
+  .CodeMirror pre { white-space: pre !important }
+</style>

example/collab/index.html

@@ -0,0 +1,139 @@
+<style>
+.subtle { color: #777 }
+
+.comment { background-color: #ff8 }
+.currentComment { background-color: #fe0 }
+
+.commentList, .commentText {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+.tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+  width: 0;
+  overflow: visible;
+  vertical-align: bottom;
+}
+
+.ProseMirror ul.commentList {
+  font-family: "Source Sans Pro";
+  font-size: 16px;
+  width: 15em;
+  position: absolute;
+  top: calc(100% + 8px);
+  left: -2em;
+  font-size: 1rem;
+  color: black;
+  background: white;
+  font-weight: normal;
+  border: 1px solid #888;
+  border-radius: 5px;
+  z-index: 10;
+  padding: 0;
+}
+
+ul.commentList::before {
+  border: 5px solid #888;
+  border-top-width: 0px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  position: absolute;
+  top: -5px;
+  left: calc(2em - 6px);
+  content: " ";
+  height: 0;
+  width: 0;
+}
+
+li.commentText {
+  padding: 2px 20px 2px 5px;
+  position: relative;
+  pointer-events: auto;
+  margin: 0;
+}
+
+li.commentText + li.commentText {
+  border-top: 1px solid silver;
+}
+
+.commentDelete {
+  position: absolute;
+  right: 0;
+  border: 0;
+  font: inherit;
+  display: inline;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.commentDelete:hover {
+  color: #f88;
+}
+
+.doclist {
+  z-index: 3;
+  display: block;
+  padding: 2px 2px;
+  margin: 0;
+  border: 1px solid silver;
+  position: absolute;
+  background: white;
+  font-size: 90%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  max-height: 15em;
+  overflow-y: auto;
+}
+
+.doclist li {
+  display: block;
+  padding: 1px 3px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.doclist li:hover {
+  background: #5ae;
+  color: white;
+}
+
+.docinfo {
+  position: relative;
+  color: #555;
+}
+
+.ProseMirror-report {
+  position: fixed;
+  top: 0; right: 0; left: 0;
+  border-width: 0;
+  border-style: solid;
+  border-bottom-width: 1px;
+  padding: 3px 27px 5px;
+  white-space: pre;
+  z-index: 1000;
+}
+
+.ProseMirror-report-fail {
+  background: rgb(255, 230, 230);
+  border-color: rgb(200, 150, 150);
+}
+
+.ProseMirror-report-delay {
+  background: rgb(255, 255, 200);
+  border-color: rgb(200, 200, 120);
+}
+</style>
+
+<div id=editor style="margin-bottom: 0"></div>
+
+<div class=docinfo>
+  Connected to: <span id="connected">
+    <span id="docname">None</span>
+    <span id="users"></span>
+    <button type=button id="changedoc">Change</button>
+  </span>
+</div>

example/collab/index.js

@@ -0,0 +1 @@
+import "../../src/collab/client/collab.js"

example/dino/index.html

@@ -0,0 +1,15 @@
+<style>
+  img.dinosaur { height: 40px; vertical-align: bottom; border: 1px solid #0ae; border-radius: 4px; background: #ddf6ff }
+</style>
+
+<div id="editor"></div>
+
+<div id="content" style="display: none">
+  <p>This is your dinosaur-enabled editor. The insert menu allows you
+  to insert dinosaurs.</p>
+  <p>This paragraph <img class=dinosaur dino-type="stegosaurus">, for example,
+  <img class=dinosaur dino-type="triceratops">
+  is full <img class=dinosaur dino-type="tyrannosaurus"> of
+  dinosaurs.</p>
+  <p>Dinosaur nodes can be selected, copied, pasted, dragged, and so on.</p>
+</div>

example/footnote/index.html

@@ -0,0 +1,47 @@
+<style>
+  .ProseMirror {
+    counter-reset: prosemirror-footnote;
+  }
+  footnote {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+  }
+  footnote::after {
+    content: counter(prosemirror-footnote);
+    vertical-align: super;
+    font-size: 75%;
+    counter-increment: prosemirror-footnote;
+  }
+  .ProseMirror-hideselection .footnote-tooltip *::selection { background-color: transparent; }
+  .ProseMirror-hideselection .footnote-tooltip *::-moz-selection { background-color: transparent; }
+  .footnote-tooltip {
+    cursor: auto;
+    position: absolute;
+    left: -30px;
+    top: calc(100% + 10px);
+    background: silver;
+    padding: 3px;
+    border-radius: 2px;
+    width: 500px;
+  }
+  .footnote-tooltip::before {
+    border: 5px solid silver;
+    border-top-width: 0px;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    position: absolute;
+    top: -5px;
+    left: 27px;
+    content: " ";
+    height: 0;
+    width: 0;
+  }
+</style>
+
+<div id="editor"></div>
+
+<div id="content" style="display: none">
+  <p>This paragraph has a footnote<footnote>Which is a piece of text placed at the bottom of a page or chapter, providing additional <em>comments</em> or <em>citations</em>.</footnote> in it. And another<footnote>Some more footnote text.</footnote> one.</p>
+  <p>Move onto or click on a footnote number to edit it.</p>
+</div>

example/lint/index.html

@@ -0,0 +1,24 @@
+<style>
+  #editor { position: relative }
+  .problem { background: #fdd; border-bottom: 1px solid #f22; margin-bottom: -1px; }
+  .lint-icon {
+    display: inline-block; position: absolute; right: 2px; cursor: pointer;
+    border-radius: 100px; background: #f22; color: white; font-family: times, georgia, serif;
+    font-size: 15px; font-weight: bold; width: 1.1em; height: 1.1em;
+    text-align: center; padding-left: .5px; line-height: 1.1em
+  }
+  .lint-icon:before { content: "!" }
+  .ProseMirror { padding-right: 20px }
+</style>
+
+<div id=editor></div>
+
+<div id=content style="display: none">
+  <h3>Lint example</h3>
+  <p>This is a sentence ,but the comma isn't in the right place.</p>
+  <h5>Too-minor header</h5>
+  <p>This is an image <img src="/img/smiley.png"> without alt text.
+  You can hover over the icons on the right to see what the
+  problem is, click them to select the relevant text, and, obviously,
+  double-click them to automatically fix it (if supported).</p>
+</div>

example/markdown/index.html

@@ -0,0 +1,15 @@
+<style>
+  .ProseMirror { height: 120px; overflow-y: auto; box-sizing: border-box; -moz-box-sizing: border-box }
+  textarea { width: 100%; height: 123px; border: 1px solid silver; box-sizing: border-box; -moz-box-sizing: border-box; padding: 3px 10px;
+             border: none; outline: none; font-family: inherit; font-size: inherit }
+  .ProseMirror-menubar-wrapper, #markdown textarea { display: block; margin-bottom: 4px }
+</style>
+
+<div id="editor" style="margin-bottom: 0"></div>
+<div style="text-align: center">
+  <label style="border-right: 1px solid silver">
+    Markdown <input type=radio name=inputformat value=markdown checked>&nbsp;</label>
+  <label>&nbsp;<input type=radio name=inputformat value=prosemirror> WYSIWYM</label>
+</div>
+
+<div style="display: none"><textarea id="content">This is a comment written in [Markdown](http://commonmark.org). *You* may know the syntax for inserting a link, but does your whole audience?&#13;&#13;So you can give people the **choice** to use a more familiar, discoverable interface.</textarea></div>

example/menu/index.html

@@ -0,0 +1,28 @@
+<style>
+  .menubar {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    line-height: 0.1;
+  }
+  .menuicon {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    color: #888;
+    line-height: 1;
+    padding: 0 7px;
+    margin: 1px;
+    cursor: pointer;
+    text-align: center;
+    min-width: 1.4em;
+  }
+  .strong, .heading { font-weight: bold; }
+  .em { font-style: italic; }
+
+  #editor { padding-top: 0 }
+</style>
+
+<div id=editor></div>
+
+<div style="display: none" id=content>
+  <h3>Simple editor</h3>
+  <p>With a very crude menu bar.
+</div>

example/schema/index.html

@@ -0,0 +1,39 @@
+<!-- inline{ -->
+<p>Inline editor: <span id="text-editor"></span></p>
+<!-- } -->
+
+<!-- note{ -->
+<style>
+  #text-editor { background-color: rgba(0, 0, 0, 0.05); padding: 0 }
+  .ProseMirror { min-height: none !important }
+  .ProseMirror a { text-decoration: underline; }
+  note, notegroup { display: block; border: 1px solid silver; border-radius: 3px; padding: 3px 6px; margin: 5px 0; }
+  notegroup { border-color: #66f }
+  p.boring { background: #eee; color: #444; }
+  shouting { display: inline; text-transform: uppercase; font-weight: bold; }
+  star { display: inline; font-size: 190%; line-height: 1; vertical-align: -10%; color: #a8f; -webkit-text-stroke: 1px #75b; }
+</style>
+
+<div id=note-editor></div>
+<!-- } -->
+
+<!-- star{ -->
+<div id="star-editor" class=editor></div>
+
+<div style="display: none">
+  <div id="text-content">Such as this sentence.</div>
+  <div id="note-content">
+    <note>Do laundry</note>
+    <note>Water the tomatoes</note>
+    <notegroup>
+      <note>Buy flour</note>
+      <note>Get toilet paper</note>
+    </notegroup>
+  </div>
+  <div id="star-content">
+    <p>This is a <star></star>nice<star></star> paragraph, it can have <shouting>anything</shouting> in it.</p>
+    <p class=boring>This paragraph is boring, it can't have anything.</p>
+    <p>Press ctrl/cmd-space to insert a star, ctrl/cmd-b to toggle shouting, and ctrl/cmd-q to add or remove a link.</p>
+  </div>
+</div>
+<!-- } -->