Add deprecated examples (#824)

* Move current examples into draft-0-10-0 dir

* Add examples for version 0.9.1 into draft-0-9-1 dir

* Use unminified version of react in all examples

* Update file paths for examples

* Update paths in gitignore, 'tex' package.json, and draftjs docs

 - updates the .gitignore to ignore node_modules in both the new
   locations of the 'tex' example
 - updates a path in the script used for the draft js docs website,
   which pulls styles from the 'rich' example for some reason
 - updates the path for 'npm install' in the 'tex' examples
 - updates all links in the markdown used to generate the draft js docs.

.gitignore

@@ -2,6 +2,8 @@
 /lib/
 /node_modules/
 /examples/tex/node_modules/
+/examples/draft-0-9-1/tex/node_modules/
+/examples/draft-0-10-0/tex/node_modules/
 /website/build/
 /website/node_modules/
 /website/src/draft-js/lib/

docs/APIReference-Data-Conversion.md

@@ -65,4 +65,4 @@ this.state = {
 };
 ```
 
-Given an HTML fragment, convert it to an array of `ContentBlock` objects. Construct content state from the array of block elements and then update the editor state with it. Full example available [here](https://github.com/facebook/draft-js/blob/8ac72f723fb2d9102db833a9b060dfd66df65652/examples/convertFromHTML/convert.html).
+Given an HTML fragment, convert it to an array of `ContentBlock` objects. Construct content state from the array of block elements and then update the editor state with it. Full example available [here](https://github.com/facebook/draft-js/blob/8ac72f723fb2d9102db833a9b060dfd66df65652/examples/draft-0-9-1/convertFromHTML/convert.html).

docs/APIReference-Editor.md

@@ -39,7 +39,7 @@ placeholder?: string
 Optional placeholder string to display when the editor is empty.
 
 Note: You can use CSS to style or hide your placeholder as needed. For instance,
-in the [rich editor example](https://github.com/facebook/draft-js/tree/master/examples/rich),
+in the [rich editor example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/rich),
 the placeholder is hidden when the user changes block styling in an empty editor.
 This is because the placeholder may not line up with the cursor when the style
 is changed.

docs/Advanced-Topics-Block-Components.md

@@ -16,12 +16,12 @@ Facebook photos or by uploading new images from the desktop. To that end,
 the Draft framework supports custom rendering at the block level, to render
 content like rich media in place of plain text.
 
-The [TeX editor](https://github.com/facebook/draft-js/tree/master/examples/tex)
+The [TeX editor](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/tex)
 in the Draft repository provides a live example of custom block rendering, with
 TeX syntax translated on the fly into editable embedded formula rendering via the
 [KaTeX library](https://khan.github.io/KaTeX/).
 
-A [media example](https://github.com/facebook/draft-js/tree/master/examples/media) is also
+A [media example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/media) is also
 available, which showcases custom block rendering of audio, image, and video.
 
 By using a custom block renderer, it is possible to introduce complex rich

docs/Advanced-Topics-Decorators.md

@@ -12,7 +12,7 @@ want to add to our editor. The Facebook comment input, for example, provides
 blue background highlights for mentions and hashtags.
 
 To support flexibility for custom rich text, Draft provides a "decorator"
-system. The [tweet example](https://github.com/facebook/draft-js/tree/master/examples/tweet)
+system. The [tweet example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/tweet)
 offers a live example of decorators in action.
 
 ## CompositeDecorator
@@ -109,7 +109,7 @@ Note that `props.children` is passed through to the rendered output. This is
 done to ensure that the text is rendered within the decorated `span`.
 
 You can use the same approach for links, as demonstrated in our
-[link example](https://github.com/facebook/draft-js/tree/master/examples/link).
+[link example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/link).
 
 ### Beyond CompositeDecorator
 

docs/Advanced-Topics-Entities.md

@@ -13,9 +13,9 @@ richness beyond styled text to their editors. Links, mentions, and embedded
 content can all be implemented using entities.
 
 In the Draft repository, the
-[link editor](https://github.com/facebook/draft-js/tree/master/examples/link)
+[link editor](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/link)
 and
-[entity demo](https://github.com/facebook/draft-js/tree/master/examples/entity)
+[entity demo](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/entity)
 provide live code examples to help clarify how entities can be used, as well
 as their built-in behavior.
 
@@ -132,5 +132,5 @@ while the latter completely swaps in the new data object.
 The next article in this section covers the usage of decorator objects, which
 can be used to retrieve entities for rendering purposes.
 
-The [link editor example](https://github.com/facebook/draft-js/tree/master/examples/link)
+The [link editor example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/link)
 provides a working example of entity creation and decoration in use.

docs/Advanced-Topics-Inline-Styles.md

@@ -12,8 +12,8 @@ behavior that goes well beyond the bold/italic/underline basics. For instance,
 you may want to support variety with color, font families, font sizes, and more.
 Further, your desired styles may overlap or be mutually exclusive.
 
-The [Rich Editor](http://github.com/facebook/draft-js/tree/master/examples/rich) and
-[Colorful Editor](http://github.com/facebook/draft-js/tree/master/examples/color)
+The [Rich Editor](http://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/rich) and
+[Colorful Editor](http://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/color)
 examples demonstrate complex inline style behavior in action.
 
 ### Model
@@ -79,7 +79,7 @@ defaults, or you may override the default style objects for the basic styles.
 
 Within your `Editor` use case, you may provide the `customStyleMap` prop
 to define your style objects. (See
-[Colorful Editor](http://github.com/facebook/draft-js/tree/master/examples/color)
+[Colorful Editor](http://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/color)
 for a live example.)
 
 For example, you may want to add a `'STRIKETHROUGH'` style. To do so, define a

docs/Advanced-Topics-Managing-Focus.md

@@ -36,5 +36,5 @@ of the click event. It is therefore recommended that you use a click listener
 on your container component, and use the `focus()` method described above to
 apply focus to your editor.
 
-The [plaintext editor example](https://github.com/facebook/draft-js/tree/master/examples/plaintext),
+The [plaintext editor example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/plaintext),
 for instance, uses this pattern.

docs/QuickStart-API-Basics.md

@@ -8,7 +8,7 @@ permalink: docs/quickstart-api-basics.html
 ---
 
 This document provides an overview of the basics of the `Draft` API. A
-[working example](https://github.com/facebook/draft-js/tree/master/examples/plaintext)
+[working example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/plaintext)
 is also available to follow along.
 
 ## Controlled Inputs

docs/QuickStart-Rich-Styling.md

@@ -10,7 +10,7 @@ permalink: docs/quickstart-rich-styling.html
 Now that we have established the basics of the top-level API, we can go a step
 further and examine how basic rich styling can be added to a `Draft` editor.
 
-A [rich text example](https://github.com/facebook/draft-js/tree/master/examples/rich)
+A [rich text example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-9-1/rich)
 is also available to follow along.
 
 ## EditorState: Yours to Command

examples/color/color.html → examples/draft-0-10-0/color/color.html

@@ -16,7 +16,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Color</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
   </head>
   <body>
     <div style="font-family: Georgia, serif; font-size: 15px; padding: 20px; width: 600px; line-height: 24px;">
@@ -26,12 +26,12 @@
       color may be active at any time.
     </div>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.min.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
-    <script src="../../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';
 

examples/convertFromHTML/convert.html → examples/draft-0-10-0/convertFromHTML/convert.html

@@ -16,15 +16,15 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Convert from HTML</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
   </head>
   <body>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';
 

examples/entity/entity.html → examples/draft-0-10-0/entity/entity.html

@@ -16,16 +16,16 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Entity Editor</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
   </head>
   <body>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
-    <script src="../../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';
 

examples/link/link.html → examples/draft-0-10-0/link/link.html

@@ -16,16 +16,16 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Link Editor</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
   </head>
   <body>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
-    <script src="../../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';
 

examples/media/media.html → examples/draft-0-10-0/media/media.html

@@ -16,15 +16,15 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Media Editor</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
   </head>
   <body>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';
 

examples/plaintext/plaintext.html → examples/draft-0-10-0/plaintext/plaintext.html

@@ -16,16 +16,16 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Plain Text Editor</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
   </head>
   <body>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
-    <script src="../../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';
 

examples/rich/rich.html → examples/draft-0-10-0/rich/rich.html

@@ -16,20 +16,20 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Rich Text</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
     <link rel="stylesheet" href="RichEditor.css" />
     <style>
       #target { width: 600px; }
     </style>
   </head>
   <body>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.min.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
-    <script src="../../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';
 

examples/tex/package.json → examples/draft-0-10-0/tex/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "start": "babel-node ./server.js",
-    "postinstall": "npm install ../.."
+    "postinstall": "npm install ../../.."
   },
   "dependencies": {
     "babel": "5.8.23",

examples/tweet/tweet.html → examples/draft-0-10-0/tweet/tweet.html

@@ -16,16 +16,16 @@
   <head>
     <meta charset="utf-8" />
     <title>Draft • Decorators</title>
-    <link rel="stylesheet" href="../../dist/Draft.css" />
+    <link rel="stylesheet" href="../../../dist/Draft.css" />
   </head>
   <body>
     <div id="target"></div>
-    <script src="../../node_modules/react/dist/react.js"></script>
-    <script src="../../node_modules/react-dom/dist/react-dom.js"></script>
-    <script src="../../node_modules/immutable/dist/immutable.js"></script>
-    <script src="../../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="../../../node_modules/react/dist/react.js"></script>
+    <script src="../../../node_modules/react-dom/dist/react-dom.js"></script>
+    <script src="../../../node_modules/immutable/dist/immutable.js"></script>
+    <script src="../../../node_modules/es6-shim/es6-shim.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
-    <script src="../../dist/Draft.js"></script>
+    <script src="../../../dist/Draft.js"></script>
     <script type="text/babel">
       'use strict';