Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Add deprecated examples #824

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Expand Up @@ -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/
Expand Down
2 changes: 1 addition & 1 deletion docs/APIReference-Data-Conversion.md
Expand Up @@ -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).
2 changes: 1 addition & 1 deletion docs/APIReference-Editor.md
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/Advanced-Topics-Block-Components.md
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions docs/Advanced-Topics-Decorators.md
Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions docs/Advanced-Topics-Entities.md
Expand Up @@ -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.

Expand Down Expand Up @@ -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.
6 changes: 3 additions & 3 deletions docs/Advanced-Topics-Inline-Styles.md
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/Advanced-Topics-Managing-Focus.md
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/QuickStart-API-Basics.md
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/QuickStart-Rich-Styling.md
Expand Up @@ -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
Expand Down
Expand Up @@ -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;">
Expand All @@ -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';

Expand Down
Expand Up @@ -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';

Expand Down
Expand Up @@ -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';

Expand Down
12 changes: 6 additions & 6 deletions examples/link/link.html → examples/draft-0-10-0/link/link.html
Expand Up @@ -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';

Expand Down
Expand Up @@ -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';

Expand Down
Expand Up @@ -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';

Expand Down
12 changes: 6 additions & 6 deletions examples/rich/rich.html → examples/draft-0-10-0/rich/rich.html
Expand Up @@ -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';

Expand Down
Expand Up @@ -2,7 +2,7 @@
"private": true,
"scripts": {
"start": "babel-node ./server.js",
"postinstall": "npm install ../.."
"postinstall": "npm install ../../.."
},
"dependencies": {
"babel": "5.8.23",
Expand Down
Expand Up @@ -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';

Expand Down