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