Skip to content
Browse files

[docs] Ignore generated content

  • Loading branch information...
1 parent 7839780 commit b25762d8bfedf7191dc4ebed6cae5677553524f7 @zpao zpao committed
Showing with 1 addition and 6,854 deletions.
  1. +1 −0 .gitignore
  2. +0 −127 website/src/draft-js/docs/advanced-topics-block-components.js
  3. +0 −66 website/src/draft-js/docs/advanced-topics-block-styling.js
  4. +0 −159 website/src/draft-js/docs/advanced-topics-decorators.js
  5. +0 −143 website/src/draft-js/docs/advanced-topics-entities.js
  6. +0 −119 website/src/draft-js/docs/advanced-topics-inline-styles.js
  7. +0 −82 website/src/draft-js/docs/advanced-topics-issues-and-pitfalls.js
  8. +0 −107 website/src/draft-js/docs/advanced-topics-key-bindings.js
  9. +0 −47 website/src/draft-js/docs/advanced-topics-managing-focus.js
  10. +0 −29 website/src/draft-js/docs/advanced-topics-nested-lists.js
  11. +0 −42 website/src/draft-js/docs/advanced-topics-text-direction.js
  12. +0 −17 website/src/draft-js/docs/advanced/block-components.js
  13. +0 −17 website/src/draft-js/docs/advanced/block-styling.js
  14. +0 −17 website/src/draft-js/docs/advanced/decorators.js
  15. +0 −17 website/src/draft-js/docs/advanced/entities.js
  16. +0 −17 website/src/draft-js/docs/advanced/event-handling.js
  17. +0 −116 website/src/draft-js/docs/advanced/inline-styles.js
  18. +0 −106 website/src/draft-js/docs/advanced/key-bindings.js
  19. +0 −17 website/src/draft-js/docs/advanced/nested-lists.js
  20. +0 −17 website/src/draft-js/docs/advanced/performance.js
  21. +0 −17 website/src/draft-js/docs/advanced/text-direction.js
  22. +0 −17 website/src/draft-js/docs/advanced/undo-redo.js
  23. +0 −17 website/src/draft-js/docs/advanced/unicode.js
  24. +0 −164 website/src/draft-js/docs/api-reference-character-metadata.js
  25. +0 −253 website/src/draft-js/docs/api-reference-content-block.js
  26. +0 −272 website/src/draft-js/docs/api-reference-content-state.js
  27. +0 −53 website/src/draft-js/docs/api-reference-data-conversion.js
  28. +0 −488 website/src/draft-js/docs/api-reference-editor-state.js
  29. +0 −200 website/src/draft-js/docs/api-reference-editor.js
  30. +0 −124 website/src/draft-js/docs/api-reference-entity.js
  31. +0 −215 website/src/draft-js/docs/api-reference-modifier.js
  32. +0 −331 website/src/draft-js/docs/api-reference-selection-state.js
  33. +0 −262 website/src/draft-js/docs/api/character-metadata.js
  34. +0 −239 website/src/draft-js/docs/api/content-block.js
  35. +0 −269 website/src/draft-js/docs/api/content-state.js
  36. +0 −269 website/src/draft-js/docs/api/data-conversion.js
  37. +0 −269 website/src/draft-js/docs/api/drafteditor.js
  38. +0 −488 website/src/draft-js/docs/api/editor-state.js
  39. +0 −269 website/src/draft-js/docs/api/modifier.js
  40. +0 −331 website/src/draft-js/docs/api/selection-state.js
  41. +0 −269 website/src/draft-js/docs/api/transaction-functions.js
  42. +0 −19 website/src/draft-js/docs/guides/an-immutable-model.js
  43. +0 −18 website/src/draft-js/docs/guides/controlled-contenteditable.js
  44. +0 −19 website/src/draft-js/docs/guides/controlling-contenteditable.js
  45. +0 −17 website/src/draft-js/docs/guides/why-draft.js
  46. +0 −17 website/src/draft-js/docs/model/overview.js
  47. +0 −21 website/src/draft-js/docs/model/selection-state.js
  48. +0 −52 website/src/draft-js/docs/overview.js
  49. +0 −82 website/src/draft-js/docs/quickstart-api-basics.js
  50. +0 −119 website/src/draft-js/docs/quickstart-rich-styling.js
  51. +0 −81 website/src/draft-js/docs/quickstart/api-basics.js
  52. +0 −17 website/src/draft-js/docs/quickstart/customizing-your-editor.js
  53. +0 −119 website/src/draft-js/docs/quickstart/decorated-text.js
  54. +0 −118 website/src/draft-js/docs/quickstart/rich-styling.js
  55. +0 −77 website/src/draft-js/docs/quickstart/the-basics.js
View
1 .gitignore
@@ -5,4 +5,5 @@
/website/build/
/website/node_modules/
/website/src/draft-js/lib/
+/website/src/draft-js/docs/
npm-debug.log
View
127 website/src/draft-js/docs/advanced-topics-block-components.js
@@ -1,127 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Draft is designed to solve problems for straightforward rich text interfaces
-like comments and chat messages, but it also powers richer editor experiences
-like [Facebook Notes](https://www.facebook.com/notes/).
-
-Users can embed images within their Notes, either loading from their existing
-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)
-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/).
-
-By using a custom block renderer, it is possible to introduce complex rich
-interactions within the frame of your editor.
-
-## Custom Block Components
-
-Within the \`Editor\` component, one may specify the \`blockRendererFn\` prop.
-This prop function allows a higher-level component to define custom React
-rendering for \`ContentBlock\` objects, based on block type, text, or other
-criteria.
-
-For instance, we may wish to render \`ContentBlock\` objects of type \`'media'\` using
-a custom \`MediaComponent\`.
-
-\`\`\`
-function myBlockRenderer(contentBlock) {
- const type = contentBlock.getType();
- if (type === 'media') {
- return {
- component: MediaComponent,
- props: {
- foo: 'bar',
- },
- };
- }
-}
-
-// Then...
-import {Editor} from 'draft-js';
-const EditorWithMedia = React.createClass({
- ...
- render() {
- return <Editor ... blockRendererFn={myBlockRenderer} />;
- }
-});
-\`\`\`
-
-If no custom renderer object is returned by the \`blockRendererFn\` function,
-\`Editor\` will render the default \`DraftEditorBlock\` text block component.
-
-The \`component\` property defines the component to be used, while the optional
-\`props\` object includes props that will be passed through to the rendered
-custom component.
-
-By defining this function within the context of a higher-level component,
-the props for this custom component may be bound to that component, allowing
-instance methods for custom component props.
-
-## Defining custom block components
-
-Within \`MediaComponent\`, the most likely use case is that you will want to
-retrieve entity metadata to render your custom block. You may apply an entity
-key to the text within a \`'media'\` block during \`EditorState\` management,
-then retrieve the metadata for that key in your custom component \`render()\`
-code.
-
-\`\`\`
-import {Entity} from 'draft-js';
-const MediaComponent = React.createClass({
- render() {
- const {block, foo} = this.props;
- const data = Entity.get(block.getEntityAt(0)).getData();
- // Return a <figure> or some other content using this data.
- }
-});
-\`\`\`
-
-The \`ContentBlock\` object is made available within the custom component, along
-with the props defined at the top level. By extracting entity information from
-the \`ContentBlock\` and the \`Entity\` map, you can obtain the metadata required to
-render your custom component.
-
-_Retrieving the entity from the block is admittedly a bit of an awkward API,
-and is worth revisiting._
-
-## Recommendations and other notes
-
-If your custom block renderer requires mouse interaction, it is often wise
-to temporarily set your \`Editor\` to \`readOnly={true}\` during this
-interaction. In this way, the user does not trigger any selection changes within
-the editor while interacting with the custom block. This should not be a problem
-with respect to editor behavior, since interacting with your custom block
-component is most likely mutually exclusive from text changes within the editor.
-
-The recommendation above is especially important for custom block renderers
-that involve text input, like the TeX editor example.
-
-It is also worth noting that within the Facebook Notes editor, we have not
-tried to perform any special SelectionState rendering or management on embedded
-media, such as rendering a highlight on an embedded photo when selecting it.
-This is in part because of the rich interaction provided on the media
-itself, with resize handles and other controls exposed to mouse behavior.
-
-Since an engineer using Draft has full awareness of the selection state
-of the editor and full control over native Selection APIs, it would be possible
-to build selection behavior on static embedded media if desired. So far, though,
-we have not tried to solve this at Facebook, so we have not packaged solutions
-for this use case into the Draft project at this time.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-block-components","title":"Custom Block Components","layout":"docs","category":"Advanced Topics","next":"advanced-topics-inline-styles","permalink":"docs/advanced-topics-block-components.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
66 website/src/draft-js/docs/advanced-topics-block-styling.js
@@ -1,66 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Within \`Editor\`, some block types are given default CSS styles to limit the amount
-of basic configuration required to get engineers up and running with custom
-editors.
-
-By defining a \`blockStyleFn\` prop function for a \`Editor\`, it is possible
-to specify classes that should be applied to blocks at render time.
-
-## DraftStyleDefault.css
-
-The Draft library includes default block CSS styles within
-[DraftStyleDefault.css](https://github.com/facebook/draft-js/blob/master/src/component/utils/DraftStyleDefault.css). _(Note that the annotations on the CSS class names are
-artifacts of Facebook's internal CSS module management system._
-
-These CSS rules are largely devoted to providing default styles for list items,
-without which callers would be responsible for managing their own default list
-styles.
-
-## blockStyleFn
-
-The \`blockStyleFn\` prop on \`Editor\` allows you to define CSS classes to
-style blocks at render time. For instance, you may wish to style \`'blockquote'\`
-type blocks with fancy italic text.
-
-\`\`\`
-function myBlockStyleFn(contentBlock) {
- const type = contentBlock.getType();
- if (type === 'blockquote') {
- return 'superFancyBlockquote';
- }
-}
-
-// Then...
-import {Editor} from 'draft-js';
-const EditorWithFancyBlockquotes = React.createClass({
- render() {
- return <Editor ... blockStyleFn={myBlockStyleFn} />;
- }
-});
-\`\`\`
-
-Then in your own CSS:
-
-\`\`\`
-.superFancyBlockquote {
- color: #999;
- font-family: 'Hoefler Text', Georgia, serif;
- font-style: italic;
- text-align: center;
-}
-\`\`\`
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-block-styling","title":"Block Styling","layout":"docs","category":"Advanced Topics","next":"advanced-topics-block-components","permalink":"docs/advanced-topics-block-styling.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
159 website/src/draft-js/docs/advanced-topics-decorators.js
@@ -1,159 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Inline and block styles aren't the only kind of rich styling that we might
-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)
-offers a live example of decorators in action.
-
-## CompositeDecorator
-
-The decorator concept is based on scanning the contents of a given
-[ContentBlock](/draft-js/docs/api-reference-content-block.html)
-for ranges of text that match a defined strategy, then rendering them
-with a specified React component.
-
-You can use the \`CompositeDecorator\` class to define your desired
-decorator behavior. This class allows you to supply multiple \`DraftDecorator\`
-objects, and will search through a block of text with each strategy in turn.
-
-Decorators are stored within the \`EditorState\` record. When creating a new
-\`EditorState\` object, e.g. via \`EditorState.createEmpty()\`, a decorator may
-optionally be provided.
-
-> Under the hood
->
-> When contents change in a Draft editor, the resulting \`EditorState\` object
-> will evaluate the new \`ContentState\` with its decorator, and identify ranges
-> to be decorated. A complete tree of blocks, decorators, and inline styles is
-> formed at this time, and serves as the basis for our rendered output.
->
-> In this way, we always ensure that as contents change, rendered decorations
-> are in sync with our \`EditorState\`.
-
-In the "Tweet" editor example, for instance, we use a \`CompositeDecorator\` that
-searches for @-handle strings as well as hashtag strings:
-
-\`\`\`
-const compositeDecorator = new CompositeDecorator([
- {
- strategy: handleStrategy,
- component: HandleSpan,
- },
- {
- strategy: hashtagStrategy,
- component: HashtagSpan,
- },
-]);
-\`\`\`
-
-This composite decorator will first scan a given block of text for @-handle
-matches, then for hashtag matches.
-
-\`\`\`
-// Note: these aren't very good regexes, don't use them!
-const HANDLE_REGEX = /\\@[\\w]+/g;
-const HASHTAG_REGEX = /\\#[\\w\\u0590-\\u05ff]+/g;
-
-function handleStrategy(contentBlock, callback) {
- findWithRegex(HANDLE_REGEX, contentBlock, callback);
-}
-
-function hashtagStrategy(contentBlock, callback) {
- findWithRegex(HASHTAG_REGEX, contentBlock, callback);
-}
-
-function findWithRegex(regex, contentBlock, callback) {
- const text = contentBlock.getText();
- let matchArr, start;
- while ((matchArr = regex.exec(text)) !== null) {
- start = matchArr.index;
- callback(start, start + matchArr[0].length);
- }
-}
-\`\`\`
-
-The strategy functions execute the provided callback with the \`start\` and
-\`end\` values of the matching range of text.
-
-## Decorator Components
-
-For your decorated ranges of text, you must define a React component to use
-to render them. These tend to be simple \`span\` elements with CSS classes or
-styles applied to them.
-
-In our current example, the \`CompositeDecorator\` object names \`HandleSpan\` and
-\`HashtagSpan\` as the components to use for decoration. These are just basic
-stateless components:
-
-\`\`\`
-const HandleSpan = (props) => {
- return <span {...props} style={styles.handle}>{props.children}</span>;
-};
-
-const HashtagSpan = (props) => {
- return <span {...props} style={styles.hashtag}>{props.children}</span>;
-};
-\`\`\`
-
-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).
-
-### Beyond CompositeDecorator
-
-The decorator object supplied to an \`EditorState\` need only match the expectations
-of the
-[DraftDecoratorType](https://github.com/facebook/draft-js/blob/master/src/model/decorators/DraftDecoratorType.js)
-Flow type definition, which means that you can create any decorator classes
-you wish, as long as they match the expected type -- you are not bound by
-\`CompositeDecorator\`.
-
-## Setting new decorators
-
-Further, it is acceptable to set a new \`decorator\` value on the \`EditorState\`
-on the fly, during normal state propagation -- through immutable means, of course.
-
-This means that during your app workflow, if your decorator becomes invalid or
-requires a modification, you can create a new decorator object (or use
-\`null\` to remove all decorations) and \`EditorState.set()\` to make use of the new
-decorator setting.
-
-For example, if for some reason we wished to disable the creation of @-handle
-decorations while the user interacts with the editor, it would be fine to do the
-following:
-
-\`\`\`
-function turnOffHandleDecorations(editorState) {
- const onlyHashtags = new CompositeDecorator([{
- strategy: hashtagStrategy,
- component: HashtagSpan,
- }]);
- return EditorState.set(editorState, {decorator: onlyHashtags});
-}
-\`\`\`
-
-The \`ContentState\` for this \`editorState\` will be re-evaluated with the new
-decorator, and @-handle decorations will no longer be present in the next
-render pass.
-
-Again, this remains memory-efficient due to data persistence across immutable
-objects.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-decorators","title":"Decorators","layout":"docs","category":"Advanced Topics","next":"advanced-topics-key-bindings","permalink":"docs/advanced-topics-decorators.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
143 website/src/draft-js/docs/advanced-topics-entities.js
@@ -1,143 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-This article discusses the Entity system, which Draft uses for annotating
-ranges of text with metadata. Entities enable engineers to introduce levels of
-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)
-and
-[entity demo](https://github.com/facebook/draft-js/tree/master/examples/entity)
-provide live code examples to help clarify how entities can be used, as well
-as their built-in behavior.
-
-The [Entity API Reference](/draf-js/docs/api-reference-entity.html) provides
-details on the static methods to be used when creating, retrieving, or updating
-entity objects.
-
-## Introduction
-
-An entity is an object that represents metadata for a range of text within a
-Draft editor. It has three properties:
-
-- **type**: A string that indicates what kind of entity it is, e.g. \`'LINK'\`,
-\`'MENTION'\`, \`'PHOTO'\`.
-- **mutability**: Not to be confused with immutability a la \`immutable-js\`, this
-property denotes the behavior of a range of text annotated with this entity
-object when editing the text range within the editor. This is addressed in
-greater detail below.
-- **data**: An optional object containing metadata for the entity. For instance,
-a \`'LINK'\` entity might contain a \`data\` object that contains the \`href\` value
-for that link.
-
-All entities are stored in a single object store within the \`Entity\` module,
-and are referenced by key within \`ContentState\` and React components used to
-decorate annotated ranges. _(We are considering future changes to bring
-the entity store into \`EditorState\` or \`ContentState\`.)_
-
-Using [decorators](/draft-js/docs/advanced-topics-decorators.html) or
-[custom block components](docs/advanced-topics-block-components.html), you can
-add rich rendering to your editor based on entity metadata.
-
-## Creating and Retrieving Entities
-
-Entities should be created using \`Entity.create\`, which accepts the three
-properties above as arguments. This method returns a string key, which can then
-be used to refer to the entity.
-
-This key is the value that should be used when applying entities to your
-content. For instance, the \`Modifier\` module contains an \`applyEntity\` method:
-
-\`\`\`
-const key = Entity.create('LINK', 'MUTABLE', {href: 'http://www.zombo.com'});
-const contentStateWithLink = Modifier.applyEntity(
- contentState,
- targetRange,
- key
-);
-\`\`\`
-
-For a given range of text, then, you can extract its associated entity key by using
-the \`getEntityAt()\` method on a \`ContentBlock\` object, passing in the target
-offset value.
-
-\`\`\`
-const blockWithLinkAtBeginning = contentState.getBlockForKey('...');
-const linkKey = blockWithLinkAtBeginning.getEntityAt(0);
-const linkInstance = Entity.get(linkKey);
-const {href} = linkInstance.getData();
-\`\`\`
-
-## "Mutability"
-
-Entities may have one of three "mutability" values. The difference between them
-is the way they behave when the user makes edits to them.
-
-Note that \`DraftEntityInstance\` objects are always immutable Records, and this
-property is meant only to indicate how the annotated text may be "mutated" within
-the editor. _(Future changes may rename this property to ward off potential
-confusion around naming.)_
-
-### Immutable
-
-This text cannot be altered without removing the entity annotation
-from the text. Entities with this mutability type are effectively atomic.
-
-For instance, in a Facebook input, add a mention for a Page (i.e. Barack Obama).
-Then, either add a character within the mentioned text, or try to delete a character.
-Note that when adding characters, the entity is removed, and when deleting character,
-the entire entity is removed.
-
-This mutability value is useful in cases where the text absolutely must match
-its relevant metadata, and may not be altered.
-
-### Mutable
-
-This text may be altered freely. For instance, link text is
-generally intended to be "mutable" since the href and linkified text are not
-tightly coupled.
-
-### Segmented
-
-Entities that are "segmented" are tightly coupled to their text in much the
-same way as "immutable" entities, but allow customization via deletion.
-
-For instance, in a Facebook input, add a mention for a friend. Then, add a
-character to the text. Note that the entity is removed from the entire string,
-since your mentioned friend may not have their name altered in your text.
-
-Next, try deleting a character or word within the mention. Note that only the
-section of the mention that you have deleted is removed. In this way, we can
-allow short names for mentions.
-
-## Modifying Entities
-
-Since \`DraftEntityInstance\` records are immutable, you may not update the \`data\`
-property on an instance directly.
-
-Instead, two \`Entity\` methods are available to modify entities: \`mergeData\` and
-\`replaceData\`. The former allows updating data by passing in an object to merge,
-while the latter completely swaps in the new data object.
-
-## Using Entities for Rich Content
-
-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)
-provides a working example of entity creation and decoration in use.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-entities","title":"Entities","layout":"docs","category":"Advanced Topics","next":"advanced-topics-decorators","permalink":"docs/advanced-topics-entities.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
119 website/src/draft-js/docs/advanced-topics-inline-styles.js
@@ -1,119 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Within your editor, you may wish to provide a wide variety of inline style
-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/examples/rich) and
-[Colorful Editor](http://github.com/facebook/draft-js/examples/color)
-examples demonstrate complex inline style behavior in action.
-
-### Model
-
-Within the Draft model, inline styles are represented at the character level,
-using an immutable \`OrderedSet\` to define the list of styles to be applied to
-each character. These styles are identified by string. (See [CharacterMetadata](/draft-js/docs/api-reference-character-metadata.html)
-for details.)
-
-For example, consider the text "Hello **world**". The first six characters of
-the string are represented by the empty set, \`OrderedSet()\`. The final five
-characters are represented by \`OrderedSet.of('BOLD')\`. For convenience, we can
-think of these \`OrderedSet\` objects as arrays, though in reality we aggressively
-reuse identical immutable objects.
-
-In essence, our styles are:
-
-\`\`\`
-[
- [], // H
- [], // e
- ...
- ['BOLD'], // w
- ['BOLD'], // o
- // etc.
-]
-\`\`\`
-
-### Overlapping Styles
-
-Now let's say that we wish to make the middle range of characters italic as well:
-"He_llo **wo**_**rld**". This operation can be performed via the
-[Modifier](/draft-js/docs/api-reference-modifier.html) API.
-
-The end result will accommodate the overlap by including \`'ITALIC'\` in the
-relevant \`OrderedSet\` objects as well.
-
-\`\`\`
-[
- [], // H
- [], // e
- ['ITALIC'], // l
- ...
- ['BOLD', 'ITALIC'], // w
- ['BOLD', 'ITALIC'], // o
- ['BOLD'], // r
- // etc.
-]
-\`\`\`
-
-When determining how to render inline-styled text, Draft will identify
-contiguous ranges of identically styled characters and render those characters
-together in styled \`span\` nodes.
-
-### Mapping a style string to CSS
-
-By default, \`Editor\` provides support for a basic list of inline styles:
-\`'BOLD'\`, \`'ITALIC'\`, \`'UNDERLINE'\`, and \`'CODE'\`. These are mapped to simple CSS
-style objects, which are used to apply styles to the relevant ranges.
-
-For your editor, you may define custom style strings to include with these
-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/examples/color)
-for a live example.)
-
-For example, you may want to add a \`'STRIKETHROUGH'\` style. To do so, define a
-custom style map:
-
-\`\`\`
-import {Editor} from 'draft-js';
-
-const styleMap = {
- 'STRIKETHROUGH': {
- textDecoration: 'line-through',
- },
-};
-
-class MyEditor extends React.Component {
- // ...
- render() {
- return (
- <Editor
- customStyleMap={styleMap}
- editorState={this.state.editorState}
- ...
- />
- );
- }
-}
-\`\`\`
-
-When rendered, the \`textDecoration: line-through\` style will be applied to all
-character ranges with the \`STRIKETHROUGH\` style.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-inline-styles","title":"Complex Inline Styles","layout":"docs","category":"Advanced Topics","next":"advanced-topics-nested-lists","permalink":"docs/advanced-topics-inline-styles.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
82 website/src/draft-js/docs/advanced-topics-issues-and-pitfalls.js
@@ -1,82 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-This article addresses some known issues with the Draft editor framework, as
-well as some common pitfalls that we have encountered while using the framework
-at Facebook.
-
-## Common Pitfalls
-
-### Delayed state updates
-
-A common pattern for unidirectional data management is to batch or otherwise
-delay updates to data stores, using a setTimeout or another mechanism. Stores are
-updated, then emit changes to the relevant React components to propagate
-re-rendering.
-
-When delays are introduced to a React application with a Draft editor, however,
-it is possible to cause significant interaction problems. This is because the
-editor expects immediate updates and renders that stay in sync with the user's typing
-behavior. Delays can prevent updates from being propagated through the editor
-component tree, which can cause a disconnect between keystrokes and updates.
-
-To avoid this while still using a delaying or batching mechanism, you should
-separate the delay behavior from your \`Editor\` state propagation. That is,
-you must always allow your \`EditorState\` to propagate to your \`Editor\`
-component without delay, and independently perform batched updates that do
-not affect the state of your \`Editor\` component.
-
-## Known Issues
-
-### React ContentEditable Warning
-
-Within the React core, a warning is used to ward off engineers who wish to
-use ContentEditable within their components, since by default the
-browser-controlled nature of ContentEditable does not mesh with strict React
-control over the DOM. The Draft editor resolves this issue, so for our case,
-the warning is noise. You can ignore it for now.
-
-We are currently looking into removing or replacing the warning to alleviate
-the irritation it may cause: https://github.com/facebook/react/issues/6081
-
-### Custom OSX Keybindings
-
-Because the browser has no access to OS-level custom keybindings, it is not
-possible to intercept edit intent behaviors that do not map to default system
-key bindings.
-
-The result of this is that users who use custom keybindings may encounter
-issues with Draft editors, since their key commands may not behave as expected.
-
-### Browser plugins/extensions
-
-As with any React application, browser plugins and extensions that modify the
-DOM can cause Draft editors to break.
-
-Grammar checkers, for instance, may modify the DOM within contentEditable
-elements, adding styles like underlines and backgrounds. Since React cannot
-reconcile the DOM if the browser does not match its expectations,
-the editor state may fail to remain in sync with the DOM.
-
-Certain old ad blockers are also known to break the native DOM Selection
-API -- a bad idea no matter what! -- and since Draft depends on this API to
-maintain controlled selection state, this can cause trouble for editor
-interaction.
-
-### IME and Internet Explorer
-
-As of IE11, Internet Explorer demonstrates notable issues with certain international
-input methods, most significantly Korean input.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-issues-and-pitfalls","title":"Issues and Pitfalls","layout":"docs","category":"Advanced Topics","next":"api-reference-editor","permalink":"docs/advanced-topics-issues-and-pitfalls.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
107 website/src/draft-js/docs/advanced-topics-key-bindings.js
@@ -1,107 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-The \`Editor\` component offers flexibility to define custom key bindings
-for your editor, via the \`keyBindingFn\` prop. This allows you to match key
-commands to behaviors in your editor component.
-
-### Defaults
-
-The default key binding function is \`getDefaultKeyBinding\`.
-
-Since the Draft framework maintains tight control over DOM rendering and
-behavior, basic editing commands must be captured and routed through the key
-binding system.
-
-\`getDefaultKeyBinding\` maps known OS-level editor commands to \`DraftEditorCommand\`
-strings, which then correspond to behaviors within component handlers.
-
-For instance, \`Ctrl+Z\` (Win) and \`Cmd+Z\` (OSX) map to the \`'undo'\` command,
-which then routes our handler to perform an \`EditorState.undo()\`.
-
-### Customization
-
-You may provide your own key binding function to supply custom command strings.
-
-It is recommended that your function use \`getDefaultKeyBinding\` as a
-fall-through case, so that your editor may benefit from default commands.
-
-With your custom command string, you may then implement the \`handleKeyCommand\`
-prop function, which allows you to map that command string to your desired
-behavior. If \`handleKeyCommand\` returns \`true\`, the command is considered
-handled. If it returns \`false\`, the command will fall through
-
-### Example
-
-Let's say we have an editor that should have a "Save" mechanism to periodically
-write your contents to the server as a draft copy.
-
-First, let's define our key binding function.
-
-\`\`\`
-import {KeyBindingUtil} from 'draft-js';
-const {hasCommandModifier} = KeyBindingUtil;
-
-function myKeyBindingFn(e: SyntheticKeyboardEvent): string {
- if (e.keyCode === 83 /* \`S\` key */ && hasCommandModifier(e)) {
- return 'myeditor-save';
- }
- return getDefaultKeyBinding(e);
-}
-\`\`\`
-
-Our function receives a key event, and we check whether it matches our criteria:
-it must be an \`S\` key, and it must have a command modifier, i.e. the command
-key for OSX, or the control key otherwise.
-
-If the command is a match, return a string that names the command. Otherwise,
-fall through to the default key bindings.
-
-In our editor component, we can then make use of the command via the
-\`handleKeyCommand\` prop:
-
-\`\`\`
-import {Editor} from 'draft-js';
-class MyEditor extends React.Component {
- // ...
-
- handleKeyCommand(command: string): boolean {
- if (command === 'myeditor-save') {
- // Perform a request to save your contents, set
- // a new \`editorState\`, etc.
- return true;
- }
- return false;
- }
-
- render() {
- return (
- <Editor
- editorState={this.state.editorState}
- handleKeyCommand={this.handleKeyCommand.bind(this)}
- ...
- />
- );
- }
-}
-\`\`\`
-
-The \`'myeditor-save'\` command can be used for our custom behavior, and returning
-true instructs the editor that the command has been handled and no more work
-is required.
-
-By returning false in all other cases, default commands are able to fall
-through to default handler behavior.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-key-bindings","title":"Key Bindings","layout":"docs","category":"Advanced Topics","next":"advanced-topics-managing-focus","permalink":"docs/advanced-topics-key-bindings.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
47 website/src/draft-js/docs/advanced-topics-managing-focus.js
@@ -1,47 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Managing text input focus can be a tricky task within React components. The browser
-focus/blur API is imperative, so setting or removing focus via declarative means
-purely through \`render()\` tends to feel awkward and incorrect, and it requires
-challenging attempts at controlling focus state.
-
-With that in mind, at Facebook we often choose to expose \`focus()\` methods
-on components that wrap text inputs. This breaks the declarative paradigm,
-but it also simplifies the work needed for engineers to successfully manage
-focus behavior within their apps.
-
-The \`Editor\` component follows this pattern, so there is a public \`focus()\`
-method available on the component. This allows you to use a ref within your
-higher-level component to call \`focus()\` directly on the component when needed.
-
-The event listeners within the component will observe focus changes and
-propagate them through \`onChange\` as expected, so state and DOM will remain
-correctly in sync.
-
-## Translating container clicks to focus
-
-Your higher-level component will most likely wrap the \`Editor\` component in a
-container of some kind, perhaps with padding to style it to match your app.
-
-By default, if a user clicks within this container but outside of the rendered
-\`Editor\` while attempting to focus the editor, the editor will have no awareness
-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),
-for instance, uses this pattern.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-managing-focus","title":"Managing Focus","layout":"docs","category":"Advanced Topics","next":"advanced-topics-block-styling","permalink":"docs/advanced-topics-managing-focus.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
29 website/src/draft-js/docs/advanced-topics-nested-lists.js
@@ -1,29 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-The Draft framework provides support for nested lists, as demonstrated in the
-Facebook Notes editor. There, you can use \`Tab\` and \`Shift+Tab\` to add or remove
-depth to a list item.
-
-The \`RichUtils\` module provides a handy \`onTab\` method that manages this
-behavior, and should be sufficient for most nested list needs. You can use
-the \`onTab\` prop on your \`Editor\` to make use of this utility.
-
-By default, styling is applied to list items to set appropriate spacing and
-list style behavior, via \`DraftStyleDefault.css\`.
-
-Note that there is currently no support for handling depth for blocks of any type
-except \`'ordered-list-item'\` and \`'unordered-list-item'\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-nested-lists","title":"Nested Lists","layout":"docs","category":"Advanced Topics","next":"advanced-topics-text-direction","permalink":"docs/advanced-topics-nested-lists.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
42 website/src/draft-js/docs/advanced-topics-text-direction.js
@@ -1,42 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Facebook supports dozens of languages, which means that our text inputs need
-to be flexible enough to handle considerable variety.
-
-For example, we want input behavior for RTL languages such as Arabic and Hebrew
-to meet users' expectations. We also want to be able to support editor contents
-with a mixture of LTR and RTL text.
-
-To that end, Draft uses a bidi direction algorithm to determine appropriate
-text alignment and direction on a per-block basis.
-
-Text is rendered with an LTR or RTL direction automatically as the user types.
-You should not need to do anything to set direction yourself.
-
-## Text Alignment
-
-While languages are automatically aligned to the left or right during composition,
-as defined by the content characters, it is also possible for engineers to
-manually set the text alignment for an editor's contents.
-
-This may be useful, for instance, if an editor requires strictly centered
-contents, or needs to keep text aligned flush against another UI element.
-
-The \`Editor\` component therefore provides a \`textAlignment\` prop, with a
-simple set of values: \`'left'\`, \`'center'\`, and \`'right'\`. Using these values,
-the contents of your editor will be aligned to the specified direction regardless
-of language and character set.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-text-direction","title":"Text Direction","layout":"docs","category":"Advanced Topics","next":"advanced-topics-issues-and-pitfalls","permalink":"docs/advanced-topics-text-direction.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/block-components.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Custom Block Components
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-block-components","title":"Custom Block Components","layout":"docs","category":"Advanced Topics","next":"advanced-topics-inline-styles","permalink":"docs/advanced/block-components.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/block-styling.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Block Styling
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-block-styling","title":"Block Styling","layout":"docs","category":"Advanced Topics","next":"advanced-topics-block-components","permalink":"docs/advanced/block-styling.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/decorators.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Decorators
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-decorators","title":"Decorators","layout":"docs","category":"Advanced Topics","next":"advanced-topics-key-bindings","permalink":"docs/advanced/decorators.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/entities.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Entities
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-entities","title":"Entities","layout":"docs","category":"Advanced Topics","next":"advanced-topics-decorators","permalink":"docs/advanced/entities.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/event-handling.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Event Handling
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-event-handling","title":"Event Handling","layout":"docs","category":"Advanced Topics","next":"advanced-topics-block-styling","permalink":"docs/advanced/event-handling.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
116 website/src/draft-js/docs/advanced/inline-styles.js
@@ -1,116 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Within your editor, you may wish to provide a wide variety of inline style
-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/examples/rich) and
-[Colorful Editor](http://github.com/facebook/draft-js/examples/color)
-examples demonstrate complex inline style behavior in action.
-
-### Model
-
-Within the Draft model, inline styles are represented at the character level,
-using an immutable \`OrderedSet\` to define the list of styles to be applied to
-each character. These styles are identified by string. (See [CharacterMetadata](/draft-js/docs/api/character-metadata.html) for details.)
-
-For example, consider the text "Hello **world**". The first six characters of
-the string are represented by the empty set, \`OrderedSet()\`. The final five
-characters are represented by \`OrderedSet.of('BOLD')\`. For convenience, we can
-think of these \`OrderedSet\` objects as arrays, though in reality we aggressively
-reuse identical immutable objects.
-
-In essence, our styles are:
-
-\`\`\`
-[
- [], // H
- [], // e
- ...
- ['BOLD'], // w
- ['BOLD'], // o
- // etc.
-]
-\`\`\`
-
-### Overlapping Styles
-
-Now let's say that we wish to make the middle range of characters italic as well:
-"He_llo **wo**_**rld**". This operation can be performed via the
-[Modifier](/draft-js/docs/api/modifier.html) API.
-
-The end result will accommodate the overlap by including \`'ITALIC'\` in the
-relevant \`OrderedSet\` objects as well.
-
-\`\`\`
-[
- [], // H
- [], // e
- ['ITALIC'], // l
- ...
- ['BOLD', 'ITALIC'], // w
- ['BOLD', 'ITALIC'], // o
- ['BOLD'], // r
- // etc.
-]
-\`\`\`
-
-When determining how to render inline-styled text, Draft will identify
-contiguous ranges of identically styled characters and render those characters
-together in styled \`span\` nodes.
-
-### Mapping a style string to CSS
-
-By default, \`DraftEditor\` provides support for a basic list of inline styles:
-\`'BOLD'\`, \`'ITALIC'\`, \`'UNDERLINE'\`, and \`'CODE'\`. These are mapped to simple CSS
-style objects, which are used to apply styles to the relevant ranges.
-
-For your editor, you may define custom style strings to include with these
-defaults, or you may override the default style objects for the basic styles.
-
-Within your \`DraftEditor\` use case, you may provide the \`customStyleMap\` prop
-to define your style objects. (See
-[Colorful Editor](http://github.com/facebook/draft-js/examples/color)
-for a live example.)
-
-For example, you may want to add a \`'STRIKETHROUGH'\` style. To do so, define a
-custom style map:
-
-\`\`\`
-const styleMap = {
- 'STRIKETHROUGH': {
- textDecoration: 'line-through',
- },
-};
-
-class MyEditor extends React.Component {
- // ...
- render() {
- return (
- <DraftEditor
- customStyleMap={styleMap}
- editorState={this.state.editorState}
- ...
- />
- );
- }
-}
-\`\`\`
-
-When rendered, the \`textDecoration: line-through\` style will be applied to all
-character ranges with the \`STRIKETHROUGH\` style.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-inline-styles","title":"Complex Inline Styles","layout":"docs","category":"Advanced Topics","next":"advanced-topics-nested-lists","permalink":"docs/advanced/inline-styles.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
106 website/src/draft-js/docs/advanced/key-bindings.js
@@ -1,106 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-The \`DraftEditor\` component offers flexibility to define custom key bindings
-for your editor, via the \`keyBindingFn\` prop. This allows you to match key
-commands to behaviors in your editor component.
-
-### Defaults
-
-The default key binding function is \`getDefaultKeyBinding\`.
-
-Since the Draft framework maintains tight control over DOM rendering and
-behavior, basic editing commands must be captured and routed through the key
-binding system.
-
-\`getDefaultKeyBinding\` maps known OS-level editor commands to \`DraftEditorCommand\`
-strings, which then correspond to behaviors within component handlers.
-
-For instance, \`Ctrl+Z\` (Win) and \`Cmd+Z\` (OSX) map to the \`'undo'\` command,
-which then routes our handler to perform an \`EditorState.undo()\`.
-
-### Customization
-
-You may provide your own key binding function to supply custom command strings.
-
-It is recommended that your function use \`getDefaultKeyBinding\` as a
-fall-through case, so that your editor may benefit from default commands.
-
-With your custom command string, you may then implement the \`handleKeyCommand\`
-prop function, which allows you to map that command string to your desired
-behavior. If \`handleKeyCommand\` returns \`true\`, the command is considered
-handled. If it returns \`false\`, the command will fall through
-
-### Example
-
-Let's say we have an editor that should have a "Save" mechanism to periodically
-write your contents to the server as a draft copy.
-
-First, let's define our key binding function.
-
-\`\`\`
-import KeyBindingUtil from 'Draft';
-const {hasCommandModifier} = KeyBindingUtil;
-
-function myKeyBindingFn(e: SyntheticKeyboardEvent): string {
- if (e.keyCode === 83 /* \`S\` key */ && hasCommandModifier(e)) {
- return 'myeditor-save';
- }
- return getDefaultKeyBinding(e);
-}
-\`\`\`
-
-Our function receives a key event, and we check whether it matches our criteria:
-it must be an \`S\` key, and it must have a command modifier, i.e. the command
-key for OSX, or the control key otherwise.
-
-If the command is a match, return a string that names the command. Otherwise,
-fall through to the default key bindings.
-
-In our editor component, we can then make use of the command via the
-\`handleKeyCommand\` prop:
-
-\`\`\`
-class MyEditor extends React.Component {
- // ...
-
- handleKeyCommand(command: string): boolean {
- if (command === 'myeditor-save') {
- // Perform a request to save your contents, set
- // a new \`editorState\`, etc.
- return true;
- }
- return false;
- }
-
- render() {
- return (
- <DraftEditor
- editorState={this.state.editorState}
- handleKeyCommand={this.handleKeyCommand.bind(this)}
- ...
- />
- );
- }
-}
-\`\`\`
-
-The \`'myeditor-save'\` command can be used for our custom behavior, and returning
-true instructs the editor that the command has been handled and no more work
-is required.
-
-By returning false in all other cases, default commands are able to fall
-through to default handler behavior.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-key-bindings","title":"Key Bindings","layout":"docs","category":"Advanced Topics","next":"advanced-topics-event-handling","permalink":"docs/advanced/key-bindings.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/nested-lists.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Nested Lists
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-nested-lists","title":"Nested Lists","layout":"docs","category":"Advanced Topics","next":"advanced-topics-text-direction","permalink":"docs/advanced/nested-lists.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/performance.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Performance
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-performance","title":"Performance","layout":"docs","category":"Advanced Topics","next":"api-reference-editor-state","permalink":"docs/advanced/performance.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/text-direction.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Nested Lists
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-text-direction","title":"Text Direction","layout":"docs","category":"Advanced Topics","next":"advanced-topics-unicode","permalink":"docs/advanced/text-direction.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/undo-redo.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Undo/Redo
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-undo-redo","title":"Undo/Redo","layout":"docs","category":"Advanced Topics","next":"advanced-topics-performance","permalink":"docs/advanced/undo-redo.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/advanced/unicode.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Nested Lists
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"advanced-topics-unicode","title":"Unicode","layout":"docs","category":"Advanced Topics","next":"advanced-topics-undo-redo","permalink":"docs/advanced/unicode.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
164 website/src/draft-js/docs/api-reference-character-metadata.js
@@ -1,164 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`CharacterMetadata\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents inline style and entity information for a single character.
-
-\`CharacterMetadata\` objects are aggressively pooled and shared. If two characters
-have the same inline style and entity, they are represented with the same
-\`CharacterMetadata\` object. We therefore need only as many objects as combinations
-of utilized inline style sets with entity keys, keeping our memory footprint
-small even as the contents grow in size and complexity.
-
-To that end, you should create or apply changes to \`CharacterMetadata\` objects
-via the provided set of static methods, which will ensure that pooling is utilized.
-
-Most Draft use cases are unlikely to use these static methods, since most common edit
-operations are already implemented and available via utility modules. The getter
-methods, however, may come in handy at render time.
-
-See the API reference on
-[ContentBlock](/draft-js/docs/api-reference-content-block.html#representing-styles-and-entities)
-for information on how \`CharacterMetadata\` is used within \`ContentBlock\`.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#create">
- <pre>static create(...): CharacterMetadata</pre>
- </a>
- </li>
- <li>
- <a href="#applystyle">
- <pre>static applyStyle(...): CharacterMetadata</pre>
- </a>
- </li>
- <li>
- <a href="#removestyle">
- <pre>static removeStyle(...): CharacterMetadata</pre>
- </a>
- </li>
- <li>
- <a href="#applyentity">
- <pre>static applyEntity(...): CharacterMetadata</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getstyle">
- <pre>getStyle(): DraftInlineStyle</pre>
- </a>
- </li>
- <li>
- <a href="#hasstyle">
- <pre>hasStyle(style: string): boolean</pre>
- </a>
- </li>
- <li>
- <a href="#getentity">
- <pre>getEntity(): ?string</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-Under the hood, these methods will utilize pooling to return a matching object,
-or return a new object if none exists.
-
-### create
-
-\`\`\`
-static create(config?: CharacterMetadataConfig): CharacterMetadata
-\`\`\`
-Generates a \`CharacterMetadata\` object from the provided configuration. This
-function should be used in lieu of a constructor.
-
-The configuration will be used to check whether a pooled match for this
-configuration already exists. If so, the pooled object will be returned.
-Otherwise, a new \`CharacterMetadata\` will be pooled for this configuration,
-and returned.
-
-### applyStyle
-
-\`\`\`
-static applyStyle(
- record: CharacterMetadata,
- style: string
-): CharacterMetadata
-\`\`\`
-Apply an inline style to this \`CharacterMetadata\`.
-
-### removeStyle
-
-\`\`\`
-static removeStyle(
- record: CharacterMetadata,
- style: string
-): CharacterMetadata
-\`\`\`
-Remove an inline style from this \`CharacterMetadata\`.
-
-### applyEntity
-
-\`\`\`
-static applyEntity(
- record: CharacterMetadata,
- entityKey: ?string
-): CharacterMetadata
-\`\`\`
-
-Apply an entity key -- or provide \`null\` to remove an entity key -- on this
-\`CharacterMetadata\`.
-
-## Methods
-
-### getStyle
-
-\`\`\`
-getStyle(): DraftInlineStyle
-\`\`\`
-Returns the \`DraftInlineStyle\` for this character, an \`OrderedSet\` of strings
-that represents the inline style to apply for the character at render time.
-
-### hasStyle
-
-\`\`\`
-hasStyle(style: string): boolean
-\`\`\`
-Returns whether this character has the specified style.
-
-### getEntity
-
-\`\`\`
-getEntity(): ?string
-\`\`\`
-Returns the entity key (if any) for this character, as mapped to the global set of
-entities tracked by the [\`Entity\`](https://github.com/facebook/draft-js/blob/master/src/model/entity/DraftEntity.js)
-module.
-
-By tracking a string key here, we can keep the corresponding metadata separate
-from the character representation.
-
-If null, no entity is applied for this character.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-character-metadata","title":"CharacterMetadata","layout":"docs","category":"API Reference","next":"api-reference-entity","permalink":"docs/api-reference-character-metadata.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
253 website/src/draft-js/docs/api-reference-content-block.js
@@ -1,253 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentBlock\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of a single block of editor content, including:
-
- - Plain text contents of the block
- - Type, e.g. paragraph, header, list item
- - Entity, inline style, and depth information
-
-A \`ContentState\` object contains an \`OrderedMap\` of these \`ContentBlock\` objects,
-which together comprise the full contents of the editor.
-
-\`ContentBlock\` objects are largely analogous to block-level HTML elements like
-paragraphs and list items.
-
-New \`ContentBlock\` objects may be created directly using the constructor.
-Expected Record values are detailed below.
-
-### Representing styles and entities
-
-The \`characterList\` field is an immutable \`List\` containing a \`CharacterMetadata\`
-object for every character in the block. This is how we encode styles and
-entities for a given block.
-
-By making heavy use of immutability and data persistence for these lists and
-\`CharacterMetadata\` objects, edits to the content generally have little impact
-on the memory footprint of the editor.
-
-By encoding inline styles and entities together in this way, a function that
-performs edits on a \`ContentBlock\` can perform slices, concats, and other List
-methods on a single \`List\` object.
-
-## Overview
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getkey">
- <pre>getKey(): string</pre>
- </a>
- </li>
- <li>
- <a href="#gettype">
- <pre>getType(): DraftBlockType</pre>
- </a>
- </li>
- <li>
- <a href="#gettext">
- <pre>getText(): string</pre>
- </a>
- </li>
- <li>
- <a href="#getcharacterlist">
- <pre>getCharacterList(): List<CharacterMetadata></pre>
- </a>
- </li>
- <li>
- <a href="#getlength">
- <pre>getLength(): number</pre>
- </a>
- </li>
- <li>
- <a href="#getdepth">
- <pre>getDepth(): number</pre>
- </a>
- </li>
- <li>
- <a href="#getinlinestyleat">
- <pre>getInlineStyleAt(offset: number): DraftInlineStyle</pre>
- </a>
- </li>
- <li>
- <a href="#getentityat">
- <pre>getEntityAt(offset: number): ?string</pre>
- </a>
- </li>
- <li>
- <a href="#findstyleranges">
- <pre>findStyleRanges(filterFn: Function, callback: Function): void</pre>
- </a>
- </li>
- <li>
- <a href="#findentityranges">
- <pre>findEntityRanges(filterFn: Function, callback: Function): void</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Note
->
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record)
-> for the \`ContentBlock\` constructor or to set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#key">
- <pre>key: string</pre>
- </a>
- </li>
- <li>
- <a href="#type">
- <pre>type: DraftBlockType</pre>
- </a>
- </li>
- <li>
- <a href="#text">
- <pre>text: string</pre>
- </a>
- </li>
- <li>
- <a href="#characterlist">
- <pre>characterList: List<CharacterMetadata></pre>
- </a>
- </li>
- <li>
- <a href="#depth">
- <pre>depth: number</pre>
- </a>
- </li>
-</ul>
-
-## Methods
-
-### getKey()
-
-\`\`\`
-getKey(): string
-\`\`\`
-Returns the string key for this \`ContentBlock\`.
-
-### getType()
-
-\`\`\`
-getType(): DraftBlockType
-\`\`\`
-Returns the type for this \`ContentBlock\`. Type values are largely analogous to
-block-level HTML elements.
-
-### getText()
-
-\`\`\`
-getText(): string
-\`\`\`
-Returns the full plaintext for this \`ContentBlock\`. This value does not contain
-any styling, decoration, or HTML information.
-
-### getCharacterList()
-
-\`\`\`
-getCharacterList(): List<CharacterMetadata>
-\`\`\`
-Returns an immutable \`List\` of \`CharacterMetadata\` objects, one for each
-character in the \`ContentBlock\`. (See [CharacterMetadata](/draft-js/docs/api-reference-character-metadata.html)
-for details.)
-
-This \`List\` contains all styling and entity information for the block.
-
-### getLength()
-
-\`\`\`
-getLength(): number
-\`\`\`
-Returns the length of the plaintext for the \`ContentBlock\`.
-
-This value uses the standard JavaScript \`length\` property for the string, and
-is therefore not Unicode-aware -- surrogate pairs will be counted as two
-characters.
-
-### getDepth()
-
-\`\`\`
-getDepth(): number
-\`\`\`
-Returns the depth value for this block, if any. This is currently used only
-for list items.
-
-### getInlineStyleAt()
-
-\`\`\`
-getInlineStyleAt(offset: number): DraftInlineStyle
-\`\`\`
-Returns the \`DraftInlineStyle\` value (an \`OrderedSet<string>\`) at a given offset
-within this \`ContentBlock\`.
-
-### getEntityAt()
-
-\`\`\`
-getEntityAt(offset: number): ?string
-\`\`\`
-Returns the entity key value (or \`null\` if none) at a given offset within this
-\`ContentBlock\`.
-
-### findStyleRanges()
-
-\`\`\`
-findStyleRanges(
- filterFn: (value: CharacterMetadata) => boolean,
- callback: (start: number, end: number) => void
-): void
-\`\`\`
-Executes a callback for each contiguous range of styles within this
-\`ContentBlock\`.
-
-### findEntityRanges()
-
-\`\`\`
-findEntityRanges(
- filterFn: (value: CharacterMetadata) => boolean,
- callback: (start: number, end: number) => void
-): void
-\`\`\`
-Executes a callback for each contiguous range of entities within this
-\`ContentBlock\`.
-
-## Properties
-
-> Note
->
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record)
-> for the \`ContentBlock\` constructor or to set properties.
-
-### key
-See \`getKey()\`.
-
-### text
-See \`getText()\`.
-
-### type
-See \`getType()\`.
-
-### characterList
-See \`getCharacterList()\`.
-
-### depth
-See \`getDepth()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-content-block","title":"ContentBlock","layout":"docs","category":"API Reference","next":"api-reference-character-metadata","permalink":"docs/api-reference-content-block.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
272 website/src/draft-js/docs/api-reference-content-state.js
@@ -1,272 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentState\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of:
-
-- The entire **contents** of an editor: text, block and inline styles, and entity ranges.
-- Two **selection states** of an editor: before and after the rendering of these contents.
-
-The most common use for the \`ContentState\` object is via \`EditorState.getCurrentContent()\`,
-which provides the \`ContentState\` currently being rendered in the editor.
-
-An \`EditorState\` object maintains undo and redo stacks comprised of \`ContentState\`
-objects.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createfromtext">
- <pre>static createFromText(text: string): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#createfromblockarray">
- <pre>static createFromBlockArray(blocks: Array<ContentBlock>): ContentState</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getblockmap">
- <pre>getBlockMap()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionbefore">
- <pre>getSelectionBefore()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionafter">
- <pre>getSelectionAfter()</pre>
- </a>
- </li>
- <li>
- <a href="#getblockforkey">
- <pre>getBlockForKey(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeybefore">
- <pre>getKeyBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeyafter">
- <pre>getKeyAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockbefore">
- <pre>getBlockBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockafter">
- <pre>getBlockAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblocksasarray">
- <pre>getBlocksAsArray()</pre>
- </a>
- </li>
- <li>
- <a href="#getlastblock">
- <pre>getLastBlock()</pre>
- </a>
- </li>
- <li>
- <a href="#getplaintext">
- <pre>getPlainText(delimiter)</pre>
- </a>
- </li>
- <li>
- <a href="#hastext">
- <pre>hasText()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#blockmap">
- <pre>blockMap</pre>
- </a>
- </li>
- <li>
- <a href="#selectionbefore">
- <pre>selectionBefore</pre>
- </a>
- </li>
- <li>
- <a href="#selectionafter">
- <pre>selectionAfter</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createFromText
-
-\`\`\`
-static createFromText(
- text: string,
- delimiter?: string
-): ContentState
-\`\`\`
-Generates a \`ContentState\` from a string, with a delimiter to split the string
-into \`ContentBlock\` objects. If no delimiter is provided, '\\n' is used.
-
-### createFromBlockArray
-
-\`\`\`
-static createFromBlockArray(blocks: Array<ContentBlock>): ContentState
-\`\`\`
-Generates a \`ContentState\` from an array of \`ContentBlock\` objects. The default
-\`selectionBefore\` and \`selectionAfter\` states have the cursor at the start of
-the content.
-
-## Methods
-
-### getBlockMap
-
-\`\`\`
-getBlockMap(): BlockMap
-\`\`\`
-Returns the full ordered map of \`ContentBlock\` objects representing the state
-of an entire document.
-
-In most cases, you should be able to use the convenience methods below to target
-specific \`ContentBlock\` objects or obtain information about the state of the content.
-
-### getSelectionBefore
-
-\`\`\`
-getSelectionBefore(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor before rendering \`blockMap\`.
-
-When performing an \`undo\` action in the editor, the \`selectionBefore\` of the current
-\`ContentState\` is used to place the selection range in the appropriate position.
-
-### getSelectionAfter
-
-\`\`\`
-getSelectionAfter(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor after rendering \`blockMap\`.
-
-When performing any action in the editor that leads to this \`blockMap\` being rendered,
-the selection range will be placed in the \`selectionAfter\` position.
-
-### getBlockForKey
-
-\`\`\`
-getBlockForKey(key: string): ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` corresponding to the given block key.
-
-#### Example
-
-\`\`\`
-var {editorState} = this.state;
-var blockKey = editorState.getSelection().getStartKey();
-var selectedBlockType = editorState
- .getCurrentContent()
- .getBlockForKey(startKey)
- .getType();
-\`\`\`
-
-### getKeyBefore()
-
-\`\`\`
-getKeyBefore(key: string): ?string
-\`\`\`
-Returns the key before the specified key in \`blockMap\`, or null if this is the first key.
-
-### getKeyAfter()
-
-\`\`\`
-getKeyAfter(key: string): ?string
-\`\`\`
-Returns the key after the specified key in \`blockMap\`, or null if this is the last key.
-
-### getBlockBefore()
-
-\`\`\`
-getBlockBefore(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` before the specified key in \`blockMap\`, or null if this is
-the first key.
-
-### getBlockAfter()
-
-\`\`\`
-getBlockAfter(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` after the specified key in \`blockMap\`, or null if this is
-the last key.
-
-### getBlocksAsArray()
-
-\`\`\`
-getBlocksAsArray(): Array<ContentBlock>
-\`\`\`
-Returns the values of \`blockMap\` as an array.
-
-### getPlainText()
-
-\`\`\`
-getPlainText(delimiter?: string): string
-\`\`\`
-Returns the full plaintext value of the contents, joined with a delimiter. If no
-delimiter is specified, the line feed character (\`\\u000A\`) is used.
-
-### hasText()
-
-\`\`\`
-hasText(): boolean
-\`\`\`
-Returns whether the contents contain any text at all.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-### blockMap
-See \`getBlockMap()\`.
-
-### selectionBefore
-See \`getSelectionBefore()\`.
-
-### selectionAfter
-See \`getSelectionAfter()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-content-state","title":"ContentState","layout":"docs","category":"API Reference","next":"api-reference-content-block","permalink":"docs/api-reference-content-state.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
53 website/src/draft-js/docs/api-reference-data-conversion.js
@@ -1,53 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Because a text editor doesn't exist in a vacuum and it's important to save
-contents for storage or transmission, you will want to be able to
-convert a \`ContentState\` into raw JS, and vice versa.
-
-To that end, we provide a couple of utility functions that allow you to perform
-these conversions.
-
-Note that the Draft library does not currently provide utilities to convert to
-and from markdown or markup, since different clients may have different requirements
-for these formats. We instead provide JavaScript objects that can be converted
-to other formats as needed.
-
-The Flow type [\`RawDraftContentState\`](https://github.com/facebook/draft-js/blob/master/src/model/encoding/RawDraftContentState.js)
-denotes the expected structure of the raw format of the contents. The raw state
-contains a list of content blocks, as well as a map of all relevant entity
-objects.
-
-## Functions
-
-### convertFromRaw
-
-\`\`\`
-convertFromRaw(rawState: RawDraftContentState): ContentState
-\`\`\`
-
-Given a raw state, convert it to \`ContentState\` object. This is useful when
-restoring contents to use within a Draft editor.
-
-### convertToRaw
-
-\`\`\`
-convertToRaw(contentState: ContentState): RawDraftContentState
-\`\`\`
-
-Given a \`ContentState\` object, convert it to a raw JS structure. This is useful
-when saving an editor state for storage, conversion to other formats, or
-other usage within an application.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-data-conversion","title":"Data Conversion","layout":"docs","category":"API Reference","next":"api-reference-modifier","permalink":"docs/api-reference-data-conversion.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
488 website/src/draft-js/docs/api-reference-editor-state.js
@@ -1,488 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`EditorState\` is the top-level state object for the editor.
-
-It is an Immutable [Record](http://facebook.github.io/immutable-js/docs/#/Record/Record)
-that represents the entire state of a Draft editor, including:
-
- - The current text content state
- - The current selection state
- - The fully decorated representation of the contents
- - Undo/redo stacks
- - The most recent type of change made to the contents
-
-> Note
->
-> You should not use the Immutable API when using EditorState objects.
-> Instead, use the instance getters and static methods below.
-
-## Overview
-
-*Common instance methods*
-
-The list below includes the most commonly used instance methods for \`EditorState\` objects.
-
-<ul class="apiIndex">
- <li>
- <a href="#getcurrentcontent">
- <pre>getCurrentContent(): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#getselection">
- <pre>getSelection(): SelectionState</pre>
- </a>
- </li>
- <li>
- <a href="#getcurrentinlinestyle">
- <pre>getCurrentInlineStyle(): DraftInlineStyle</pre>
- </a>
- </li>
- <li>
- <a href="#getblocktree">
- <pre>getBlockTree(): OrderedMap</pre>
- </a>
- </li>
-</ul>
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createempty">
- <pre>static createEmpty(?decorator): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#createwithcontent">
- <pre>static createWithContent(contentState, ?decorator): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#create">
- <pre>static create(config): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#push">
- <pre>static push(editorState, contentState, changeType): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#undo">
- <pre>static undo(editorState): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#redo">
- <pre>static redo(editorState): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#acceptselection">
- <pre>static acceptSelection(editorState, selectionState): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#forceselection">
- <pre>static forceSelection(editorState, selectionState): EditorState</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Note
->
-> Use the static \`EditorState\` methods to set properties, rather than using
-> the Immutable API directly.
-
-<ul class="apiIndex">
- <li>
- <a href="#allowundo">
- <pre>allowUndo</pre>
- </a>
- </li>
- <li>
- <a href="#currentcontent">
- <pre>currentContent</pre>
- </a>
- </li>
- <li>
- <a href="#decorator">
- <pre>decorator</pre>
- </a>
- </li>
- <li>
- <a href="#directionMap">
- <pre>directionMap</pre>
- </a>
- </li>
- <li>
- <a href="#forceselection">
- <pre>forceSelection</pre>
- </a>
- </li>
- <li>
- <a href="#incompositionmode">
- <pre>inCompositionMode</pre>
- </a>
- </li>
- <li>
- <a href="#inlinestyleoverride">
- <pre>inlineStyleOverride</pre>
- </a>
- </li>
- <li>
- <a href="#lastchangetype">
- <pre>lastChangeType</pre>
- </a>
- </li>
- <li>
- <a href="#nativelyrenderedcontent">
- <pre>nativelyRenderedContent</pre>
- </a>
- </li>
- <li>
- <a href="#redostack">
- <pre>redoStack</pre>
- </a>
- </li>
- <li>
- <a href="#selection">
- <pre>selection</pre>
- </a>
- </li>
- <li>
- <a href="#treemap">
- <pre>treeMap</pre>
- </a>
- </li>
- <li>
- <a href="#undostack">
- <pre>undoStack</pre>
- </a>
- </li>
-</ul>
-
-## Common Instance Methods
-
-### getCurrentContent
-
-\`\`\`
-getCurrentContent(): ContentState
-\`\`\`
-Returns the current contents of the editor.
-
-### getSelection
-
-\`\`\`
-getSelection(): SelectionState
-\`\`\`
-Returns the current cursor/selection state of the editor.
-
-### getCurrentInlineStyle
-
-\`\`\`
-getCurrentInlineStyle(): DraftInlineStyle
-\`\`\`
-Returns an \`OrderedSet<string>\` that represents the "current" inline style
-for the editor.
-
-This is the inline style value that would be used if a character were inserted
-for the current \`ContentState\` and \`SelectionState\`, and takes into account
-any inline style overrides that should be applied.
-
-### getBlockTree
-
-\`\`\`
-getBlockTree(blockKey: string): List;
-\`\`\`
-Returns an Immutable \`List\` of decorated and styled ranges. This is used for
-rendering purposes, and is generated based on the \`currentContent\` and
-\`decorator\`.
-
-At render time, this object is used to break the contents into the appropriate
-block, decorator, and styled range components.
-
-## Static Methods
-
-### createEmpty
-
-\`\`\`
-static createEmpty(decorator?: DraftDecoratorType): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with an empty \`ContentState\` and default
-configuration.
-
-### createWithContent
-
-\`\`\`
-static createWithContent(
- contentState: ContentState,
- decorator?: DraftDecoratorType
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object based on the \`ContentState\` and decorator
-provided.
-
-### create
-
-\`\`\`
-static create(config: EditorStateCreationConfig): EditorState
-\`\`\`
-Returns a new \`EditorState\` object based on a configuration object. Use this
-if you need custom configuration not available via the methods above.
-
-### push
-
-\`\`\`
-static push(
- editorState: EditorState,
- contentState: ContentState,
- changeType: EditorChangeType
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the specified \`ContentState\` applied
-as the new \`currentContent\`. Based on the \`changeType\`, this \`ContentState\`
-may be regarded as a boundary state for undo/redo behavior. See
-[Undo/Redo](/draft-js/docs/advanced-undo-redo.html) discussion for details.
-
-All content changes must be applied to the EditorState with this method.
-
-_To be renamed._
-
-### undo
-
-\`\`\`
-static undo(editorState: EditorState): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the top of the undo stack applied
-as the new \`currentContent\`.
-
-The existing \`currentContent\` is pushed onto the \`redo\` stack.
-
-### redo
-
-\`\`\`
-static redo(editorState: EditorState): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the top of the redo stack applied
-as the new \`currentContent\`.
-
-The existing \`currentContent\` is pushed onto the \`undo\` stack.
-
-### acceptSelection
-
-\`\`\`
-static acceptSelection(
- editorState: EditorState,
- selectionState: SelectionState
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the specified \`SelectionState\` applied,
-but without requiring the selection to be rendered.
-
-For example, this is useful when the DOM selection has changed outside of our
-control, and no re-renders are necessary.
-
-### forceSelection
-
-\`\`\`
-static forceSelection(
- editorState: EditorState,
- selectionState: SelectionState
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the specified \`SelectionState\` applied,
-forcing the selection to be rendered.
-
-This is useful when the selection should be manually rendered in the correct
-location to maintain control of the rendered output.
-
-## Properties and Getters
-
-In most cases, the instance and static methods above should be sufficient to
-manage the state of your Draft editor.
-
-Below is the full list of properties tracked by an \`EditorState\`, as well as
-their corresponding getter methods, to better provide detail on the scope of the
-state tracked in this object.
-
-> Note
->
-> You should not use the Immutable API when using EditorState objects.
-> Instead, use the instance getters and static methods above.
-
-### allowUndo
-
-\`\`\`
-allowUndo: boolean;
-getAllowUndo()
-\`\`\`
-Whether to allow undo/redo behavior in this editor. Default is \`true\`.
-
-Since the undo/redo stack is the major source of memory retention, if you have
-an editor UI that does not require undo/redo behavior, you might consider
-setting this to \`false\`.
-
-### currentContent
-
-\`\`\`
-currentContent: ContentState;
-getCurrentContent()
-\`\`\`
-The currently rendered \`ContentState\`. See [getCurrentContent()](#getcurrentcontent).
-
-### decorator
-
-\`\`\`
-decorator: ?DraftDecoratorType;
-getDecorator()
-\`\`\`
-The current decorator object, if any.
-
-Note that the \`ContentState\` is independent of your decorator. If a decorator
-is provided, it will be used to decorate ranges of text for rendering.
-
-### directionMap
-
-\`\`\`
-directionMap: BlockMap;
-getDirectionMap()
-\`\`\`
-A map of each block and its text direction, as determined by UnicodeBidiService.
-
-You should not manage this manually.
-
-### forceSelection
-
-\`\`\`
-forceSelection: boolean;
-mustForceSelection()
-\`\`\`
-Whether to force the current \`SelectionState\` to be rendered.
-
-You should not set this property manually -- see
-[forceSelection()](#forceselection).
-
-### inCompositionMode
-
-\`\`\`
-inCompositionMode: boolean;
-isInCompositionMode()
-\`\`\`
-Whether the user is in IME composition mode. This is useful for rendering the
-appropriate UI for IME users, even when no content changes have been committed
-to the editor. You should not set this property manually.
-
-### inlineStyleOverride
-
-\`\`\`
-inlineStyleOverride: DraftInlineStyle;
-getInlineStyleOverride()
-\`\`\`
-An inline style value to be applied to the next inserted characters. This is
-used when keyboard commands or style buttons are used to apply an inline style
-for a collapsed selection range.
-
-\`DraftInlineStyle\` is a type alias for an immutable \`OrderedSet\` of strings,
-each of which corresponds to an inline style.
-
-### lastChangeType
-
-\`\`\`
-lastChangeType: EditorChangeType;
-getLastChangeType()
-\`\`\`
-The type of content change that took place in order to bring us to our current
-\`ContentState\`. This is used when determining boundary states for undo/redo.
-
-### nativelyRenderedContent
-
-\`\`\`
-nativelyRenderedContent: ?ContentState;
-getNativelyRenderedContent()
-\`\`\`
-During edit behavior, the editor may allow certain actions to render natively.
-For instance, during normal typing behavior in the contentEditable-based component,
-we can typically allow key events to fall through to print characters in the DOM.
-In doing so, we can avoid extra re-renders and preserve spellcheck highlighting.
-
-When allowing native rendering behavior, it is appropriate to use the
-\`nativelyRenderedContent\` property to indicate that no re-render is necessary
-for this \`EditorState\`.
-
-### redoStack
-
-\`\`\`
-redoStack: Stack<ContentState>;
-getRedoStack()
-\`\`\`
-An immutable stack of \`ContentState\` objects that can be resurrected for redo
-operations. When performing an undo operation, the current \`ContentState\` is
-pushed onto the \`redoStack\`.
-
-You should not manage this property manually. If you would like to disable
-undo/redo behavior, use the \`allowUndo\` property.
-
-See also [undoStack](#undostack).
-
-### selection
-
-\`\`\`
-selection: SelectionState;
-getSelection()
-\`\`\`
-The currently rendered \`SelectionState\`. See [acceptSelection()](#acceptselection)
-and [forceSelection()](#forceselection).
-
-You should not manage this property manually.
-
-### treeMap
-
-\`\`\`
-treeMap: OrderedMap<string, List>;
-\`\`\`
-The fully decorated and styled tree of ranges to be rendered in the editor
-component. The \`treeMap\` object is generated based on a \`ContentState\` and an
-optional decorator (\`DraftDecoratorType\`).
-
-At render time, components should iterate through the \`treeMap\` object to
-render decorated ranges and styled ranges, using the [getBlockTree()](#getblocktree)
-method.
-
-You should not manage this property manually.
-
-### undoStack
-
-\`\`\`
-undoStack: Stack<ContentState>;
-getUndoStack()
-\`\`\`
-An immutable stack of \`ContentState\` objects that can be restored for undo
-operations.
-
-When performing operations that modify contents, we determine whether the
-current \`ContentState\` should be regarded as a "boundary" state that the user
-can reach by performing an undo operation. If so, the \`ContentState\` is pushed
-onto the \`undoStack\`. If not, the outgoing \`ContentState\` is simply discarded.
-
-You should not manage this property manually. If you would like to disable
-undo/redo behavior, use the \`allowUndo\` property.
-
-See also [redoStack](#redostack).
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-editor-state","title":"EditorState","layout":"docs","category":"API Reference","next":"api-reference-content-state","permalink":"docs/api-reference-editor-state.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
200 website/src/draft-js/docs/api-reference-editor.js
@@ -1,200 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-This article discusses the API and props of the core controlled contentEditable
-component itself, \`Editor\`. Props are defined within
-[\`DraftEditorProps\`](https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditorProps.js).
-
-## Props
-
-### Basics
-
-See [API Basics](/draft-js/docs/quickstart-api-basics.html) for an introduction.
-
-#### editorState
-\`\`\`
-editorState: EditorState
-\`\`\`
-The \`EditorState\` object to be rendered by the \`Editor\`.
-
-#### onChange
-\`\`\`
-onChange: (editorState: EditorState) => void
-\`\`\`
-The \`onChange\` function to be executed by the \`Editor\` when edits and selection
-changes occur.
-
-### Presentation (Optional)
-
-#### placeholder
-\`\`\`
-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),
-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.
-
-#### textAlignment
-\`\`\`
-textAlignment?: DraftTextAlignment
-\`\`\`
-Optionally set the overriding text alignment for this editor. This alignment value will
-apply to the entire contents, regardless of default text direction for input text.
-
-You may use this if you wish to center your text or align it flush in one direction
-to fit it within your UI design.
-
-If this value is not set, text alignment will be based on the characters within
-the editor, on a per-block basis.
-
-#### blockRendererFn
-\`\`\`
-blockRendererFn?: (block: ContentBlock) => ?Object
-\`\`\`
-Optionally set a function to define custom block rendering. See
-[Advanced Topics: Block Components](/draft-js/docs/advanced-topics-block-components.html)
-for details on usage.
-
-#### blockStyleFn
-\`\`\`
-blockStyleFn?: (block: ContentBlock) => string
-\`\`\`
-Optionally set a function to define class names to apply to the given block
-when it is rendered. See
-[Advanced Topics: Block Styling](/draft-js/docs/advanced-topics-block-styling.html)
-for details on usage.
-
-#### customStyleMap
-\`\`\`
-customStyleMap?: Object
-\`\`\`
-Optionally define a map of inline styles to apply to spans of text with the specified
-style. See
-[Advanced Topics: Inline Styles](/draft-js/docs/advanced-topics-inline-styles.html)
-for details on usage.
-
-### Behavior (Optional)
-
-#### readOnly
-\`\`\`
-readOnly?: boolean
-\`\`\`
-Set whether the editor should be rendered as static DOM, with all editability
-disabled.
-
-This is useful when supporting interaction within
-[custom block components](/draft-js/docs/advanced-topics-block-components.html)
-or if you just want to display content for a static use case.
-
-Default is \`false\`.
-
-#### spellCheck
-\`\`\`
-spellCheck?: boolean
-\`\`\`
-Set whether spellcheck is turned on for your editor.
-
-Note that in OSX Safari, enabling spellcheck also enables autocorrect, if the user
-has it turned on. Also note that spellcheck is always disabled in IE, since the events
-needed to observe spellcheck events are not fired in IE.
-
-Default is \`false\`.
-
-#### stripPastedStyles
-\`\`\`
-stripPastedStyles?: boolean
-\`\`\`
-Set whether to remove all information except plaintext from pasted content.
-
-This should be used if your editor does not support rich styles.
-
-Default is \`false\`.
-
-### DOM and Accessibility (Optional)
-
-#### tabIndex
-#### ARIA props
-
-These props allow you to set accessibility properties on your editor. See
-[DraftEditorProps](https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditorProps.js) for the exhaustive list of supported attributes.
-
-### Cancelable Handlers (Optional)
-
-These prop functions are provided to allow custom event handling for a small
-set of useful events. By returning true from your handler, you indicate that
-the event is handled and the Draft core should do nothing more with it. By returning
-false, you defer to Draft to handle the event.
-
-#### handleReturn
-\`\`\`
-handleReturn?: (e: SyntheticKeyboardEvent) => boolean
-\`\`\`
-Handle a \`RETURN\` keydown event. Example usage: Choosing a mention tag from a
-rendered list of results to trigger applying the mention entity to your content.
-
-#### handleKeyCommand
-\`\`\`
-handleKeyCommand?: (command: string) => boolean
-\`\`\`
-Handle the named editor command. See
-[Advanced Topics: Key Bindings](/draft-js/docs/advanced-topics-key-bindings.html)
-for details on usage.
-
-#### handleBeforeInput
-\`\`\`
-handleBeforeInput?: (e: SyntheticInputEvent) => boolean
-\`\`\`
-Handle a \`beforeInput\` event before character insertion occurs within the editor.
-Example usage: After a user has typed \`- \` at the start of a new block, you might
-convert that \`ContentBlock\` into an \`unordered-list-item\`.
-
-At Facebook, we also use this to convert typed ASCII quotes into "smart" quotes,
-and to convert typed emoticons into images.
-
-#### handlePastedFiles
-\`\`\`
-handlePastedFiles?: (files: Array<Blob>) => boolean
-\`\`\`
-Handle files that have been pasted directly into the editor.
-
-### Key Handlers (Optional)
-
-These prop functions expose common useful key events. Example: at Facebook, these are
-used to provide keyboard interaction for mention results in inputs.
-
-#### onEscape
-\`\`\`
-onEscape?: (e: SyntheticKeyboardEvent) => void
-\`\`\`
-
-#### onTab
-\`\`\`
-onTab?: (e: SyntheticKeyboardEvent) => void
-\`\`\`
-
-#### onUpArrow
-\`\`\`
-onUpArrow?: (e: SyntheticKeyboardEvent) => void
-\`\`\`
-
-#### onDownArrow
-\`\`\`
-onDownArrow?: (e: SyntheticKeyboardEvent) => void
-\`\`\`
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-editor","title":"Editor Component","layout":"docs","category":"API Reference","next":"api-reference-editor-state","permalink":"docs/api-reference-editor.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
124 website/src/draft-js/docs/api-reference-entity.js
@@ -1,124 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`Entity\` is a static module containing the API for creating, retrieving, and
-updating entity objects, which are used for annotating text ranges with metadata.
-This module also houses the single store used to maintain entity data.
-
-This article is dedicated to covering the details of the API. See the
-[advanced topics article on entities](/draft-js/docs/advanced-topics-entities.html)
-for more detail on how entities may be used.
-
-Entity objects returned by \`Entity\` methods are represented as
-[DraftEntityInstance](https://github.com/facebook/draft-js/blob/master/src/model/entity/DraftEntityInstance.js) immutable records. These have a simple set of getter functions and should
-be used only for retrieval.
-
-## Overview
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#create">
- <pre>create(...): DraftEntityInstance</pre>
- </a>
- </li>
- <li>
- <a href="#add">
- <pre>add(instance: DraftEntityInstance): string</pre>
- </a>
- </li>
- <li>
- <a href="#get">
- <pre>get(key: string): DraftEntityInstance</pre>
- </a>
- </li>
- <li>
- <a href="#mergedata">
- <pre>mergeData(...): DraftEntityInstance</pre>
- </a>
- </li>
- <li>
- <a href="#replacedata">
- <pre>replaceData(...): DraftEntityInstance</pre>
- </a>
- </li>
-</ul>
-
-## Methods
-
-### create
-
-\`\`\`
-create(
- type: DraftEntityType,
- mutability: DraftEntityMutability,
- data?: Object
-): string
-\`\`\`
-The \`create\` method should be used to generate a new entity object with the
-supplied properties.
-
-Note that a string is returned from this function. This is because entities
-are referenced by their string key in \`ContentState\`. The string value should
-be used within \`CharacterMetadata\` objects to track the entity for annotated
-characters.
-
-### add
-
-\`\`\`
-add(instance: DraftEntityInstance): string
-\`\`\`
-In most cases, you will use \`Entity.create()\`. This is a convenience method
-that you probably will not need in typical Draft usage.
-
-The \`add\` function is useful in cases where the instances have already been
-created, and now need to be added to the \`Entity\` store. This may occur in cases
-where a vanilla JavaScript representation of a \`ContentState\` is being revived
-for editing.
-
-### get
-
-\`\`\`
-get(key: string): DraftEntityInstance
-\`\`\`
-Returns the \`DraftEntityInstance\` for the specified key. Throws if no instance
-exists for that key.
-
-### mergeData
-
-\`\`\`
-mergeData(
- key: string,
- toMerge: {[key: string]: any}
-): DraftEntityInstance
-\`\`\`
-Since \`DraftEntityInstance\` objects are immutable, you cannot update an entity's
-metadata through typical mutative means.
-
-The \`mergeData\` method allows you to apply updates to the specified entity.
-
-### replaceData
-
-\`\`\`
-replaceData(
- key: string,
- newData: {[key: string]: any}
-): DraftEntityInstance
-\`\`\`
-The \`replaceData\` method is similar to the \`mergeData\` method, except it will
-totally discard the existing \`data\` value for the instance and replace it with
-the specified \`newData\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-entity","title":"Entity","layout":"docs","category":"API Reference","next":"api-reference-selection-state","permalink":"docs/api-reference-entity.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
215 website/src/draft-js/docs/api-reference-modifier.js
@@ -1,215 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-The \`Modifier\` module is a static set of utility functions that encapsulate common
-edit operations on \`ContentState\` objects. It is highly recommended that you use
-these methods for edit operations.
-
-These methods also take care of removing or modifying entity ranges appropriately,
-given the mutability types of any affected entities.
-
-In each case, these methods accept \`ContentState\` objects with relevant
-parameters and return \`ContentState\` objects. The returned \`ContentState\`
-will be the same as the input object if no edit was actually performed.
-
-## Overview
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#replacetext">
- <pre>replaceText(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#inserttext">
- <pre>insertText(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#movetext">
- <pre>moveText(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#replacewithfragment">
- <pre>replaceWithFragment(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#removerange">
- <pre>removeRange(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#splitblock">
- <pre>splitBlock(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#applyinlinestyle">
- <pre>applyInlineStyle(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#removeinlinestyle">
- <pre>removeInlineStyle(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#setblocktype">
- <pre>setBlockType(...): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#applyentity">
- <pre>applyEntity(...): ContentState</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### replaceText
-
-\`\`\`
-replaceText(
- contentState: ContentState,
- rangeToReplace: SelectionState,
- text: string,
- inlineStyle?: DraftInlineStyle,
- entityKey?: ?string
-): ContentState
-\`\`\`
-Replaces the specified range of this \`ContentState\` with the supplied string,
-with the inline style and entity key applied to the entire inserted string.
-
-Example: On Facebook, when replacing \`@abraham lincoln\` with a mention of
-Abraham Lincoln, the entire old range is the target to replace and the mention
-entity should be applied to the inserted string.
-
-### insertText
-
-\`\`\`
-insertText(
- contentState: ContentState,
- targetRange: SelectionState,
- text: string,
- inlineStyle?: DraftInlineStyle,
- entityKey?: ?string
-): ContentState
-\`\`\`
-Identical to \`replaceText\`, but enforces that the target range is collapsed
-so that no characters are replaced. This is just for convenience, since text
-edits are so often insertions rather than replacements.
-
-### moveText
-
-\`\`\`
-moveText(
- contentState: ContentState,
- removalRange: SelectionState,
- targetRange: SelectionState
-): ContentState
-\`\`\`
-Moves the "removal" range to the "target" range, replacing the target text.
-
-### replaceWithFragment
-
-\`\`\`
-replaceWithFragment(
- contentState: ContentState,
- targetRange: SelectionState,
- fragment: BlockMap
-): ContentState
-\`\`\`
-A "fragment" is a section of a block map, effectively just an
-\`OrderedMap<string, ContentBlock>\` much the same as the full block map of a
-\`ContentState\` object.
-
-This method will replace the "target" range with the fragment.
-
-Example: When pasting content, we convert the paste into a fragment to be inserted
-into the editor, then use this method to add it.
-
-### removeRange
-
-\`\`\`
-removeRange(
- contentState: ContentState,
- rangeToRemove: SelectionState,
- removalDirection: DraftRemovalDirection
-): ContentState
-\`\`\`
-Remove an entire range of text from the editor. The removal direction is important
-for proper entity deletion behavior.
-
-### splitBlock
-
-\`\`\`
-splitBlock(
- contentState: ContentState,
- selectionState: SelectionState
-): ContentState
-\`\`\`
-Split the selected block into two blocks. This should only be used if the
-selection is collapsed.
-
-### applyInlineStyle
-
-\`\`\`
-applyInlineStyle(
- contentState: ContentState,
- selectionState: SelectionState,
- inlineStyle: string
-): ContentState
-\`\`\`
-Apply the specified inline style to the entire selected range.
-
-### removeInlineStyle
-
-\`\`\`
-removeInlineStyle(
- contentState: ContentState,
- selectionState: SelectionState,
- inlineStyle: string
-): ContentState
-\`\`\`
-Remove the specified inline style from the entire selected range.
-
-### setBlockType
-
-\`\`\`
-setBlockType(
- contentState: ContentState,
- selectionState: SelectionState,
- blockType: DraftBlockType
-): ContentState
-\`\`\`
-Set the block type for all selected blocks.
-
-### applyEntity
-
-\`\`\`
-applyEntity(
- contentState: ContentState,
- selectionState: SelectionState,
- entityKey: ?string
-): ContentState
-\`\`\`
-Apply an entity to the entire selected range, or remove all entities from the
-range if \`entityKey\` is \`null\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-modifier","title":"Modifier","layout":"docs","category":"API Reference","permalink":"docs/api-reference-modifier.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
331 website/src/draft-js/docs/api-reference-selection-state.js
@@ -1,331 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`SelectionState\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents a selection range in the editor.
-
-The most common use for the \`SelectionState\` object is via \`EditorState.getSelection()\`,
-which provides the \`SelectionState\` currently being rendered in the editor.
-
-### Keys and Offsets
-
-A selection range has two points: an **anchor** and a **focus**. (Read more on
-[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Selection#Glossary)).
-
-The native DOM approach represents each point as a Node/offset pair, where the offset
-is a number corresponding either to a position within a Node's \`childNodes\` or, if the
-Node is a text node, a character offset within the text contents.
-
-Since Draft maintains the contents of the editor using \`ContentBlock\` objects,
-we can use our own model to represent these points. Thus, selection points are
-tracked as key/offset pairs, where the \`key\` value is the key of the \`ContentBlock\`
-where the point is positioned and the \`offset\` value is the character offset
-within the block.
-
-### Start/End vs. Anchor/Focus
-
-The concept of **anchor** and **focus** is very useful when actually rendering
-a selection state in the browser, as it allows us to use forward and backward
-selection as needed. For editing operations, however, the direction of the selection
-doesn't matter. In this case, it is more appropriate to think in terms of
-**start** and **end** points.
-
-The \`SelectionState\` therefore exposes both anchor/focus values and
-start/end values. When managing selection behavior, we recommend that
-you work with _anchor_ and _focus_ values to maintain selection direction.
-When managing content operations, however, we recommend that you use _start_
-and _end_ values.
-
-For instance, when extracting a slice of text from a block based on a
-\`SelectionState\`, it is irrelevant whether the selection is backward:
-
-\`\`\`
-var start = selectionState.getStartOffset();
-var end = selectionState.getEndOffset();
-var selectedText = myContentBlock.getText().slice(start, end);
-\`\`\`
-
-Note that \`SelectionState\` itself tracks only _anchor_ and _focus_ values.
-_Start_ and _end_ values are derived.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createempty">
- <pre>static createEmpty(blockKey)</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getstartkey">
- <pre>getStartKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getstartoffset">
- <pre>getStartOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getendkey">
- <pre>getEndKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getendoffset">
- <pre>getEndOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getanchorkey">
- <pre>getAnchorKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getanchoroffset">
- <pre>getAnchorOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getfocuskey">
- <pre>getFocusKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getfocusoffset">
- <pre>getFocusOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getisbackward">
- <pre>getIsBackward()</pre>
- </a>
- </li>
- <li>
- <a href="#gethasfocus">
- <pre>getHasFocus()</pre>
- </a>
- </li>
- <li>
- <a href="#iscollapsed">
- <pre>isCollapsed()</pre>
- </a>
- </li>
- <li>
- <a href="#hasedgewithin">
- <pre>hasEdgeWithin(blockKey, start, end)</pre>
- </a>
- </li>
- <li>
- <a href="#serialize">
- <pre>serialize()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#anchorkey">
- <pre>anchorKey</pre>
- </a>
- </li>
- <li>
- <a href="#anchoroffset">
- <pre>anchorOffset</pre>
- </a>
- </li>
- <li>
- <a href="#focuskey">
- <pre>focusKey</pre>
- </a>
- </li>
- <li>
- <a href="#focusoffset">
- <pre>focusOffset</pre>
- </a>
- </li>
- <li>
- <a href="#isbackward">
- <pre>isBackward</pre>
- </a>
- </li>
- <li>
- <a href="#hasfocus">
- <pre>hasFocus</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createEmpty()
-
-\`\`\`
-createEmpty(blockKey: string): SelectionState
-\`\`\`
-Create a \`SelectionState\` object at the zero offset of the provided block key
-and \`hasFocus\` set to false.
-
-## Methods
-
-### getStartKey()
-
-\`\`\`
-getStartKey(): string
-\`\`\`
-Returns the key of the block containing the start position of the selection range.
-
-### getStartOffset()
-
-\`\`\`
-getStartOffset(): number
-\`\`\`
-Returns the block-level character offset of the start position of the selection range.
-
-### getEndKey()
-
-\`\`\`
-getEndKey(): string
-\`\`\`
-Returns the key of the block containing the end position of the selection range.
-
-### getEndOffset()
-
-\`\`\`
-getEndOffset(): number
-\`\`\`
-Returns the block-level character offset of the end position of the selection range.
-
-### getAnchorKey()
-
-\`\`\`
-getAnchorKey(): string
-\`\`\`
-Returns the key of the block containing the anchor position of the selection range.
-
-### getAnchorOffset()
-
-\`\`\`
-getAnchorOffset(): number
-\`\`\`
-Returns the block-level character offset of the anchor position of the selection range.
-
-### getFocusKey()
-
-\`\`\`
-getFocusKey(): string
-\`\`\`
-Returns the key of the block containing the focus position of the selection range.
-
-### getFocusOffset()
-
-\`\`\`
-getFocusOffset(): number
-\`\`\`
-Returns the block-level character offset of the focus position of the selection range.
-
-### getIsBackward()
-
-\`\`\`
-getIsBackward(): boolean
-\`\`\`
-Returns whether the focus position is before the anchor position in the document.
-
-This must be derived from the key order of the active \`ContentState\`, or if the selection
-range is entirely within one block, a comparison of the anchor and focus offset values.
-
-### getHasFocus()
-
-\`\`\`
-getHasFocus(): boolean
-\`\`\`
-Returns whether the editor has focus.
-
-### isCollapsed()
-
-\`\`\`
-isCollapsed(): boolean
-\`\`\`
-Returns whether the selection range is collapsed, i.e. a caret. This is true
-when the anchor and focus keys are the same /and/ the anchor and focus offsets
-are the same.
-
-### hasEdgeWithin()
-
-\`\`\`
-hasEdgeWithin(blockKey: string, start: number, end: number): boolean
-\`\`\`
-Returns whether the selection range has an edge that overlaps with the specified
-start/end range within a given block.
-
-This is useful when setting DOM selection within a block after contents are
-rendered.
-
-### serialize()
-
-\`\`\`
-serialize(): string
-\`\`\`
-Returns a serialized version of the \`SelectionState\`. Useful for debugging.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-\`\`\`
-var selectionState = SelectionState.createEmpty('foo');
-var updatedSelection = selectionState.merge({
- focusKey: 'bar',
- focusOffset: 0,
-});
-var anchorKey = updatedSelection.getAnchorKey(); // 'foo'
-var focusKey = updatedSelection.getFocusKey(); // 'bar'
-\`\`\`
-
-### anchorKey
-The block containing the anchor end of the selection range.
-
-### anchorOffset
-The offset position of the anchor end of the selection range.
-
-### focusKey
-The block containing the focus end of the selection range.
-
-### focusOffset
-The offset position of the focus end of the selection range.
-
-### isBackward
-If the anchor position is lower in the document than the focus position, the
-selection is backward. Note: The \`SelectionState\` is an object with
-no knowledge of the \`ContentState\` structure. Therefore, when updating
-\`SelectionState\` values, you are responsible for updating \`isBackward\` as well.
-
-### hasFocus
-Whether the editor currently has focus.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-selection-state","title":"SelectionState","layout":"docs","category":"API Reference","next":"api-reference-data-conversion","permalink":"docs/api-reference-selection-state.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
262 website/src/draft-js/docs/api/character-metadata.js
@@ -1,262 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`CharacterMetadata\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents inline style and entity information for a single character.
-
-\`CharacterMetadata\` objects are pooled and shared.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createfromtext">
- <pre>createFromText()</pre>
- </a>
- </li>
- <li>
- <a href="#createfromblockarray">
- <pre>createFromBlockArray()</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getblockmap">
- <pre>getBlockMap()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionbefore">
- <pre>getSelectionBefore()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionafter">
- <pre>getSelectionAfter()</pre>
- </a>
- </li>
- <li>
- <a href="#getblockforkey">
- <pre>getBlockForKey(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeybefore">
- <pre>getKeyBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeyafter">
- <pre>getKeyAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockbefore">
- <pre>getBlockBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockafter">
- <pre>getBlockAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblocksasarray">
- <pre>getBlocksAsArray()</pre>
- </a>
- </li>
- <li>
- <a href="#getlastblock">
- <pre>getLastBlock()</pre>
- </a>
- </li>
- <li>
- <a href="#getplaintext">
- <pre>getPlainText(delimiter)</pre>
- </a>
- </li>
- <li>
- <a href="#hastext">
- <pre>hasText()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#blockmap">
- <pre>blockMap</pre>
- </a>
- </li>
- <li>
- <a href="#selectionbefore">
- <pre>selectionBefore</pre>
- </a>
- </li>
- <li>
- <a href="#selectionafter">
- <pre>selectionAfter</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createFromText
-
-\`\`\`
-createFromText(text: string, delimiter?: string): ContentState
-\`\`\`
-Generates a \`ContentState\` from a string, with a delimiter to split the string
-into \`ContentBlock\` objects. If no delimiter is provided, '\\n' is used.
-
-### createFromBlockArray
-
-\`\`\`
-createFromBlockArray(blocks: Array<ContentBlock>): ContentState
-\`\`\`
-Generates a \`ContentState\` from an array of \`ContentBlock\` objects. The default
-\`selectionBefore\` and \`selectionAfter\` states have the cursor at the start of
-the content.
-
-## Methods
-
-### getBlockMap
-
-\`\`\`
-getBlockMap(): BlockMap
-\`\`\`
-Returns the full ordered map of \`ContentBlock\` objects representing the state
-of an entire document.
-
-In most cases, you should be able to use the convenience methods below to target
-specific \`ContentBlock\` objects or obtain information about the state of the content.
-
-### getSelectionBefore
-
-\`\`\`
-getSelectionBefore(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor before rendering \`blockMap\`.
-
-When performing an \`undo\` action in the editor, the \`selectionBefore\` of the current
-\`ContentState\` is used to place the selection range in the appropriate position.
-
-### getSelectionAfter
-
-\`\`\`
-getSelectionAfter(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor after rendering \`blockMap\`.
-
-When performing any action in the editor that leads to this \`blockMap\` being rendered,
-the selection range will be placed in the \`selectionAfter\` position.
-
-### getBlockForKey
-
-\`\`\`
-getBlockForKey(key: string): ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` corresponding to the given block key.
-
-#### Example
-
-\`\`\`
-var {editorState} = this.state;
-var blockKey = editorState.getSelection().getStartKey();
-var selectedBlockType = editorState
- .getCurrentContent()
- .getBlockForKey(startKey)
- .getType();
-\`\`\`
-
-### getKeyBefore()
-
-\`\`\`
-getKeyBefore(key: string): ?string
-\`\`\`
-Returns the key before the specified key in \`blockMap\`, or null if this is the first key.
-
-### getKeyAfter()
-
-\`\`\`
-getKeyAfter(key: string): ?string
-\`\`\`
-Returns the key after the specified key in \`blockMap\`, or null if this is the last key.
-
-### getBlockBefore()
-
-\`\`\`
-getBlockBefore(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` before the specified key in \`blockMap\`, or null if this is
-the first key.
-
-### getBlockAfter()
-
-\`\`\`
-getBlockAfter(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` after the specified key in \`blockMap\`, or null if this is
-the last key.
-
-### getBlocksAsArray()
-
-\`\`\`
-getBlocksAsArray(): Array<ContentBlock>
-\`\`\`
-Returns the values of \`blockMap\` as an array.
-
-### getPlainText()
-
-\`\`\`
-getPlainText(delimiter?: string): string
-\`\`\`
-Returns the full plaintext value of the contents, joined with a delimiter. If no
-delimiter is specified, the line feed character (\`\\u000A\`) is used.
-
-### hasText()
-
-\`\`\`
-hasText(): boolean
-\`\`\`
-Returns whether the contents contain any text at all.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-### blockMap
-See \`getBlockMap()\`.
-
-### selectionBefore
-See \`getSelectionBefore()\`.
-
-### selectionAfter
-See \`getSelectionAfter()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-character-metadata","title":"CharacterMetadata","layout":"docs","category":"API Reference","next":"api-reference-selection-state","permalink":"docs/api/character-metadata.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
239 website/src/draft-js/docs/api/content-block.js
@@ -1,239 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentBlock\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of a single block of editor content, including:
-
- - Plain text contents of the block
- - Type, e.g. paragraph, header, list item
- - Entity, inline style, and depth information
-
-A \`ContentState\` object contains an \`OrderedMap\` of these \`ContentBlock\` objects,
-which together comprise the full contents of the editor.
-
-\`ContentBlock\` objects are largely analogous to block-level HTML elements like
-paragraphs and list items.
-
-New \`ContentBlock\` objects may be created directly using the constructor.
-Expected Record values are detailed below.
-
-## Overview
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getkey">
- <pre>getKey(): string</pre>
- </a>
- </li>
- <li>
- <a href="#gettype">
- <pre>getType(): DraftBlockType</pre>
- </a>
- </li>
- <li>
- <a href="#gettext">
- <pre>getText(): string</pre>
- </a>
- </li>
- <li>
- <a href="#getcharacterlist">
- <pre>getCharacterList(): List<CharacterMetadata></pre>
- </a>
- </li>
- <li>
- <a href="#getlength">
- <pre>getLength(): number</pre>
- </a>
- </li>
- <li>
- <a href="#getdepth">
- <pre>getDepth(): number</pre>
- </a>
- </li>
- <li>
- <a href="#getinlinestyleat">
- <pre>getInlineStyleAt(offset: number): DraftInlineStyle</pre>
- </a>
- </li>
- <li>
- <a href="#getentityat">
- <pre>getEntityAt(offset: number): ?string</pre>
- </a>
- </li>
- <li>
- <a href="#findstyleranges">
- <pre>findStyleRanges(filterFn: Function, callback: Function): void</pre>
- </a>
- </li>
- <li>
- <a href="#findentityranges">
- <pre>findEntityRanges(filterFn: Function, callback: Function): void</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Note
->
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record)
-> for the \`ContentBlock\` constructor or to set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#key">
- <pre>key: string</pre>
- </a>
- </li>
- <li>
- <a href="#type">
- <pre>type: DraftBlockType</pre>
- </a>
- </li>
- <li>
- <a href="#text">
- <pre>text: string</pre>
- </a>
- </li>
- <li>
- <a href="#characterlist">
- <pre>characterList: List<CharacterMetadata></pre>
- </a>
- </li>
- <li>
- <a href="#depth">
- <pre>depth: number</pre>
- </a>
- </li>
-</ul>
-
-## Methods
-
-### getKey()
-
-\`\`\`
-getKey(): string
-\`\`\`
-Returns the string key for this \`ContentBlock\`.
-
-### getType()
-
-\`\`\`
-getType(): DraftBlockType
-\`\`\`
-Returns the type for this \`ContentBlock\`. Type values are largely analogous to
-block-level HTML elements.
-
-### getText()
-
-\`\`\`
-getText(): string
-\`\`\`
-Returns the full plaintext for this \`ContentBlock\`. This value does not contain
-any styling, decoration, or HTML information.
-
-### getCharacterList()
-
-\`\`\`
-getCharacterList(): List<CharacterMetadata>
-\`\`\`
-Returns an immutable \`List\` of \`CharacterMetadata\` objects, one for each
-character in the \`ContentBlock\`. (See [CharacterMetadata](/draft-js/docs/api/character-metadata.html)
-for details.)
-
-This \`List\` contains all styling and entity information for the block.
-
-### getLength()
-
-\`\`\`
-getLength(): number
-\`\`\`
-Returns the length of the plaintext for the \`ContentBlock\`.
-
-This value uses the standard JavaScript \`length\` property for the string, and
-is therefore not Unicode-aware -- surrogate pairs will be counted as two
-characters.
-
-### getDepth()
-
-\`\`\`
-getDepth(): number
-\`\`\`
-Returns the depth value for this block, if any. This is currently used only
-for list items.
-
-### getInlineStyleAt()
-
-\`\`\`
-getInlineStyleAt(offset: number): DraftInlineStyle
-\`\`\`
-Returns the \`DraftInlineStyle\` value (an \`OrderedSet<string>\`) at a given offset
-within this \`ContentBlock\`.
-
-### getEntityAt()
-
-\`\`\`
-getEntityAt(offset: number): ?string
-\`\`\`
-Returns the entity key value (or \`null\` if none) at a given offset within this
-\`ContentBlock\`.
-
-### findStyleRanges()
-
-\`\`\`
-findStyleRanges(
- filterFn: (value: CharacterMetadata) => boolean,
- callback: (start: number, end: number) => void
-): void
-\`\`\`
-Executes a callback for each contiguous range of styles within this
-\`ContentBlock\`.
-
-### findEntityRanges()
-
-\`\`\`
-findEntityRanges(
- filterFn: (value: CharacterMetadata) => boolean,
- callback: (start: number, end: number) => void
-): void
-\`\`\`
-Executes a callback for each contiguous range of entities within this
-\`ContentBlock\`.
-
-## Properties
-
-> Note
->
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record)
-> for the \`ContentBlock\` constructor or to set properties.
-
-### key
-See \`getKey()\`.
-
-### text
-See \`getText()\`.
-
-### type
-See \`getType()\`.
-
-### characterList
-See \`getCharacterList()\`.
-
-### depth
-See \`getDepth()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-content-block","title":"ContentBlock","layout":"docs","category":"API Reference","next":"api-reference-character-metadata","permalink":"docs/api/content-block.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
269 website/src/draft-js/docs/api/content-state.js
@@ -1,269 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentState\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of:
-
-- The entire **contents** of an editor: text, block and inline styles, and entity ranges.
-- Two **selection states** of an editor: before and after the rendering of these contents.
-
-The most common use for the \`ContentState\` object is via \`EditorState.getCurrentContent()\`,
-which provides the \`ContentState\` currently being rendered in the editor.
-
-An \`EditorState\` object maintains undo and redo stacks comprised of \`ContentState\`
-objects.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createfromtext">
- <pre>createFromText(text: string)</pre>
- </a>
- </li>
- <li>
- <a href="#createfromblockarray">
- <pre>createFromBlockArray(blocks: Array<ContentBlock>)</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getblockmap">
- <pre>getBlockMap()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionbefore">
- <pre>getSelectionBefore()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionafter">
- <pre>getSelectionAfter()</pre>
- </a>
- </li>
- <li>
- <a href="#getblockforkey">
- <pre>getBlockForKey(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeybefore">
- <pre>getKeyBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeyafter">
- <pre>getKeyAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockbefore">
- <pre>getBlockBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockafter">
- <pre>getBlockAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblocksasarray">
- <pre>getBlocksAsArray()</pre>
- </a>
- </li>
- <li>
- <a href="#getlastblock">
- <pre>getLastBlock()</pre>
- </a>
- </li>
- <li>
- <a href="#getplaintext">
- <pre>getPlainText(delimiter)</pre>
- </a>
- </li>
- <li>
- <a href="#hastext">
- <pre>hasText()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#blockmap">
- <pre>blockMap</pre>
- </a>
- </li>
- <li>
- <a href="#selectionbefore">
- <pre>selectionBefore</pre>
- </a>
- </li>
- <li>
- <a href="#selectionafter">
- <pre>selectionAfter</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createFromText
-
-\`\`\`
-createFromText(text: string, delimiter?: string): ContentState
-\`\`\`
-Generates a \`ContentState\` from a string, with a delimiter to split the string
-into \`ContentBlock\` objects. If no delimiter is provided, '\\n' is used.
-
-### createFromBlockArray
-
-\`\`\`
-createFromBlockArray(blocks: Array<ContentBlock>): ContentState
-\`\`\`
-Generates a \`ContentState\` from an array of \`ContentBlock\` objects. The default
-\`selectionBefore\` and \`selectionAfter\` states have the cursor at the start of
-the content.
-
-## Methods
-
-### getBlockMap
-
-\`\`\`
-getBlockMap(): BlockMap
-\`\`\`
-Returns the full ordered map of \`ContentBlock\` objects representing the state
-of an entire document.
-
-In most cases, you should be able to use the convenience methods below to target
-specific \`ContentBlock\` objects or obtain information about the state of the content.
-
-### getSelectionBefore
-
-\`\`\`
-getSelectionBefore(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor before rendering \`blockMap\`.
-
-When performing an \`undo\` action in the editor, the \`selectionBefore\` of the current
-\`ContentState\` is used to place the selection range in the appropriate position.
-
-### getSelectionAfter
-
-\`\`\`
-getSelectionAfter(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor after rendering \`blockMap\`.
-
-When performing any action in the editor that leads to this \`blockMap\` being rendered,
-the selection range will be placed in the \`selectionAfter\` position.
-
-### getBlockForKey
-
-\`\`\`
-getBlockForKey(key: string): ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` corresponding to the given block key.
-
-#### Example
-
-\`\`\`
-var {editorState} = this.state;
-var blockKey = editorState.getSelection().getStartKey();
-var selectedBlockType = editorState
- .getCurrentContent()
- .getBlockForKey(startKey)
- .getType();
-\`\`\`
-
-### getKeyBefore()
-
-\`\`\`
-getKeyBefore(key: string): ?string
-\`\`\`
-Returns the key before the specified key in \`blockMap\`, or null if this is the first key.
-
-### getKeyAfter()
-
-\`\`\`
-getKeyAfter(key: string): ?string
-\`\`\`
-Returns the key after the specified key in \`blockMap\`, or null if this is the last key.
-
-### getBlockBefore()
-
-\`\`\`
-getBlockBefore(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` before the specified key in \`blockMap\`, or null if this is
-the first key.
-
-### getBlockAfter()
-
-\`\`\`
-getBlockAfter(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` after the specified key in \`blockMap\`, or null if this is
-the last key.
-
-### getBlocksAsArray()
-
-\`\`\`
-getBlocksAsArray(): Array<ContentBlock>
-\`\`\`
-Returns the values of \`blockMap\` as an array.
-
-### getPlainText()
-
-\`\`\`
-getPlainText(delimiter?: string): string
-\`\`\`
-Returns the full plaintext value of the contents, joined with a delimiter. If no
-delimiter is specified, the line feed character (\`\\u000A\`) is used.
-
-### hasText()
-
-\`\`\`
-hasText(): boolean
-\`\`\`
-Returns whether the contents contain any text at all.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-### blockMap
-See \`getBlockMap()\`.
-
-### selectionBefore
-See \`getSelectionBefore()\`.
-
-### selectionAfter
-See \`getSelectionAfter()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-content-state","title":"ContentState","layout":"docs","category":"API Reference","next":"api-reference-content-block","permalink":"docs/api/content-state.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
269 website/src/draft-js/docs/api/data-conversion.js
@@ -1,269 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentBlock\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of:
-
-- The entire **contents** of an editor: text, block and inline styles, and entity ranges.
-- Two **selection states** of an editor: before and after the rendering of these contents.
-
-The most common use for the \`ContentState\` object is via \`EditorState.getCurrentContent()\`,
-which provides the \`ContentState\` currently being rendered in the editor.
-
-An \`EditorState\` object maintains undo and redo stacks comprised of \`ContentState\`
-objects.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createfromtext">
- <pre>createFromText()</pre>
- </a>
- </li>
- <li>
- <a href="#createfromblockarray">
- <pre>createFromBlockArray()</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getblockmap">
- <pre>getBlockMap()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionbefore">
- <pre>getSelectionBefore()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionafter">
- <pre>getSelectionAfter()</pre>
- </a>
- </li>
- <li>
- <a href="#getblockforkey">
- <pre>getBlockForKey(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeybefore">
- <pre>getKeyBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeyafter">
- <pre>getKeyAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockbefore">
- <pre>getBlockBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockafter">
- <pre>getBlockAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblocksasarray">
- <pre>getBlocksAsArray()</pre>
- </a>
- </li>
- <li>
- <a href="#getlastblock">
- <pre>getLastBlock()</pre>
- </a>
- </li>
- <li>
- <a href="#getplaintext">
- <pre>getPlainText(delimiter)</pre>
- </a>
- </li>
- <li>
- <a href="#hastext">
- <pre>hasText()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#blockmap">
- <pre>blockMap</pre>
- </a>
- </li>
- <li>
- <a href="#selectionbefore">
- <pre>selectionBefore</pre>
- </a>
- </li>
- <li>
- <a href="#selectionafter">
- <pre>selectionAfter</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createFromText
-
-\`\`\`
-createFromText(text: string, delimiter?: string): ContentState
-\`\`\`
-Generates a \`ContentState\` from a string, with a delimiter to split the string
-into \`ContentBlock\` objects. If no delimiter is provided, '\\n' is used.
-
-### createFromBlockArray
-
-\`\`\`
-createFromBlockArray(blocks: Array<ContentBlock>): ContentState
-\`\`\`
-Generates a \`ContentState\` from an array of \`ContentBlock\` objects. The default
-\`selectionBefore\` and \`selectionAfter\` states have the cursor at the start of
-the content.
-
-## Methods
-
-### getBlockMap
-
-\`\`\`
-getBlockMap(): BlockMap
-\`\`\`
-Returns the full ordered map of \`ContentBlock\` objects representing the state
-of an entire document.
-
-In most cases, you should be able to use the convenience methods below to target
-specific \`ContentBlock\` objects or obtain information about the state of the content.
-
-### getSelectionBefore
-
-\`\`\`
-getSelectionBefore(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor before rendering \`blockMap\`.
-
-When performing an \`undo\` action in the editor, the \`selectionBefore\` of the current
-\`ContentState\` is used to place the selection range in the appropriate position.
-
-### getSelectionAfter
-
-\`\`\`
-getSelectionAfter(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor after rendering \`blockMap\`.
-
-When performing any action in the editor that leads to this \`blockMap\` being rendered,
-the selection range will be placed in the \`selectionAfter\` position.
-
-### getBlockForKey
-
-\`\`\`
-getBlockForKey(key: string): ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` corresponding to the given block key.
-
-#### Example
-
-\`\`\`
-var {editorState} = this.state;
-var blockKey = editorState.getSelection().getStartKey();
-var selectedBlockType = editorState
- .getCurrentContent()
- .getBlockForKey(startKey)
- .getType();
-\`\`\`
-
-### getKeyBefore()
-
-\`\`\`
-getKeyBefore(key: string): ?string
-\`\`\`
-Returns the key before the specified key in \`blockMap\`, or null if this is the first key.
-
-### getKeyAfter()
-
-\`\`\`
-getKeyAfter(key: string): ?string
-\`\`\`
-Returns the key after the specified key in \`blockMap\`, or null if this is the last key.
-
-### getBlockBefore()
-
-\`\`\`
-getBlockBefore(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` before the specified key in \`blockMap\`, or null if this is
-the first key.
-
-### getBlockAfter()
-
-\`\`\`
-getBlockAfter(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` after the specified key in \`blockMap\`, or null if this is
-the last key.
-
-### getBlocksAsArray()
-
-\`\`\`
-getBlocksAsArray(): Array<ContentBlock>
-\`\`\`
-Returns the values of \`blockMap\` as an array.
-
-### getPlainText()
-
-\`\`\`
-getPlainText(delimiter?: string): string
-\`\`\`
-Returns the full plaintext value of the contents, joined with a delimiter. If no
-delimiter is specified, the line feed character (\`\\u000A\`) is used.
-
-### hasText()
-
-\`\`\`
-hasText(): boolean
-\`\`\`
-Returns whether the contents contain any text at all.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-### blockMap
-See \`getBlockMap()\`.
-
-### selectionBefore
-See \`getSelectionBefore()\`.
-
-### selectionAfter
-See \`getSelectionAfter()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-data-conversion","title":"Data Conversion","layout":"docs","category":"API Reference","next":"api-reference-modifier","permalink":"docs/api/data-conversion.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
269 website/src/draft-js/docs/api/drafteditor.js
@@ -1,269 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentBlock\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of:
-
-- The entire **contents** of an editor: text, block and inline styles, and entity ranges.
-- Two **selection states** of an editor: before and after the rendering of these contents.
-
-The most common use for the \`ContentState\` object is via \`EditorState.getCurrentContent()\`,
-which provides the \`ContentState\` currently being rendered in the editor.
-
-An \`EditorState\` object maintains undo and redo stacks comprised of \`ContentState\`
-objects.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createfromtext">
- <pre>createFromText()</pre>
- </a>
- </li>
- <li>
- <a href="#createfromblockarray">
- <pre>createFromBlockArray()</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getblockmap">
- <pre>getBlockMap()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionbefore">
- <pre>getSelectionBefore()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionafter">
- <pre>getSelectionAfter()</pre>
- </a>
- </li>
- <li>
- <a href="#getblockforkey">
- <pre>getBlockForKey(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeybefore">
- <pre>getKeyBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeyafter">
- <pre>getKeyAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockbefore">
- <pre>getBlockBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockafter">
- <pre>getBlockAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblocksasarray">
- <pre>getBlocksAsArray()</pre>
- </a>
- </li>
- <li>
- <a href="#getlastblock">
- <pre>getLastBlock()</pre>
- </a>
- </li>
- <li>
- <a href="#getplaintext">
- <pre>getPlainText(delimiter)</pre>
- </a>
- </li>
- <li>
- <a href="#hastext">
- <pre>hasText()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#blockmap">
- <pre>blockMap</pre>
- </a>
- </li>
- <li>
- <a href="#selectionbefore">
- <pre>selectionBefore</pre>
- </a>
- </li>
- <li>
- <a href="#selectionafter">
- <pre>selectionAfter</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createFromText
-
-\`\`\`
-createFromText(text: string, delimiter?: string): ContentState
-\`\`\`
-Generates a \`ContentState\` from a string, with a delimiter to split the string
-into \`ContentBlock\` objects. If no delimiter is provided, '\\n' is used.
-
-### createFromBlockArray
-
-\`\`\`
-createFromBlockArray(blocks: Array<ContentBlock>): ContentState
-\`\`\`
-Generates a \`ContentState\` from an array of \`ContentBlock\` objects. The default
-\`selectionBefore\` and \`selectionAfter\` states have the cursor at the start of
-the content.
-
-## Methods
-
-### getBlockMap
-
-\`\`\`
-getBlockMap(): BlockMap
-\`\`\`
-Returns the full ordered map of \`ContentBlock\` objects representing the state
-of an entire document.
-
-In most cases, you should be able to use the convenience methods below to target
-specific \`ContentBlock\` objects or obtain information about the state of the content.
-
-### getSelectionBefore
-
-\`\`\`
-getSelectionBefore(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor before rendering \`blockMap\`.
-
-When performing an \`undo\` action in the editor, the \`selectionBefore\` of the current
-\`ContentState\` is used to place the selection range in the appropriate position.
-
-### getSelectionAfter
-
-\`\`\`
-getSelectionAfter(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor after rendering \`blockMap\`.
-
-When performing any action in the editor that leads to this \`blockMap\` being rendered,
-the selection range will be placed in the \`selectionAfter\` position.
-
-### getBlockForKey
-
-\`\`\`
-getBlockForKey(key: string): ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` corresponding to the given block key.
-
-#### Example
-
-\`\`\`
-var {editorState} = this.state;
-var blockKey = editorState.getSelection().getStartKey();
-var selectedBlockType = editorState
- .getCurrentContent()
- .getBlockForKey(startKey)
- .getType();
-\`\`\`
-
-### getKeyBefore()
-
-\`\`\`
-getKeyBefore(key: string): ?string
-\`\`\`
-Returns the key before the specified key in \`blockMap\`, or null if this is the first key.
-
-### getKeyAfter()
-
-\`\`\`
-getKeyAfter(key: string): ?string
-\`\`\`
-Returns the key after the specified key in \`blockMap\`, or null if this is the last key.
-
-### getBlockBefore()
-
-\`\`\`
-getBlockBefore(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` before the specified key in \`blockMap\`, or null if this is
-the first key.
-
-### getBlockAfter()
-
-\`\`\`
-getBlockAfter(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` after the specified key in \`blockMap\`, or null if this is
-the last key.
-
-### getBlocksAsArray()
-
-\`\`\`
-getBlocksAsArray(): Array<ContentBlock>
-\`\`\`
-Returns the values of \`blockMap\` as an array.
-
-### getPlainText()
-
-\`\`\`
-getPlainText(delimiter?: string): string
-\`\`\`
-Returns the full plaintext value of the contents, joined with a delimiter. If no
-delimiter is specified, the line feed character (\`\\u000A\`) is used.
-
-### hasText()
-
-\`\`\`
-hasText(): boolean
-\`\`\`
-Returns whether the contents contain any text at all.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-### blockMap
-See \`getBlockMap()\`.
-
-### selectionBefore
-See \`getSelectionBefore()\`.
-
-### selectionAfter
-See \`getSelectionAfter()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-drafteditor","title":"DraftEditor","layout":"docs","category":"API Reference","next":"further-future-work","permalink":"docs/api/drafteditor.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
488 website/src/draft-js/docs/api/editor-state.js
@@ -1,488 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`EditorState\` is the top-level state object for the editor.
-
-It is an Immutable [Record](http://facebook.github.io/immutable-js/docs/#/Record/Record)
-that represents the entire state of a Draft editor, including:
-
- - The current text content state
- - The current selection state
- - The fully decorated representation of the contents
- - Undo/redo stacks
- - The most recent type of change made to the contents
-
-> Note
->
-> You should not use the Immutable API when using EditorState objects.
-> Instead, use the instance getters and static methods below.
-
-## Overview
-
-*Common instance methods*
-
-The list below includes the most commonly used instance methods for \`EditorState\` objects.
-
-<ul class="apiIndex">
- <li>
- <a href="#getcurrentcontent">
- <pre>getCurrentContent(): ContentState</pre>
- </a>
- </li>
- <li>
- <a href="#getselection">
- <pre>getSelection(): SelectionState</pre>
- </a>
- </li>
- <li>
- <a href="#getcurrentinlinestyle">
- <pre>getCurrentInlineStyle(): DraftInlineStyle</pre>
- </a>
- </li>
- <li>
- <a href="#getblocktree">
- <pre>getBlockTree(): OrderedMap</pre>
- </a>
- </li>
-</ul>
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createempty">
- <pre>static createEmpty(?decorator): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#createwithcontent">
- <pre>static createWithContent(contentState, ?decorator): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#create">
- <pre>static create(config): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#push">
- <pre>static push(editorState, contentState, changeType): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#undo">
- <pre>static undo(editorState): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#redo">
- <pre>static redo(editorState): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#acceptselection">
- <pre>static acceptSelection(editorState, selectionState): EditorState</pre>
- </a>
- </li>
- <li>
- <a href="#forceselection">
- <pre>static forceSelection(editorState, selectionState): EditorState</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Note
->
-> Use the static \`EditorState\` methods to set properties, rather than using
-> the Immutable API directly.
-
-<ul class="apiIndex">
- <li>
- <a href="#allowundo">
- <pre>allowUndo</pre>
- </a>
- </li>
- <li>
- <a href="#currentcontent">
- <pre>currentContent</pre>
- </a>
- </li>
- <li>
- <a href="#decorator">
- <pre>decorator</pre>
- </a>
- </li>
- <li>
- <a href="#directionMap">
- <pre>directionMap</pre>
- </a>
- </li>
- <li>
- <a href="#forceselection">
- <pre>forceSelection</pre>
- </a>
- </li>
- <li>
- <a href="#incompositionmode">
- <pre>inCompositionMode</pre>
- </a>
- </li>
- <li>
- <a href="#inlinestyleoverride">
- <pre>inlineStyleOverride</pre>
- </a>
- </li>
- <li>
- <a href="#lastchangetype">
- <pre>lastChangeType</pre>
- </a>
- </li>
- <li>
- <a href="#nativelyrenderedcontent">
- <pre>nativelyRenderedContent</pre>
- </a>
- </li>
- <li>
- <a href="#redostack">
- <pre>redoStack</pre>
- </a>
- </li>
- <li>
- <a href="#selection">
- <pre>selection</pre>
- </a>
- </li>
- <li>
- <a href="#treemap">
- <pre>treeMap</pre>
- </a>
- </li>
- <li>
- <a href="#undostack">
- <pre>undoStack</pre>
- </a>
- </li>
-</ul>
-
-## Common Instance Methods
-
-### getCurrentContent
-
-\`\`\`
-getCurrentContent(): ContentState
-\`\`\`
-Returns the current contents of the editor.
-
-### getSelection
-
-\`\`\`
-getSelection(): SelectionState
-\`\`\`
-Returns the current cursor/selection state of the editor.
-
-### getCurrentInlineStyle
-
-\`\`\`
-getCurrentInlineStyle(): DraftInlineStyle
-\`\`\`
-Returns an \`OrderedSet<string>\` that represents the "current" inline style
-for the editor.
-
-This is the inline style value that would be used if a character were inserted
-for the current \`ContentState\` and \`SelectionState\`, and takes into account
-any inline style overrides that should be applied.
-
-### getBlockTree
-
-\`\`\`
-getBlockTree(blockKey: string): List;
-\`\`\`
-Returns an Immutable \`List\` of decorated and styled ranges. This is used for
-rendering purposes, and is generated based on the \`currentContent\` and
-\`decorator\`.
-
-At render time, this object is used to break the contents into the appropriate
-block, decorator, and styled range components.
-
-## Static Methods
-
-### createEmpty
-
-\`\`\`
-static createEmpty(decorator?: DraftDecoratorType): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with an empty \`ContentState\` and default
-configuration.
-
-### createWithContent
-
-\`\`\`
-static createWithContent(
- contentState: ContentState,
- decorator?: DraftDecoratorType
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object based on the \`ContentState\` and decorator
-provided.
-
-### create
-
-\`\`\`
-static create(config: EditorStateCreationConfig): EditorState
-\`\`\`
-Returns a new \`EditorState\` object based on a configuration object. Use this
-if you need custom configuration not available via the methods above.
-
-### push
-
-\`\`\`
-static push(
- editorState: EditorState,
- contentState: ContentState,
- changeType: EditorChangeType
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the specified \`ContentState\` applied
-as the new \`currentContent\`. Based on the \`changeType\`, this \`ContentState\`
-may be regarded as a boundary state for undo/redo behavior. See
-[Undo/Redo](/draft-js/docs/advanced/undo-redo.html) discussion for details.
-
-All content changes must be applied to the EditorState with this method.
-
-_To be renamed._
-
-### undo
-
-\`\`\`
-static undo(editorState: EditorState): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the top of the undo stack applied
-as the new \`currentContent\`.
-
-The existing \`currentContent\` is pushed onto the \`redo\` stack.
-
-### redo
-
-\`\`\`
-static redo(editorState: EditorState): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the top of the redo stack applied
-as the new \`currentContent\`.
-
-The existing \`currentContent\` is pushed onto the \`undo\` stack.
-
-### acceptSelection
-
-\`\`\`
-static acceptSelection(
- editorState: EditorState,
- selectionState: SelectionState
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the specified \`SelectionState\` applied,
-but without requiring the selection to be rendered.
-
-For example, this is useful when the DOM selection has changed outside of our
-control, and no re-renders are necessary.
-
-### forceSelection
-
-\`\`\`
-static forceSelection(
- editorState: EditorState,
- selectionState: SelectionState
-): EditorState
-\`\`\`
-Returns a new \`EditorState\` object with the specified \`SelectionState\` applied,
-forcing the selection to be rendered.
-
-This is useful when the selection should be manually rendered in the correct
-location to maintain control of the rendered output.
-
-## Properties and Getters
-
-In most cases, the instance and static methods above should be sufficient to
-manage the state of your Draft editor.
-
-Below is the full list of properties tracked by an \`EditorState\`, as well as
-their corresponding getter methods, to better provide detail on the scope of the
-state tracked in this object.
-
-> Note
->
-> You should not use the Immutable API when using EditorState objects.
-> Instead, use the instance getters and static methods above.
-
-### allowUndo
-
-\`\`\`
-allowUndo: boolean;
-getAllowUndo()
-\`\`\`
-Whether to allow undo/redo behavior in this editor. Default is \`true\`.
-
-Since the undo/redo stack is the major source of memory retention, if you have
-an editor UI that does not require undo/redo behavior, you might consider
-setting this to \`false\`.
-
-### currentContent
-
-\`\`\`
-currentContent: ContentState;
-getCurrentContent()
-\`\`\`
-The currently rendered \`ContentState\`. See [getCurrentContent()](#getcurrentcontent).
-
-### decorator
-
-\`\`\`
-decorator: ?DraftDecoratorType;
-getDecorator()
-\`\`\`
-The current decorator object, if any.
-
-Note that the \`ContentState\` is independent of your decorator. If a decorator
-is provided, it will be used to decorate ranges of text for rendering.
-
-### directionMap
-
-\`\`\`
-directionMap: BlockMap;
-getDirectionMap()
-\`\`\`
-A map of each block and its text direction, as determined by UnicodeBidiService.
-
-You should not manage this manually.
-
-### forceSelection
-
-\`\`\`
-forceSelection: boolean;
-mustForceSelection()
-\`\`\`
-Whether to force the current \`SelectionState\` to be rendered.
-
-You should not set this property manually -- see
-[forceSelection()](#forceselection).
-
-### inCompositionMode
-
-\`\`\`
-inCompositionMode: boolean;
-isInCompositionMode()
-\`\`\`
-Whether the user is in IME composition mode. This is useful for rendering the
-appropriate UI for IME users, even when no content changes have been committed
-to the editor. You should not set this property manually.
-
-### inlineStyleOverride
-
-\`\`\`
-inlineStyleOverride: DraftInlineStyle;
-getInlineStyleOverride()
-\`\`\`
-An inline style value to be applied to the next inserted characters. This is
-used when keyboard commands or style buttons are used to apply an inline style
-for a collapsed selection range.
-
-\`DraftInlineStyle\` is a type alias for an immutable \`OrderedSet\` of strings,
-each of which corresponds to an inline style.
-
-### lastChangeType
-
-\`\`\`
-lastChangeType: EditorChangeType;
-getLastChangeType()
-\`\`\`
-The type of content change that took place in order to bring us to our current
-\`ContentState\`. This is used when determining boundary states for undo/redo.
-
-### nativelyRenderedContent
-
-\`\`\`
-nativelyRenderedContent: ?ContentState;
-getNativelyRenderedContent()
-\`\`\`
-During edit behavior, the editor may allow certain actions to render natively.
-For instance, during normal typing behavior in the contentEditable-based component,
-we can typically allow key events to fall through to print characters in the DOM.
-In doing so, we can avoid extra re-renders and preserve spellcheck highlighting.
-
-When allowing native rendering behavior, it is appropriate to use the
-\`nativelyRenderedContent\` property to indicate that no re-render is necessary
-for this \`EditorState\`.
-
-### redoStack
-
-\`\`\`
-redoStack: Stack<ContentState>;
-getRedoStack()
-\`\`\`
-An immutable stack of \`ContentState\` objects that can be resurrected for redo
-operations. When performing an undo operation, the current \`ContentState\` is
-pushed onto the \`redoStack\`.
-
-You should not manage this property manually. If you would like to disable
-undo/redo behavior, use the \`allowUndo\` property.
-
-See also [undoStack](#undostack).
-
-### selection
-
-\`\`\`
-selection: SelectionState;
-getSelection()
-\`\`\`
-The currently rendered \`SelectionState\`. See [acceptSelection()](#acceptselection)
-and [forceSelection()](#forceselection).
-
-You should not manage this property manually.
-
-### treeMap
-
-\`\`\`
-treeMap: OrderedMap<string, List>;
-\`\`\`
-The fully decorated and styled tree of ranges to be rendered in the editor
-component. The \`treeMap\` object is generated based on a \`ContentState\` and an
-optional decorator (\`DraftDecoratorType\`).
-
-At render time, components should iterate through the \`treeMap\` object to
-render decorated ranges and styled ranges, using the [getBlockTree()](#getblocktree)
-method.
-
-You should not manage this property manually.
-
-### undoStack
-
-\`\`\`
-undoStack: Stack<ContentState>;
-getUndoStack()
-\`\`\`
-An immutable stack of \`ContentState\` objects that can be restored for undo
-operations.
-
-When performing operations that modify contents, we determine whether the
-current \`ContentState\` should be regarded as a "boundary" state that the user
-can reach by performing an undo operation. If so, the \`ContentState\` is pushed
-onto the \`undoStack\`. If not, the outgoing \`ContentState\` is simply discarded.
-
-You should not manage this property manually. If you would like to disable
-undo/redo behavior, use the \`allowUndo\` property.
-
-See also [redoStack](#redostack).
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-editor-state","title":"EditorState","layout":"docs","category":"API Reference","next":"api-reference-content-state","permalink":"docs/api/editor-state.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
269 website/src/draft-js/docs/api/modifier.js
@@ -1,269 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentBlock\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of:
-
-- The entire **contents** of an editor: text, block and inline styles, and entity ranges.
-- Two **selection states** of an editor: before and after the rendering of these contents.
-
-The most common use for the \`ContentState\` object is via \`EditorState.getCurrentContent()\`,
-which provides the \`ContentState\` currently being rendered in the editor.
-
-An \`EditorState\` object maintains undo and redo stacks comprised of \`ContentState\`
-objects.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createfromtext">
- <pre>createFromText()</pre>
- </a>
- </li>
- <li>
- <a href="#createfromblockarray">
- <pre>createFromBlockArray()</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getblockmap">
- <pre>getBlockMap()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionbefore">
- <pre>getSelectionBefore()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionafter">
- <pre>getSelectionAfter()</pre>
- </a>
- </li>
- <li>
- <a href="#getblockforkey">
- <pre>getBlockForKey(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeybefore">
- <pre>getKeyBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeyafter">
- <pre>getKeyAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockbefore">
- <pre>getBlockBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockafter">
- <pre>getBlockAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblocksasarray">
- <pre>getBlocksAsArray()</pre>
- </a>
- </li>
- <li>
- <a href="#getlastblock">
- <pre>getLastBlock()</pre>
- </a>
- </li>
- <li>
- <a href="#getplaintext">
- <pre>getPlainText(delimiter)</pre>
- </a>
- </li>
- <li>
- <a href="#hastext">
- <pre>hasText()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#blockmap">
- <pre>blockMap</pre>
- </a>
- </li>
- <li>
- <a href="#selectionbefore">
- <pre>selectionBefore</pre>
- </a>
- </li>
- <li>
- <a href="#selectionafter">
- <pre>selectionAfter</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createFromText
-
-\`\`\`
-createFromText(text: string, delimiter?: string): ContentState
-\`\`\`
-Generates a \`ContentState\` from a string, with a delimiter to split the string
-into \`ContentBlock\` objects. If no delimiter is provided, '\\n' is used.
-
-### createFromBlockArray
-
-\`\`\`
-createFromBlockArray(blocks: Array<ContentBlock>): ContentState
-\`\`\`
-Generates a \`ContentState\` from an array of \`ContentBlock\` objects. The default
-\`selectionBefore\` and \`selectionAfter\` states have the cursor at the start of
-the content.
-
-## Methods
-
-### getBlockMap
-
-\`\`\`
-getBlockMap(): BlockMap
-\`\`\`
-Returns the full ordered map of \`ContentBlock\` objects representing the state
-of an entire document.
-
-In most cases, you should be able to use the convenience methods below to target
-specific \`ContentBlock\` objects or obtain information about the state of the content.
-
-### getSelectionBefore
-
-\`\`\`
-getSelectionBefore(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor before rendering \`blockMap\`.
-
-When performing an \`undo\` action in the editor, the \`selectionBefore\` of the current
-\`ContentState\` is used to place the selection range in the appropriate position.
-
-### getSelectionAfter
-
-\`\`\`
-getSelectionAfter(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor after rendering \`blockMap\`.
-
-When performing any action in the editor that leads to this \`blockMap\` being rendered,
-the selection range will be placed in the \`selectionAfter\` position.
-
-### getBlockForKey
-
-\`\`\`
-getBlockForKey(key: string): ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` corresponding to the given block key.
-
-#### Example
-
-\`\`\`
-var {editorState} = this.state;
-var blockKey = editorState.getSelection().getStartKey();
-var selectedBlockType = editorState
- .getCurrentContent()
- .getBlockForKey(startKey)
- .getType();
-\`\`\`
-
-### getKeyBefore()
-
-\`\`\`
-getKeyBefore(key: string): ?string
-\`\`\`
-Returns the key before the specified key in \`blockMap\`, or null if this is the first key.
-
-### getKeyAfter()
-
-\`\`\`
-getKeyAfter(key: string): ?string
-\`\`\`
-Returns the key after the specified key in \`blockMap\`, or null if this is the last key.
-
-### getBlockBefore()
-
-\`\`\`
-getBlockBefore(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` before the specified key in \`blockMap\`, or null if this is
-the first key.
-
-### getBlockAfter()
-
-\`\`\`
-getBlockAfter(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` after the specified key in \`blockMap\`, or null if this is
-the last key.
-
-### getBlocksAsArray()
-
-\`\`\`
-getBlocksAsArray(): Array<ContentBlock>
-\`\`\`
-Returns the values of \`blockMap\` as an array.
-
-### getPlainText()
-
-\`\`\`
-getPlainText(delimiter?: string): string
-\`\`\`
-Returns the full plaintext value of the contents, joined with a delimiter. If no
-delimiter is specified, the line feed character (\`\\u000A\`) is used.
-
-### hasText()
-
-\`\`\`
-hasText(): boolean
-\`\`\`
-Returns whether the contents contain any text at all.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-### blockMap
-See \`getBlockMap()\`.
-
-### selectionBefore
-See \`getSelectionBefore()\`.
-
-### selectionAfter
-See \`getSelectionAfter()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-modifier","title":"Modifier","layout":"docs","category":"API Reference","next":"api-reference-transaction-functions","permalink":"docs/api/modifier.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
331 website/src/draft-js/docs/api/selection-state.js
@@ -1,331 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`SelectionState\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents a selection range in the editor.
-
-The most common use for the \`SelectionState\` object is via \`EditorState.getSelection()\`,
-which provides the \`SelectionState\` currently being rendered in the editor.
-
-### Keys and Offsets
-
-A selection range has two points: an **anchor** and a **focus**. (Read more on
-[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Selection#Glossary)).
-
-The native DOM approach represents each point as a Node/offset pair, where the offset
-is a number corresponding either to a position within a Node's \`childNodes\` or, if the
-Node is a text node, a character offset within the text contents.
-
-Since Draft maintains the contents of the editor using \`ContentBlock\` objects,
-we can use our own model to represent these points. Thus, selection points are
-tracked as key/offset pairs, where the \`key\` value is the key of the \`ContentBlock\`
-where the point is positioned and the \`offset\` value is the character offset
-within the block.
-
-### Start/End vs. Anchor/Focus
-
-The concept of **anchor** and **focus** is very useful when actually rendering
-a selection state in the browser, as it allows us to use forward and backward
-selection as needed. For editing operations, however, the direction of the selection
-doesn't matter. In this case, it is more appropriate to think in terms of
-**start** and **end** points.
-
-The \`SelectionState\` therefore exposes both anchor/focus values and
-start/end values. When managing selection behavior, we recommend that
-you work with _anchor_ and _focus_ values to maintain selection direction.
-When managing content operations, however, we recommend that you use _start_
-and _end_ values.
-
-For instance, when extracting a slice of text from a block based on a
-\`SelectionState\`, it is irrelevant whether the selection is backward:
-
-\`\`\`
-var start = selectionState.getStartOffset();
-var end = selectionState.getEndOffset();
-var selectedText = myContentBlock.getText().slice(start, end);
-\`\`\`
-
-Note that \`SelectionState\` itself tracks only _anchor_ and _focus_ values.
-_Start_ and _end_ values are derived.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createempty">
- <pre>static createEmpty(blockKey)</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getstartkey">
- <pre>getStartKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getstartoffset">
- <pre>getStartOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getendkey">
- <pre>getEndKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getendoffset">
- <pre>getEndOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getanchorkey">
- <pre>getAnchorKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getanchoroffset">
- <pre>getAnchorOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getfocuskey">
- <pre>getFocusKey()</pre>
- </a>
- </li>
- <li>
- <a href="#getfocusoffset">
- <pre>getFocusOffset()</pre>
- </a>
- </li>
- <li>
- <a href="#getisbackward">
- <pre>getIsBackward()</pre>
- </a>
- </li>
- <li>
- <a href="#gethasfocus">
- <pre>getHasFocus()</pre>
- </a>
- </li>
- <li>
- <a href="#iscollapsed">
- <pre>isCollapsed()</pre>
- </a>
- </li>
- <li>
- <a href="#hasedgewithin">
- <pre>hasEdgeWithin(blockKey, start, end)</pre>
- </a>
- </li>
- <li>
- <a href="#serialize">
- <pre>serialize()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#anchorkey">
- <pre>anchorKey</pre>
- </a>
- </li>
- <li>
- <a href="#anchoroffset">
- <pre>anchorOffset</pre>
- </a>
- </li>
- <li>
- <a href="#focuskey">
- <pre>focusKey</pre>
- </a>
- </li>
- <li>
- <a href="#focusoffset">
- <pre>focusOffset</pre>
- </a>
- </li>
- <li>
- <a href="#isbackward">
- <pre>isBackward</pre>
- </a>
- </li>
- <li>
- <a href="#hasfocus">
- <pre>hasFocus</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createEmpty()
-
-\`\`\`
-createEmpty(blockKey: string): SelectionState
-\`\`\`
-Create a \`SelectionState\` object at the zero offset of the provided block key
-and \`hasFocus\` set to false.
-
-## Methods
-
-### getStartKey()
-
-\`\`\`
-getStartKey(): string
-\`\`\`
-Returns the key of the block containing the start position of the selection range.
-
-### getStartOffset()
-
-\`\`\`
-getStartOffset(): number
-\`\`\`
-Returns the block-level character offset of the start position of the selection range.
-
-### getEndKey()
-
-\`\`\`
-getEndKey(): string
-\`\`\`
-Returns the key of the block containing the end position of the selection range.
-
-### getEndOffset()
-
-\`\`\`
-getEndOffset(): number
-\`\`\`
-Returns the block-level character offset of the end position of the selection range.
-
-### getAnchorKey()
-
-\`\`\`
-getAnchorKey(): string
-\`\`\`
-Returns the key of the block containing the anchor position of the selection range.
-
-### getAnchorOffset()
-
-\`\`\`
-getAnchorOffset(): number
-\`\`\`
-Returns the block-level character offset of the anchor position of the selection range.
-
-### getFocusKey()
-
-\`\`\`
-getFocusKey(): string
-\`\`\`
-Returns the key of the block containing the focus position of the selection range.
-
-### getFocusOffset()
-
-\`\`\`
-getFocusOffset(): number
-\`\`\`
-Returns the block-level character offset of the focus position of the selection range.
-
-### getIsBackward()
-
-\`\`\`
-getIsBackward(): boolean
-\`\`\`
-Returns whether the focus position is before the anchor position in the document.
-
-This must be derived from the key order of the active \`ContentState\`, or if the selection
-range is entirely within one block, a comparison of the anchor and focus offset values.
-
-### getHasFocus()
-
-\`\`\`
-getHasFocus(): boolean
-\`\`\`
-Returns whether the editor has focus.
-
-### isCollapsed()
-
-\`\`\`
-isCollapsed(): boolean
-\`\`\`
-Returns whether the selection range is collapsed, i.e. a caret. This is true
-when the anchor and focus keys are the same /and/ the anchor and focus offsets
-are the same.
-
-### hasEdgeWithin()
-
-\`\`\`
-hasEdgeWithin(blockKey: string, start: number, end: number): boolean
-\`\`\`
-Returns whether the selection range has an edge that overlaps with the specified
-start/end range within a given block.
-
-This is useful when setting DOM selection within a block after contents are
-rendered.
-
-### serialize()
-
-\`\`\`
-serialize(): string
-\`\`\`
-Returns a serialized version of the \`SelectionState\`. Useful for debugging.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-\`\`\`
-var selectionState = SelectionState.createEmpty('foo');
-var updatedSelection = selectionState.merge({
- focusKey: 'bar',
- focusOffset: 0,
-});
-var anchorKey = updatedSelection.getAnchorKey(); // 'foo'
-var focusKey = updatedSelection.getFocusKey(); // 'bar'
-\`\`\`
-
-### anchorKey
-The block containing the anchor end of the selection range.
-
-### anchorOffset
-The offset position of the anchor end of the selection range.
-
-### focusKey
-The block containing the focus end of the selection range.
-
-### focusOffset
-The offset position of the focus end of the selection range.
-
-### isBackward
-If the anchor position is lower in the document than the focus position, the
-selection is backward. Note: The \`SelectionState\` is an object with
-no knowledge of the \`ContentState\` structure. Therefore, when updating
-\`SelectionState\` values, you are responsible for updating \`isBackward\` as well.
-
-### hasFocus
-Whether the editor currently has focus.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-selection-state","title":"SelectionState","layout":"docs","category":"API Reference","next":"api-reference-data-conversion","permalink":"docs/api/selection-state.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
269 website/src/draft-js/docs/api/transaction-functions.js
@@ -1,269 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-\`ContentBlock\` is an Immutable
-[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
-represents the full state of:
-
-- The entire **contents** of an editor: text, block and inline styles, and entity ranges.
-- Two **selection states** of an editor: before and after the rendering of these contents.
-
-The most common use for the \`ContentState\` object is via \`EditorState.getCurrentContent()\`,
-which provides the \`ContentState\` currently being rendered in the editor.
-
-An \`EditorState\` object maintains undo and redo stacks comprised of \`ContentState\`
-objects.
-
-## Overview
-
-*Static Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#createfromtext">
- <pre>createFromText()</pre>
- </a>
- </li>
- <li>
- <a href="#createfromblockarray">
- <pre>createFromBlockArray()</pre>
- </a>
- </li>
-</ul>
-
-*Methods*
-
-<ul class="apiIndex">
- <li>
- <a href="#getblockmap">
- <pre>getBlockMap()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionbefore">
- <pre>getSelectionBefore()</pre>
- </a>
- </li>
- <li>
- <a href="#getselectionafter">
- <pre>getSelectionAfter()</pre>
- </a>
- </li>
- <li>
- <a href="#getblockforkey">
- <pre>getBlockForKey(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeybefore">
- <pre>getKeyBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getkeyafter">
- <pre>getKeyAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockbefore">
- <pre>getBlockBefore(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblockafter">
- <pre>getBlockAfter(key)</pre>
- </a>
- </li>
- <li>
- <a href="#getblocksasarray">
- <pre>getBlocksAsArray()</pre>
- </a>
- </li>
- <li>
- <a href="#getlastblock">
- <pre>getLastBlock()</pre>
- </a>
- </li>
- <li>
- <a href="#getplaintext">
- <pre>getPlainText(delimiter)</pre>
- </a>
- </li>
- <li>
- <a href="#hastext">
- <pre>hasText()</pre>
- </a>
- </li>
-</ul>
-
-*Properties*
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-<ul class="apiIndex">
- <li>
- <a href="#blockmap">
- <pre>blockMap</pre>
- </a>
- </li>
- <li>
- <a href="#selectionbefore">
- <pre>selectionBefore</pre>
- </a>
- </li>
- <li>
- <a href="#selectionafter">
- <pre>selectionAfter</pre>
- </a>
- </li>
-</ul>
-
-## Static Methods
-
-### createFromText
-
-\`\`\`
-createFromText(text: string, delimiter?: string): ContentState
-\`\`\`
-Generates a \`ContentState\` from a string, with a delimiter to split the string
-into \`ContentBlock\` objects. If no delimiter is provided, '\\n' is used.
-
-### createFromBlockArray
-
-\`\`\`
-createFromBlockArray(blocks: Array<ContentBlock>): ContentState
-\`\`\`
-Generates a \`ContentState\` from an array of \`ContentBlock\` objects. The default
-\`selectionBefore\` and \`selectionAfter\` states have the cursor at the start of
-the content.
-
-## Methods
-
-### getBlockMap
-
-\`\`\`
-getBlockMap(): BlockMap
-\`\`\`
-Returns the full ordered map of \`ContentBlock\` objects representing the state
-of an entire document.
-
-In most cases, you should be able to use the convenience methods below to target
-specific \`ContentBlock\` objects or obtain information about the state of the content.
-
-### getSelectionBefore
-
-\`\`\`
-getSelectionBefore(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor before rendering \`blockMap\`.
-
-When performing an \`undo\` action in the editor, the \`selectionBefore\` of the current
-\`ContentState\` is used to place the selection range in the appropriate position.
-
-### getSelectionAfter
-
-\`\`\`
-getSelectionAfter(): SelectionState
-\`\`\`
-Returns the \`SelectionState\` displayed in the editor after rendering \`blockMap\`.
-
-When performing any action in the editor that leads to this \`blockMap\` being rendered,
-the selection range will be placed in the \`selectionAfter\` position.
-
-### getBlockForKey
-
-\`\`\`
-getBlockForKey(key: string): ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` corresponding to the given block key.
-
-#### Example
-
-\`\`\`
-var {editorState} = this.state;
-var blockKey = editorState.getSelection().getStartKey();
-var selectedBlockType = editorState
- .getCurrentContent()
- .getBlockForKey(startKey)
- .getType();
-\`\`\`
-
-### getKeyBefore()
-
-\`\`\`
-getKeyBefore(key: string): ?string
-\`\`\`
-Returns the key before the specified key in \`blockMap\`, or null if this is the first key.
-
-### getKeyAfter()
-
-\`\`\`
-getKeyAfter(key: string): ?string
-\`\`\`
-Returns the key after the specified key in \`blockMap\`, or null if this is the last key.
-
-### getBlockBefore()
-
-\`\`\`
-getBlockBefore(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` before the specified key in \`blockMap\`, or null if this is
-the first key.
-
-### getBlockAfter()
-
-\`\`\`
-getBlockAfter(key: string): ?ContentBlock
-\`\`\`
-Returns the \`ContentBlock\` after the specified key in \`blockMap\`, or null if this is
-the last key.
-
-### getBlocksAsArray()
-
-\`\`\`
-getBlocksAsArray(): Array<ContentBlock>
-\`\`\`
-Returns the values of \`blockMap\` as an array.
-
-### getPlainText()
-
-\`\`\`
-getPlainText(delimiter?: string): string
-\`\`\`
-Returns the full plaintext value of the contents, joined with a delimiter. If no
-delimiter is specified, the line feed character (\`\\u000A\`) is used.
-
-### hasText()
-
-\`\`\`
-hasText(): boolean
-\`\`\`
-Returns whether the contents contain any text at all.
-
-## Properties
-
-> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
-> set properties.
-
-### blockMap
-See \`getBlockMap()\`.
-
-### selectionBefore
-See \`getSelectionBefore()\`.
-
-### selectionAfter
-See \`getSelectionAfter()\`.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"api-reference-transaction-functions","title":"Transaction Functions","layout":"docs","category":"API Reference","next":"api-reference-drafteditor","permalink":"docs/api/transaction-functions.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
19 website/src/draft-js/docs/guides/an-immutable-model.js
@@ -1,19 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-
-
-## Immutable
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"guides-an-immutable-model","title":"An Immutable Model","layout":"docs","category":"Guides","next":"advanced-topics-entities","permalink":"docs/guides/an-immutable-model.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
18 website/src/draft-js/docs/guides/controlled-contenteditable.js
@@ -1,18 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Draft is a JavaScript framework that enables the creation of rich text editing
-experiences.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"guides-why-draft","title":"Why Draft?","layout":"docs","category":"Guides","next":"guides-controlling-contenteditable","permalink":"docs/guides/controlled-contenteditable.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
19 website/src/draft-js/docs/guides/controlling-contenteditable.js
@@ -1,19 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-
-
-## ContentEditable: The Good Parts
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"guides-controlling-contenteditable","title":"Controlling ContentEditable","layout":"docs","category":"Guides","next":"guides-an-immutable-model","permalink":"docs/guides/controlling-contenteditable.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/guides/why-draft.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## Hey
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"guides-why-draft","title":"Why Draft?","layout":"docs","category":"Guides","next":"guides-controlling-contenteditable","permalink":"docs/guides/why-draft.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/model/overview.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Test
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"model-overview","title":"Overview","layout":"docs","category":"Model","next":"model-selection-state","permalink":"docs/model/overview.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
21 website/src/draft-js/docs/model/selection-state.js
@@ -1,21 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Draft is the application architecture that Facebook uses for building
-client-side web applications. It complements React's composable view
-components by utilizing a unidirectional data flow. It's more of a pattern
-rather than a formal framework, and you can start using Rewrite immediately
-without a lot of new code.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"model-selection-state","title":"SelectionState","layout":"docs","category":"Model","next":"api-reference-editor-state","permalink":"docs/model/selection-state.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
52 website/src/draft-js/docs/overview.js
@@ -1,52 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
-
-Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
-
-### Installation
-
-Currently Draft.js is distributed via npm. It depends on React and React DOM which must also be installed.
-
-\`\`\`sh
-npm install --save draft-js react react-dom
-\`\`\`
-
-### Usage
-
-\`\`\`js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {Editor} from 'draft-js';
-
-const MyEditor = React.createClass({
- onChange(editorState) {
- this.setState({editorState});
- },
- render() {
- const {editorState} = this.state;
- return <Editor editorState={editorState} onChange={this.onChange} />;
- }
-});
-
-ReactDOM.render(
- <MyEditor />,
- document.getElementById('container')
-);
-\`\`\`
-
-Next, let's go into the basics of the API and learn what else you can do with Draft.js.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"getting-started","title":"Overview","layout":"docs","category":"Quick Start","next":"quickstart-api-basics","permalink":"docs/overview.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
82 website/src/draft-js/docs/quickstart-api-basics.js
@@ -1,82 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-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)
-is also available to follow along.
-
-## Controlled Inputs
-
-The \`Editor\` React component is built as a controlled ContentEditable component,
-with the goal of providing a top-level API modeled on the familiar React
-*controlled input* API.
-
-As a brief refresher, controlled inputs involve two key pieces:
-
-1. A _value_ to represent the state of the input
-2. An _onChange_ prop function to receive updates to the input
-
-This approach allows the component that composes the input to have strict
-control over the state of the input, while still allowing updates to the DOM
-to provide information about the text that the user has written.
-
-\`\`\`
-const MyInput = React.createClass({
- onChange(evt) {
- this.setState({value: evt.target.value});
- },
- render() {
- return <input value={this.state.value} onChange={this.onChange} />;
- }
-});
-\`\`\`
-
-The top-level component can maintain control over the input state via this
-\`value\` state property.
-
-## Controlling Rich Text
-
-In a React rich text scenario, however, there are two clear problems:
-
-1. A string of plaintext is insufficient to represent the complex state of
-a rich editor.
-2. There is no such \`onChange\` event available for a ContentEditable element.
-
-State is therefore represented as a single immutable
-[EditorState](/draft-js/docs/api-reference-editor-state.html) object, and
-\`onChange\` is implemented within the \`Editor\` core to provide this state
-value to the top level.
-
-The \`EditorState\` object is a complete snapshot of the state of the editor,
-including contents, cursor, and undo/redo history. All changes to content and
-selection within the editor will create new \`EditorState\` objects. Note that
-this remains efficient due to data persistence across immutable objects.
-
-\`\`\`
-import {Editor} from 'draft-js';
-const MyEditor = React.createClass({
- onChange(editorState) {
- this.setState({editorState});
- },
- render() {
- const {editorState} = this.state;
- return <Editor editorState={editorState} onChange={this.onChange} />;
- }
-});
-\`\`\`
-
-For any edits or selection changes that occur in the editor DOM, your \`onChange\`
-handler will execute with the latest \`EditorState\` object based on those changes.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"quickstart-api-basics","title":"API Basics","layout":"docs","category":"Quick Start","next":"quickstart-rich-styling","permalink":"docs/quickstart-api-basics.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
119 website/src/draft-js/docs/quickstart-rich-styling.js
@@ -1,119 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-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)
-is also available to follow along.
-
-## EditorState: Yours to Command
-
-The previous article introduced the \`EditorState\` object as a snapshot of the
-full state of the editor, as provided by the \`Editor\` core via the
-\`onChange\` prop.
-
-However, since your top-level React component is responsible for maintaining the
-state, you also have the freedom to apply changes to that \`EditorState\` object
-in any way you see fit.
-
-For inline and block style behavior, for example, the \`RichUtils\` module
-provides a number of useful functions to help manipulate state.
-
-Similarly, the [Modifier](/draft-js/docs/api-reference-modifier.html) module also provides a
-number of common operations that allow you to apply edits, including changes
-to text, styles, and more. This module is a suite of edit functions that
-compose simpler, smaller edit functions to return the desired \`EditorState\`
-object.
-
-For this example, we'll stick with \`RichUtils\` to demonstrate how to apply basic
-rich styling within the top-level component.
-
-## RichUtils and Key Commands
-
-\`RichUtils\` has information about the core key commands available to web editors,
-such as Cmd+B (bold), Cmd+I (italic), and so on.
-
-We can observe and handle key commands via the \`handleKeyCommand\` prop, and
-hook these into \`RichUtils\` to apply or remove the desired style.
-
-\`\`\`
-import {Editor, RichUtils} from 'draft-js';
-const MyEditor = React.createClass({
- onChange(editorState) {
- this.setState({editorState});
- },
- handleKeyCommand(command) {
- const {editorState} = this.state;
- const newState = RichUtils.handleKeyCommand(editorState, command);
- if (newState) {
- this.onChange(newState);
- return true;
- }
- return false;
- },
- render() {
- const {editorState} = this.state;
- return (
- <Editor
- editorState={editorState}
- handleKeyCommand={this.handleKeyCommand}
- onChange={this.onChange}
- />
- );
- }
-});
-\`\`\`
-
-> handleKeyCommand
->
-> The \`command\` argument supplied to \`handleKeyCommand\` is a string value, the
-> name of the command to be executed. This is mapped from a DOM key event. See
-> [Advanced Topics - Key Binding](/draft-js/docs/advanced-topics-key-bindings.html) for more
-> on this, as well as details on why the function returns a boolean.
-
-## Styling Controls in UI
-
-Within your React component, you can add buttons or other controls to allow
-the user to modify styles within the editor. In the example above, we are using
-known key commands, but we can add more complex UI to provide these rich
-features.
-
-Here's a super-basic example with a "Bold" button to toggle the \`BOLD\` style.
-
-\`\`\`
-const MyEditor = React.createClass({
- ...
-
- _onBoldClick() {
- this.onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
- }
-
- render() {
- const {editorState} = this.state;
- return (
- <div>
- <button onClick={this._onBoldClick}>Bold</button>
- <Editor
- editorState={editorState}
- handleKeyCommand={this.handleKeyCommand}
- onChange={this.onChange}
- />
- </div>
- );
- }
-});
-\`\`\`
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"quickstart-rich-styling","title":"Rich Styling","layout":"docs","category":"Quick Start","next":"advanced-topics-entities","permalink":"docs/quickstart-rich-styling.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
81 website/src/draft-js/docs/quickstart/api-basics.js
@@ -1,81 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-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)
-is also available to follow along.
-
-## Controlled Inputs
-
-The \`DraftEditor\` React component is built as a controlled ContentEditable component,
-with the goal of providing a top-level API modeled on the familiar React
-*controlled input* API.
-
-As a brief refresher, controlled inputs involve two key pieces:
-
-1. A _value_ to represent the state of the input
-2. An _onChange_ prop function to receive updates to the input
-
-This approach allows the component that composes the input to have strict
-control over the state of the input, while still allowing updates to the DOM
-to provide information about the text that the user has written.
-
-\`\`\`
-const MyInput = React.createClass({
- onChange(evt) {
- this.setState({value: evt.target.value});
- },
- render() {
- return <input value={this.state.value} onChange={this.onChange} />;
- }
-});
-\`\`\`
-
-The top-level component can maintain control over the input state via this
-\`value\` state property.
-
-## Controlling Rich Text
-
-In a React rich text scenario, however, there are two clear problems:
-
-1. A string of plaintext is insufficient to represent the complex state of
-a rich editor.
-2. There is no such \`onChange\` event available for a ContentEditable element.
-
-State is therefore represented as a single immutable
-[EditorState](/draft-js/docs/api/editor-state.html) object, and \`onChange\` is
-implemented within the \`DraftEditor\` core to provide this state value to the
-top level.
-
-The \`EditorState\` object is a complete snapshot of the state of the editor,
-including contents, cursor, and undo/redo history. All changes to content and
-selection within the editor will create new \`EditorState\` objects. Note that
-this remains efficient due to data persistence across immutable objects.
-
-\`\`\`
-const MyEditor = React.createClass({
- onChange(editorState) {
- this.setState({editorState});
- },
- render() {
- const {editorState} = this.state;
- return <DraftEditor editorState={editorState} onChange={this.onChange} />;
- }
-});
-\`\`\`
-
-For any edits or selection changes that occur in the editor DOM, your \`onChange\`
-handler will execute with the latest \`EditorState\` object based on those changes.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"quick-start-api-basics","title":"API Basics","layout":"docs","category":"Quick Start","next":"quick-start-rich-styling","permalink":"docs/quickstart/api-basics.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
17 website/src/draft-js/docs/quickstart/customizing-your-editor.js
@@ -1,17 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-## hi
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"quick-start-customizing-your-editor","title":"Customizing Your Editor","layout":"docs","category":"Quick Start","next":"guides-why-draft","permalink":"docs/quickstart/customizing-your-editor.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
119 website/src/draft-js/docs/quickstart/decorated-text.js
@@ -1,119 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-Inline and block styles aren't the only kind of rich styling that we might
-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)
-offers a live example of decorators in action.
-
-## CompositeDecorator
-
-The decorator concept is based on scanning the contents of a given
-[ContentBlock](/draft-js/docs/api/content-block.html)
-for ranges of text that match a defined strategy, then rendering them
-with a specified React component.
-
-You can use the \`CompositeDecorator\` class to define your desired
-decorator behavior. This class allows you to supply multiple \`DraftDecorator\`
-objects, and will search through a block of text with each strategy in turn.
-
-Decorators are stored within the \`EditorState\` record. When creating a new
-\`EditorState\` object, e.g. via \`EditorState.createEmpty()\`, a decorator may
-optionally be provided.
-
-> Under the hood
->
-> When contents change in a Draft editor, the resulting \`EditorState\` object
-> will evaluate the new \`ContentState\` with its decorator, and identify ranges
-> to be decorated. A complete tree of blocks, decorators, and inline styles is
-> formed at this time, and serves as the basis for our rendered output.
->
-> In this way, we always ensure that as contents change, rendered decorations
-> are in sync with our \`EditorState\`.
-
-In the "Tweet" editor example, for instance, we use a \`CompositeDecorator\` that
-searches for @-handle strings as well as hashtag strings:
-
-\`\`\`
-const compositeDecorator = new CompositeDecorator([
- {
- strategy: handleStrategy,
- component: HandleSpan,
- },
- {
- strategy: hashtagStrategy,
- component: HashtagSpan,
- },
-]);
-\`\`\`
-
-This composite decorator will first scan a given block of text for @-handle
-matches, then for hashtag matches.
-
-\`\`\`
-// Note: these aren't very good regexes, don't use them!
-const HANDLE_REGEX = /\\@[\\w]+/g;
-const HASHTAG_REGEX = /\\#[\\w\\u0590-\\u05ff]+/g;
-
-function handleStrategy(contentBlock, callback) {
- findWithRegex(HANDLE_REGEX, contentBlock, callback);
-}
-
-function hashtagStrategy(contentBlock, callback) {
- findWithRegex(HASHTAG_REGEX, contentBlock, callback);
-}
-
-function findWithRegex(regex, contentBlock, callback) {
- const text = contentBlock.getText();
- let matchArr, start;
- while ((matchArr = regex.exec(text)) !== null) {
- start = matchArr.index;
- callback(start, start + matchArr[0].length);
- }
-}
-\`\`\`
-
-The strategy functions execute the provided callback with the \`start\` and
-\`end\` values of the matching range of text.
-
-## Decorator Components
-
-For your decorated ranges of text, you must define a React component to use
-to render them. These tend to be simple \`span\` elements with CSS classes or
-styles applied to them.
-
-In our current example, the \`CompositeDecorator\` object names \`HandleSpan\` and
-\`HashtagSpan\` as the components to use for decoration. These are just basic
-stateless components:
-
-\`\`\`
-const HandleSpan = (props) => {
- return <span {...props} style={styles.handle}>{props.children}</span>;
-};
-
-const HashtagSpan = (props) => {
- return <span {...props} style={styles.hashtag}>{props.children}</span>;
-};
-\`\`\`
-
-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).
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"quick-start-decorated-text","title":"Decorated Text","layout":"docs","category":"Quick Start","next":"quick-start-customizing-your-editor","permalink":"docs/quickstart/decorated-text.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
118 website/src/draft-js/docs/quickstart/rich-styling.js
@@ -1,118 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-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)
-is also available to follow along.
-
-## EditorState: Yours to Command
-
-The previous article introduced the \`EditorState\` object as a snapshot of the
-full state of the editor, as provided by the \`DraftEditor\` core via the
-\`onChange\` prop.
-
-However, since your top-level React component is responsible for maintaining the
-state, you also have the freedom to apply changes to that \`EditorState\` object
-in any way you see fit.
-
-For inline and block style behavior, for example, the \`RichUtils\` module
-provides a number of useful functions to help manipulate state.
-
-Similarly, the [Modifier](/draft-js/docs/api/modifier.html) module also provides a
-number of common operations that allow you to apply edits, including changes
-to text, styles, and more. This module is a suite of edit functions that
-compose simpler, smaller edit functions to return the desired \`EditorState\`
-object.
-
-For this example, we'll stick with \`RichUtils\` to demonstrate how to apply basic
-rich styling within the top-level component.
-
-## RichUtils and Key Commands
-
-\`RichUtils\` has information about the core key commands available to web editors,
-such as Cmd+B (bold), Cmd+I (italic), and so on.
-
-We can observe and handle key commands via the \`handleKeyCommand\` prop, and
-hook these into \`RichUtils\` to apply or remove the desired style.
-
-\`\`\`
-const MyEditor = React.createClass({
- onChange(editorState) {
- this.setState({editorState});
- },
- handleKeyCommand(command) {
- const {editorState} = this.state;
- const newState = RichUtils.handleKeyCommand(editorState, command);
- if (newState) {
- this.onChange(newState);
- return true;
- }
- return false;
- },
- render() {
- const {editorState} = this.state;
- return (
- <DraftEditor
- editorState={editorState}
- handleKeyCommand={this.handleKeyCommand}
- onChange={this.onChange}
- />
- );
- }
-});
-\`\`\`
-
-> handleKeyCommand
->
-> The \`command\` argument supplied to \`handleKeyCommand\` is a string value, the
-> name of the command to be executed. This is mapped from a DOM key event. See
-> [Advanced Topics - Key Binding](docs/advanced/key-bindings.html) for more
-> on this, as well as details on why the function returns a boolean.
-
-## Styling Controls in UI
-
-Within your React component, you can add buttons or other controls to allow
-the user to modify styles within the editor. In the example above, we are using
-known key commands, but we can add more complex UI to provide these rich
-features.
-
-Here's a super-basic example with a "Bold" button to toggle the \`BOLD\` style.
-
-\`\`\`
-const MyEditor = React.createClass({
- ...
-
- _onBoldClick() {
- this.onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
- }
-
- render() {
- const {editorState} = this.state;
- return (
- <div>
- <button onClick={this._onBoldClick}>Bold</button>
- <DraftEditor
- editorState={editorState}
- handleKeyCommand={this.handleKeyCommand}
- onChange={this.onChange}
- />
- </div>
- );
- }
-});
-\`\`\`
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"quick-start-rich-styling","title":"Rich Styling","layout":"docs","category":"Quick Start","next":"quick-start-decorated-text","permalink":"docs/quickstart/rich-styling.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;
View
77 website/src/draft-js/docs/quickstart/the-basics.js
@@ -1,77 +0,0 @@
-/**
- * @generated
- */
-var React = require("React");
-var Layout = require("DocsLayout");
-var content = `
-This document provides an overview of the basics of the \`Draft\` API. A
-[working example](http://github.com/facebook/draft-js/examples/plaintext)
-is also available to follow along.
-
-## Controlled Inputs
-
-The \`DraftEditor\` React component is built as a controlled ContentEditable component,
-with the goal of providing a top-level API modeled on the familiar React
-*controlled input* API.
-
-As a brief refresher, controlled inputs involve two key pieces:
-
-1. A _value_ to represent the state of the input
-2. An _onChange_ prop function to receive updates to the input
-
-This approach allows the component that composes the input to have strict
-control over the state of the input, while still allowing updates to the DOM
-to provide information about the text that the user has written.
-
-\`\`\`
-const MyInput = React.createClass({
- onChange(evt) {
- this.setState({value: evt.target.value});
- },
- render() {
- return <input value={this.state.value} onChange={this.onChange} />;
- }
-});
-\`\`\`
-
-The top-level component can maintain control over the input state via this
-\`value\` state property.
-
-## Controlling Rich Text
-
-In a React rich text scenario, however, there are two clear problems:
-
-1. A string of plaintext is insufficient to represent the complex state of
-a rich editor.
-2. There is no such \`onChange\` event available for a ContentEditable element.
-
-State is therefore represented as a single immutable
-[EditorState](/draft-js/docs/api/editor-state.html) object, and \`onChange\` is
-implemented within the \`DraftEditor\` core to provide this state value to the
-top level. The \`EditorState\` object is a complete snapshot of the state of the
-editor, including contents, cursor, and undo/redo history.
-
-\`\`\`
-const MyEditor = React.createClass({
- onChange(editorState) {
- this.setState({editorState});
- },
- render() {
- const {editorState} = this.state;
- return <DraftEditor editorState={editorState} onChange={this.onChange} />;
- }
-});
-\`\`\`
-
-For any edits or selection changes that occur in the editor DOM, your \`onChange\`
-handler will execute with the latest \`EditorState\` object based on those changes.
-`
-var Post = React.createClass({
- statics: {
- content: content
- },
- render: function() {
- return <Layout metadata={{"id":"quick-start-the-basics","title":"The Basics","layout":"docs","category":"Quick Start","next":"quick-start-rich-styling","permalink":"docs/quickstart/the-basics.html"}}>{content}</Layout>;
- }
-});
-module.exports = Post;

0 comments on commit b25762d

Please sign in to comment.
Something went wrong with that request. Please try again.