Permalink
Please sign in to comment.
Showing
with
1 addition
and 6,854 deletions.
- +1 −0 .gitignore
- +0 −127 website/src/draft-js/docs/advanced-topics-block-components.js
- +0 −66 website/src/draft-js/docs/advanced-topics-block-styling.js
- +0 −159 website/src/draft-js/docs/advanced-topics-decorators.js
- +0 −143 website/src/draft-js/docs/advanced-topics-entities.js
- +0 −119 website/src/draft-js/docs/advanced-topics-inline-styles.js
- +0 −82 website/src/draft-js/docs/advanced-topics-issues-and-pitfalls.js
- +0 −107 website/src/draft-js/docs/advanced-topics-key-bindings.js
- +0 −47 website/src/draft-js/docs/advanced-topics-managing-focus.js
- +0 −29 website/src/draft-js/docs/advanced-topics-nested-lists.js
- +0 −42 website/src/draft-js/docs/advanced-topics-text-direction.js
- +0 −17 website/src/draft-js/docs/advanced/block-components.js
- +0 −17 website/src/draft-js/docs/advanced/block-styling.js
- +0 −17 website/src/draft-js/docs/advanced/decorators.js
- +0 −17 website/src/draft-js/docs/advanced/entities.js
- +0 −17 website/src/draft-js/docs/advanced/event-handling.js
- +0 −116 website/src/draft-js/docs/advanced/inline-styles.js
- +0 −106 website/src/draft-js/docs/advanced/key-bindings.js
- +0 −17 website/src/draft-js/docs/advanced/nested-lists.js
- +0 −17 website/src/draft-js/docs/advanced/performance.js
- +0 −17 website/src/draft-js/docs/advanced/text-direction.js
- +0 −17 website/src/draft-js/docs/advanced/undo-redo.js
- +0 −17 website/src/draft-js/docs/advanced/unicode.js
- +0 −164 website/src/draft-js/docs/api-reference-character-metadata.js
- +0 −253 website/src/draft-js/docs/api-reference-content-block.js
- +0 −272 website/src/draft-js/docs/api-reference-content-state.js
- +0 −53 website/src/draft-js/docs/api-reference-data-conversion.js
- +0 −488 website/src/draft-js/docs/api-reference-editor-state.js
- +0 −200 website/src/draft-js/docs/api-reference-editor.js
- +0 −124 website/src/draft-js/docs/api-reference-entity.js
- +0 −215 website/src/draft-js/docs/api-reference-modifier.js
- +0 −331 website/src/draft-js/docs/api-reference-selection-state.js
- +0 −262 website/src/draft-js/docs/api/character-metadata.js
- +0 −239 website/src/draft-js/docs/api/content-block.js
- +0 −269 website/src/draft-js/docs/api/content-state.js
- +0 −269 website/src/draft-js/docs/api/data-conversion.js
- +0 −269 website/src/draft-js/docs/api/drafteditor.js
- +0 −488 website/src/draft-js/docs/api/editor-state.js
- +0 −269 website/src/draft-js/docs/api/modifier.js
- +0 −331 website/src/draft-js/docs/api/selection-state.js
- +0 −269 website/src/draft-js/docs/api/transaction-functions.js
- +0 −19 website/src/draft-js/docs/guides/an-immutable-model.js
- +0 −18 website/src/draft-js/docs/guides/controlled-contenteditable.js
- +0 −19 website/src/draft-js/docs/guides/controlling-contenteditable.js
- +0 −17 website/src/draft-js/docs/guides/why-draft.js
- +0 −17 website/src/draft-js/docs/model/overview.js
- +0 −21 website/src/draft-js/docs/model/selection-state.js
- +0 −52 website/src/draft-js/docs/overview.js
- +0 −82 website/src/draft-js/docs/quickstart-api-basics.js
- +0 −119 website/src/draft-js/docs/quickstart-rich-styling.js
- +0 −81 website/src/draft-js/docs/quickstart/api-basics.js
- +0 −17 website/src/draft-js/docs/quickstart/customizing-your-editor.js
- +0 −119 website/src/draft-js/docs/quickstart/decorated-text.js
- +0 −118 website/src/draft-js/docs/quickstart/rich-styling.js
- +0 −77 website/src/draft-js/docs/quickstart/the-basics.js
1
.gitignore
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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