Showing preview only (2,272K chars total). Download the full file or copy to clipboard to get everything.
Repository: facebookarchive/draft-js
Branch: main
Commit: afdb5c3177c1
Files: 438
Total size: 2.1 MB
Directory structure:
gitextract_nwrbpblp/
├── .alexignore
├── .alexrc.js
├── .dependabot/
│ └── config.yml
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ └── ci.yml
├── .gitignore
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── LICENSE-examples
├── README.md
├── docs/
│ ├── APIReference-APIMigration.md
│ ├── APIReference-AtomicBlockUtils.md
│ ├── APIReference-CharacterMetadata.md
│ ├── APIReference-CompositeDecorator.md
│ ├── APIReference-ContentBlock.md
│ ├── APIReference-ContentState.md
│ ├── APIReference-Data-Conversion.md
│ ├── APIReference-Editor.md
│ ├── APIReference-EditorChangeType.md
│ ├── APIReference-EditorState.md
│ ├── APIReference-Entity.md
│ ├── APIReference-KeyBindingUtil.md
│ ├── APIReference-Modifier.md
│ ├── APIReference-RichUtils.md
│ ├── APIReference-SelectionState.md
│ ├── Advanced-Topics-Block-Components.md
│ ├── Advanced-Topics-Block-Styling.md
│ ├── Advanced-Topics-Custom-Block-Render.md
│ ├── Advanced-Topics-Decorators.md
│ ├── Advanced-Topics-EditorState-Race-Conditions.md
│ ├── Advanced-Topics-Entities.md
│ ├── Advanced-Topics-Inline-Styles.md
│ ├── Advanced-Topics-Issues-and-Pitfalls.md
│ ├── Advanced-Topics-Key-Bindings.md
│ ├── Advanced-Topics-Managing-Focus.md
│ ├── Advanced-Topics-Nested-Lists.md
│ ├── Advanced-Topics-Text-Direction.md
│ ├── Overview.md
│ ├── QuickStart-API-Basics.md
│ └── QuickStart-Rich-Styling.md
├── examples/
│ └── draft-0-10-0/
│ ├── color/
│ │ └── color.html
│ ├── convertFromHTML/
│ │ └── convert.html
│ ├── entity/
│ │ └── entity.html
│ ├── iframe/
│ │ └── iframe.html
│ ├── link/
│ │ └── link.html
│ ├── media/
│ │ └── media.html
│ ├── plaintext/
│ │ └── plaintext.html
│ ├── playground/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ └── manifest.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── DraftJsPlaygroundContainer.css
│ │ ├── DraftJsRichEditorExample.css
│ │ ├── DraftJsRichEditorExample.js
│ │ ├── GkManager.js
│ │ ├── index.css
│ │ ├── index.js
│ │ └── registerServiceWorker.js
│ ├── rich/
│ │ ├── RichEditor.css
│ │ └── rich.html
│ ├── tex/
│ │ ├── .babelrc
│ │ ├── js/
│ │ │ ├── app.js
│ │ │ ├── components/
│ │ │ │ ├── TeXBlock.js
│ │ │ │ └── TeXEditorExample.js
│ │ │ ├── data/
│ │ │ │ └── content.js
│ │ │ └── modifiers/
│ │ │ ├── insertTeXBlock.js
│ │ │ └── removeTeXBlock.js
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── TeXEditor.css
│ │ │ └── index.html
│ │ ├── readme.md
│ │ └── server.js
│ ├── tweet/
│ │ └── tweet.html
│ └── universal/
│ ├── .babelrc
│ ├── client.js
│ ├── editor.js
│ ├── index.js
│ ├── package.json
│ └── readme.md
├── gulpfile.js
├── meta/
│ ├── meeting-notes/
│ │ ├── 2017-02-10-weekly-meeting.md
│ │ ├── 2017-02-17-weekly-meeting.md
│ │ ├── 2017-02-24-weekly-meeting.md
│ │ ├── 2017-03-10-weekly-meeting.md
│ │ ├── 2017-03-17-weekly-meeting.md
│ │ ├── 2017-03-24-weekly-meeting.md
│ │ ├── 2017-03-31-weekly-meeting.md
│ │ ├── 2017-04-14-weekly-meeting.md
│ │ ├── 2017-04-21-weekly-meeting.md
│ │ ├── 2017-04-28-weekly-meeting.md
│ │ ├── 2017-05-05-weekly-meeting.md
│ │ ├── 2017-05-19-weekly-meeting.md
│ │ ├── 2017-05-26-weekly-meeting.md
│ │ ├── 2017-06-02-weekly-meeting.md
│ │ ├── 2017-07-07-weekly-meeting.md
│ │ ├── 2017-07-14-weekly-meeting.md
│ │ ├── 2017-07-21-weekly-meeting.md
│ │ ├── 2017-07-28-weekly-meeting.md
│ │ ├── 2017-08-04-weekly-meeting.md
│ │ ├── 2017-08-11-weekly-meeting.md
│ │ ├── 2017-08-18-weekly-meeting.md
│ │ ├── 2017-09-01-weekly-meeting.md
│ │ ├── 2017-09-08-weekly-meeting.md
│ │ ├── 2017-09-15-weekly-meeting.md
│ │ ├── 2017-09-22-weekly-meeting.md
│ │ ├── 2017-09-29-weekly-meeting.md
│ │ ├── 2017-10-06-weekly-meeting.md
│ │ ├── 2017-10-13-weekly-meeting.md
│ │ ├── 2017-10-20-weekly-meeting.md
│ │ ├── 2017-11-03-weekly-meeting.md
│ │ ├── 2017-11-17-weekly-meeting.md
│ │ ├── 2017-12-01-weekly-meeting.md
│ │ ├── 2017-12-08-weekly-meeting.md
│ │ ├── 2017-12-15-weekly-meeting.md
│ │ ├── 2018-01-05-weekly-meeting.md
│ │ ├── 2018-01-19-weekly-meeting.md
│ │ ├── 2018-01-26-weekly-meeting.md
│ │ ├── 2018-02-08-weekly-meeting.md
│ │ ├── 2018-02-23-weekly-meeting.md
│ │ ├── 2018-09-07-meeting.md
│ │ └── 2018-10-12-meeting.md
│ └── roadmaps/
│ └── 2017-h1.md
├── package.json
├── prettier.config.js
├── scripts/
│ ├── jest/
│ │ ├── hasteImpl.js
│ │ ├── preprocessor.js
│ │ └── shims.js
│ └── module-map.js
├── src/
│ ├── .flowconfig
│ ├── Draft.js
│ ├── NonASCIIStringSnapshotSerializer.js
│ ├── __mocks__/
│ │ └── generateRandomKey.js
│ ├── component/
│ │ ├── base/
│ │ │ ├── DraftEditor.css
│ │ │ ├── DraftEditor.react.js
│ │ │ ├── DraftEditorFlushControlled.js
│ │ │ ├── DraftEditorPlaceholder.css
│ │ │ ├── DraftEditorPlaceholder.react.js
│ │ │ ├── DraftEditorProps.js
│ │ │ ├── DraftScrollPosition.js
│ │ │ ├── DraftTextAlignment.js
│ │ │ └── __tests__/
│ │ │ ├── DraftEditor.react-test.js
│ │ │ └── __snapshots__/
│ │ │ └── DraftEditor.react-test.js.snap
│ │ ├── contents/
│ │ │ ├── DraftEditorBlock.react.js
│ │ │ ├── DraftEditorContents-core.react.js
│ │ │ ├── DraftEditorLeaf.react.js
│ │ │ ├── DraftEditorTextNode.react.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftEditorBlock.react-test.js
│ │ │ │ ├── DraftEditorContents.react-test.js
│ │ │ │ ├── DraftEditorTextNode-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ └── DraftEditorBlock.react-test.js.snap
│ │ │ └── exploration/
│ │ │ ├── DraftEditorBlockNode.react.js
│ │ │ ├── DraftEditorContentsExperimental.react.js
│ │ │ ├── DraftEditorDecoratedLeaves.react.js
│ │ │ ├── DraftEditorNode.react.js
│ │ │ └── __tests__/
│ │ │ ├── DraftEditorBlockNode.react-test.js
│ │ │ ├── DraftEditorContentsExperimental.react-test.js
│ │ │ └── __snapshots__/
│ │ │ ├── DraftEditorBlockNode.react-test.js.snap
│ │ │ └── DraftEditorContentsExperimental.react-test.js.snap
│ │ ├── handlers/
│ │ │ ├── DraftEditorModes.js
│ │ │ ├── composition/
│ │ │ │ ├── DOMObserver.js
│ │ │ │ ├── DraftEditorCompositionHandler.js
│ │ │ │ └── __tests__/
│ │ │ │ └── DraftEditorCompostionHandler-test.js
│ │ │ ├── drag/
│ │ │ │ └── DraftEditorDragHandler.js
│ │ │ └── edit/
│ │ │ ├── DraftEditorEditHandler.js
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── editOnBeforeInput-test.js.snap
│ │ │ │ ├── editOnBeforeInput-test.js
│ │ │ │ ├── editOnBlur-test.js
│ │ │ │ └── editOnInput-test.js
│ │ │ ├── commands/
│ │ │ │ ├── SecondaryClipboard.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── SecondaryClipboard-test.js
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ ├── SecondaryClipboard-test.js.snap
│ │ │ │ │ │ └── removeTextWithStrategy-test.js.snap
│ │ │ │ │ └── removeTextWithStrategy-test.js
│ │ │ │ ├── keyCommandBackspaceToStartOfLine.js
│ │ │ │ ├── keyCommandBackspaceWord.js
│ │ │ │ ├── keyCommandDeleteWord.js
│ │ │ │ ├── keyCommandInsertNewline.js
│ │ │ │ ├── keyCommandMoveSelectionToEndOfBlock.js
│ │ │ │ ├── keyCommandMoveSelectionToStartOfBlock.js
│ │ │ │ ├── keyCommandPlainBackspace.js
│ │ │ │ ├── keyCommandPlainDelete.js
│ │ │ │ ├── keyCommandTransposeCharacters.js
│ │ │ │ ├── keyCommandUndo.js
│ │ │ │ ├── moveSelectionBackward.js
│ │ │ │ ├── moveSelectionForward.js
│ │ │ │ └── removeTextWithStrategy.js
│ │ │ ├── editOnBeforeInput.js
│ │ │ ├── editOnBlur.js
│ │ │ ├── editOnCompositionStart.js
│ │ │ ├── editOnCopy.js
│ │ │ ├── editOnCut.js
│ │ │ ├── editOnDragOver.js
│ │ │ ├── editOnDragStart.js
│ │ │ ├── editOnFocus.js
│ │ │ ├── editOnInput.js
│ │ │ ├── editOnKeyDown.js
│ │ │ ├── editOnPaste.js
│ │ │ ├── editOnSelect.js
│ │ │ └── getFragmentFromSelection.js
│ │ ├── selection/
│ │ │ ├── DOMDerivedSelection.js
│ │ │ ├── DraftOffsetKey.js
│ │ │ ├── DraftOffsetKeyPath.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftOffsetKey-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── DraftOffsetKey-test.js.snap
│ │ │ │ │ ├── getDraftEditorSelection-test.js.snap
│ │ │ │ │ └── setDraftEditorSelection-test.js.snap
│ │ │ │ ├── getDraftEditorSelection-test.js
│ │ │ │ └── setDraftEditorSelection-test.js
│ │ │ ├── expandRangeToStartOfLine.js
│ │ │ ├── findAncestorOffsetKey.js
│ │ │ ├── getDraftEditorSelection.js
│ │ │ ├── getDraftEditorSelectionWithNodes.js
│ │ │ ├── getRangeBoundingClientRect.js
│ │ │ ├── getRangeClientRects.js
│ │ │ ├── getSampleSelectionMocksForTesting.js
│ │ │ ├── getSampleSelectionMocksForTestingNestedBlocks.js
│ │ │ ├── getSelectionOffsetKeyForNode.js
│ │ │ ├── getUpdatedSelectionState.js
│ │ │ ├── getVisibleSelectionRect.js
│ │ │ ├── isSelectionAtLeafStart.js
│ │ │ └── setDraftEditorSelection.js
│ │ └── utils/
│ │ ├── DraftDOMTypes.js
│ │ ├── DraftStyleDefault.css
│ │ ├── KeyBindingUtil.js
│ │ ├── _DraftTestHelper.js
│ │ ├── __tests__/
│ │ │ └── isHTMLBRElement-test.js
│ │ ├── draftKeyUtils.js
│ │ ├── exploration/
│ │ │ ├── DraftTreeAdapter.js
│ │ │ ├── DraftTreeInvariants.js
│ │ │ └── __tests__/
│ │ │ ├── DraftTreeAdapter-test.js
│ │ │ ├── DraftTreeInvariants-test.js
│ │ │ └── __snapshots__/
│ │ │ └── DraftTreeAdapter-test.js.snap
│ │ ├── getContentEditableContainer.js
│ │ ├── getCorrectDocumentFromNode.js
│ │ ├── getDefaultKeyBinding.js
│ │ ├── getTextContentFromFiles.js
│ │ ├── getWindowForNode.js
│ │ ├── isElement.js
│ │ ├── isEventHandled.js
│ │ ├── isHTMLAnchorElement.js
│ │ ├── isHTMLBRElement.js
│ │ ├── isHTMLElement.js
│ │ ├── isHTMLImageElement.js
│ │ ├── isInstanceOfNode.js
│ │ ├── isSoftNewlineEvent.js
│ │ └── splitTextIntoTextBlocks.js
│ ├── flowlib/
│ │ └── window.js
│ ├── model/
│ │ ├── constants/
│ │ │ ├── DraftBlockType.js
│ │ │ ├── DraftDragType.js
│ │ │ ├── DraftEditorCommand.js
│ │ │ ├── DraftHandleValue.js
│ │ │ ├── DraftInsertionType.js
│ │ │ └── DraftRemovalDirection.js
│ │ ├── decorators/
│ │ │ ├── CompositeDraftDecorator.js
│ │ │ ├── DraftDecorator.js
│ │ │ ├── DraftDecoratorType.js
│ │ │ └── __tests__/
│ │ │ ├── CompositeDraftDecorator-test.js
│ │ │ └── __snapshots__/
│ │ │ └── CompositeDraftDecorator-test.js.snap
│ │ ├── encoding/
│ │ │ ├── DraftStringKey.js
│ │ │ ├── EntityRange.js
│ │ │ ├── InlineStyleRange.js
│ │ │ ├── RawDraftContentBlock.js
│ │ │ ├── RawDraftContentState.js
│ │ │ ├── RawDraftEntity.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftStringKey-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── convertFromDraftStateToRaw-test.js.snap
│ │ │ │ │ ├── convertFromHTMLToContentBlocks-test.js.snap
│ │ │ │ │ ├── convertFromRawToDraftState-test.js.snap
│ │ │ │ │ ├── decodeEntityRanges-test.js.snap
│ │ │ │ │ ├── decodeInlineStyleRanges-test.js.snap
│ │ │ │ │ ├── encodeEntityRanges-test.js.snap
│ │ │ │ │ ├── encodeInlineStyleRanges-test.js.snap
│ │ │ │ │ └── sanitizeDraftText-test.js.snap
│ │ │ │ ├── convertFromDraftStateToRaw-test.js
│ │ │ │ ├── convertFromHTMLToContentBlocks-test.js
│ │ │ │ ├── convertFromRawToDraftState-test.js
│ │ │ │ ├── decodeEntityRanges-test.js
│ │ │ │ ├── decodeInlineStyleRanges-test.js
│ │ │ │ ├── encodeEntityRanges-test.js
│ │ │ │ ├── encodeInlineStyleRanges-test.js
│ │ │ │ └── sanitizeDraftText-test.js
│ │ │ ├── convertFromDraftStateToRaw.js
│ │ │ ├── convertFromHTMLToContentBlocks.js
│ │ │ ├── convertFromRawToDraftState.js
│ │ │ ├── createCharacterList.js
│ │ │ ├── decodeEntityRanges.js
│ │ │ ├── decodeInlineStyleRanges.js
│ │ │ ├── encodeEntityRanges.js
│ │ │ ├── encodeInlineStyleRanges.js
│ │ │ └── sanitizeDraftText.js
│ │ ├── entity/
│ │ │ ├── DraftEntity.js
│ │ │ ├── DraftEntityInstance.js
│ │ │ ├── DraftEntityMutability.js
│ │ │ ├── DraftEntityType.js
│ │ │ ├── __mocks__/
│ │ │ │ └── DraftEntity.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftEntity-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── DraftEntity-test.js.snap
│ │ │ │ │ └── getEntityKeyForSelection-test.js.snap
│ │ │ │ └── getEntityKeyForSelection-test.js
│ │ │ ├── getEntityKeyForSelection.js
│ │ │ └── getTextAfterNearestEntity.js
│ │ ├── immutable/
│ │ │ ├── BlockMap.js
│ │ │ ├── BlockMapBuilder.js
│ │ │ ├── BlockNode.js
│ │ │ ├── BlockNodeRecord.js
│ │ │ ├── BlockTree.js
│ │ │ ├── CharacterMetadata.js
│ │ │ ├── ContentBlock.js
│ │ │ ├── ContentBlockNode.js
│ │ │ ├── ContentState.js
│ │ │ ├── ContentStateRawType.js
│ │ │ ├── DefaultDraftBlockRenderMap.js
│ │ │ ├── DefaultDraftInlineStyle.js
│ │ │ ├── DraftBlockRenderConfig.js
│ │ │ ├── DraftBlockRenderMap.js
│ │ │ ├── DraftInlineStyle.js
│ │ │ ├── EditorBidiService.js
│ │ │ ├── EditorChangeType.js
│ │ │ ├── EditorState.js
│ │ │ ├── EntityMap.js
│ │ │ ├── SampleDraftInlineStyle.js
│ │ │ ├── SelectionState.js
│ │ │ ├── __tests__/
│ │ │ │ ├── BlockTree-test.js
│ │ │ │ ├── CharacterMetadata-test.js
│ │ │ │ ├── ContentBlock-test.js
│ │ │ │ ├── ContentBlockNode-test.js
│ │ │ │ ├── ContentState-test.js
│ │ │ │ ├── EditorBidiService-test.js
│ │ │ │ ├── EditorState-test.js
│ │ │ │ ├── SelectionState-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── BlockTree-test.js.snap
│ │ │ │ │ ├── CharacterMetadata-test.js.snap
│ │ │ │ │ ├── ContentBlock-test.js.snap
│ │ │ │ │ ├── ContentState-test.js.snap
│ │ │ │ │ ├── EditorBidiService-test.js.snap
│ │ │ │ │ ├── EditorState-test.js.snap
│ │ │ │ │ ├── SelectionState-test.js.snap
│ │ │ │ │ └── findRangesImmutable-test.js.snap
│ │ │ │ └── findRangesImmutable-test.js
│ │ │ └── findRangesImmutable.js
│ │ ├── keys/
│ │ │ ├── generateRandomKey.js
│ │ │ └── mockUUID.js
│ │ ├── modifier/
│ │ │ ├── AtomicBlockUtils.js
│ │ │ ├── DraftEntitySegments.js
│ │ │ ├── DraftModifier.js
│ │ │ ├── DraftRange.js
│ │ │ ├── DraftRemovableWord.js
│ │ │ ├── RichTextEditorUtil.js
│ │ │ ├── RichTextUtils.js
│ │ │ ├── __tests__/
│ │ │ │ ├── AtomicBlockUtils-test.js
│ │ │ │ ├── DraftRemovableWord-test.js
│ │ │ │ ├── RichTextEditorUtil-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ ├── AtomicBlockUtils-test.js.snap
│ │ │ │ ├── DraftRemovableWord-test.js.snap
│ │ │ │ └── RichTextEditorUtil-test.js.snap
│ │ │ ├── exploration/
│ │ │ │ ├── DraftTreeOperations.js
│ │ │ │ ├── NestedRichTextEditorUtil.js
│ │ │ │ └── __tests__/
│ │ │ │ ├── DraftTreeOperations-test.js
│ │ │ │ ├── NestedRichTextEditorUtil-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ ├── DraftTreeOperations-test.js.snap
│ │ │ │ └── NestedRichTextEditorUtil-test.js.snap
│ │ │ ├── getCharacterRemovalRange.js
│ │ │ └── getRangesForDraftEntity.js
│ │ ├── paste/
│ │ │ ├── DraftPasteProcessor.js
│ │ │ ├── __mocks__/
│ │ │ │ └── getSafeBodyFromHTML.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftPasteProcessor-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ └── DraftPasteProcessor-test.js.snap
│ │ │ └── getSafeBodyFromHTML.js
│ │ └── transaction/
│ │ ├── ContentStateInlineStyle.js
│ │ ├── __tests__/
│ │ │ ├── ContentStateInlineStyle-test.js
│ │ │ ├── __snapshots__/
│ │ │ │ ├── ContentStateInlineStyle-test.js.snap
│ │ │ │ ├── applyEntityToContentBlock-test.js.snap
│ │ │ │ ├── applyEntityToContentState-test.js.snap
│ │ │ │ ├── getContentStateFragment-test.js.snap
│ │ │ │ ├── insertFragmentIntoContentState-test.js.snap
│ │ │ │ ├── insertIntoList-test.js.snap
│ │ │ │ ├── insertTextIntoContentState-test.js.snap
│ │ │ │ ├── moveBlockInContentState-test.js.snap
│ │ │ │ ├── randomizeBlockMapKeys-test.js.snap
│ │ │ │ ├── removeEntitiesAtEdges-test.js.snap
│ │ │ │ ├── removeRangeFromContentState-test.js.snap
│ │ │ │ └── splitBlockInContentState-test.js.snap
│ │ │ ├── applyEntityToContentBlock-test.js
│ │ │ ├── applyEntityToContentState-test.js
│ │ │ ├── getContentStateFragment-test.js
│ │ │ ├── insertFragmentIntoContentState-test.js
│ │ │ ├── insertIntoList-test.js
│ │ │ ├── insertTextIntoContentState-test.js
│ │ │ ├── moveBlockInContentState-test.js
│ │ │ ├── randomizeBlockMapKeys-test.js
│ │ │ ├── removeEntitiesAtEdges-test.js
│ │ │ ├── removeRangeFromContentState-test.js
│ │ │ └── splitBlockInContentState-test.js
│ │ ├── adjustBlockDepthForContentState.js
│ │ ├── applyEntityToContentBlock.js
│ │ ├── applyEntityToContentState.js
│ │ ├── exploration/
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── getNextDelimiterBlockKey-test.js.snap
│ │ │ │ └── getNextDelimiterBlockKey-test.js
│ │ │ └── getNextDelimiterBlockKey.js
│ │ ├── getContentStateFragment.js
│ │ ├── getSampleStateForTesting.js
│ │ ├── insertFragmentIntoContentState.js
│ │ ├── insertIntoList.js
│ │ ├── insertTextIntoContentState.js
│ │ ├── modifyBlockForContentState.js
│ │ ├── moveBlockInContentState.js
│ │ ├── randomizeBlockMapKeys.js
│ │ ├── removeEntitiesAtEdges.js
│ │ ├── removeRangeFromContentState.js
│ │ └── splitBlockInContentState.js
│ ├── stubs/
│ │ ├── ComposedEntityMutability.js
│ │ ├── DraftEditorContents.react.js
│ │ ├── DraftEffects.js
│ │ ├── DraftJsDebugLogging.js
│ │ └── gkx.js
│ └── util/
│ ├── getOwnObjectValues.js
│ └── uuid.js
└── website/
├── .gitignore
├── README.md
├── docusaurus.config.js
├── package.json
├── sidebars.js
├── src/
│ ├── components/
│ │ └── DraftEditorExample/
│ │ ├── css/
│ │ │ ├── draft.css
│ │ │ ├── example.css
│ │ │ └── rich-editor.css
│ │ └── index.js
│ ├── css/
│ │ └── custom.css
│ └── pages/
│ ├── index.js
│ └── styles.module.css
└── static/
└── CNAME
================================================
FILE CONTENTS
================================================
================================================
FILE: .alexignore
================================================
# The Code of Conduct calls out language that can't be used so it's not linted.
CODE_OF_CONDUCT.md
# The CHANGELOG contains references to commit messages.
CHANGELOG.md
# We will handle meeting notes and roadmap documents after the main docs are linted.
meta/meeting-notes/**/*.md
meta/roadmaps/*.md
# This README contains some domain specific language that fails validation.
examples/draft-0-10-0/playground/README.md
================================================
FILE: .alexrc.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
exports.allow = [
// We frequently refer to form props by their name "disabled".
// Ideally we would alex-ignore only the valid uses (PRs accepted).
"invalid",
// Unfortunately "watchman" is a library name that we depend on.
"watchman-watchwoman"
];
// Use a "maybe" level of profanity instead of the default "unlikely".
exports.profanitySureness = 1;
================================================
FILE: .dependabot/config.yml
================================================
version: 1
update_configs:
- package_manager: "javascript"
directory: "/examples/draft-0-10-0/playground"
update_schedule: "monthly"
- package_manager: "javascript"
directory: "/examples/draft-0-10-0/tex"
update_schedule: "monthly"
- package_manager: "javascript"
directory: "/examples/draft-0-10-0/universal"
update_schedule: "monthly"
- package_manager: "javascript"
directory: "/"
update_schedule: "weekly"
================================================
FILE: .eslintignore
================================================
lib/
dist/
docs/
node_modules/
website/
gulpfile.js
scripts/module-map.js
scripts/jest/preprocessor.js
scripts/jest/hasteImpl.js
examples/draft-0-10-0/universal/static/bundle.js
examples/draft-0-9-1/universal/static/bundle.js
================================================
FILE: .eslintrc.js
================================================
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
module.exports = {
extends: [
'fbjs',
'prettier',
'prettier/flowtype',
'prettier/react',
'prettier/standard',
],
rules: {
'prettier/prettier': ['error'],
},
plugins: ['prettier', 'fb-www'],
overrides: [
{
files: ['examples/draft-0-10-0/**', 'examples/draft-0-9-1/**'],
rules: {
'prettier/prettier': 0,
'jsx-a11y/no-static-element-interactions': 0,
'no-console': 0,
},
},
],
};
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
#### Do you want to request a *feature* or report a *bug*?
#### What is the current behavior?
#### If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.
#### What is the expected behavior?
#### Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
*Before* submitting a pull request, please make sure the following is done...
1. Fork the repo and create your branch from `master`.
2. If you've added code that should be tested, add tests!
3. If you've changed APIs, update the documentation.
4. Ensure that:
* The test suite passes (`npm test`)
* Your code lints (`npm run lint`) and passes Flow (`npm run flow`)
* You have followed the [testing guidelines](https://github.com/facebook/draft-js/wiki/Testing-for-Pull-Requests)
5. If you haven't already, complete the [CLA](https://code.facebook.com/cla).
Please use the simple form below as a guideline for describing your pull request, and delete these instructions.
Thanks for contributing to Draft.js!
---
#### Summary
[...]
#### Test Plan**
[...]
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on: [push, pull_request]
jobs:
ci:
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
node-version: ['14', '16']
cmd: ['build']
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: 'yarn'
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Run ${{ matrix.cmd }}
run: yarn run ${{ matrix.cmd }}
================================================
FILE: .gitignore
================================================
static/
dist/
lib/
build/
node_modules
website/src/docs/
npm-debug.log
!website/static/
yarn-error.log
.DS_Store
meta/bundle-size-stats/
================================================
FILE: CHANGELOG.md
================================================
# Changelog
Notable changes to Draft.js will be documented in this file.
Changes to `src` are live in production on facebook.com at the time of release.
## 0.11.7 (Aug 13th, 2020)
### Added
* Allow aria-describedby overriding (Jeff Dickey in 8b8b9c00)
* Add support to create editor state using text string (Abhishek Pandya in fc9395fe)
### Changed
* Update readme to suggest building with yarn (#2527) (Kevin Chavez in 54213a13)
* Update build, static analysis deps (+ upgrade to fbjs 2.0.0) (#2541) (Kevin Chavez in 5e92a32f)
* Tex example: Update babel to v7 + other deps (#2533) (Kevin Chavez in ce94ecf3)
* Update package.json (#2490) (Michaël De Boey in b79082f9)
* Update media.html (#2452) (fay in a8f44b15)
* Upgrade dependencies in playground example (#2534) (Kevin Chavez in f6bf4ed3)
* feat(docs): Update README.md (#2523) (Darsh Shah in e0fc33eb)
* adds highlight in docs (#2469) (Tunde Thomas in cef61910)
* Update QuickStart-API-Basics.md (#2491) (Michaël De Boey in 170fe23a)
* Update .travis.yml (#2495) (Michaël De Boey in 3eb391e7)
* Update link to Record in docs (#2418) (Rounak Agarwal in 6a55c383)
* Update link to Immutable Map in docs (#2530) (Rounak Agarwal in 31dde91a)
* Upgrade browserify and babel deps in universal example (#2532) (Kevin Chavez in 1c8815a1)
* Upgrade eslint, flow, jest (#2531) (Kevin Chavez in ccd0470b)
* Fix the build by adding an argument to catch statement (Kevin Chavez in 5482c902)
* Conditionally invokes URI.tryParseURI in OSS code (Claudio Procida in 36de6f1f)
* formatPastedText prop (Laura González in 9a9ccbd5)
* fix pasting invalid links (Frank Thompson in 862a5b2b)
* chore(dependabot): adds examples directories separately (#2505) (Claudio Procida in fb0eb34c)
* style(website): Removes desaturation (#2504) (Claudio Procida in 2b8edb18)
* Fixes links accessibility by adding underlines (#2497) (R Nabors in 5e17cc24)
* add codes to suppressions in www (Daniel Sainati in 8457ebba)
* update comments in mobile to support error codes (Daniel Sainati in fb728fde)
* Use object shorthand in DraftEditorCompositionHandler (Kevin Chavez in d949433d)
* Force the selection when composition is resolved (#2094) (Robbert Brak in 3be4d372)
* fix(security): Upgrades Docusaurus to address CVE-2020-7662 (#2457) (Claudio Procida in a08a8fa5)
## 0.11.6 (June 4th, 2020)
### Added
* Adds BLM banner (#2454) (claudiopro in 2a0c5bbe)
* HtmlConversion: Add support for telephone links (#2365) (Andrew Lauria in e1e9a0c5)
* 7.C - Block Operations - Consume (Shalabh Vyas in 99c6b06c)
* Add fromJS() API to Draft model objects (Shalabh Vyas in 3ee5a23e)
### Changed
* Add Null return value type in code example (#2429) (Jacob D. Castro in 45bb6b52)
* Add /meta/bundle-size-stats to .gitignore (#2436) (Kevin Chavez in e3a689df)
* Update eslint, cross-env and gulp-derequire. Fix version numbers for … (#2437) (Kevin Chavez in 79a25b5c)
* Update Overview.md (#2434) (Mohamed ABDELLANI in e5e293f1)
* Upgrade jest and flow-bin deps (#2435) (Kevin Chavez in 9ac399cc)
* Update cadence for dependabot updates (#2402) (Kevin Chavez in 6619077c)
* Bump alex from 8.0.0 to 8.1.1 (#2407) (dependabot-preview[bot] in 7e604b06)
* Bump fstream from 1.0.11 to 1.0.12 in /examples/draft-0-10-0/tex (#2396) (dependabot[bot] in 1f5d40ec)
* Bump acorn from 6.0.5 to 6.4.1 in /examples/draft-0-10-0/tex (#2376) (dependabot[bot] in 9028881c)
* chore(flow): Updates flow-bin to 0.123 (#2393) (Claudio Procida in 497a4787)
* Short-circuit getUpdatedSelectionState for invalid selection updates on prod (Kevin Chavez in 0585b68f)
* Type selection object in setDraftEditorSelection.js (Kevin Chavez in 31dec710)
* Type selection object in keyCommandBackspaceToStartOfLine.js (Kevin Chavez in aa5c4a19)
* Flow v0.123.0 in www (Panagiotis Vekris in af675755)
* Type selection object in getDraftEditorSelection.js (Kevin Chavez in dfacb1b4)
* Type selection object in editOnBlur.js (Kevin Chavez in 22997144)
* Type selection object in editOnInput. (Kevin Chavez in 41beae1b)
* upgrade to flow 0.122.0 (Marshall Roch in 97dd19b2)
* DraftEntity ID Changes (Shalabh Vyas in 13989e31)
* use pasted block type if pasting to empty unstyled block (Frank Thompson in 7d3d3c8f)
* Update deps for and cleanup playground example (#2368) (Kevin Chavez in 2658dd60)
* Only extend selection if it has ranges in setDraftEditorSelection.js (Kevin Chavez in d53fa7ab)
* Update draft.js on website to v0.11.5 (#2370) (Kevin Chavez in 538d864e)
* Make a few types exact (Kevin Chavez in 0950285d)
* Remaining non-generated non-reason-parsed files (Jordan Brown in 153482ff)
### Fixed
* Fix draft-js pasted inline styles (Giulio Jiang in 92176ab2)
* docs: in react hooks example, limit createEmpty calls (#2432) (Benjamin Atkin in 05e838e6)
* Revisit comment for todo of T65805998, validate there's nothing to worry about (Kevin Chavez in 268ece35)
* html/shared/draft-js/model/transaction (generatedunixname89002005287564 in c75f1e4c)
* types-first in html/js/mobile (Panagiotis Vekris in e66f39ef)
* Address #2413 by making Firefox follow the same behaviour as Chrome (#2414) (Kevin Chavez in 6d619c61)
* Prevent placeholder from unnecessarily wrapping (#2392) (Frank Yan in 9d6bbfdc)
* docs: Fix simple typo, sibbling -> sibling (#2384) (Tim Gates in d1cb1e77)
* Fix build by adding missing modules (Kevin Chavez in fbe3417e)
* Fix flow by allowing optional chaining (#2369) (Kevin Chavez in 85764327)
## 0.11.5 (Mar 26, 2020)
### Removed
* Remove examples for draft.js 0.9.0 (#2358) (Kevin Chavez in fd16d8e2)
### Changed
* Update deps in 'universal' example (#2362) (Kevin Chavez in dc8bfbb2)
* Remove unused Flow suppressions in WWW (George Zahariev in 3858858b)
* Improve types for EditorState (Kevin Chavez in 792bd3ab)
* Don't SSR example editor on website. (#2356) (Kevin Chavez in 9191a3f2)
* Deprecate Travis Bot files and configuration (Chris Lüer in 6c1c6544)
* Require ReactDOMComet instead of ReactDOM (Dan Abramov in 66301633)
* Strictify DraftEditorLeaf.react.js (Kevin Chavez in b4a1db99)
* Make decodeEntityRanges flow strict (Kevin Chavez in 7af73b70)
* Move key to static argument instead of spread (Sebastian Markbage in d6527a95)
* "ecmascript" => "ECMAScript" (#2327) (Agastya Chandrakant in 6cfed736)
* Abstract ReactDOM as ReactDOMComet (Sebastian Markbage in 24339f12)
* Prevent (but not fix) ‘Cannot read property 'getIn' of undefined’ in getUpdatedSelectionState (Steven Luscher in a9fcbb20)
* Make some more modules strict(-local) (Kevin Chavez in c30ca735 and 70025659)
* Update webpack deps (#2310) (Kevin Chavez in 0131e1d5)
* Remove unused gulp task remained from docusaurus 2 migration (#2308) (Kanitkorn S in 963e3126)
* Re-write `DraftEditorExample` in the website using react hooks (#2287) (Kevin Chavez in 9b9376bd)
* Add a preventScroll prop (Dan Abramov in 3ba907bb)
* Add editorRef prop to DraftEditor (Dan Abramov in 8c500424)
* Remove findDOMNode from DraftEditorBlockNode (Sebastian Markbage in 0dd39781)
* Remove findDOMNode in DraftEditorDragHandler (Sebastian Markbage in c1a55ceb)
* Remove findDOMNode from getContentEditableContainer (Sebastian Markbage in 9d587d9f)
* Upgrade to Flow explicit inexact object type syntax (Jordan Brown in b051fc1b)
* Upgrade eslint + flow, and fix failed test from nullishCoalescingOperator (#2083) (Kanitkorn S in 824fd125)
* chore(travis): bumps node versions used in Travis CI to 10 and 12 (#2300) (Claudio Procida in e711230f)
### Fixed
* Fix Uncaught TypeError: Cannot read property 'nodeType' of null at editOnInput (#2330) (Konstantin Tarkus in db3216d9)
* Fix keyBindingFn documentation URL (Ryan Silva in 3251017d)
* fix style handling in convertFromHTMLToContentBlocks (Frank Thompson in ad8374d2)
* remove unused flow suppressions (Panagiotis Vekris in 822d2fbd)
## 0.11.4 (January 7th, 2020)
### Added
* Add Section and Article to DefaultBlockRenderMap (#2212) (Tarun047 in e20f79f)
### Changed
* Add rules to .flowconfig for flow strict rules (#2288) (Kevin Chavez in f223799)
* Update website's yarn version to 0.11.3 (Kevin Chavez in efcaf42)
* Prettify docs files (#2275) (Yangshun Tay in 6fc9964)
* Remove Jest auto mocking (#2279) (Yangshun Tay in 817e371)
* Add myself to get TravisCI emails (Kevin Chavez in f4167fe)
* Unit tests for isHTMLBRElement (Claudio Procida in bb81765)
* Remove niveditc from Travis CI email (Nivedita Chopra in 7721805)
* Create CNAME (#2276) (Yangshun Tay in 92680be)
* Upgrade to Docusaurus 2 (#2268) (Yangshun Tay in 5b10191)
* move alex to dev dependencies (#2272) (Ilya in b889d5d)
* Improve docs syntax and formatting (#2267) (Yangshun Tay in 9b4a628)
### Fixed
* fix(chore): fixes webpack-stream error with missing catch var declaration (#2291) (Claudio Procida in 4252469)
* IE could not display composer when opening or creating a new group chat from the chat create view (Jainil Parekh in 64b51df)
* Fix DOMObserver mutation data for IE (#2285) (Jainil Parekh in afb708f)
* Added tests and fixed IE IndexSizeError trying to get a range from a selection when there is not one (#2271) (Lauren Wyatt in aa55de2)
* Fix scroll behavior when node has tab chars (#2256) (cdr in 5d37c03)
* Fix docs links in readme (#2284) (Lucas Cordeiro in 3b6d231)
* Fix isHTMLBRElement test (#2278) (Yangshun Tay in 0603772)
* Fix `isHTMLBRElement` check (Jack Armstrong in e869fcb)
* Fix typing Chinese in Edge (#2082) (#2088) (Robbert Brak in 8c0727e)
* Fix Travis website deployment (#2274) (Yangshun Tay in 861aab8)
* getEntityKeyForSelection.js (Kevin Chavez in c07a404)
## 0.11.3 (December 2nd, 2019)
### Added
* Take over enhancements to render Draft.js in an iframe (#1938) (Claudio Procida in dceddf5)
* Implement click listener for editor wrapper (#2230) (Max Vyz in 8f77aa3)
* Add linting for insensitive and inconsiderate language (#2223) (Claudio Procida in 5dd99d3)
### Changed
* Updates to Prettier 1.19.1 (#2265) (Claudio Procida in abcbe20)
* Bump mixin-deep from 1.3.1 to 1.3.2 in /examples/draft-0-10-0/universal (#2259) (dependabot[bot] in 37d281b)
* Upgrade dependencies in /website (#2263) (Kevin Chavez in 0b57720)
* Update dependencies in examples/draft-0-10-0/universal (#2257) (Kevin Chavez in ae2dd14)
* Update dependencies in examples/draft-0-10-0/playground (#2258) (Kevin Chavez in 11bc5d8)
* Prettify files rest of non-intern files in html/ (George Zahariev in 6217dc8)
* add flow declaration in editOnBeforeInput-test.js (Frank Thompson in 0601090)
* Bump lodash.merge from 4.6.1 to 4.6.2 in /website (#2241) (dependabot[bot] in 177db5e)
* Defaulting to createEmpty if block map is empty in createWithContent (Fixes issue #2226) (#2240) (David Fuentes in c42662e)
* Bump handlebars from 4.1.1 to 4.5.1 in /examples/draft-0-10-0/playground (#2242) (dependabot[bot] in 2a761af)
* Suppress non-synced files in www for 0.111 (Jordan Brown in 4bca140)
* Upgrade more deps. (#2239) (Kevin Chavez in a477e83)
* Bump lodash.template from 4.4.0 to 4.5.0 in /examples/draft-0-10-0/playground (#2236) (dependabot[bot] in 0e03745)
* Bump mixin-deep from 1.3.1 to 1.3.2 in /website (#2234) (dependabot[bot] in 78f20cc)
* Bump lodash from 4.17.11 to 4.17.15 in /website (#2233) (dependabot[bot] in da1ab7c)
* Updated browser icons in README (#2238) (SuNNjek in 6ed6ed4)
* Bump mixin-deep from 1.3.1 to 1.3.2 in /examples/draft-0-10-0/playground (#2235) (dependabot[bot] in 2744ff7)
* Upgrade 8 dependencies (including jest, @babel/core, etc). (#2237) (Kevin Chavez in 46103ac)
* Upgrades ESLint and related plugins/configs. (#2231) (Kevin Chavez in 53d2a63)
### Fixed
* fix wrong property access in convertFromHTMLToContentBlocks (Frank Thompson in 7d26fab)
* Fix draftjs type error for event (Jack Armstrong in e7ae2e7)
* fix decorator handling in editOnBeforeInput (Frank Thompson in 1452b87)
* fixes #304, kudos to @andpor (#2197) (Ante Beslic in 2908035)
* Fix playground example import (#2220) (Ryan Lee in 778e88d)
* Fix React warnings (#2221) (Alan Norbauer in 2595016)
### Meta
* deploy v112 to www (Daniel Sainati in ae542b7)
## 0.11.2 (September 30th, 2019)
### Changed
* Upgrade to Flow strict-local (generatedunixname89002005287564 in 0c92bf7)
* chore(website): updates stylesheet for 0.11.1 (#2188) (Claudio Procida in 543df66)
* Prepare 0.11.1 (#2186) (Claudio Procida in 3adf593)
### Fixed
* fix(selection): Returns previous selection if either leaf is null (#2189) (Claudio Procida in fe68e43)
## 0.11.1 (September 19th, 2019)
### Added
* Support post processor on paste entities. (Tee Xie in 3043573)
* Adding 'preserveSelectionOnBlur' prop (#2128) (Matthew Holloway in db792ef)
### Changed
* Reaping draft_segmented_entities_behavior (Mohamed Moussa in cd4adaa)
* Make insertIntoList strict-local (Kevin Chavez in db64f93)
* Adopt Contributor Covenant (Paul O'Shannessy in 2c61167)
* Flowify editOnKeyDown.js (Kevin Chavez in 8473e41)
* (Flowify) decodeInlineStyleRanges.js (Kevin Chavez in 20a619c)
* Flowify editOnInput.js (Kevin Chavez in 594a14f)
* Flowify editOnBlur.js (Kevin Chavez in 6972278)
* updated function description for onEditInput event handler function (#2132) (Mukesh Soni in 14349f1)
* updated hastext method to not account for zero space width chars (#2163) (Ajith V in 85aa3a3)
* Encode non-ASCII characters in all snapshot tests (Daniel Lo Nigro in 734bd82)
* @flow -> @flow-strict for html/shared (Runjie Guan in 0375c0e)
* Revert D16421104: [rfc][draft-js] catch errors when encoding entity map (Frank Thompson in 8e9cabf)
* catch errors when encoding entity map (Frank Thompson in 259d122)
* Revert D16362778: [rfc][draftjs] catch errors when encoding entity map (Frank Thompson in 96e7f25)
* catch errors when encoding entity map (Frank Thompson in c0e911c)
* Flow-type DataTransfer.js (Kevin Chavez in ed09f78)
* All these modules can actually be strict (Kevin Chavez in bc716b2)
### Fixed
* convertFromHTML breaks after converting \n string, issue #1822 (#1823) (Sannikov in 9246cc7)
* Fixes HTML importer to make image entity immutable (#2184) (Claudio Procida in b858f43)
* Fixing js example and cleaning up one sentence (#2172) (Liz LeCrone in 819f58c)
* Reaping draft_killswitch_allow_nontextnodes (generatedunixname89002005287564 in 0e2e9a7)
* Fix for workchat composer cursor jumping (Jainil Parekh in aed35d2)
* Fix various grammatical errors (#2158) (Jordan Lee in 1ff8c8c)
* Composer: Not assuming element has leaves (Nitzan Raz in ce8bdd0)
* Update jsfiddle links with recent versions of the Draft and React (#2145) (Günay Mert Karadoğan in 22b7599)
* Changes reference to BSD license to MIT (#2130) (claudiopro in 4064cae)
* Updates CHANGELOG for v0.11.0 (#2052) (Claudio Procida in 973f7ff)
* Fixed a bug causing block data being over-written when pasted. (Tee Xie in 82e2135)
* Merge pull request #2113 from danielo515/patch-1 (Claudio Procida in 0e88544)
* Update ShipIt Sync (Claudio Procida in 0f138d1)
## 0.11.0 (July 9th, 2019)
### Added
* Adds support for nullish coalescing operator (#2076) (Claudio Procida in 96c7221)
* Add import statements for hooks-example in README (#2075) (Bennett in 943f6dc)
* Unit tests for DraftStringKey (Claudio Procida in 978ad6b)
* Adding Hooks in docs (#2004) (Charles ⚡ in f9f5fd6)
* Exports `isSoftNewlineEvent` as static method of `KeyBindingUtil` (Kevin Hawkinson in aede823)
* Add live demo to README.md (#1907) (PLa in 6db3726)
* added highlighting (`<mark>` tag) to draft js html to content block converter (Isaiah Solomon in 37f2f2a)
* Relicense under MIT and remove patents grant (#1967) (Claudio Procida in 585af35)
* Ctrl-K at end of line should delete newline (Sophie Alpert in 6455493)
* Add type annotations to `React.Component` classes in html/shared (Paco Estevez Garcia in 2e3a181)
* Add return type annotation to `addEmojiInput` (Sam Goldman in 280d242)
* Unstyle empty list item on Enter key (#769) (Eric Biewener in a0267a9)
* Allow Option+Space to be handled on OSX Chrome (#1254) (Colin Jeanne in 022bcf7)
* Added information about nature of block keys (#1892) (Prateek Nayak in 8ad59c4)
* Add flow to files (Nivedita Chopra in d87e093)
* Docs: add explicit deprecation notes to Entity methods (#1787) (vinogradov in cc6b897)
* Clarifies editor example, changes height to min-height (#1889) (Claudio Procida in 67d6fda)
* Improves editor overview example with min height and border (#1887) (Claudio Procida in b8862fd)
* Adds iframed editor example (#1879) (Claudio Procida in 8d5cbbe)
* Perform untab on backspace for nested items (Nivedita Chopra in 0688fa3)
* Support custom block rendering (Nivedita Chopra in fbe2267)
* Updates favicons and launcher icons with Draftjs logo (#1872) (Claudio Procida in d9c9d40)
* Merge successive non-leaf blocks resulting from tab (Nivedita Chopra in fbd18ce)
* Merge successive non-leaf blocks resulting from untab (Nivedita Chopra in 36e588a)
* Unnest the first non-leaf child (Nivedita Chopra in 0cb3804)
* Implement untab operations (Nivedita Chopra in 77e6844)
* added favicon (#1871) (saranshkataria in b9dd551)
* Add Algolia search (#1864) (Yangshun Tay in 1bf2145)
* `KeyBindingUtil`: add `usesMacOSHeuristics` method (#869) (William Boman in 98e7730)
* Export `RawDraftContentState` publicly (#1841) (Cédric Messiant in c6ff39d)
* Implement moveChildUp operation for untab (Nivedita Chopra in e145a2a)
* Allow insertion at a specific point for updateParentChild (Nivedita Chopra in 6b83312)
* Implement onTab in NestedRichTextEditorUtil (Nivedita Chopra in 8d3cfba)
* Add utilty methods for creating a new parent & updating node to become sibling's child (Nivedita Chopra in 6f73657)
* Add utility methods for parent-child & sibling pointer updates (Nivedita Chopra in 0cb80b7)
* Warn visibly when extensions break Draft (Sophie Alpert in c0fb6a8)
* Add data structure invariants for tree data (Nivedita Chopra in ad4f64f)
* Add Draft.js logo to header (Joel Marcey in 0ce20bc)
* Enable deprecated-type rule in www (George Zahariev in dc9fa27)
* Add different counter-style for ordered lists based on their depth (Noam Elboim in d2a3ae8)
* Finish modernizing `convertFromHTMLToContentBlocks` - max nesting bug fix (Noam Elboim in 06c0ee6)
* Finish modernizing `convertFromHTMLToContentBlocks` - upgrade draft-js internals (Noam Elboim in d24b802)
* Finish modernizing `convertFromHTMLToContentBlocks` - nesting bug fix (Noam Elboim in 49bdd85)
* Add docs about `DraftDecoratorComponentProps` (Flarnie Marchan in 7fddfcd)
* Add list block `onTab` test (il kwon Sim in 102701c)
* Integrating experiments on playground (mitermayer in b6ae887)
* Add clarifying comments to `getRemovalRange` (Flarnie Marchan in 28cb4a3)
* Adding Rich Editor to the playground (mitermayer in 227d125)
* Allow indentation beyond one level deeper than block above. (Eric Biewener in 73e5a9c)
* Enabling a GK manager for the plaground (mitermayer in 8eea2c2)
* Bundle size stats (Alan in 5ffce3d)
* Clear block type when pressing backspace (Sophie Alpert in 6a1e2b0)
* added favicon to website (Michael Baldwin in 6cc2d85)
* expose start/end positions of a decorated component within a contentBlock (Matthew Mans in 3a3d34b)
* Add draft js playground (Julian Krispel-Samsel in 18fdffb)
### Changed
* Moves test for legacy convertFromHTMLToContentBlocks out of OSS repo (Claudio Procida in 5eb49b1)
* Removes legacy convertFromHTMLToContentBlocks from OSS repo (Claudio Procida in a7d955e)
* Renames convertFromHTMLToContentBlocks2 to convertFromHTMLToContentBlocks (Claudio Procida in d08399b)
* Removes all resolved uses of convertFromHTMLToContentBlocks_DEPRECATED (Claudio Procida in ec43403)
* draft-js: clean up useless divs from HTML when pasting content (Daniel Quadros de Miranda in 0f5427a)
* docs: remove --save flag (#2008) (Mounish Sai in f92d4b1)
* Rename DraftEditorBlock to EditorBlock (#2002) (Umang Galaiya in 8514b57)
* Removes unnecessary eslint disable rules (Claudio Procida in 1ba0764)
* Upgrades react-scripts to ^1.1.5 (#2042) (Claudio Procida in 71ef373)
* Upgrades docusaurus (#2039) (Claudio Procida in 21753fa)
* Removes unused gulp-browserify-thin (#2032) (Claudio Procida in fc3549a)
* Upgrades @babel/core, babel-preset-fbjs, and gulp-util (#2028) (Claudio Procida in 68196f6)
* Deploy 0.94 to www (George Zahariev in 6183935)
* deploy 0.93 (Daniel Sainati in 3400cda)
* Normalize case in `convertFromHTMLToContentBlocks` variable names (Claudio Procida in b4183b1)
* Cleans up and refreshes generated website resources (#1998) (Claudio Procida in bd799f5)
* Upgrades Draft to React 16.8 ⚛️ (#1996) (claudiopro in a97ed7e)
* Adds email notifications for TravisCI builds (#1990) (Claudio Procida in a4cc10d)
* Upgrades flow-bin to 0.91.0 and mutes fbjs joinClasses error � (#1989) (Claudio Procida in e8a281c)
* Update to 0.92.0 (Paco Estevez Garcia in c022efb)
* Update webpack-dev-server & babel version in TeX examples (#1981) (Nivedita Chopra in a3a3585)
* Remove `componentWillReceiveProps` usages in examples (#1952) (Deep in 363f66e)
* Upgrade to Gulp 4 (fixes build) (#1957) (Kevin Chavez in 85ad25c)
* Kill permanent permanently. (Andrey Sukhachev in 236270a)
* Deploy Flow v0.85 to www (Sam Goldman in 744af91)
* flow 0.84 www deploy (Avik Chaudhuri in 59dd225)
* Bring back the ariaOwneeID prop. (#1883) (Andrea Fercia in ce7f677)
* Add Node.js version 10 for CI (#1909) (noelyoo in 4a9a6a8)
* Refactor buffer constructor (#1912) (noelyoo in 11d7379)
* Update Advanced-Topics-Inline-Styles.md (#1902) (Yao Bin in 0b7ec2a)
* Remove flow typing for DraftEntity mock (#1891) (Nivedita Chopra in 75aa88a)
* Flow strict for some files (Nivedita Chopra in bbd3ef1)
* Update documentation concerning immutable updates (#1884) (Connor Jennings in c336ae2)
* Update docs to ensure kebab menu shows subheads (#1885) (Connor Jennings in 2ff0c7e)
* Support npm version 6.x (#1866) (Yangshun Tay in 724fdc6)
* Remove unused var in BlockTree (#1859) (Nivedita Chopra in 0a45fcd)
* Update jest version to latest (#1858) (Nivedita Chopra in b962974)
* Update Advanced-Topics-Entities.md (#1767) (alaoui abdellah in d40ff40)
* Update link to code of conduct (#1855) (Nivedita Chopra in 8c373b6)
* var => const on remaining file (Nivedita Chopra in 022798c)
* Update prettier version to 1.13.6 (#1854) (Nivedita Chopra in e2c24cf)
* Remove Flow Strict Local from files with future sketchy-null errors after bug fix (George Zahariev in c5b785a)
* Remove non-leaf blocks in tree => raw conversion (Nivedita Chopra in f5b2acb)
* Update Docusaurus to 1.3.3 (#1797) (Yangshun Tay in d6a0ac0)
* modify docs overview url (#1802) (Shubham Tiwari in 9f86efb)
* v0.79.1 in www (Panagiotis Vekris in 93a90a9)
* Remove gating on draft_non_native_insertion_forces_selection (Sophie Alpert in 1a5b27a)
* 5/n Disable forward delete across blocks when nested blocks are enabled (Flarnie Marchan in 0600549)
* 3/n Splitting PR #1828: updates to the Rich Text Editor example (#1828) (mitermayer in e98e91e)
* 2/n splitting PR #1828: updating `removeRangeFromContentState` (#1828) (mitermayer in a399e43)
* 1/n splitting PR #1828: Initial forking of `RichTextEditorUtil` (#1828) (mitermayer in 328ddc6)
* Warn if `moveSelectionForward/Backward` called with non-collapsed selection (Flarnie Marchan in 99eca6b)
* codemod jasmine -> jest in html/shared (Aaron Abramov in 7f9299d)
* Remove logo from background circle (#1800) (Paul O’Shannessy in 47ae65a)
* var => const on test files (Nivedita Chopra in 0f58b64)
* Migrate to Docusaurus - Attempt #2 (Noam Elboim in 710919b)
* Remove old decorator fingerprint logic (Sophie Alpert in b2f6ed0)
* Use strict-local in as many files as possible (Miorel Palii in 3798902)
* Pass eventTimeStamp to `handleKeyPress` to allow tracking (Flarnie Marchan in 0ecf9a6)
* Pass synthetic event to `handleBeforeInput` callback (Flarnie Marchan in b86b5ce)
* `React.Element<any>` / `React.Element<*>` -> `React.Node` as much as possible (Miorel Palii in a1f4593)
* Change remaining vars to let/const (Nivedita Chopra in 8de2db9)
* Removed `@providesModule` tags and dependencies from draft-js (Rubén Norte in ee2e9c8)
* Add `@providesModule` back to draft-js modules (Ashley Watkins in 05b2b4c)
* Add common Flow type for decorator components (Ashley Watkins in 8000486)
* Add `@providesModule` back to draft-js modules (Rubén Norte in 4c4465f)
* Removed `@providesModule` tag from non-generated files in html/shared directories (1/1) (Rubén Norte in 293f262)
* 2/n Remove last vestiges of cWU (Flarnie Marchan in e954091)
* 1/n Move `blockSelect` flag out of cWU (Flarnie Marchan in 0f6199d)
* Upgrade to Flow v0.68.0 (Sam Goldman in a99f51e)
* Strict-ify files that can be strict-ified with no additional changes (Miorel Palii in 22f9c52)
* rename-unsafe-lifecycles (Brian Vaughn in 8b3e8c9)
* Refactor `convertFromHTMLtoContentBlocks` (Nicolas Champsavoir in 732b69d)
* Making gkx overwrittable (mitermayer in 7495adf)
* 2/n Do update `blockSelectEvents` flag, during render (Flarnie Marchan in e571268)
* 1/n remove GK on `flushSync` (Flarnie Marchan in 4241f43)
* Playground - Making sure blockMap should always visible by default (mitermayer in 7eb2a50)
* Move uglifyjs-webpack-plugin to devDependencies (Thibaud Colas in 4de1345)
* Making a more sane .gitignore (mitermayer in f4bc3a7)
* Examples cleanup (Ken Hibino in 67f3586)
* Ensure selection collapses if user tries to replace with matching text (Brian Ng in 084bdb6)
* Move `_latestEditorState` assignment back to commit phase (Sophie Alpert in 04c2b9c)
* Remove Node 6 from engines list in package.json (Thibaud Colas in 584d849)
* Update `_latestEditorState` in render too (Flarnie Marchan in 90a8f22)
* Widen logging and add stack trace for IE selection bug (Flarnie Marchan in a6317e6)
* Match block and inline examples for consistency. (cbeninati in e65a8e6)
* Bundle size stats + Misc changes (Alan Norbauer in 0a1f981)
* Remove `componentWillUpdate` under GK (Flarnie Marchan in 7885959)
* try disabling 'blockSelectEvents' flag (Flarnie Marchan in d144883)
* Update site footer from 2017 -> 2018 (Michael Chen in 558352c)
* Make the Flow type of `CompositeDraftDecorator`'s constructor more strict (Steven Luscher in a894030)
* Deprecated the coarse `onArrowUp` et al key handler props on `DraftEditor.react` to make it possible to produce editor commands from these keys (Steven Luscher in dc5ca7f)
* Wrap Draft handlers in `flushControlled` instead of `flushSync` (Andrew Clark in cda13cb)
* Update docs/APIReference-Editor.md (Sai Kishore Komanduri in 27a5f10)
* Bumping internal flow version (mitermayer in 342a51a)
* Switch from `DraftFeatureFlags` to gkx() (Sophie Alpert in 07eb9c4)
* Add `flushSync` to Draft.js for *only* GK folks (Flarnie Marchan in 26040e5)
### Fixed
* Fixed drag and drop `.length` error (#2117) (job in 2487e7d)
* Fix broken id anchor (#2095) (Sajad Torkamani in eddcc55)
* Typo corrected - Overview.md (#2089) (Jonathan Erlich in 87a812d)
* fix: set to nested list items to right depth (Kevin Li in 12c4480)
* fix(styles): avoid permanently accumulating attribute styles (Kevin Li in 7cfb055)
* Fixes runtime error when cutting empty selection at the end of the content (Claudio Procida in 23fc70f)
* Fixing major Android editing issues (#2035) (Fabio M. Costa in 634bd29)
* Fix broken link in Overview.md (#2062) (seojeee in e8e0bcf)
* Fix failing `DraftStringKey` test (#2064) (Claudio Procida in fe4e266)
* Fixes require order lint issues /2 (Claudio Procida in 76e121e)
* Fixes require order lint issues (Claudio Procida in e2c5357)
* Fix the issue of draft JS does not do copy and paste correctly with custom entities. (Tee Xie in d09ef3e)
* fix typo in README.md (#2055) (Tanner Eustice in 75a89ff)
* rename `*.test.js` to `*-test.js` to match naming convention (Aaron Abramov in dc58df8)
* Convert some of draftjs' `ReactDOM.findDOMNode` to refs (#2051) (Dennis Wilkins in 1fae34f)
* Correct warning condition (#2049) (Ben Gardner in ffd8f59)
* Fix npm run dev (#2030) (Fabio M. Costa in 3c01ef6)
* Specify correct type of `joinClasses` (George Zahariev in 7b9a7e1)
* Restores flow error suppression for fbjs@1.0.0 (#2014) (Claudio Procida in 6a26a82)
* Fix leading line feed conversion (Guillaume Aubert in 5081c87)
* Handles `<br>` tags in refactored HTML converter (Claudio Procida in fdf63aa)
* Typo fix in code comment (#1997) (Deniz Susman in e84e757)
* Fix bad destructuring when content block key has a `-` (#1995) (Jan Karlo Dela Cruz in c21a9f7)
* Fix typo in code comment for DraftEditor (#1991) (Deniz Susman in 7167210)
* Fixes lint warnings in `convertFromHTMLToContentBlocks2` tests (Claudio Procida in e942ee9)
* Update fbjs to 1.0.0 to fix ReDos Vulnerability (#1978) (Anthony Muscat in 9b2a366)
* Normalize copyright headers to BSD + patents grant and drop the year (#1964) (Claudio Procida in 642aa11)
* Fixes flow error (#1962) (Claudio Procida in fb7882b)
* Remove unused suppression comments from www as of v0.89 (Gabe Levi in 8dd6dda)
* Add correct type annotations to DraftEditor.react.js (Paco Estevez Garcia in 83edf02)
* Fix `$FlowFixMe` type not working for CI builds of draft-js (Paco Estevez Garcia in 81f92ee)
* Annotate exports codemod on html/shared (Paco Estevez Garcia in 7cb10f9)
* Revert D13097194: [codemod][types-first] Add type annotations to html/shared (Craig Phillips in 010fce7)
* Add type annotations to html/shared (Paco Estevez Garcia in 6f4102d)
* Fix all 'curly' violations (Paul O'Shannessy in ab199ef)
* Fix tex and universal examples crash because of different React versions (#1756) (#1931) (Thibaud Colas in 7dddded)
* Fix typo (#1913) (noelyoo in 1d3c77f)
* Fixes some drag-n-drop problems (#1599) (Denis Oblogin in 20a0f73)
* Bug/1668 (#1691) (Alexis H in 1d2d854)
* Fix SelectionState’s `hasEdgeWithin` (#1811) (Andrew Branch in 7666e95)
* Fix drop issue (#1725) (LaySent in 800d6b5)
* fixes #868 (#1878) (Julian Krispel in 6ba124c)
* Fix check for tree blocks (Nivedita Chopra in 690f7ef)
* Fix bug in merge blocks (Nivedita Chopra in 7daa87e)
* Fix raw to tree conversion (Nivedita Chopra in 8ac1922)
* Bug Fix - Remove deleted block from its parent's children (Nivedita Chopra in 02e0e00)
* Fix small typo (#1865) (Valentin Hervieu in 8bb9c6c)
* Fix paste handling for images with `role="presentation"` (Jainil Parekh in 6df3808)
* Minor fix in entities docs (#1534) (Alastair Hole in 9f0d115)
* Fixes incorrect docs, see #1497 (#1837) (Matt Greenfield in a18b6fe)
* Fixes warning for missing keys in example color controls (#1853) (Claudio Procida in 4a5ad07)
* Fix Lint errors for type imports (Nivedita Chopra in e6c693c)
* Fix Travis breakage caused due to unimported `idx` module (Nivedita Chopra in 3306ddf)
* Fix `DraftTreeAdapter` to respect the tree invariants (Nivedita Chopra in 39be488)
* Inline call to `gkx` to combat fatal in `ContentState` (Steven Luscher in a6c9ffd)
* Handle ReactDOM type errors (Ashley Watkins in 9130859)
* Fix tree invariants test (#1836) (Nivedita Chopra in 05208a8)
* Fix unlucky failures in character replacement (Sophie Alpert in ae25b8f)
* Regression test for bug with nested block and deleting (Flarnie Marchan in 2d7ad18)
* Tree Data - Fix for backspace at the start of a nested block (Nivedita Chopra in cf48f77)
* Tree Data - Don't update pointers if range is within the same block (Nivedita Chopra in f3d3490)
* Fix Draft input cursor jumping to the end (Dan Abramov in 37dadd3)
* Fix tests to be independent on the implementation of invariant (Matthew McKeen in 81cc54b)
* Re-apply order-requires linter on html/shared/ (Dave Alongi in 0bb8d76)
* Auto-fix `prefer-const` ESLint rule (3/n) (Miorel Palii in bf1a028)
* Auto-fix all auto-fixable eqeqeq problems (Miorel Palii in eea70f4)
* Fixing Docusaurus migration issues (Noam Elboim in 72ad814)
* Fix block tree before/after comparison (Sophie Alpert in fa88ee1)
* Fixed license, Flow and lint issues in draft-js (Rubén Norte in 3e9ff8e)
* Actually for real fix the flow type of decorator props (Flarnie Marchan in 7e1a107)
* Workaround for BlockNode variance issue caused by flow transform (#1621) (Bob Ippolito in 1d77500)
* Revert "rename-unsafe-lifecycles" (mitermayer in 6eec8f9)
* Fix typo (Aditya Bhardwaj in 6ef6c66)
* Website: Fixed code highlight (Marcelo Jorge Vieira in 04c667c)
* Fixing tex example (Guilherme Miranda in 900ef76)
* Fix typo (Thomas Broadley in 35b3605)
* Fixing master (mitermayer in 4c12ead)
* Fix Linux keyboard shortcuts (Thomas Nardone in f6fbf1c)
* fix typo in changelog (Flarnie Marchan in 93bc209)
### Meta
* Add issue triage guidelines to CONTRIBUTING.md (#1896) (Nivedita Chopra in 7df9eb9)
* Add meeting notes for 10/12 (#1901) (Nivedita Chopra in 9a96ab0)
* Add meeting notes from 9/7 (#1862) (Nivedita Chopra in b8ea228)
* Change oncall to draft_js (Nivedita Chopra in fbc8a0c)
* Update biweekly sync meeting notes from February 2018 (Flarnie Marchan in 1ef4044)
* Update weekly meeting notes from Oct. 2017 - Jan. 2018 (Flarnie Marchan in 7017825)
## 0.10.5 (January 19th, 2018)
### Added
* Add support for `ariaDescribedBy` prop, for better a11y. (Suraj Karnati in
[a6af3e15](https://github.com/facebook/draft-js/commit/a6af3e15120e74c8797c5670f5bb63cb45c49a32))
* Add support for `ariaLabelledBy` prop, for better a11y. ([@jackyho112](https://github.com/jackyho112)
in [#1519](https://github.com/facebook/draft-js/pull/1519))
### Changed
* Cause editor to break out of code block when user enters two blank lines. (Hanzhi Zhang
in [548fd5d1](https://github.com/facebook/draft-js/commit/548fd5d1b1c31b7b4c79cd70b101fae69d522b3f))
### Fixed
* Preserve list indentation when copying and pasting from one Draft.js editor
into another. ([@GordyD](https://github.com/GordyD) in [#1605](https://github.com/facebook/draft-js/pull/1605))
* Fix `cannot read property 'update' of undefined` error that was thrown when
typing same character into selection that starts with that character. ([@existentialism](https://github.com/existentialism) in
[#1512](https://github.com/facebook/draft-js/pull/1512))
* Fix `encodeRawBlocks` to handle non-contiguous entities. Entities should
always be contiguous, and cover one sequential range of characters. However,
in cases where entityState is corrupted to include non-contiguous entities,
`encodeRawBlocks` would improperly process the entities in that case. (Frank
Thompson in [0059dd46](https://github.com/facebook/draft-js/commit/0059dd46f4d23af7d9803316aa93d8deddb5e8ae))
* Updated CSS for DraftEditorPlaceholder to support multiline placeholder (Gaurav Vaish in
[c38b0285](https://github.com/facebook/draft-js/commit/c38b028513214416d66a3fdf191745dfde04ed2b)
* Fix issue where typing at the end of a link caused the link to continue. (Ian
Jones in
[d16833b3](https://github.com/facebook/draft-js/commit/d16833b3dae77ccf13e3af7f5e42c8131b0d1d2c))
* Fix regression of bug where clicking a link caused the focus to move but the
selection state was not cleared, leading to a 'node not found' error.
([@flarnie](https://github.com/flarnie)
in [55316176](https://github.com/facebook/draft-js/commit/553161761903bed7fad971d73e1fe04bb0ff360e))
* Loosen Flow type definition for DraftBlockType to allow user-defined custom
block types. ([@mitermayer](https://github.com/mitermayer)
in [#1480](https://github.com/facebook/draft-js/pull/1480))
## 0.10.4 (October 24th, 2017)
### Added
* Expose `onRightArrow` and `onLeftArrow` props to allow handling keyboard
events when right or left arrow is pressed.
([@eessex](https://github.com/eessex)
in [#1384](https://github.com/facebook/draft-js/pull/1384))
* Expose Draft.css as default CSS export in package.json for use by CSS
preprocessors. ([@darobin](https://github.com/darobin )
in [#566](https://github.com/facebook/draft-js/pull/566))
### Changed
* Change 'lookUpwardForInlineStyle' from O(n^2) to O(n), improving performance.
:) ([@Lemmih](https://github.com/Lemmih)
in [#1429](https://github.com/facebook/draft-js/pull/1429))
### Fixed
* Fix bug where editors inside draggable parent were broken for Safari.
([@mattkrick](https://github.com/mattkrick) in
[#1326](https://github.com/facebook/draft-js/pull/1326))
* Stop pulling in Enzyme as production dependency. D'oh.
([@flarnie](https://github.com/flarnie) in
[#1415](https://github.com/facebook/draft-js/pull/1415))
* Fix `TypeError: Cannot read property 'nodeType' of undefined` error where
`anchorNode` was `undefined`.
([@tleunen](https://github.com/tleunen) in
[#1407](https://github.com/facebook/draft-js/pull/1407))
* Fix error thrown when callback tries to `focus` on editor after it has been
unmounted. ([@mattkrick](https://github.com/mattkrick) in
[#1409](https://github.com/facebook/draft-js/pull/1409))
* Fix bug where selecting a single character then typing it doesn't replace it.
([@karanjthakkar](https://github.com/karanjthakkar) in
[#719](https://github.com/facebook/draft-js/pull/719))
* Clear the block type when backspacing at the start of the first block with
rich text utils. ([@jvaill](https://github.com/jvaill) in
[#748](https://github.com/facebook/draft-js/pull/748))
## 0.10.3 (September 28th, 2017)
### Added
* Allow React 16.\* as peer dependency. ([@nikgraf](https://github.com/nikgraf)
in [#1385](https://github.com/facebook/draft-js/pull/1385))
### Fixed
* Fixed bug where using a custom block type without overriding the default block
map threw an error. ([@southerncross](https://github.com/southerncross) in
[#1302](https://github.com/facebook/draft-js/pull/1302))
* Update dependency on `fbjs` to get fix for bug where `focus()` caused
unexpected scroll ([@flarnie](https://github.com/flarnie) in
[#1401](https://github.com/facebook/draft-js/pull/1401))
## 0.10.2
### Added
* Added support for `aria-controls` in draft.js ([@jessebeach](https://github.com/jessebeach) in [7f0cab28](https://github.com/facebook/draft-js/commit/7f0cab28386ec4bde8ec6289377bff9e53cd019b))
### Changed
* Change `aria-owns` to `aria-controls` in draft.js. ([@jessebeach](https://github.com/jessebeach) in [7f0cab28](https://github.com/facebook/draft-js/commit/7f0cab28386ec4bde8ec6289377bff9e53cd019b))
* Deprecates support of `ariaOwns` and `ariaOwneeID` props.
* Deprecate use of `ariaHasPopup` prop in draft.js. `ariaExpanded` should be used instead if an input is showing a dropdown with options.([@jessebeach](https://github.com/jessebeach) in [744e9b4e](https://github.com/facebook/draft-js/commit/744e9b4eb4810797a93c66591fea6f9cac533b4b))
* Pasting an `img` no longer inserts the `src` by default; now inserts image emoji if no decorator is used. ([@aadsm](https://github.com/aadsm) in [0b22d713](https://github.com/facebook/draft-js/commit/0b22d713d556ccc4820850099ad6231493b3f7aa) and [@flarnie](https://github.com/flarnie) in [1378](https://github.com/facebook/draft-js/pull/1378))
### Fixed
* Fix issue where selection state was not cleared on blur and refocus of the
editor. ([@sophiebits](https://github.com/sophiebits) in
[19b9b1c5](https://github.com/facebook/draft-js/commit/19b9b1c5007bcb3a4111ea31f8d9a8cda629a1ff))
* Fix issue where pasting code into code block defaulted to plain text, and
styles were dropped from pasted blocks in general.
([@bumbu](https://github.com/bumbu) in
[e8d10112](https://github.com/facebook/draft-js/commit/e8d101121fb9dd9203a46d899124a7be4b0b2936))
* Fix issue where Flow was not running with some 'import' statements ([@flarnie](https://github.com/flarnie) & [@yuku-t](https://github.com/yuku-t) in [#1263](https://github.com/facebook/draft-js/pull/1262))
* Fix bug where Draft threw when two keys were pressed at same time in React 16 async mode ([@sophiebits](https://github.com/sophiebits) in [1c6a49b8](https://github.com/facebook/draft-js/commit/1c6a49b8801183fe0c29458626c0b5dbe1238e59))
* Fix recent Chrome bug where tab causes error ([@sophiebits](https://github.com/sophiebits) in [5863399a](https://github.com/facebook/draft-js/commit/5863399a3a1bcbbe9b090249504a70496a7af7cc))
* Fix "Refs must have owner" error when multiple copies of React are used ([@mks11](https://github.com/mks11) in [#925](https://github.com/facebook/draft-js/pull/925))
* Fix issue where AT could treat 'return' as submit in Draft ([@jessebeach](https://github.com/jessebeach) in [#1295](https://github.com/facebook/draft-js/pull/1295))
* Don't allow `aria-expanded` to be true unless the aria role is combobox ([@jessebeach](https://github.com/jessebeach) in [3494d45d](https://github.com/facebook/draft-js/commit/3494d45d32b64d6e82e4b3e8fcade6a2b5c6bd46))
* Fix pesky "This Selection object doesn't have any Ranges" bug ([@sophiebits](https://github.com/sophiebits) in [96688e10](https://github.com/facebook/draft-js/commit/96688e10b22a778c76e03009da4b9f3d05eba5f7) and [036e3a84](https://github.com/facebook/draft-js/commit/036e3a848e3593c97f4c3011e1ddc045e128a7af))
* Fix bug where pasting `img` with large data URL source could crash editor ([@aadsm](https://github.com/aadsm) in [0b22d713](https://github.com/facebook/draft-js/commit/0b22d713d556ccc4820850099ad6231493b3f7aa))
## 0.10.1
### Added
* Support UMD in dist output format (#1090)
* Expose textDirectionality prop
* Expose props disabling auto-correct, auto-complete, auto-capitalize
* Add `editorKey` prop for SSR
* Pass `block` to `customStyleFn` callback
* Added `moveAtomicBlock` to `AtomicBlockUtils`
### Fixed
* Fix some cases of "Failed to execute 'setStart' on 'Range" bug (#1162)
* Fix Chrome text deletion bug (#1155)
* Pass fresh editorState to edit handlers (#1112 and #1113)
* Fix for text insertion bugs in Android 5.1
* Correctly delete immutable and segmented entity content when at the edge of a
selection
* Fix bug where all text except first letter was dropped in IE11
* Fix bug where starting new line incorrectly toggled inline style
* Fix 'getRangeClientRects' to work around [webkit selection bounding rect
bug](https://www.youtube.com/watch?v=TpNzVH5jlcU)
## 0.10.0 (Dec. 16, 2016)
### Added
* Add improved API for entity manipulation to contentState
* Add deprecation warnings to old Entity module API
* Add image support to convertFromHTML
* Add option of 'aliasedElements' in block render map
### Changed
* This version supports both the old and new Entity API; we
are deprecating the Entity module in favor of
using contentState. See [the migration guide.](https://draftjs.org/docs/v0-10-api-migration.html#content)
### Fixed
* Fix bug where block data was not removed when deleting atomic block
* Fix bug preventing pasting from clipboard
* Fix dead key deletion and deletion in 2-Set Korean
* Fix ContentState.createFromBlockArray to allow taking an empty array
* Improve typing in Korean on Windows
## 0.9.1 (September 16, 2016)
### Added
* `customStyleFn` for more control over inline style ranges
### Fixed
* Update Flow version
* Fix flow error in DraftEditorDragHandler
## 0.9.0 (September 13, 2016)
### Changed
* Return 'handled' or 'not-handled' from cancellable handlers callback
* Boolean return value is deprecated
* Expand and update documentation
### Fixed
* Fix selection of atomic block when it is the last block
* Preserve the depth of custom block types when converting to raw
* Stop mutating component children when creating blocks with wrapper elements
## 0.8.1 (August 12, 2016)
### Fixed
* Include `object-assign` in npm dependencies
* Include `babel-core` in npm dependencies of tex example
## 0.8.0 (August 8, 2016)
### Added
* `customStyleFn` for more control over inline style ranges
* Uses `internalClipboard` for Safari
* Metadata for `ContentBlock` objects
* `convertFromHTMLToContentBlocks`:
* Support for `mailto` protocol for links
* Support "unset" inline styles
* Run ESLint on examples
### Changed
* Removed redundant ESLint module in TeX example
* Update Travis CI config for readability, Node v4 requirements, and pruning/updating npm dependencies
* Use `immutable` ~3.7.4 to avoid Flow errors in updated versions
* Modify `getSelectionOffsetKeyForNode` to search for nested offset-annotated nodes
* Upgrade eslint to 3.0.1, use fbjs config
* Update to Flow 0.28
* Jest
* Update to 12.1.1
* Replaced `jest.fn().mockReturnValue(x)` with `jest.fn(() => x)`
* Remove extra spaces from the text decoration style
* No longer using `nullthrows` for `blockRenderMap`
* `convertFromHTMLToContentBlocks`:
* Improved variable names in `joinChunks`
* Additional whitelisted entities such as `className`, `rel`, `target`, `title`
### Fixed
* Fix bug where placeholder text was not being erased in Chrome
* Fix bug where double click link in Firefox broke selection
* Kill iOS tooltips
* removed unnecessary `undefined` checks on `DraftEditorLeaf`
* `convertFromHTMLToContentBlocks`:
* Preserve pasted block type on paste
* Strip XML carriage returns and zero-width spaces
* `getBlockMapSupportedTags()` will always return a valid array of tags
* Documentation fixes
## 0.7.0 (May 3, 2016)
### Added
* `blockRenderMap`: A map that allows configuration for the DOM elements and
wrapper components to render, keyed by block type
* Includes configurability of element-to-block-type paste processing
### Changed
* Update to Jest 11.0.2
### Fixed
* Change deletion behavior around `atomic` blocks to avoid DOM selection errors
* Properly apply entities across multiple blocks in
* Improve placeholder behavior for a11y
* Properly remove and modify entity ranges during spellcheck changes
* Match Chrome `<textarea>` behavior during <kbd>cmd</kbd>+<kbd>backspace</kbd>
command at visual line-start
## 0.6.0 (April 27, 2016)
### Added
* `ContentState.getFirstBlock()` convenience method
### Changed
* <kbd>return</kbd> key handling now goes through command flow to enable easier
custom `'split-block'` handling.
* `convertFromRaw` now returns a `ContentState` object instead of an
`Array<ContentBlock>`
## 0.5.0 (April 12, 2016)
### Fixed
* <kbd>option</kbd>+<kbd>spacebar</kbd> no longer incorrectly scrolls browser in Chrome OSX
* Cursor behavior when adding soft newlines
### Added
* `AtomicBlockUtils`, a utility module to simplify adding `atomic` blocks to
an `EditorState`
### Changed
* The `media` block type is now `atomic`, to better represent that this type
is not just intended for photos and videos
## 0.4.0 (April 6, 2016)
### Fixed
* Avoid clearing inline style override when setting block type or depth
### Added
* `editable` field for custom block component configuration
* Default key binding support for <kbd>Ctrl</kbd>+<kbd>M</kbd> (`split-block`)
### Changed
* Always wrap custom block components, based on block type
* Includes `data-editor`, `data-offset-key`, `data-block` in block props
* Replace `onPasteRawText` prop with `handlePastedText`
## 0.3.0 (March 22, 2016)
### Fixed
* Properly extract custom inline styles for `convertToRaw`
* Fix internal paste behavior to better handle copied custom blocks
### Added
* Export `getVisibleSelectionRect`
* Export `convertFromHTML`
* Export `DraftEditorBlock`
## 0.2.2 (March 9, 2016)
### Fixed
* Build before publish to get the warning suppression in place correctly
## 0.2.1 (March 9, 2016)
### Added
* React 15 RC as peer/dev dependency, provide `suppressContentEditableWarning`
## 0.2.0 (March 8, 2016)
### Added
* Move `white-space: pre-wrap` into inline style to resolve insertion issues
* `handleDrop` prop method for `Editor` to allow manual drop management
* `decoratedText` prop for decorator components
* `getVisibleSelectionRect`, to provide Rect for DOM selection
* Export `KeyBindingUtil` and `getDefaultKeyBinding`
### Fixed
* Triple-clicks followed by block type changes now only affect first block
* `DraftEditorLeaf` now re-renders correctly when its styles change
* Backspace behavior within empty code blocks
## 0.1.0 (February 22, 2016)
* Initial public release
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to make participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies within all project spaces, and it also applies when
an individual is representing the project or its community in public spaces.
Examples of representing a project or community include using an official
project e-mail address, posting via an official social media account, or acting
as an appointed representative at an online or offline event. Representation of
a project may be further defined and clarified by project maintainers.
This Code of Conduct also applies outside the project spaces when there is a
reasonable belief that an individual's behavior may have a negative impact on
the project or its community.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at <opensource-conduct@fb.com>. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Draft.js
We want to make contributing to this project as approachable and transparent as
possible.
## Code of Conduct
Facebook has adopted a Code of Conduct that we expect project
participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct)
so that you can understand what actions will and will not be tolerated.
## Our Development Process
We use GitHub to sync code to and from our internal repository. We'll use GitHub
to track issues and feature requests, as well as accept pull requests.
## Pull Requests
We actively welcome your pull requests.
1. Fork the repo and create your branch from `master`.
2. If you've added code that should be tested, add tests.
3. If you've changed APIs, update the documentation.
4. Ensure the test suite passes.
5. Make sure your code lints.
6. If you haven't already, complete the Contributor License Agreement ("CLA").
## Contributor License Agreement ("CLA")
In order to accept your pull request, we need you to submit a CLA. You only need
to do this once to work on any of Facebook's open source projects.
Complete your CLA here: <https://code.facebook.com/cla>
## Coding Style
* 2 spaces for indentation rather than tabs
* 80 character line length
* Run `npm run lint` to conform to our lint rules
## Issues
We use GitHub issues to track public bugs. Please ensure your description is
clear and has sufficient instructions to be able to reproduce the issue.
If possible please provide a minimal demo of the problem. You can use this
jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.
Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
disclosure of security bugs. In those cases, please go through the process
outlined on that page and do not file a public issue.
## Issue Triage
Here are some tags that we're using to better organize issues in this repo:
* `good first issue` - Good candidates for someone new to the project to contribute.
* `help wanted` - Issues that should be addressed and which we would welcome a
PR for but may need significant investigation or work
* `support` - Request for help with a concept or piece of code but this isn't an
issue with the project.
* `needs more info` - Missing repro steps or context for both project issues \&
support questions.
* `discussion` - Issues where folks are discussing various approaches \& ideas.
* `question` - Something that is a question specifically for the maintainers such
as [this issue about the license](https://github.com/facebook/draft-js/issues/1819).
* `documentation` - Relating to improving documentation for the project.
- Browser \& OS-specific tags for anything that is specific to a particular
environment (e.g. `chrome`, `firefox`, `macos`, `android` and so forth).
## Stability
Our philosophy regarding API changes is as follows:
* We will avoid changing APIs and core behaviors in general
* In order to avoid stagnation we will allow for API changes in cases where
there is no other way to achieve a high priority bug fix or improvement.
* When there is an API change:
* Changes will have a well documented reason and migration path
* When deprecating a pattern, these steps will be followed:
* We will test the change internally first at FB
* A version will be released that supports both, with deprecation warnings
* The following version will fully remove the deprecated pattern
## License
By contributing to Draft.js, you agree that your contributions will be licensed
under its MIT license.
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: LICENSE-examples
================================================
Copyright (c) 2013-present, Facebook, Inc. All rights reserved.
The examples provided by Facebook are for non-commercial testing and evaluation
purposes only. Facebook reserves all rights not expressly granted.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="http://draftjs.org/">
<img src="https://draftjs.org/img/draftjs-logo.svg" alt="draftjs-logo" width="8%" />
</a>
</p>
<h1 align="center">
Draft.js
</h1>
<p align="center">
<a href="https://travis-ci.org/facebook/draft-js">
<img src="https://img.shields.io/travis/facebook/draft-js/master.svg?style=flat" alt="Build Status" />
</a>
<a href="https://yarn.pm/draft-js">
<img src="https://img.shields.io/npm/v/draft-js.svg?style=flat" alt="npm version" />
</a>
</p>
<p align="center">
<img src="https://media.giphy.com/media/XHUjaxELpc11SiRSqN/giphy.gif" alt="Live Demo" />
</p>
--------------------
## Status
**THIS PROJECT IS CURRENTLY IN MAINTENANCE MODE. It will not receive any feature updates, only critical security bug patches. On 31st December 2022 the repo will be fully archived.**
For users looking for an open source alternative, Meta have been working on migrating to a new framework, called [Lexical](https://github.com/facebook/lexical). It's still experimental, and we're working on adding migration guides, but, we believe, it provides a more performant and accessible alternative.
--------------------
Draft.js is a JavaScript rich text editor framework, built for React and
backed by an immutable model.
- **Extensible and Customizable:** We provide the building blocks to enable
the creation of a broad variety of rich text composition experiences, from
basic text styles to embedded media.
- **Declarative Rich Text:** Draft.js fits seamlessly into
[React](http://facebook.github.io/react/) applications,
abstracting away the details of rendering, selection, and input behavior with a
familiar declarative API.
- **Immutable Editor State:** The Draft.js model is built
with [immutable-js](https://facebook.github.io/immutable-js/), offering
an API with functional state updates and aggressively leveraging data persistence
for scalable memory usage.
[Learn how to use Draft.js in your own project.](https://draftjs.org/docs/getting-started/)
Draft.js is used in production on Facebook, including status and
comment inputs, [Notes](https://www.facebook.com/notes/), and
[messenger.com](https://www.messenger.com).
## API Notice
Before getting started, please be aware that we recently changed the API of
Entity storage in Draft.
Previously, the old API was set to be removed in `v0.11.0`. Since, the plans have changed— `v0.11.0` still supports the old API and `v0.12.0` will remove it. Refer to [the docs](https://draftjs.org/docs/v0-10-api-migration) for more information and information on how to migrate.
## Getting Started
```
npm install --save draft-js react react-dom
or
yarn add draft-js react react-dom
```
Draft.js depends on React and React DOM which must also be installed.
### Using Draft.js
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
function MyEditor() {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
this.setEditor = (editor) => {
this.editor = editor;
};
this.focusEditor = () => {
if (this.editor) {
this.editor.focus();
}
};
}
componentDidMount() {
this.focusEditor();
}
render() {
return (
<div style={styles.editor} onClick={this.focusEditor}>
<Editor
ref={this.setEditor}
editorState={this.state.editorState}
onChange={this.onChange}
/>
</div>
);
}
}
const styles = {
editor: {
border: '1px solid gray',
minHeight: '6em'
}
};
ReactDOM.render(
<MyEditor />,
document.getElementById('container')
);
```
Since the release of React 16.8, you can use [Hooks](https://reactjs.org/docs/hooks-intro.html) as a way to work with `EditorState` without using a class.
```js
import React from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";
export default function MyEditor() {
const [editorState, setEditorState] = React.useState(() =>
EditorState.createEmpty()
);
const editor = React.useRef(null);
function focusEditor() {
editor.current.focus();
}
return (
<div
style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
onClick={focusEditor}
>
<Editor
ref={editor}
editorState={editorState}
onChange={setEditorState}
placeholder="Write something!"
/>
</div>
);
}
```
Note that the editor itself is only as tall as its contents. In order to give users a visual cue, we recommend setting a border and a minimum height via the `.DraftEditor-root` CSS selector, or using a wrapper div like in the above example.
Because Draft.js supports unicode, you must have the following meta tag in the `<head>` `</head>` block of your HTML file:
```html
<meta charset="utf-8" />
```
Further examples of how Draft.js can be used are provided in the `/examples` directory of this repo.
### Building Draft.js
Draft.js is built with [Yarn](https://classic.yarnpkg.com/en/) v1. Using other package managers mgiht work, but is not officially supported.
To clone and build, run:
```
git clone https://github.com/facebook/draft-js.git
cd draft-js
yarn install
yarn run build
```
### Examples
To run the examples in the `/examples` directory, first build Draft.js locally as described above. Then, open the example HTML files in your browser.
## Browser Support
|  <br /> IE / Edge |  <br /> Firefox |  <br /> Chrome |  <br /> Safari |  <br />iOS Safari |  <br/> Chrome for Android |
| --------- | --------- | --------- | --------- | --------- | --------- |
| IE11, Edge [1, 2]| last 2 versions| last 2 versions| last 2 versions| not fully supported [3] | not fully supported [3]
[1] May need a shim or a polyfill for some syntax used in Draft.js ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/#polyfills)).
[2] IME inputs have known issues in these browsers, especially Korean ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/#ime-and-internet-explorer)).
[3] There are known issues with mobile browsers, especially on Android ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/#mobile-not-yet-supported)).
## Resources and Ecosystem
Check out this curated list of articles and open-sourced projects/utilities: [Awesome Draft-JS](https://github.com/nikgraf/awesome-draft-js).
## Discussion and Support
Join our [Slack team](https://draftjs.herokuapp.com)!
## Contribute
We welcome pull requests. Learn how to
[contribute](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md).
## License
Draft.js is [MIT licensed](https://github.com/facebook/draft-js/blob/master/LICENSE).
Examples provided in this repository and in the documentation are separately
licensed.
================================================
FILE: docs/APIReference-APIMigration.md
================================================
---
id: v0-10-api-migration
title: v0.10 API Migration
---
The Draft.js v0.10 release includes a change to the API for managing
`DraftEntity` data; the global 'DraftEntity' module is being deprecated and
`DraftEntity` instances will be managed as part of `ContentState`. This means
that the methods which were previously accessed on `DraftEntity` are now moved
to the `ContentState` record.
The old API was set to be permanently removed in v0.11, but will now be removed in v0.12. Make sure to migrate over!
This API improvement unlocks the path for many benefits that will be available in v0.12:
- DraftEntity instances and storage will be immutable.
- DraftEntity will no longer be globally accessible.
- Any changes to entity data will trigger a re-render.
## Quick Overview
Here is a quick list of what has been changed and how to update your application:
### Creating an Entity
**Old Syntax**
```js
const entityKey = Entity.create(urlType, 'IMMUTABLE', {src: urlValue});
```
**New Syntax**
```js
const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
src: urlValue,
});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
```
### Getting an Entity
**Old Syntax**
```js
const entityInstance = Entity.get(entityKey);
// entityKey is a string key associated with that entity when it was created
```
**New Syntax**
```js
const entityInstance = contentState.getEntity(entityKey);
// entityKey is a string key associated with that entity when it was created
```
### Decorator strategy arguments change
**Old Syntax**
```js
const compositeDecorator = new CompositeDecorator([
{
strategy: (contentBlock, callback) =>
exampleFindTextRange(contentBlock, callback),
component: ExampleTokenComponent,
},
]);
```
**New Syntax**
```js
const compositeDecorator = new CompositeDecorator([
{
strategy: (contentBlock, callback, contentState) => (
contentBlock, callback, contentState
),
component: ExampleTokenComponent,
},
]);
```
Note that ExampleTokenComponent will receive contentState as a prop.
Why does the 'contentState' get passed into the decorator strategy now? Because we may need it if our strategy is to find certain entities in the contentBlock:
```js
const mutableEntityStrategy = function(contentBlock, callback, contentState) {
contentBlock.findEntityRanges(character => {
const entityKey = character.getEntity();
if (entityKey === null) {
return false;
}
// To look for certain types of entities,
// or entities with a certain mutability,
// you may need to get the entity from contentState.
// In this example we get only mutable entities.
return contentState.getEntity(entityKey).getMutability() === 'MUTABLE';
}, callback);
};
```
### Decorator Strategies that find Entities
**Old Syntax**
```js
function findLinkEntities(contentBlock, callback) {
contentBlock.findEntityRanges(character => {
const entityKey = character.getEntity();
return entityKey !== null && Entity.get(entityKey).getType() === 'LINK';
}, callback);
}
```
**New Syntax**
```js
function findLinkEntities(contentBlock, callback, contentState) {
contentBlock.findEntityRanges(character => {
const entityKey = character.getEntity();
return (
entityKey !== null &&
contentState.getEntity(entityKey).getType() === 'LINK'
);
}, callback);
}
```
## More Information
See the [updated examples](https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0).
================================================
FILE: docs/APIReference-AtomicBlockUtils.md
================================================
---
id: api-reference-atomic-block-utils
title: AtomicBlockUtils
---
The `AtomicBlockUtils` module is a static set of utility functions for atomic
block editing.
In each case, these methods accept `EditorState` objects with relevant
parameters and return `EditorState` objects.
## Static Methods
### `insertAtomicBlock()`
```js
insertAtomicBlock: function(
editorState: EditorState,
entityKey: string,
character: string
): EditorState
```
### `moveAtomicBlock()`
```js
moveAtomicBlock: function(
editorState: EditorState,
atomicBlock: ContentBlock,
targetRange: SelectionState,
insertionMode?: DraftInsertionType
): EditorState
```
================================================
FILE: docs/APIReference-CharacterMetadata.md
================================================
---
id: api-reference-character-metadata
title: CharacterMetadata
---
`CharacterMetadata` is an Immutable
[Record](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/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](/docs/api-reference-content-block#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()`
```js
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()`
```js
static applyStyle(
record: CharacterMetadata,
style: string
): CharacterMetadata
```
Apply an inline style to this `CharacterMetadata`.
### `removeStyle()`
```js
static removeStyle(
record: CharacterMetadata,
style: string
): CharacterMetadata
```
Remove an inline style from this `CharacterMetadata`.
### `applyEntity()`
```js
static applyEntity(
record: CharacterMetadata,
entityKey: ?string
): CharacterMetadata
```
Apply an entity key -- or provide `null` to remove an entity key -- on this
`CharacterMetadata`.
## Methods
### `getStyle()`
```js
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()`
```js
hasStyle(style: string): boolean
```
Returns whether this character has the specified style.
### `getEntity()`
```js
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.
================================================
FILE: docs/APIReference-CompositeDecorator.md
================================================
---
id: api-reference-composite-decorator
title: CompositeDecorator
---
## Advanced Topic Article
See the [advanced topic article on Decorators](/docs/advanced-topics-decorators#compositedecorator).
================================================
FILE: docs/APIReference-ContentBlock.md
================================================
---
id: api-reference-content-block
title: ContentBlock
---
`ContentBlock` is an Immutable
[Record](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/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. The available types are:
- unstyled
- paragraph
- header-one
- header-two
- header-three
- header-four
- header-five
- header-six
- unordered-list-item
- ordered-list-item
- blockquote
- code-block
- atomic
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.
When creating a new `ContentBlock` containing `text` and without `characterList`
it then will default to a `characterList` with empty `CharacterMetadata` for the
supplied text.
## 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="#getdata">
<pre>getData(): Map<any, any></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](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/Map)
> 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>
<li>
<a href="#data">
<pre>data: Map<any, any></pre>
</a>
</li>
</ul>
## Methods
### `getKey()`
```js
getKey(): string
```
Returns the string key for this `ContentBlock`. Block keys are alphanumeric string. It is recommended to use `generateRandomKey` to generate block keys.
### `getType()`
```js
getType(): DraftBlockType
```
Returns the type for this `ContentBlock`. Type values are largely analogous to
block-level HTML elements.
### `getText()`
```js
getText(): string
```
Returns the full plaintext for this `ContentBlock`. This value does not contain
any styling, decoration, or HTML information.
### `getCharacterList()`
```js
getCharacterList(): List<CharacterMetadata>
```
Returns an immutable `List` of `CharacterMetadata` objects, one for each character in the `ContentBlock`. (See [CharacterMetadata](/docs/api-reference-character-metadata) for details.)
This `List` contains all styling and entity information for the block.
### `getLength()`
```js
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()`
```js
getDepth(): number
```
Returns the depth value for this block, if any. This is currently used only for list items.
### `getInlineStyleAt()`
```js
getInlineStyleAt(offset: number): DraftInlineStyle
```
Returns the `DraftInlineStyle` value (an `OrderedSet<string>`) at a given offset within this `ContentBlock`.
### `getEntityAt()`
```js
getEntityAt(offset: number): ?string
```
Returns the entity key value (or `null` if none) at a given offset within this `ContentBlock`.
### `getData()`
```js
getData(): Map<any, any>
```
Returns block-level metadata.
### `findStyleRanges()`
```js
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()`
```js
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](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/Map)
> for the `ContentBlock` constructor or to set properties.
### `key`
See `getKey()`.
### `text`
See `getText()`.
### `type`
See `getType()`.
### `characterList`
See `getCharacterList()`.
### `depth`
See `getDepth()`.
### `data`
See `getData()`.
================================================
FILE: docs/APIReference-ContentState.md
================================================
---
id: api-reference-content-state
title: ContentState
---
`ContentState` is an Immutable
[Record](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/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="#getentitymap">
<pre>getEntityMap()</pre>
</a>
</li>
<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="#getfirstblock">
<pre>getFirstBlock()</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="#getlastcreatedentitykey">
<pre>getLastCreatedEntityKey()</pre>
</a>
</li>
<li>
<a href="#hastext">
<pre>hasText()</pre>
</a>
</li>
<li>
<a href="#createentity">
<pre>createEntity(...)</pre>
</a>
</li>
<li>
<a href="#getentity">
<pre>getEntity(...)</pre>
</a>
</li>
<li>
<a href="#mergeentitydata">
<pre>mergeEntityData(...)</pre>
</a>
</li>
<li>
<a href="#replaceentitydata">
<pre>replaceEntityData(...)</pre>
</a>
</li>
<li>
<a href="#addentity">
<pre>addEntity(...)</pre>
</a>
</li>
</ul>
_Properties_
> Use [Immutable Map API](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/Map) to
> set properties.
>
> **Example**
>
> ```js
> const editorState = EditorState.createEmpty();
> const contentState = editorState.getCurrentContent();
> const contentStateWithSelectionBefore = contentState.set(
> 'selectionBefore',
> SelectionState.createEmpty(contentState.getBlockForKey('1pu4d')),
> );
> ```
<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()`
```js
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()`
```js
static createFromBlockArray(
blocks: Array<ContentBlock>,
entityMap: ?OrderedMap
): 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
### `getEntityMap()`
```js
getEntityMap(): EntityMap
```
Returns an object store containing all `DraftEntity` records that have been
created. In upcoming v0.11.0 the map returned will be an Immutable ordered map
of `DraftEntity` records.
In most cases, you should be able to use the convenience methods below to target
specific `DraftEntity` records or obtain information about the state of the
content.
### `getBlockMap()`
```js
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()`
```js
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()`
```js
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()`
```js
getBlockForKey(key: string): ContentBlock
```
Returns the `ContentBlock` corresponding to the given block key.
#### Example
```js
var {editorState} = this.state;
var startKey = editorState.getSelection().getStartKey();
var selectedBlockType = editorState
.getCurrentContent()
.getBlockForKey(startKey)
.getType();
```
### `getKeyBefore()`
```js
getKeyBefore(key: string): ?string
```
Returns the key before the specified key in `blockMap`, or null if this is the first key.
### `getKeyAfter()`
```js
getKeyAfter(key: string): ?string
```
Returns the key after the specified key in `blockMap`, or null if this is the last key.
### `getBlockBefore()`
```js
getBlockBefore(key: string): ?ContentBlock
```
Returns the `ContentBlock` before the specified key in `blockMap`, or null if this is
the first key.
### `getBlockAfter()`
```js
getBlockAfter(key: string): ?ContentBlock
```
Returns the `ContentBlock` after the specified key in `blockMap`, or null if this is the last key.
### `getBlocksAsArray()`
```js
getBlocksAsArray(): Array<ContentBlock>
```
Returns the values of `blockMap` as an array.
You generally won't need to use this method, since `getBlockMap` provides an `OrderedMap` that you should use for iteration.
### `getFirstBlock()`
```js
getFirstBlock(): ContentBlock
```
Returns the first `ContentBlock`.
### `getLastBlock()`
```js
getLastBlock(): ContentBlock
```
Returns the last `ContentBlock`.
### `getPlainText()`
```js
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.
### `getLastCreatedEntityKey()`
```js
getLastCreatedEntityKey(): string
```
Returns the string key that can be used to reference the most recently created
`DraftEntity` record. 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.
### `hasText()`
```js
hasText(): boolean
```
Returns whether the contents contain any text at all.
### `createEntity()`
```js
createEntity(
type: DraftEntityType,
mutability: DraftEntityMutability,
data?: Object
): ContentState
```
Returns `ContentState` record updated to include the newly created `DraftEntity` record in it's `EntityMap`. Call `getLastCreatedEntityKey` to get the key of the newly created `DraftEntity` record.
### `getEntity()`
```js
getEntity(key: string): DraftEntityInstance
```
Returns the DraftEntityInstance for the specified key. Throws if no instance exists for that key.
### `mergeEntityData()`
```js
mergeEntityData(
key: string,
toMerge: {[key: string]: any}
): ContentState
```
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.
### `replaceEntityData()`
```js
replaceEntityData(
key: string,
newData: {[key: string]: any}
): ContentState
```
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.
### `addEntity()`
```js
addEntity(instance: DraftEntityInstance): ContentState
```
In most cases, you will use contentState.createEntity(). 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.
## Properties
> Use [Immutable Map API](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/Map) to
> set properties.
### `blockMap`
See `getBlockMap()`.
### `selectionBefore`
See `getSelectionBefore()`.
### `selectionAfter`
See `getSelectionAfter()`.
================================================
FILE: docs/APIReference-Data-Conversion.md
================================================
---
id: api-reference-data-conversion
title: Data Conversion
---
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()`
```js
convertFromRaw(rawState: RawDraftContentState): ContentState
```
Given a raw state, convert it to a `ContentState`. This is useful when
restoring contents to use within a Draft editor.
### `convertToRaw()`
```js
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.
### `convertFromHTML()`
```js
const sampleMarkup =
'<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
'<a href="http://www.facebook.com">Example link</a>';
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap,
);
this.state = {
editorState: EditorState.createWithContent(state),
};
```
Given an HTML fragment, convert it to an object with two keys; one holding the
array of `ContentBlock` objects, and the other holding a reference to the
entityMap. Construct content state from the array of block elements and the
entityMap, and then update the editor state with it. Full example available
[here](https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/convertFromHTML).
================================================
FILE: docs/APIReference-Editor.md
================================================
---
id: api-reference-editor
title: Editor Component
---
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](/docs/quickstart-api-basics) for an introduction.
### `editorState`
```js
editorState: EditorState;
```
The `EditorState` object to be rendered by the `Editor`.
### `onChange`
```js
onChange: (editorState: EditorState) => void
```
The `onChange` function to be executed by the `Editor` when edits and selection
changes occur.
## Presentation (Optional)
### `placeholder`
```js
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/draft-0-10-0/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`
```js
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.
### `textDirectionality`
```js
textDirectionality?: DraftTextDirectionality
```
Optionally set the overriding text directionality for this editor. The values include 'RTL' for right-to-left text, like Hebrew or Arabic, and 'LTR' for left-to-right text, like English or Spanish. This directionality will apply to the entire contents, regardless of default text direction for input text.
If this value is not set, text directionality will be based on the characters
within the editor, on a per-block basis.
### `blockRendererFn`
```js
blockRendererFn?: (block: ContentBlock) => ?Object
```
Optionally set a function to define custom block rendering. See [Advanced Topics: Block Components](/docs/advanced-topics-block-components) for details on usage.
### `blockRenderMap`
```js
blockRenderMap?: DraftBlockRenderMap
```
Provide a map of block rendering configurations. Each block type maps to element tag and an optional react element wrapper. This configuration is used for both rendering and paste processing. See
[Advanced Topics: Custom Block Rendering](/docs/advanced-topics-custom-block-render-map) for details on usage.
### `blockStyleFn`
```js
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](/docs/advanced-topics-block-styling) for details on usage.
### customStyleMap
```js
customStyleMap?: Object
```
Optionally define a map of inline styles to apply to spans of text with the specified style. See [Advanced Topics: Inline Styles](/docs/advanced-topics-inline-styles) for details on usage.
### `customStyleFn`
```js
customStyleFn?: (style: DraftInlineStyle, block: ContentBlock) => ?Object
```
Optionally define a function to transform inline styles to CSS objects that are applied to spans of text. See [Advanced Topics: Inline Styles](/docs/advanced-topics-inline-styles) for details on usage.
## Behavior (Optional)
### `autoCapitalize`
```js
autoCapitalize?: string
```
Set if auto capitalization is turned on and how it behaves. More about platform availability and usage can [be found on mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocapitalize).
### `autoComplete`
```js
autoComplete?: string
```
Set if auto complete is turned on and how it behaves. More about platform availability and usage can [be found on mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocomplete).
### `autoCorrect`
```js
autoCorrect?: string
```
Set if auto correct is turned on and how it behaves. More about platform availability and usage can [be found on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-autocorrect).
### `readOnly`
```js
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](/docs/advanced-topics-block-components) or if you only want to display content for a static use case.
Default is `false`.
### `spellCheck`
```js
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`
```js
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.
### `editorKey`
```js
editorKey?: string
```
You probably won't set `editorKey` on an `<Editor />` manually unless you're
rendering a Draft component serverside. If you _are_, you must set this prop
to avoid server/client mismatches.
If the key is not set, it is generated automatically when the component
renders and assigned as a prop of the Editor's `<DraftEditorContents />`
component.
If you _do_ set this prop, the key should be unique _per-editor_, as it is
used to determine if styles should be preserved when pasting text within an
editor.
## Cancelable Handlers (Optional)
These prop functions are provided to allow custom event handling for a small
set of useful events. By returning `'handled'` from your handler, you indicate that
the event is handled and the Draft core should do nothing more with it. By returning
`'not-handled'`, you defer to Draft to handle the event.
### `handleReturn`
```js
handleReturn?: (
e: SyntheticKeyboardEvent,
editorState: EditorState,
) => DraftHandleValue
```
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`
```js
handleKeyCommand?: (
command: string,
editorState: EditorState,
eventTimeStamp: number,
) => DraftHandleValue
```
Handle the named editor command. See
[Advanced Topics: Key Bindings](/docs/advanced-topics-key-bindings)
for details on usage.
### `handleBeforeInput`
```js
handleBeforeInput?: (
chars: string,
editorState: EditorState,
eventTimeStamp: number,
) => DraftHandleValue
```
Handle the characters to be inserted from a `beforeInput` event. Returning `'handled'`
causes the default behavior of the `beforeInput` event to be prevented (i.e. it is
the same as calling the `preventDefault` method on the event).
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.
### `handlePastedText`
```js
handlePastedText?: (
text: string,
html?: string,
editorState: EditorState,
) => DraftHandleValue
```
Handle text and html(for rich text) that has been pasted directly into the editor. Returning true will prevent the default paste behavior.
### `handlePastedFiles`
```js
handlePastedFiles?: (files: Array<Blob>) => DraftHandleValue
```
Handle files that have been pasted directly into the editor.
### `handleDroppedFiles`
```js
handleDroppedFiles?: (
selection: SelectionState,
files: Array<Blob>,
) => DraftHandleValue
```
Handle files that have been dropped into the editor.
### `handleDrop`
```js
handleDrop?: (
selection: SelectionState,
dataTransfer: Object,
isInternal: DraftDragType,
) => DraftHandleValue
```
Handle other drop operations.
## Key Handlers (Optional)
Draft lets you supply a custom `keyDown` handler that wraps or overrides its
default one.
### `keyBindingFn`
```js
keyBindingFn?: (e: SyntheticKeyboardEvent) => ?string
```
This prop function exposes `keyDown` events to a handler of your choosing. If an
event of interest happens, you can perform custom logic and/or return a string
corresponding to a `DraftEditorCommand` or a custom editor command of your
own creation. Example: At Facebook, this is used to provide keyboard interaction
for the mentions autocomplete menu that appears when typing a friend's name.
You can find a more detailed explanation of this
[here](/docs/advanced-topics-key-bindings).
## Mouse events
### `onFocus`
```js
onFocus?: (e: SyntheticFocusEvent) => void
```
### `onBlur`
```js
onBlur?: (e: SyntheticFocusEvent) => void
```
## Methods
### `focus`
```js
focus(): void
```
Force focus back onto the editor node.
### `blur`
```js
blur(): void
```
Remove focus from the editor node.
================================================
FILE: docs/APIReference-EditorChangeType.md
================================================
---
id: api-reference-editor-change-type
title: EditorChangeType
---
[EditorChangeType](https://github.com/facebook/draft-js/blob/master/src/model/immutable/EditorChangeType.js)
is an enum that lists the possible set of change operations that can be handled
the Draft model. It is represented as a Flow type, as a union of strings.
It is passed as a parameter to `EditorState.push`, and denotes the type of
change operation that is being performed by transitioning to the new
`ContentState`.
Behind the scenes, this value is used to determine appropriate undo/redo
handling, spellcheck behavior, and more. Therefore, while it is possible to
provide an arbitrary string value as the `changeType` parameter here, you should
avoid doing so.
We highly recommend that you install [Flow](http://flowtype.org) to perform
static typechecking on your project. Flow will enforce the use of an appropriate
`EditorChangeType` value.
## Values
### `adjust-depth`
The `depth` value of one or more `ContentBlock` objects is being changed.
### `apply-entity`
An entity is being applied (or removed via `null`) to one or more characters.
### `backspace-character`
A single character is being backward-removed.
### `change-block-data`
The `data` value of one or more `ContentBlock` objects is being changed.
### `change-block-type`
The `type` value of one or more `ContentBlock` objects is being changed.
### `change-inline-style`
An inline style is being applied or removed for one or more characters.
### `move-block`
A block is being moved within the [BlockMap](https://github.com/facebook/draft-js/blob/master/src/model/immutable/BlockMap.js).
### `delete-character`
A single character is being forward-removed.
### `insert-characters`
One or more characters is being inserted at a selection state.
### `insert-fragment`
A "fragment" of content (i.e. a
[BlockMap](https://github.com/facebook/draft-js/blob/master/src/model/immutable/BlockMap.js))
is being inserted at a selection state.
### `redo`
A redo operation is being performed. Since redo behavior is handled by the
Draft core, it is unlikely that you will need to use this explicitly.
### `remove-range`
Multiple characters or blocks are being removed.
### `spellcheck-change`
A spellcheck or autocorrect change is being performed. This is used to inform
the core editor whether to try to allow native undo behavior.
### `split-block`
A single `ContentBlock` is being split into two, for instance when the user
presses return.
### `undo`
An undo operation is being performed. Since undo behavior is handled by the
Draft core, it is unlikely that you will need to use this explicitly.
================================================
FILE: docs/APIReference-EditorState.md
================================================
---
id: api-reference-editor-state
title: EditorState
---
`EditorState` is the top-level state object for the editor.
It is an Immutable
[Record](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/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>
<li>
<a href="#moveselectiontoend">
<pre>static moveSelectionToEnd(editorState): EditorState</pre>
</a>
</li>
<li>
<a href="#movefocustoend">
<pre>static moveFocusToEnd(editorState): EditorState</pre>
</a>
</li>
<li>
<a href="#setinlinestyleoverride">
<pre>static setInlineStyleOverride(editorState, inlineStyleOverride): EditorState</pre>
</a>
</li>
<li>
<a href="#set">
<pre>static set(editorState, EditorStateRecordType): EditorState</pre>
</a>
</li>
</ul>
_Properties_
> Note
>
> Use the static `EditorState` methods to set properties, rather than using
> the Immutable API directly. This means using `EditorState.set` to pass
> new options to an EditorState instance.
>
> **Example**
>
> ```js
> const editorState = EditorState.createEmpty();
> const editorStateWithoutUndo = EditorState.set(editorState, {
> allowUndo: false,
> });
> ```
<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`
```js
getCurrentContent(): ContentState
```
Returns the current contents of the editor.
### `getSelection`
```js
getSelection(): SelectionState
```
Returns the current cursor/selection state of the editor.
### `getCurrentInlineStyle`
```js
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`
```js
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`
```js
static createEmpty(decorator?: DraftDecoratorType): EditorState
```
Returns a new `EditorState` object with an empty `ContentState` and default
configuration.
### `createWithContent`
```js
static createWithContent(
contentState: ContentState,
decorator?: DraftDecoratorType
): EditorState
```
Returns a new `EditorState` object based on the `ContentState` and decorator
provided.
### `create`
```js
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`
```js
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.
All content changes must be applied to the EditorState with this method.
_To be renamed._
### `undo`
```js
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`
```js
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`
```js
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`
```js
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.
### `moveSelectionToEnd`
```js
static moveSelectionToEnd(editorState: EditorState): EditorState
```
Returns a new `EditorState` object with the selection at the end.
Moves selection to the end of the editor without forcing focus.
### `moveFocusToEnd`
```js
static moveFocusToEnd(editorState: EditorState): EditorState
```
Returns a new `EditorState` object with selection at the end and forces focus.
This is useful in scenarios where we want to programmatically focus the input
and it makes sense to allow the user to continue working seamlessly.
### `setInlineStyleOverride`
```js
static setInlineStyleOverride(editorState: EditorState, inlineStyleOverride: DraftInlineStyle): EditorState
```
Returns a new `EditorState` object with the specified `DraftInlineStyle` applied
as the set of inline styles to be applied to the next inserted characters.
### `set`
```js
static set(editorState: EditorState, options: EditorStateRecordType): EditorState
```
Returns a new `EditorState` object with new options passed in. The method is
inherited from the Immutable `record` API.
## 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`
```js
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`
```js
currentContent: ContentState;
getCurrentContent();
```
The currently rendered `ContentState`. See [getCurrentContent()](#getcurrentcontent).
### `decorator`
```js
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`
```js
directionMap: BlockMap;
getDirectionMap();
```
A map of each block and its text direction, as determined by UnicodeBidiService.
You should not manage this manually.
### `forceSelection`
```js
forceSelection: boolean;
mustForceSelection();
```
Whether to force the current `SelectionState` to be rendered.
You should not set this property manually -- see
[`forceSelection()`](#forceselection).
### `inCompositionMode`
```js
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`
```js
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`
```js
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`
```js
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`
```js
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`
```js
selection: SelectionState;
getSelection();
```
The currently rendered `SelectionState`. See [acceptSelection()](#acceptselection)
and [forceSelection()](#forceselection).
You should not manage this property manually.
### `treeMap`
```js
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`
```js
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 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).
================================================
FILE: docs/APIReference-Entity.md
================================================
---
id: api-reference-entity
title: Entity
---
`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](/docs/advanced-topics-entities)
for more detail on how entities may be used.
Please note that the API for entity storage and management has changed recently;
for details on updating your application
[see our v0.10 API Migration Guide](/docs/v0-10-api-migration#content).
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 small 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` _(Deprecated in favour of [`contentState.createEntity`](/docs/api-reference-content-state#createentity))_
```js
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` _(Deprecated in favour of [`contentState.addEntity`](/docs/api-reference-content-state#addentity))_
```js
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` _(Deprecated in favour of [`contentState.getEntity`](/docs/api-reference-content-state#getentity))_
```js
get(key: string): DraftEntityInstance
```
Returns the `DraftEntityInstance` for the specified key. Throws if no instance
exists for that key.
### `mergeData` _(Deprecated in favour of [`contentState.mergeEntityData`](/docs/api-reference-content-state#mergeentitydata))_
```js
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` _(Deprecated in favour of [`contentState.replaceEntityData`](/docs/api-reference-content-state#replaceentitydata))_
```js
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`.
================================================
FILE: docs/APIReference-KeyBindingUtil.md
================================================
---
id: api-reference-key-binding-util
title: KeyBindingUtil
---
The `KeyBindingUtil` module is a static set of utility functions for
defining key bindings.
## Static Methods
### `isCtrlKeyCommand()`
```js
isCtrlKeyCommand: function(
e: SyntheticKeyboardEvent
): boolean
```
Check whether the `ctrlKey` modifier is _not_ being used in conjunction with
the `altKey` modifier. If they are combined, the result is an `altGraph`
key modifier, which is not handled by this set of key bindings.
### `isOptionKeyCommand()`
```js
isOptionKeyCommand: function(
e: SyntheticKeyboardEvent
): boolean
```
### `usesMacOSHeuristics()`
```js
usesMacOSHeuristics: function(): boolean
```
Check whether heuristics that only apply to macOS are used internally, for
example when determining the key combination used as command modifier.
### `hasCommandModifier()`
```js
hasCommandModifier: function(
e: SyntheticKeyboardEvent
): boolean
```
================================================
FILE: docs/APIReference-Modifier.md
================================================
---
id: api-reference-modifier
title: Modifier
---
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="#setblockdata">
<pre>setBlockData(...): ContentState</pre>
</a>
</li>
<li>
<a href="#mergeblockdata">
<pre>mergeBlockData(...): ContentState</pre>
</a>
</li>
<li>
<a href="#applyentity">
<pre>applyEntity(...): ContentState</pre>
</a>
</li>
</ul>
## Static Methods
### `replaceText()`
```js
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()`
```js
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 only for convenience, since text
edits are so often insertions rather than replacements.
### `moveText()`
```js
moveText(
contentState: ContentState,
removalRange: SelectionState,
targetRange: SelectionState
): ContentState
```
Moves the "removal" range to the "target" range, replacing the target text.
### `replaceWithFragment()`
```js
replaceWithFragment(
contentState: ContentState,
targetRange: SelectionState,
fragment: BlockMap
): ContentState
```
A "fragment" is a section of a block map, effectively only 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()`
```js
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()`
```js
splitBlock(
contentState: ContentState,
selectionState: SelectionState
): ContentState
```
Split the selected block into two blocks. This should only be used if the
selection is collapsed.
### `applyInlineStyle()`
```js
applyInlineStyle(
contentState: ContentState,
selectionState: SelectionState,
inlineStyle: string
): ContentState
```
Apply the specified inline style to the entire selected range.
### `removeInlineStyle()`
```js
removeInlineStyle(
contentState: ContentState,
selectionState: SelectionState,
inlineStyle: string
): ContentState
```
Remove the specified inline style from the entire selected range.
### `setBlockType()`
```js
setBlockType(
contentState: ContentState,
selectionState: SelectionState,
blockType: DraftBlockType
): ContentState
```
Set the block type for all selected blocks.
### `setBlockData()`
```js
setBlockData(
contentState: ContentState,
selectionState: SelectionState,
blockData: Map<any, any>
): ContentState
```
Set the block data for all selected blocks.
### `mergeBlockData()`
```js
mergeBlockData(
contentState: ContentState,
selectionState: SelectionState,
blockData: Map<any, any>
): ContentState
```
Update block data for all selected blocks.
### `applyEntity()`
```js
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`.
================================================
FILE: docs/APIReference-RichUtils.md
================================================
---
id: api-reference-rich-utils
title: RichUtils
---
The `RichUtils` module is a static set of utility functions for rich text
editing.
In each case, these methods accept `EditorState` objects with relevant
parameters and return `EditorState` objects.
## Static Methods
### `currentBlockContainsLink()`
```js
currentBlockContainsLink(
editorState: EditorState
): boolean
```
### `getCurrentBlockType()`
```js
getCurrentBlockType(
editorState: EditorState
): string
```
### `handleKeyCommand()`
```js
handleKeyCommand(
editorState: EditorState,
command: string
): ?EditorState
```
### `insertSoftNewline()`
```js
insertSoftNewline(
editorState: EditorState
): EditorState
```
### `onBackspace()`
```js
onBackspace(
editorState: EditorState
): EditorState?
```
### `onDelete()`
```js
onDelete(
editorState: EditorState
): EditorState?
```
### `onTab()`
```js
onTab(
event: SyntheticEvent,
editorState: EditorState,
maxDepth: integer
): EditorState
```
### `toggleBlockType()`
```js
toggleBlockType(
editorState: EditorState,
blockType: string
): EditorState
```
### `toggleCode()`
```js
toggleCode(
editorState: EditorState
): EditorState
```
### `toggleInlineStyle()`
```js
toggleInlineStyle(
editorState: EditorState,
inlineStyle: string
): EditorState
```
Toggle the specified inline style for the selection. If the
user's selection is collapsed, apply or remove the style for the
internal state. If it is not collapsed, apply the change directly
to the document state.
### `toggleLink()`
```js
toggleLink(
editorState: EditorState,
targetSelection: SelectionState,
entityKey: string
): EditorState
```
### `tryToRemoveBlockStyle()`
```js
tryToRemoveBlockStyle(
editorState: EditorState
): ContentState?
```
================================================
FILE: docs/APIReference-SelectionState.md
================================================
---
id: api-reference-selection-state
title: SelectionState
---
`SelectionState` is an Immutable
[Record](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/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:
```js
var selectionState = editorState.getSelection();
var anchorKey = selectionState.getAnchorKey();
var currentContent = editorState.getCurrentContent();
var currentContentBlock = currentContent.getBlockForKey(anchorKey);
var start = selectionState.getStartOffset();
var end = selectionState.getEndOffset();
var selectedText = currentContentBlock.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](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/Map) to
> set properties.
>
> **Example**
>
> ```js
> const selectionState = SelectionState.createEmpty();
> const selectionStateWithNewFocusOffset = selection.set('focusOffset', 1);
> ```
<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()`
```js
createEmpty(blockKey: string): SelectionState
```
Create a `SelectionState` object at the zero offset of the provided block key
and `hasFocus` set to false.
## Methods
### `getStartKey()`
```js
getStartKey(): string
```
Returns the key of the block containing the start position of the selection range.
### `getStartOffset()`
```js
getStartOffset(): number
```
Returns the block-level character offset of the start position of the selection range.
### `getEndKey()`
```js
getEndKey(): string
```
Returns the key of the block containing the end position of the selection range.
### `getEndOffset()`
```js
getEndOffset(): number
```
Returns the block-level character offset of the end position of the selection range.
### `getAnchorKey()`
```js
getAnchorKey(): string
```
Returns the key of the block containing the anchor position of the selection range.
### `getAnchorOffset()`
```js
getAnchorOffset(): number
```
Returns the block-level character offset of the anchor position of the selection range.
### `getFocusKey()`
```js
getFocusKey(): string
```
Returns the key of the block containing the focus position of the selection range.
### `getFocusOffset()`
```js
getFocusOffset(): number
```
Returns the block-level character offset of the focus position of the selection range.
### `getIsBackward()`
```js
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()`
```js
getHasFocus(): boolean
```
Returns whether the editor has focus.
### `isCollapsed()`
```js
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()`
```js
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()`
```js
serialize(): string
```
Returns a serialized version of the `SelectionState`. Useful for debugging.
## Properties
> Use [Immutable Map API](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/Map) to
> set properties.
```js
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.
================================================
FILE: docs/Advanced-Topics-Block-Components.md
================================================
---
id: advanced-topics-block-components
title: Custom Block Components
---
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/draft-0-10-0/tex)
in the Draft repository provides a live example of custom block rendering, with
TeX syntax translated on the fly into editable embedded formula rendering via the
[KaTeX library](https://khan.github.io/KaTeX/).
A [media example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/media) is also
available, which showcases custom block rendering of audio, image, and video.
By using a custom block renderer, it is possible to introduce complex rich
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 `'atomic'`
using a custom `MediaComponent`.
```js
function myBlockRenderer(contentBlock) {
const type = contentBlock.getType();
if (type === 'atomic') {
return {
component: MediaComponent,
editable: false,
props: {
foo: 'bar',
},
};
}
}
// Then...
import {Editor} from 'draft-js';
class EditorWithMedia extends React.Component {
...
render() {
return <Editor ... blockRendererFn={myBlockRenderer} />;
}
}
```
If no custom renderer object is returned by the `blockRendererFn` function,
`Editor` will render the default `EditorBlock` 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 via the `props.blockProps` sub property object. In addition,
the optional `editable` property determines whether the custom component is
`contentEditable`.
It is strongly recommended that you use `editable: false` if your custom
component will not contain text.
If your component contains text as provided by your `ContentState`, your custom
component should compose an `EditorBlock` component. This will allow the
Draft framework to properly maintain cursor behavior within your contents.
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 `'atomic'` block during `EditorState` management,
then retrieve the metadata for that key in your custom component `render()`
code.
```js
class MediaComponent extends React.Component {
render() {
const {block, contentState} = this.props;
const {foo} = this.props.blockProps;
const data = contentState.getEntity(block.getEntityAt(0)).getData();
// Return a <figure> or some other content using this data.
}
}
```
The `ContentBlock` object and the `ContentState` record are 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 specific 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.
================================================
FILE: docs/Advanced-Topics-Block-Styling.md
================================================
---
id: advanced-topics-block-styling
title: Block Styling
---
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 an `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.
```js
function myBlockStyleFn(contentBlock) {
const type = contentBlock.getType();
if (type === 'blockquote') {
return 'superFancyBlockquote';
}
}
// Then...
import {Editor} from 'draft-js';
class EditorWithFancyBlockquotes extends React.Component {
render() {
return <Editor ... blockStyleFn={myBlockStyleFn} />;
}
}
```
Then, in your own CSS:
```css
.superFancyBlockquote {
color: #999;
font-family: 'Hoefler Text', Georgia, serif;
font-style: italic;
text-align: center;
}
```
================================================
FILE: docs/Advanced-Topics-Custom-Block-Render.md
================================================
---
id: advanced-topics-custom-block-render-map
title: Custom Block Rendering
---
This article discusses how to customize Draft default block rendering.
The block rendering is used to define supported block types and their respective
renderers, as well as converting pasted content to known Draft block types.
When pasting content, or when calling
[convertFromHTML](/docs/api-reference-data-conversion#convertfromhtml),
Draft will convert pasted content to the respective block rendering type
by matching the Draft block render map with the matched tag.
## Draft default block render map
| HTML element | Draft block type |
| --------------- | ----------------------------------------- |
| `<h1/>` | header-one |
| `<h2/>` | header-two |
| `<h3/>` | header-three |
| `<h4/>` | header-four |
| `<h5/>` | header-five |
| `<h6/>` | header-six |
| `<blockquote/>` | blockquote |
| `<pre/>` | code-block |
| `<figure/>` | atomic |
| `<li/>` | unordered-list-item,ordered-list-item\*\* |
| `<div/>` | unstyled\*\*\* |
\*\* - Block type will be based on the parent `<ul/>` or `<ol/>`
\*\*\* - Any block that is not recognized by the block rendering mapping will be treated as unstyled
## Configuring block render map
Draft's default block render map can be overwritten by passing an
[Immutable Map](https://web.archive.org/web/20150623131347/http://facebook.github.io:80/immutable-js/docs/#/Map) to
the editor blockRender props.
_example of overwriting default block render map:_
```js
// The example below deliberately only allows
// 'heading-two' as the only valid block type and
// updates the unstyled element to also become a h2.
const blockRenderMap = Immutable.Map({
'header-two': {
element: 'h2'
},
'unstyled': {
element: 'h2'
}
});
class RichEditor extends React.Component {
render() {
return (
<Editor
...
blockRenderMap={blockRenderMap}
/>
);
}
}
```
There are cases where instead of overwriting the defaults, we only want to add new block types.
This can be done by using the DefaultDraftBlockRenderMap reference to create a new blockRenderMap
_example of extending default block render map:_
```js
const blockRenderMap = Immutable.Map({
'section': {
element: 'section'
}
});
// Include 'paragraph' as a valid block and updated the unstyled element but
// keep support for other draft default block types
const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);
class RichEditor extends React.Component {
render() {
return (
<Editor
...
blockRenderMap={extendedBlockRenderMap}
/>
);
}
}
```
When Draft parses pasted HTML, it maps from HTML elements back into
Draft block types. If you want to specify other HTML elements that map to a
particular block type, you can add the array `aliasedElements` to the block config.
_example of unstyled block type alias usage:_
```js
'unstyled': {
element: 'div',
aliasedElements: ['p'],
}
```
## Custom block wrappers
By default, the html element is used to wrap block types. However, a react component
can also be provided to the _blockRenderMap_ to wrap the EditorBlock.
During pasting, or when calling
[convertFromHTML](/docs/api-reference-data-conversion#convertfromhtml),
the html will be scanned for matching tag elements. A wrapper will be used when there is a definition for
it on the _blockRenderMap_ to wrap that particular block type. For example:
Draft uses wrappers to wrap `<li/>` inside either `<ol/>` or `<ul/>`, but wrappers can also be used
to wrap any other custom block type.
_example of extending default block render map to use a react component for a custom block:_
```js
class MyCustomBlock extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='MyCustomBlock'>
{/* here, this.props.children contains a <section> container, as that was the matching element */}
{this.props.children}
</div>
);
}
}
const blockRenderMap = Immutable.Map({
'MyCustomBlock': {
// element is used during paste or html conversion to auto match your component;
// it is also retained as part of this.props.children and not stripped out
element: 'section',
wrapper: <MyCustomBlock />,
}
});
// keep support for other draft default block types and add our myCustomBlock type
const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);
class RichEditor extends React.Component {
...
render() {
return (
<Editor
...
blockRenderMap={extendedBlockRenderMap}
/>
);
}
}
```
================================================
FILE: docs/Advanced-Topics-Decorators.md
================================================
---
id: advanced-topics-decorators
title: Decorators
---
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/draft-0-10-0/tweet)
offers a live example of decorators in action.
## CompositeDecorator
The decorator concept is based on scanning the contents of a given
[ContentBlock](/docs/api-reference-content-block)
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:
```js
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.
```js
// 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, contentState) {
findWithRegex(HANDLE_REGEX, contentBlock, callback);
}
function hashtagStrategy(contentBlock, callback, contentState) {
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 plain `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 basic
stateless components:
```js
const HandleSpan = props => {
return (
<span {...props} style={styles.handle}>
{props.children}
</span>
);
};
const HashtagSpan = props => {
return (
<span {...props} style={styles.hashtag}>
{props.children}
</span>
);
};
```
The Decorator Component will receive various pieces of metadata in `props`,
including a copy of the `contentState`, the `entityKey` if there is one, and the
`blockKey`. For a full list of props supplied to a Decorator Component see the
[DraftDecoratorComponentProps type](https://github.com/facebook/draft-js/blob/master/src/model/decorators/DraftDecorator.js).
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/draft-0-10-0/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.
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:
```js
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.
================================================
FILE: docs/Advanced-Topics-EditorState-Race-Conditions.md
================================================
---
id: advanced-topics-editorstate-race-conditions
title: EditorState Race Conditions
---
Draft `Editor` is a _controlled input_ component (you can read about this in detail in the [API Basics](/docs/quickstart-api-basics) section), meaning that changes made to the `Editor` state are propagated upwards through `onChange` and it's up to the app to feed it back to the `Editor` component.
This cycle usually looks like:
```js
...
this.onChange = function(editorState) {
this.setState({editorState: editorState});
}
...
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
placeholder="Enter some text..."
/>
```
Different browser events can trigger the `Editor` to create a new state and call `onChange`. For instance, when the user pastes text into it, Draft parses the new content and creates the necessary data structure to represent it.
This cycle works great, however, it is an asynchronous operation because of the `setState` call. This introduces a delay between setting the state and rendering the `Editor` with the new state. During this time period other JS code can be executed.
Non-atomic operations like this can potentially introduce race conditions.
Here's an example: Suppose you want to remove all the text styles that come from the paste. This can be implemented by listening to the onPaste event and removing all styles from the `EditorState`:
```js
this.onPaste = function() {
this.setState({
editorState: removeEditorStyles(this.state.editorState),
});
};
```
However, this won't work as expected. You now have two event handlers that set a new `EditorState` in the exact same browser event. Since the event handlers will run one after the other only the last `setState` will prevail. Here's how it looks like in the JS timeline:
As you can see, since `setState` is an asynchronous operation, the second `setState` will override whatever it was set on the first one making the `Editor` lose all the contents from the pasted text.
You can observe and explore the race condition in [this running example](https://jsfiddle.net/qecccw3r/). The example also has logging to highlight the JS timeline so make sure to open the developer tools.
As a rule of thumb avoid having different event handlers for the same event that manipulate the `EditorState`. Using setTimeout to run `setState` might also land you in the same situation.
Anytime you feel you're “losing state” make sure you're not overriding it before the `Editor` re-rendering.
## Best Practices
Now that you understand the problem, what can you do to avoid it? In general be mindful of where you're getting the `EditorState` from. If you're using a local one (stored in `this.state`) then there's the potential for it to not be up to date.
To minimize this problem Draft offers the latest `EditorState` instance in most of its callback functions. In your code you should use the provided `EditorState` instead of your local one to make sure you're basing your changes on the latest one.
Here's a list of supported callbacks on the `Editor`:
- `handleReturn(event, editorState)`
- `handleKeyCommand(command, editorState)`
- `handleBeforeInput(chars, editorState)`
- `handlePastedText(text, html, editorState)`
The paste example can then be re-written in a race condition free way by using these methods:
```js
this.handlePastedText = (text, styles, editorState) => {
this.setState({
editorState: removeEditorStyles(text, editorState),
});
};
//...
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
handlePastedText={this.handlePastedText}
placeholder="Enter some text..."
/>;
```
With `handlePastedText` you can implement the paste behavior by yourself.
NOTE: If you need to have this behavior in your Editor, you can achieve it by setting the `Editor`'s `stripPastedStyles` property to `true`.
================================================
FILE: docs/Advanced-Topics-Entities.md
================================================
---
id: advanced-topics-entities
title: Entities
---
This article discusses the Entity system, which Draft uses for annotating
ranges of text with metadata. Entities introduce levels of richness beyond
styled text. 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/draft-0-10-0/link)
and
[entity demo](https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/entity)
provide live code examples to help clarify how entities can be used, as well
as their built-in behavior.
The [Entity API Reference](/docs/api-reference-entity) provides
details on the static methods to be used when creating, retrieving, or updating
entity objects.
For information about recent changes to the Entity API, and examples of how to
update your application,
[see our v0.10 API Migration Guide](/docs/v0-10-api-migration#content).
## 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 the ContentState record. The entities are referenced
by key within `ContentState` and React components used to decorate annotated
ranges. (We are currently deprecating a previous API for accessing Entities; see
issue
[#839](https://github.com/facebook/draft-js/issues/839).)
Using [decorators](/docs/advanced-topics-decorators) or
[custom block components](/docs/advanced-topics-block-components), you can
add rich rendering to your editor based on entity metadata.
## Creating and Retrieving Entities
Entities should be created using `contentState.createEntity`, which accepts the
three properties above as arguments. This method returns a `ContentState` record updated to include the newly created entity, then you can call `contentState.getLastCreatedEntityKey` to get the key of the newly created entity record.
This key is the value that should be used when applying entities to your
content. For instance, the `Modifier` module contains an `applyEntity` method:
```js
const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
url: 'http://www.zombo.com',
});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const contentStateWithLink = Modifier.applyEntity(
contentStateWithEntity,
selectionState,
entityKey,
);
const newEditorState = EditorState.set(editorState, {
currentContent: contentStateWithLink,
});
```
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.
```js
const contentState = editorState.getCurrentContent();
const blockWithLinkAtBeginning = contentState.getBlockForKey('...');
const linkKey = blockWithLinkAtBeginning.getEntityAt(0);
const linkInstance = contentState.getEntity(linkKey);
const {url} = 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 (e.g. Barack Obama).
Then, either add a character within the mentioned text, or try to delete a character.
Note that when adding or deleting characters, the 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/draft-0-10-0/link)
provides a working example of entity creation and decoration in use.
================================================
FILE: docs/Advanced-Topics-Inline-Styles.md
================================================
---
id: advanced-topics-inline-styles
title: Complex Inline Styles
---
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/tree/master/examples/draft-0-10-0/rich) and
[Colorful Editor](http://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/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](/docs/api-reference-character-metadata)
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:
```js
[
[], // 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](/docs/api-reference-modifier) API.
The end result will accommodate the overlap by including `'ITALIC'` in the
relevant `OrderedSet` objects as well.
```js
[
[], // 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 plain 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/tree/master/examples/draft-0-10-0/color)
for a live example.)
For example, you may want to add a `'STRIKETHROUGH'` style. To do so, define a
custom style map:
```js
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.
================================================
FILE: docs/Advanced-Topics-Issues-and-Pitfalls.md
================================================
---
id: advanced-topics-issues-and-pitfalls
title: Issues and Pitfalls
---
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.
### Missing `Draft.css`
The Draft framework includes a handful of CSS resources intended for use with
the editor, available in a single file via the build, `Draft.css`.
This CSS should be included when rendering the editor, as these styles set defaults
for text alignment, spacing, and other important features. Without it, you may
encounter issues with block positioning, alignment, and cursor behavior.
If you choose to write your own CSS independent of `Draft.css`, you will most
likely need to replicate much of the default styling.
## Known Issues
### 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.
### Polyfills
Some of Draft's code and that of its dependencies make use of ES2015 language
features. Syntax features like `class` are compiled away via Babel when Draft is
built, but it does not include polyfills for APIs now included in many modern
browsers (for instance: `String.prototype.startsWith`). We expect your browser
supports these APIs natively or with the assistance of a polyfill. One such
polyfill is [es6-shim](https://github.com/es-shims/es6-shim), which we use in
many examples but you are free to use
[babel-polyfill](https://babeljs.io/docs/usage/polyfill/) if that's more
your scene.
When using either polyfill/shim, you should include it as early as possible in
your application's entrypoint (at the very minimum, before you import Draft).
For instance, using
[create-react-app](https://github.com/facebookincubator/create-react-app) and
targeting IE11, `src/index.js` is probably a good spot to import your polyfill:
**`src/index.js`**
```js
import 'babel-polyfill';
// or
import 'es6-shim';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
```
### Mobile Not Yet Supported
Draft.js is moving towards full mobile support, but does not officially support
mobile browsers at this point. There are some known issues affecting Android and
iOS - see issues tagged
['android'](https://github.com/facebook/draft-js/labels/android) or
['ios'](https://github.com/facebook/draft-js/labels/ios) for the current status.
================================================
FILE: docs/Advanced-Topics-Key-Bindings.md
================================================
---
id: advanced-topics-key-bindings
title: Key Bindings
---
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 `'handled'`, the command is considered
handled. If it returns `'not-handled'`, 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:
```js
import {getDefaultKeyBinding, KeyBindingUtil} from 'draft-js';
const {hasCommandModifier} = KeyBindingUtil;
function myKeyBindingFn(e: SyntheticKeyboardEvent): string | null {
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:
```js
import {Editor} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.handleKeyCommand = this.handleKeyCommand.bind(this);
}
// ...
handleKeyCommand(command: string): DraftHandleValue {
if (command === 'myeditor-save') {
// Perform a request to save your contents, set
// a new `editorState`, etc.
return 'handled';
}
return 'not-handled';
}
render() {
return (
<Editor
editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={myKeyBindingFn}
...
/>
);
}
}
```
The `'myeditor-save'` command can be used for our custom behavior, and returning
`'handled'` instructs the editor that the command has been handled and no more work
is required.
By returning `'not-handled'` in all other cases, default commands are able to fall
through to default handler behavior.
================================================
FILE: docs/Advanced-Topics-Managing-Focus.md
================================================
---
id: advanced-topics-managing-focus
title: Managing Focus
---
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/draft-0-10-0/plaintext),
for instance, uses this pattern.
================================================
FILE: docs/Advanced-Topics-Nested-Lists.md
================================================
---
id: advanced-topics-nested-lists
title: Nested Lists
---
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.
## Implementation
The [`RichUtils`](/docs/api-reference-rich-utils) 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'`.
================================================
FILE: docs/Advanced-Topics-Text-Direction.md
================================================
---
id: advanced-topics-text-direction
title: Text Direction
---
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 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
small 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.
================================================
FILE: docs/Overview.md
================================================
---
id: getting-started
title: Overview
onPageNav: 'none'
---
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 allows you to build any type of rich text input, whether you're only looking to support a few inline text styles or building a complex text editor for composing long-form articles.
Draft.js was introduced at [React.js Conf](https://conf2016.reactjs.org/schedule#rich-text-editing-with-react) in February 2016.
<iframe width="100%" height="365" src="https://www.youtube.com/embed/feUYwoLhE_4" frameBorder="0" allowFullScreen></iframe>
## Installation
Draft.js is distributed via npm. It depends on React and React DOM which must also be installed.
```sh
npm install draft-js react react-dom
# or alternately
yarn add draft-js react react-dom
```
Draft.js uses some modern ECMAScript features which are not available to IE11 and not part of create-react-app's default babel config. If you're running into problems out-of-the-box try installing a shim or polyfill alongside Draft.
```sh
npm install draft-js react react-dom babel-polyfill
# or
yarn add draft-js react react-dom es6-shim
```
Learn more about [using a shim with Draft](/docs/advanced-topics-issues-and-pitfalls#polyfills).
## API Changes Notice
Before getting started, please be aware that we recently changed the API of
Entity storage in Draft. Draft.js version `v0.10.0` and `v0.11.0` support both the old
and new API. Following that up will be `v0.12.0` which will remove the old API.
## Usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = editorState => this.setState({editorState});
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
ReactDOM.render(<MyEditor />, document.getElementById('container'));
```
Since the release of React 16.8, you can use [Hooks](https://reactjs.org/docs/hooks-intro.html) as a way to work with `EditorState` without using a class.
```js
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';
function MyEditor() {
const [editorState, setEditorState] = React.useState(
() => EditorState.createEmpty(),
);
return <Editor editorState={editorState} onChange={setEditorState} />;
}
ReactDOM.render(<MyEditor />, document.getElementById('container'));
```
Because Draft.js supports unicode, you must have the following meta tag in the `<head></head>` block of your HTML file:
```html
<meta charset="utf-8" />
```
`Draft.css` should be included when rendering the editor. Learn more about [why](/docs/advanced-topics-issues-and-pitfalls#missing-draftcss).
Next, let's go into the basics of the API and learn what else you can do with Draft.js.
================================================
FILE: docs/QuickStart-API-Basics.md
================================================
---
id: quickstart-api-basics
title: API Basics
---
This document provides an overview of the basics of the `Draft` API. A
[working example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/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.
```js
const MyInput = () => {
const [value, setValue] = useState('');
const onChange = (evt) => setValue(evt.target.value);
return <input value={value} onChange={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](/docs/api-reference-editor-state) 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.
```js
import {Editor, EditorState} from 'draft-js';
const MyInput = () => {
const [editorState, setEditorState] = useState(() =>
EditorState.createEmpty(),
);
return <Editor editorState={editorState} onChange={setEditorState} />;
};
```
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.
================================================
FILE: docs/QuickStart-Rich-Styling.md
================================================
---
id: quickstart-rich-styling
title: Rich Styling
---
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/draft-0-10-0/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`](/docs/api-reference-rich-utils) module provides a number of useful functions to help manipulate state.
Similarly, the [`Modifier`](/docs/api-reference-modifier) 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.
```js
import {Editor, EditorState, RichUtils} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = editorState => this.setState({editorState});
this.handleKeyCommand = this.handleKeyCommand.bind(this);
}
handleKeyCommand(command, editorState) {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return 'handled';
}
return 'not-handled';
}
render() {
return (
<Editor
editorState={this.state.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. The
> `editorState` argument represents the latest editor state as it might be
> changed internally by draft when handling the key. Use this instance of the
> editor state inside `handleKeyCommand`. See
> [Advanced Topics - Key Binding](/docs/advanced-topics-key-bindings) for more
> on this, as well as details on why the function returns `handled` or `not-handled`.
## 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.
```js
class MyEditor extends React.Component {
// ...
_onBoldClick() {
this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
}
render() {
return (
<div>
<button onClick={this._onBoldClick.bind(this)}>Bold</button>
<Editor
editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
/>
</div>
);
}
}
```
================================================
FILE: examples/draft-0-10-0/color/color.html
================================================
<!--
Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
This file provided by Facebook is for non-commercial testing and evaluation
purposes only. Facebook reserves all rights not expressly granted.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draft • Color</title>
<link rel="stylesheet" href="../../../dist/Draft.css" />
</head>
<body>
<div style="font-family: Georgia, serif; font-size: 15px; padding: 20px; width: 600px; line-height: 24px;">
This example demonstrates how custom inline styles can be used to create
editors with an unl
gitextract_nwrbpblp/
├── .alexignore
├── .alexrc.js
├── .dependabot/
│ └── config.yml
├── .eslintignore
├── .eslintrc.js
├── .github/
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ └── ci.yml
├── .gitignore
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── LICENSE-examples
├── README.md
├── docs/
│ ├── APIReference-APIMigration.md
│ ├── APIReference-AtomicBlockUtils.md
│ ├── APIReference-CharacterMetadata.md
│ ├── APIReference-CompositeDecorator.md
│ ├── APIReference-ContentBlock.md
│ ├── APIReference-ContentState.md
│ ├── APIReference-Data-Conversion.md
│ ├── APIReference-Editor.md
│ ├── APIReference-EditorChangeType.md
│ ├── APIReference-EditorState.md
│ ├── APIReference-Entity.md
│ ├── APIReference-KeyBindingUtil.md
│ ├── APIReference-Modifier.md
│ ├── APIReference-RichUtils.md
│ ├── APIReference-SelectionState.md
│ ├── Advanced-Topics-Block-Components.md
│ ├── Advanced-Topics-Block-Styling.md
│ ├── Advanced-Topics-Custom-Block-Render.md
│ ├── Advanced-Topics-Decorators.md
│ ├── Advanced-Topics-EditorState-Race-Conditions.md
│ ├── Advanced-Topics-Entities.md
│ ├── Advanced-Topics-Inline-Styles.md
│ ├── Advanced-Topics-Issues-and-Pitfalls.md
│ ├── Advanced-Topics-Key-Bindings.md
│ ├── Advanced-Topics-Managing-Focus.md
│ ├── Advanced-Topics-Nested-Lists.md
│ ├── Advanced-Topics-Text-Direction.md
│ ├── Overview.md
│ ├── QuickStart-API-Basics.md
│ └── QuickStart-Rich-Styling.md
├── examples/
│ └── draft-0-10-0/
│ ├── color/
│ │ └── color.html
│ ├── convertFromHTML/
│ │ └── convert.html
│ ├── entity/
│ │ └── entity.html
│ ├── iframe/
│ │ └── iframe.html
│ ├── link/
│ │ └── link.html
│ ├── media/
│ │ └── media.html
│ ├── plaintext/
│ │ └── plaintext.html
│ ├── playground/
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ └── manifest.json
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── DraftJsPlaygroundContainer.css
│ │ ├── DraftJsRichEditorExample.css
│ │ ├── DraftJsRichEditorExample.js
│ │ ├── GkManager.js
│ │ ├── index.css
│ │ ├── index.js
│ │ └── registerServiceWorker.js
│ ├── rich/
│ │ ├── RichEditor.css
│ │ └── rich.html
│ ├── tex/
│ │ ├── .babelrc
│ │ ├── js/
│ │ │ ├── app.js
│ │ │ ├── components/
│ │ │ │ ├── TeXBlock.js
│ │ │ │ └── TeXEditorExample.js
│ │ │ ├── data/
│ │ │ │ └── content.js
│ │ │ └── modifiers/
│ │ │ ├── insertTeXBlock.js
│ │ │ └── removeTeXBlock.js
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── TeXEditor.css
│ │ │ └── index.html
│ │ ├── readme.md
│ │ └── server.js
│ ├── tweet/
│ │ └── tweet.html
│ └── universal/
│ ├── .babelrc
│ ├── client.js
│ ├── editor.js
│ ├── index.js
│ ├── package.json
│ └── readme.md
├── gulpfile.js
├── meta/
│ ├── meeting-notes/
│ │ ├── 2017-02-10-weekly-meeting.md
│ │ ├── 2017-02-17-weekly-meeting.md
│ │ ├── 2017-02-24-weekly-meeting.md
│ │ ├── 2017-03-10-weekly-meeting.md
│ │ ├── 2017-03-17-weekly-meeting.md
│ │ ├── 2017-03-24-weekly-meeting.md
│ │ ├── 2017-03-31-weekly-meeting.md
│ │ ├── 2017-04-14-weekly-meeting.md
│ │ ├── 2017-04-21-weekly-meeting.md
│ │ ├── 2017-04-28-weekly-meeting.md
│ │ ├── 2017-05-05-weekly-meeting.md
│ │ ├── 2017-05-19-weekly-meeting.md
│ │ ├── 2017-05-26-weekly-meeting.md
│ │ ├── 2017-06-02-weekly-meeting.md
│ │ ├── 2017-07-07-weekly-meeting.md
│ │ ├── 2017-07-14-weekly-meeting.md
│ │ ├── 2017-07-21-weekly-meeting.md
│ │ ├── 2017-07-28-weekly-meeting.md
│ │ ├── 2017-08-04-weekly-meeting.md
│ │ ├── 2017-08-11-weekly-meeting.md
│ │ ├── 2017-08-18-weekly-meeting.md
│ │ ├── 2017-09-01-weekly-meeting.md
│ │ ├── 2017-09-08-weekly-meeting.md
│ │ ├── 2017-09-15-weekly-meeting.md
│ │ ├── 2017-09-22-weekly-meeting.md
│ │ ├── 2017-09-29-weekly-meeting.md
│ │ ├── 2017-10-06-weekly-meeting.md
│ │ ├── 2017-10-13-weekly-meeting.md
│ │ ├── 2017-10-20-weekly-meeting.md
│ │ ├── 2017-11-03-weekly-meeting.md
│ │ ├── 2017-11-17-weekly-meeting.md
│ │ ├── 2017-12-01-weekly-meeting.md
│ │ ├── 2017-12-08-weekly-meeting.md
│ │ ├── 2017-12-15-weekly-meeting.md
│ │ ├── 2018-01-05-weekly-meeting.md
│ │ ├── 2018-01-19-weekly-meeting.md
│ │ ├── 2018-01-26-weekly-meeting.md
│ │ ├── 2018-02-08-weekly-meeting.md
│ │ ├── 2018-02-23-weekly-meeting.md
│ │ ├── 2018-09-07-meeting.md
│ │ └── 2018-10-12-meeting.md
│ └── roadmaps/
│ └── 2017-h1.md
├── package.json
├── prettier.config.js
├── scripts/
│ ├── jest/
│ │ ├── hasteImpl.js
│ │ ├── preprocessor.js
│ │ └── shims.js
│ └── module-map.js
├── src/
│ ├── .flowconfig
│ ├── Draft.js
│ ├── NonASCIIStringSnapshotSerializer.js
│ ├── __mocks__/
│ │ └── generateRandomKey.js
│ ├── component/
│ │ ├── base/
│ │ │ ├── DraftEditor.css
│ │ │ ├── DraftEditor.react.js
│ │ │ ├── DraftEditorFlushControlled.js
│ │ │ ├── DraftEditorPlaceholder.css
│ │ │ ├── DraftEditorPlaceholder.react.js
│ │ │ ├── DraftEditorProps.js
│ │ │ ├── DraftScrollPosition.js
│ │ │ ├── DraftTextAlignment.js
│ │ │ └── __tests__/
│ │ │ ├── DraftEditor.react-test.js
│ │ │ └── __snapshots__/
│ │ │ └── DraftEditor.react-test.js.snap
│ │ ├── contents/
│ │ │ ├── DraftEditorBlock.react.js
│ │ │ ├── DraftEditorContents-core.react.js
│ │ │ ├── DraftEditorLeaf.react.js
│ │ │ ├── DraftEditorTextNode.react.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftEditorBlock.react-test.js
│ │ │ │ ├── DraftEditorContents.react-test.js
│ │ │ │ ├── DraftEditorTextNode-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ └── DraftEditorBlock.react-test.js.snap
│ │ │ └── exploration/
│ │ │ ├── DraftEditorBlockNode.react.js
│ │ │ ├── DraftEditorContentsExperimental.react.js
│ │ │ ├── DraftEditorDecoratedLeaves.react.js
│ │ │ ├── DraftEditorNode.react.js
│ │ │ └── __tests__/
│ │ │ ├── DraftEditorBlockNode.react-test.js
│ │ │ ├── DraftEditorContentsExperimental.react-test.js
│ │ │ └── __snapshots__/
│ │ │ ├── DraftEditorBlockNode.react-test.js.snap
│ │ │ └── DraftEditorContentsExperimental.react-test.js.snap
│ │ ├── handlers/
│ │ │ ├── DraftEditorModes.js
│ │ │ ├── composition/
│ │ │ │ ├── DOMObserver.js
│ │ │ │ ├── DraftEditorCompositionHandler.js
│ │ │ │ └── __tests__/
│ │ │ │ └── DraftEditorCompostionHandler-test.js
│ │ │ ├── drag/
│ │ │ │ └── DraftEditorDragHandler.js
│ │ │ └── edit/
│ │ │ ├── DraftEditorEditHandler.js
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── editOnBeforeInput-test.js.snap
│ │ │ │ ├── editOnBeforeInput-test.js
│ │ │ │ ├── editOnBlur-test.js
│ │ │ │ └── editOnInput-test.js
│ │ │ ├── commands/
│ │ │ │ ├── SecondaryClipboard.js
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── SecondaryClipboard-test.js
│ │ │ │ │ ├── __snapshots__/
│ │ │ │ │ │ ├── SecondaryClipboard-test.js.snap
│ │ │ │ │ │ └── removeTextWithStrategy-test.js.snap
│ │ │ │ │ └── removeTextWithStrategy-test.js
│ │ │ │ ├── keyCommandBackspaceToStartOfLine.js
│ │ │ │ ├── keyCommandBackspaceWord.js
│ │ │ │ ├── keyCommandDeleteWord.js
│ │ │ │ ├── keyCommandInsertNewline.js
│ │ │ │ ├── keyCommandMoveSelectionToEndOfBlock.js
│ │ │ │ ├── keyCommandMoveSelectionToStartOfBlock.js
│ │ │ │ ├── keyCommandPlainBackspace.js
│ │ │ │ ├── keyCommandPlainDelete.js
│ │ │ │ ├── keyCommandTransposeCharacters.js
│ │ │ │ ├── keyCommandUndo.js
│ │ │ │ ├── moveSelectionBackward.js
│ │ │ │ ├── moveSelectionForward.js
│ │ │ │ └── removeTextWithStrategy.js
│ │ │ ├── editOnBeforeInput.js
│ │ │ ├── editOnBlur.js
│ │ │ ├── editOnCompositionStart.js
│ │ │ ├── editOnCopy.js
│ │ │ ├── editOnCut.js
│ │ │ ├── editOnDragOver.js
│ │ │ ├── editOnDragStart.js
│ │ │ ├── editOnFocus.js
│ │ │ ├── editOnInput.js
│ │ │ ├── editOnKeyDown.js
│ │ │ ├── editOnPaste.js
│ │ │ ├── editOnSelect.js
│ │ │ └── getFragmentFromSelection.js
│ │ ├── selection/
│ │ │ ├── DOMDerivedSelection.js
│ │ │ ├── DraftOffsetKey.js
│ │ │ ├── DraftOffsetKeyPath.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftOffsetKey-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── DraftOffsetKey-test.js.snap
│ │ │ │ │ ├── getDraftEditorSelection-test.js.snap
│ │ │ │ │ └── setDraftEditorSelection-test.js.snap
│ │ │ │ ├── getDraftEditorSelection-test.js
│ │ │ │ └── setDraftEditorSelection-test.js
│ │ │ ├── expandRangeToStartOfLine.js
│ │ │ ├── findAncestorOffsetKey.js
│ │ │ ├── getDraftEditorSelection.js
│ │ │ ├── getDraftEditorSelectionWithNodes.js
│ │ │ ├── getRangeBoundingClientRect.js
│ │ │ ├── getRangeClientRects.js
│ │ │ ├── getSampleSelectionMocksForTesting.js
│ │ │ ├── getSampleSelectionMocksForTestingNestedBlocks.js
│ │ │ ├── getSelectionOffsetKeyForNode.js
│ │ │ ├── getUpdatedSelectionState.js
│ │ │ ├── getVisibleSelectionRect.js
│ │ │ ├── isSelectionAtLeafStart.js
│ │ │ └── setDraftEditorSelection.js
│ │ └── utils/
│ │ ├── DraftDOMTypes.js
│ │ ├── DraftStyleDefault.css
│ │ ├── KeyBindingUtil.js
│ │ ├── _DraftTestHelper.js
│ │ ├── __tests__/
│ │ │ └── isHTMLBRElement-test.js
│ │ ├── draftKeyUtils.js
│ │ ├── exploration/
│ │ │ ├── DraftTreeAdapter.js
│ │ │ ├── DraftTreeInvariants.js
│ │ │ └── __tests__/
│ │ │ ├── DraftTreeAdapter-test.js
│ │ │ ├── DraftTreeInvariants-test.js
│ │ │ └── __snapshots__/
│ │ │ └── DraftTreeAdapter-test.js.snap
│ │ ├── getContentEditableContainer.js
│ │ ├── getCorrectDocumentFromNode.js
│ │ ├── getDefaultKeyBinding.js
│ │ ├── getTextContentFromFiles.js
│ │ ├── getWindowForNode.js
│ │ ├── isElement.js
│ │ ├── isEventHandled.js
│ │ ├── isHTMLAnchorElement.js
│ │ ├── isHTMLBRElement.js
│ │ ├── isHTMLElement.js
│ │ ├── isHTMLImageElement.js
│ │ ├── isInstanceOfNode.js
│ │ ├── isSoftNewlineEvent.js
│ │ └── splitTextIntoTextBlocks.js
│ ├── flowlib/
│ │ └── window.js
│ ├── model/
│ │ ├── constants/
│ │ │ ├── DraftBlockType.js
│ │ │ ├── DraftDragType.js
│ │ │ ├── DraftEditorCommand.js
│ │ │ ├── DraftHandleValue.js
│ │ │ ├── DraftInsertionType.js
│ │ │ └── DraftRemovalDirection.js
│ │ ├── decorators/
│ │ │ ├── CompositeDraftDecorator.js
│ │ │ ├── DraftDecorator.js
│ │ │ ├── DraftDecoratorType.js
│ │ │ └── __tests__/
│ │ │ ├── CompositeDraftDecorator-test.js
│ │ │ └── __snapshots__/
│ │ │ └── CompositeDraftDecorator-test.js.snap
│ │ ├── encoding/
│ │ │ ├── DraftStringKey.js
│ │ │ ├── EntityRange.js
│ │ │ ├── InlineStyleRange.js
│ │ │ ├── RawDraftContentBlock.js
│ │ │ ├── RawDraftContentState.js
│ │ │ ├── RawDraftEntity.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftStringKey-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── convertFromDraftStateToRaw-test.js.snap
│ │ │ │ │ ├── convertFromHTMLToContentBlocks-test.js.snap
│ │ │ │ │ ├── convertFromRawToDraftState-test.js.snap
│ │ │ │ │ ├── decodeEntityRanges-test.js.snap
│ │ │ │ │ ├── decodeInlineStyleRanges-test.js.snap
│ │ │ │ │ ├── encodeEntityRanges-test.js.snap
│ │ │ │ │ ├── encodeInlineStyleRanges-test.js.snap
│ │ │ │ │ └── sanitizeDraftText-test.js.snap
│ │ │ │ ├── convertFromDraftStateToRaw-test.js
│ │ │ │ ├── convertFromHTMLToContentBlocks-test.js
│ │ │ │ ├── convertFromRawToDraftState-test.js
│ │ │ │ ├── decodeEntityRanges-test.js
│ │ │ │ ├── decodeInlineStyleRanges-test.js
│ │ │ │ ├── encodeEntityRanges-test.js
│ │ │ │ ├── encodeInlineStyleRanges-test.js
│ │ │ │ └── sanitizeDraftText-test.js
│ │ │ ├── convertFromDraftStateToRaw.js
│ │ │ ├── convertFromHTMLToContentBlocks.js
│ │ │ ├── convertFromRawToDraftState.js
│ │ │ ├── createCharacterList.js
│ │ │ ├── decodeEntityRanges.js
│ │ │ ├── decodeInlineStyleRanges.js
│ │ │ ├── encodeEntityRanges.js
│ │ │ ├── encodeInlineStyleRanges.js
│ │ │ └── sanitizeDraftText.js
│ │ ├── entity/
│ │ │ ├── DraftEntity.js
│ │ │ ├── DraftEntityInstance.js
│ │ │ ├── DraftEntityMutability.js
│ │ │ ├── DraftEntityType.js
│ │ │ ├── __mocks__/
│ │ │ │ └── DraftEntity.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftEntity-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── DraftEntity-test.js.snap
│ │ │ │ │ └── getEntityKeyForSelection-test.js.snap
│ │ │ │ └── getEntityKeyForSelection-test.js
│ │ │ ├── getEntityKeyForSelection.js
│ │ │ └── getTextAfterNearestEntity.js
│ │ ├── immutable/
│ │ │ ├── BlockMap.js
│ │ │ ├── BlockMapBuilder.js
│ │ │ ├── BlockNode.js
│ │ │ ├── BlockNodeRecord.js
│ │ │ ├── BlockTree.js
│ │ │ ├── CharacterMetadata.js
│ │ │ ├── ContentBlock.js
│ │ │ ├── ContentBlockNode.js
│ │ │ ├── ContentState.js
│ │ │ ├── ContentStateRawType.js
│ │ │ ├── DefaultDraftBlockRenderMap.js
│ │ │ ├── DefaultDraftInlineStyle.js
│ │ │ ├── DraftBlockRenderConfig.js
│ │ │ ├── DraftBlockRenderMap.js
│ │ │ ├── DraftInlineStyle.js
│ │ │ ├── EditorBidiService.js
│ │ │ ├── EditorChangeType.js
│ │ │ ├── EditorState.js
│ │ │ ├── EntityMap.js
│ │ │ ├── SampleDraftInlineStyle.js
│ │ │ ├── SelectionState.js
│ │ │ ├── __tests__/
│ │ │ │ ├── BlockTree-test.js
│ │ │ │ ├── CharacterMetadata-test.js
│ │ │ │ ├── ContentBlock-test.js
│ │ │ │ ├── ContentBlockNode-test.js
│ │ │ │ ├── ContentState-test.js
│ │ │ │ ├── EditorBidiService-test.js
│ │ │ │ ├── EditorState-test.js
│ │ │ │ ├── SelectionState-test.js
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ ├── BlockTree-test.js.snap
│ │ │ │ │ ├── CharacterMetadata-test.js.snap
│ │ │ │ │ ├── ContentBlock-test.js.snap
│ │ │ │ │ ├── ContentState-test.js.snap
│ │ │ │ │ ├── EditorBidiService-test.js.snap
│ │ │ │ │ ├── EditorState-test.js.snap
│ │ │ │ │ ├── SelectionState-test.js.snap
│ │ │ │ │ └── findRangesImmutable-test.js.snap
│ │ │ │ └── findRangesImmutable-test.js
│ │ │ └── findRangesImmutable.js
│ │ ├── keys/
│ │ │ ├── generateRandomKey.js
│ │ │ └── mockUUID.js
│ │ ├── modifier/
│ │ │ ├── AtomicBlockUtils.js
│ │ │ ├── DraftEntitySegments.js
│ │ │ ├── DraftModifier.js
│ │ │ ├── DraftRange.js
│ │ │ ├── DraftRemovableWord.js
│ │ │ ├── RichTextEditorUtil.js
│ │ │ ├── RichTextUtils.js
│ │ │ ├── __tests__/
│ │ │ │ ├── AtomicBlockUtils-test.js
│ │ │ │ ├── DraftRemovableWord-test.js
│ │ │ │ ├── RichTextEditorUtil-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ ├── AtomicBlockUtils-test.js.snap
│ │ │ │ ├── DraftRemovableWord-test.js.snap
│ │ │ │ └── RichTextEditorUtil-test.js.snap
│ │ │ ├── exploration/
│ │ │ │ ├── DraftTreeOperations.js
│ │ │ │ ├── NestedRichTextEditorUtil.js
│ │ │ │ └── __tests__/
│ │ │ │ ├── DraftTreeOperations-test.js
│ │ │ │ ├── NestedRichTextEditorUtil-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ ├── DraftTreeOperations-test.js.snap
│ │ │ │ └── NestedRichTextEditorUtil-test.js.snap
│ │ │ ├── getCharacterRemovalRange.js
│ │ │ └── getRangesForDraftEntity.js
│ │ ├── paste/
│ │ │ ├── DraftPasteProcessor.js
│ │ │ ├── __mocks__/
│ │ │ │ └── getSafeBodyFromHTML.js
│ │ │ ├── __tests__/
│ │ │ │ ├── DraftPasteProcessor-test.js
│ │ │ │ └── __snapshots__/
│ │ │ │ └── DraftPasteProcessor-test.js.snap
│ │ │ └── getSafeBodyFromHTML.js
│ │ └── transaction/
│ │ ├── ContentStateInlineStyle.js
│ │ ├── __tests__/
│ │ │ ├── ContentStateInlineStyle-test.js
│ │ │ ├── __snapshots__/
│ │ │ │ ├── ContentStateInlineStyle-test.js.snap
│ │ │ │ ├── applyEntityToContentBlock-test.js.snap
│ │ │ │ ├── applyEntityToContentState-test.js.snap
│ │ │ │ ├── getContentStateFragment-test.js.snap
│ │ │ │ ├── insertFragmentIntoContentState-test.js.snap
│ │ │ │ ├── insertIntoList-test.js.snap
│ │ │ │ ├── insertTextIntoContentState-test.js.snap
│ │ │ │ ├── moveBlockInContentState-test.js.snap
│ │ │ │ ├── randomizeBlockMapKeys-test.js.snap
│ │ │ │ ├── removeEntitiesAtEdges-test.js.snap
│ │ │ │ ├── removeRangeFromContentState-test.js.snap
│ │ │ │ └── splitBlockInContentState-test.js.snap
│ │ │ ├── applyEntityToContentBlock-test.js
│ │ │ ├── applyEntityToContentState-test.js
│ │ │ ├── getContentStateFragment-test.js
│ │ │ ├── insertFragmentIntoContentState-test.js
│ │ │ ├── insertIntoList-test.js
│ │ │ ├── insertTextIntoContentState-test.js
│ │ │ ├── moveBlockInContentState-test.js
│ │ │ ├── randomizeBlockMapKeys-test.js
│ │ │ ├── removeEntitiesAtEdges-test.js
│ │ │ ├── removeRangeFromContentState-test.js
│ │ │ └── splitBlockInContentState-test.js
│ │ ├── adjustBlockDepthForContentState.js
│ │ ├── applyEntityToContentBlock.js
│ │ ├── applyEntityToContentState.js
│ │ ├── exploration/
│ │ │ ├── __tests__/
│ │ │ │ ├── __snapshots__/
│ │ │ │ │ └── getNextDelimiterBlockKey-test.js.snap
│ │ │ │ └── getNextDelimiterBlockKey-test.js
│ │ │ └── getNextDelimiterBlockKey.js
│ │ ├── getContentStateFragment.js
│ │ ├── getSampleStateForTesting.js
│ │ ├── insertFragmentIntoContentState.js
│ │ ├── insertIntoList.js
│ │ ├── insertTextIntoContentState.js
│ │ ├── modifyBlockForContentState.js
│ │ ├── moveBlockInContentState.js
│ │ ├── randomizeBlockMapKeys.js
│ │ ├── removeEntitiesAtEdges.js
│ │ ├── removeRangeFromContentState.js
│ │ └── splitBlockInContentState.js
│ ├── stubs/
│ │ ├── ComposedEntityMutability.js
│ │ ├── DraftEditorContents.react.js
│ │ ├── DraftEffects.js
│ │ ├── DraftJsDebugLogging.js
│ │ └── gkx.js
│ └── util/
│ ├── getOwnObjectValues.js
│ └── uuid.js
└── website/
├── .gitignore
├── README.md
├── docusaurus.config.js
├── package.json
├── sidebars.js
├── src/
│ ├── components/
│ │ └── DraftEditorExample/
│ │ ├── css/
│ │ │ ├── draft.css
│ │ │ ├── example.css
│ │ │ └── rich-editor.css
│ │ └── index.js
│ ├── css/
│ │ └── custom.css
│ └── pages/
│ ├── index.js
│ └── styles.module.css
└── static/
└── CNAME
SYMBOL INDEX (364 symbols across 141 files)
FILE: examples/draft-0-10-0/playground/src/App.js
constant BASE_CONTENT (line 90) | const BASE_CONTENT = {
class DraftJsPlaygroundContainer (line 95) | class DraftJsPlaygroundContainer extends React.Component {
method constructor (line 96) | constructor(props) {
method componentDidMount (line 106) | componentDidMount() {
method _setContentBlock (line 114) | _setContentBlock(content) {
method _setHTMLContent (line 135) | _setHTMLContent(html) {
method _setRawContent (line 151) | _setRawContent(rawContent) {
method render (line 192) | render() {
FILE: examples/draft-0-10-0/playground/src/DraftJsRichEditorExample.js
class DraftJsRichEditorExample (line 28) | class DraftJsRichEditorExample extends React.Component {
method render (line 67) | render() {
function getBlockStyle (line 120) | function getBlockStyle(block) {
function StyleButton (line 129) | function StyleButton({active, style, label, onToggle}) {
constant BLOCK_TYPES (line 148) | const BLOCK_TYPES = [
function BlockStyleControls (line 161) | function BlockStyleControls(props) {
constant INLINE_STYLES (line 184) | const INLINE_STYLES = [
function InlineStyleControls (line 191) | function InlineStyleControls(props) {
FILE: examples/draft-0-10-0/playground/src/GkManager.js
constant QUERY_STRINGS (line 17) | const QUERY_STRINGS = querystring.parse(window.location.search.substring...
FILE: examples/draft-0-10-0/playground/src/registerServiceWorker.js
function register (line 35) | function register() {
function registerValidSW (line 60) | function registerValidSW(swUrl) {
function checkValidServiceWorker (line 89) | function checkValidServiceWorker(swUrl) {
function unregister (line 116) | function unregister() {
FILE: examples/draft-0-10-0/tex/js/components/TeXBlock.js
class KatexOutput (line 20) | class KatexOutput extends React.Component {
method _update (line 21) | _update() {
method componentDidMount (line 29) | componentDidMount() {
method componentDidUpdate (line 33) | componentDidUpdate(prevProps, prevState) {
method render (line 39) | render() {
class TeXBlock (line 44) | class TeXBlock extends React.Component {
method constructor (line 45) | constructor(props) {
method _getValue (line 104) | _getValue() {
method render (line 110) | render() {
FILE: examples/draft-0-10-0/tex/js/components/TeXEditorExample.js
class TeXEditorExample (line 28) | class TeXEditorExample extends React.Component {
method constructor (line 29) | constructor(props) {
method render (line 92) | render() {
FILE: examples/draft-0-10-0/tex/js/modifiers/insertTeXBlock.js
function insertTeXBlock (line 38) | function insertTeXBlock(editorState) {
FILE: examples/draft-0-10-0/tex/js/modifiers/removeTeXBlock.js
function removeTeXBlock (line 19) | function removeTeXBlock(editorState, blockKey) {
FILE: examples/draft-0-10-0/tex/server.js
constant APP_PORT (line 20) | const APP_PORT = 3000;
FILE: examples/draft-0-10-0/universal/editor.js
class SimpleEditor (line 20) | class SimpleEditor extends React.Component {
method constructor (line 21) | constructor(props) {
method render (line 29) | render() {
FILE: scripts/jest/hasteImpl.js
constant ROOT (line 14) | const ROOT = path.join(__dirname, '..', '..');
constant BLACKLISTED_PATTERNS (line 16) | const BLACKLISTED_PATTERNS/*: Array<RegExp>*/ = [
constant WHITELISTED_PREFIXES (line 20) | const WHITELISTED_PREFIXES/*: Array<string>*/ = [
constant NAME_REDUCERS (line 24) | const NAME_REDUCERS/*: Array<[RegExp, string]>*/ = [
method getHasteName (line 38) | getHasteName(
function isHastePath (line 55) | function isHastePath(filePath/*: string*/)/*: bool*/ {
FILE: scripts/jest/preprocessor.js
method process (line 15) | process(src, filename) {
FILE: src/NonASCIIStringSnapshotSerializer.js
constant MAX_ASCII_CHARACTER (line 11) | const MAX_ASCII_CHARACTER = 127;
method if (line 20) | if (typeof val !== 'string') {
method if (line 24) | if (val.charCodeAt(i) > MAX_ASCII_CHARACTER) {
FILE: src/__mocks__/generateRandomKey.js
function generateRandomKey (line 14) | function generateRandomKey() {
FILE: src/component/base/DraftEditor.react.js
class UpdateDraftEditorFlags (line 64) | class UpdateDraftEditorFlags extends React.Component<{
constant EDITOR_ID_PLACEHOLDER (line 129) | const EDITOR_ID_PLACEHOLDER = '{{editor_id_placeholder}}';
class DraftEditor (line 136) | class DraftEditor extends React.Component<DraftEditorProps, State> {
method blockRendererFn (line 140) | blockRendererFn() {
method blockStyleFn (line 143) | blockStyleFn() {
method if (line 260) | if (!this.props.readOnly) {
method if (line 611) | if (flushControlled) {
FILE: src/component/base/__tests__/DraftEditor.react-test.js
function getProps (line 62) | function getProps(elem: React.Node) {
FILE: src/component/contents/DraftEditorBlock.react.js
constant SCROLL_BUFFER (line 39) | const SCROLL_BUFFER = 10;
FILE: src/component/contents/DraftEditorContents-core.react.js
class DraftEditorContents (line 80) | class DraftEditorContents extends React.Component<Props> {
FILE: src/component/contents/DraftEditorLeaf.react.js
class DraftEditorLeaf (line 67) | class DraftEditorLeaf extends React.Component<Props> {
FILE: src/component/contents/DraftEditorTextNode.react.js
function isNewline (line 27) | function isNewline(node: Element): boolean {
constant NEWLINE_A (line 42) | const NEWLINE_A = (
constant NEWLINE_B (line 58) | const NEWLINE_B = (
class DraftEditorTextNode (line 83) | class DraftEditorTextNode extends React.Component<Props> {
method if (line 100) | if (shouldBeNewline) {
FILE: src/component/contents/__tests__/DraftEditorBlock.react-test.js
class DecoratorSpan (line 40) | class DecoratorSpan extends React.Component {
method render (line 41) | render() {
class Decorator (line 46) | class Decorator {
method getDecorations (line 47) | getDecorations() {
method getComponentForKey (line 50) | getComponentForKey() {
method getPropsForKey (line 53) | getPropsForKey() {
class MockEditorLeaf (line 58) | class MockEditorLeaf extends React.Component {
method render (line 59) | render() {
FILE: src/component/contents/__tests__/DraftEditorContents.react-test.js
function CustomText (line 25) | function CustomText(props) {
class Container (line 34) | class Container extends React.Component {
method constructor (line 35) | constructor(props) {
method blockRenderFn (line 54) | blockRenderFn(block) {
method render (line 63) | render() {
FILE: src/component/contents/__tests__/DraftEditorTextNode-test.js
constant BLOCK_DELIMITER_CHAR (line 16) | const BLOCK_DELIMITER_CHAR = '\n';
constant TEST_A (line 17) | const TEST_A = 'Hello';
constant TEST_B (line 18) | const TEST_B = ' World!';
FILE: src/component/contents/exploration/DraftEditorBlockNode.react.js
constant SCROLL_BUFFER (line 41) | const SCROLL_BUFFER = 10;
class DraftEditorBlockNode (line 205) | class DraftEditorBlockNode extends React.Component<Props> {
method if (line 238) | if (!selection.getHasFocus() || endKey !== this.props.block.getKey()) {
method if (line 243) | if (!blockNode) {
method if (line 251) | if (scrollParent === window) {
method if (line 268) | if (scrollDelta > 0) {
FILE: src/component/contents/exploration/DraftEditorContentsExperimental.react.js
class DraftEditorContentsExperimental (line 52) | class DraftEditorContentsExperimental extends React.Component<Props> {
FILE: src/component/contents/exploration/DraftEditorDecoratedLeaves.react.js
class DraftEditorDecoratedLeaves (line 41) | class DraftEditorDecoratedLeaves extends React.Component<Props> {
FILE: src/component/contents/exploration/DraftEditorNode.react.js
class DraftEditorNode (line 48) | class DraftEditorNode extends React.Component<Props> {
FILE: src/component/contents/exploration/__tests__/DraftEditorBlockNode.react-test.js
constant PROPS (line 85) | const PROPS = {
FILE: src/component/contents/exploration/__tests__/DraftEditorContentsExperimental.react-test.js
constant PROPS (line 45) | const PROPS = {
FILE: src/component/handlers/composition/DOMObserver.js
constant DOM_OBSERVER_OPTIONS (line 30) | const DOM_OBSERVER_OPTIONS = {
constant USE_CHAR_DATA (line 38) | const USE_CHAR_DATA = UserAgent.isBrowser('IE <= 11');
method for (line 105) | for (let i = 0; i < mutations.length; i++) {
method if (line 117) | if (target.textContent !== '') {
FILE: src/component/handlers/composition/DraftEditorCompositionHandler.js
constant RESOLVE_DELAY (line 41) | const RESOLVE_DELAY = 20;
function startDOMObserver (line 53) | function startDOMObserver(editor: DraftEditor) {
method if (line 102) | if (!stillComposing) {
method if (line 118) | if (e.which === Keys.RIGHT || e.which === Keys.LEFT) {
method if (line 130) | if (e.which === Keys.RETURN) {
method if (line 151) | if (stillComposing) {
FILE: src/component/handlers/composition/__tests__/DraftEditorCompostionHandler-test.js
function DOMObserver (line 30) | function DOMObserver() {}
FILE: src/component/handlers/edit/__tests__/editOnBeforeInput-test.js
constant DEFAULT_SELECTION (line 24) | const DEFAULT_SELECTION = {
constant HASHTAG_REGEX (line 173) | const HASHTAG_REGEX = /#[a-z]+/g;
function hashtagStrategy (line 174) | function hashtagStrategy(
function findWithRegex (line 182) | function findWithRegex(
function testDecoratorFingerprint (line 195) | function testDecoratorFingerprint(
FILE: src/component/handlers/edit/commands/keyCommandBackspaceToStartOfLine.js
function keyCommandBackspaceToStartOfLine (line 23) | function keyCommandBackspaceToStartOfLine(
FILE: src/component/handlers/edit/commands/keyCommandBackspaceWord.js
function keyCommandBackspaceWord (line 24) | function keyCommandBackspaceWord(editorState: EditorState): EditorState {
FILE: src/component/handlers/edit/commands/keyCommandDeleteWord.js
function keyCommandDeleteWord (line 24) | function keyCommandDeleteWord(editorState: EditorState): EditorState {
FILE: src/component/handlers/edit/commands/keyCommandInsertNewline.js
function keyCommandInsertNewline (line 17) | function keyCommandInsertNewline(editorState: EditorState): EditorState {
FILE: src/component/handlers/edit/commands/keyCommandMoveSelectionToEndOfBlock.js
function keyCommandMoveSelectionToEndOfBlock (line 19) | function keyCommandMoveSelectionToEndOfBlock(
FILE: src/component/handlers/edit/commands/keyCommandMoveSelectionToStartOfBlock.js
function keyCommandMoveSelectionToStartOfBlock (line 21) | function keyCommandMoveSelectionToStartOfBlock(
FILE: src/component/handlers/edit/commands/keyCommandPlainBackspace.js
function keyCommandPlainBackspace (line 25) | function keyCommandPlainBackspace(editorState: EditorState): EditorState {
FILE: src/component/handlers/edit/commands/keyCommandPlainDelete.js
function keyCommandPlainDelete (line 25) | function keyCommandPlainDelete(editorState: EditorState): EditorState {
FILE: src/component/handlers/edit/commands/keyCommandTransposeCharacters.js
function keyCommandTransposeCharacters (line 24) | function keyCommandTransposeCharacters(editorState: EditorState): Editor...
FILE: src/component/handlers/edit/commands/moveSelectionBackward.js
function moveSelectionBackward (line 27) | function moveSelectionBackward(
FILE: src/component/handlers/edit/commands/moveSelectionForward.js
function moveSelectionForward (line 27) | function moveSelectionForward(
FILE: src/component/handlers/edit/commands/removeTextWithStrategy.js
function removeTextWithStrategy (line 29) | function removeTextWithStrategy(
FILE: src/component/handlers/edit/editOnBeforeInput.js
constant FF_QUICKFIND_CHAR (line 35) | const FF_QUICKFIND_CHAR = "'";
constant FF_QUICKFIND_LINK_CHAR (line 36) | const FF_QUICKFIND_LINK_CHAR = '/';
function mustPreventDefaultForCharacter (line 40) | function mustPreventDefaultForCharacter(character: string): boolean {
function replaceText (line 51) | function replaceText(
function editOnBeforeInput (line 82) | function editOnBeforeInput(
FILE: src/component/handlers/edit/editOnCompositionStart.js
function editOnCompositionStart (line 22) | function editOnCompositionStart(
FILE: src/component/handlers/edit/editOnCopy.js
function editOnCopy (line 23) | function editOnCopy(editor: DraftEditor, e: SyntheticClipboardEvent<>): ...
FILE: src/component/handlers/edit/editOnCut.js
function editOnCut (line 33) | function editOnCut(editor: DraftEditor, e: SyntheticClipboardEvent<>): v...
function removeFragment (line 66) | function removeFragment(editorState: EditorState): EditorState {
FILE: src/component/handlers/edit/editOnDragOver.js
function editOnDragOver (line 19) | function editOnDragOver(editor: DraftEditor, e: SyntheticDragEvent<>): v...
FILE: src/component/handlers/edit/editOnDragStart.js
function editOnDragStart (line 19) | function editOnDragStart(editor: DraftEditor): void {
FILE: src/component/handlers/edit/editOnFocus.js
function editOnFocus (line 19) | function editOnFocus(editor: DraftEditor, e: SyntheticFocusEvent<>): void {
FILE: src/component/handlers/edit/editOnInput.js
constant DOUBLE_NEWLINE (line 29) | const DOUBLE_NEWLINE = '\n\n';
function onInputType (line 31) | function onInputType(inputType: string, editorState: EditorState): Edito...
function editOnInput (line 62) | function editOnInput(editor: DraftEditor, event: ?SyntheticInputEvent<>)...
FILE: src/component/handlers/edit/editOnKeyDown.js
function onKeyCommand (line 42) | function onKeyCommand(
FILE: src/component/handlers/edit/editOnPaste.js
method handleInternalPaste (line 174) | handleInternalPaste();
FILE: src/component/handlers/edit/editOnSelect.js
function editOnSelect (line 22) | function editOnSelect(editor: DraftEditor): void {
FILE: src/component/selection/DraftOffsetKey.js
constant KEY_DELIMITER (line 16) | const KEY_DELIMITER = '-';
FILE: src/component/selection/__tests__/setDraftEditorSelection-test.js
class Selection (line 20) | class Selection {
method constructor (line 21) | constructor({range}) {
method getRangeAt (line 28) | getRangeAt(idx) {
method addRange (line 35) | addRange(range) {
class Range (line 42) | class Range {
method constructor (line 43) | constructor({startOffset, endOffset, node}) {
method setEnd (line 49) | setEnd(node, offset) {
method cloneRange (line 54) | cloneRange() {
FILE: src/component/selection/expandRangeToStartOfLine.js
function getLineHeightPx (line 20) | function getLineHeightPx(element: Element): number {
function areRectsOnOneLine (line 55) | function areRectsOnOneLine(
function getNodeLength (line 92) | function getNodeLength(node: Node): number {
function expandRangeToStartOfLine (line 110) | function expandRangeToStartOfLine(range: Range): Range {
FILE: src/component/selection/getDraftEditorSelection.js
function getDraftEditorSelection (line 24) | function getDraftEditorSelection(
FILE: src/component/selection/getDraftEditorSelectionWithNodes.js
function getDraftEditorSelectionWithNodes (line 33) | function getDraftEditorSelectionWithNodes(
function getFirstLeaf (line 123) | function getFirstLeaf(node: any): Node {
function getLastLeaf (line 139) | function getLastLeaf(node: any): Node {
function getPointForNonTextNode (line 152) | function getPointForNonTextNode(
function getTextContentLength (line 237) | function getTextContentLength(node: Node): number {
FILE: src/component/selection/getRangeBoundingClientRect.js
function getRangeBoundingClientRect (line 28) | function getRangeBoundingClientRect(range: Range): FakeClientRect {
FILE: src/component/selection/getRangeClientRects.js
function getRangeClientRectsChrome (line 25) | function getRangeClientRectsChrome(range: Range): Array<ClientRect> {
FILE: src/component/selection/getUpdatedSelectionState.js
function getUpdatedSelectionState (line 21) | function getUpdatedSelectionState(
FILE: src/component/selection/isSelectionAtLeafStart.js
function isSelectionAtLeafStart (line 16) | function isSelectionAtLeafStart(editorState: EditorState): boolean {
FILE: src/component/selection/setDraftEditorSelection.js
method if (line 33) | if (!node) {
method if (line 87) | if (isElement(currentNode) && castedNode.hasAttribute('contenteditable')) {
method if (line 271) | if (selection.rangeCount > 0 && selection.extend) {
FILE: src/component/utils/_DraftTestHelper.js
constant BLACK_LIST_PROPS (line 12) | const BLACK_LIST_PROPS = ['data-reactroot'];
FILE: src/component/utils/draftKeyUtils.js
function notEmptyKey (line 16) | function notEmptyKey(key: ?string): boolean %checks {
FILE: src/component/utils/getContentEditableContainer.js
function getContentEditableContainer (line 19) | function getContentEditableContainer(editor: DraftEditor): HTMLElement {
FILE: src/component/utils/getCorrectDocumentFromNode.js
function getCorrectDocumentFromNode (line 12) | function getCorrectDocumentFromNode(node: ?Node): Document {
FILE: src/component/utils/getDefaultKeyBinding.js
function shouldRemoveWord (line 29) | function shouldRemoveWord(e: SyntheticKeyboardEvent<>): boolean {
FILE: src/component/utils/getTextContentFromFiles.js
constant TEXT_CLIPPING_REGEX (line 16) | const TEXT_CLIPPING_REGEX = /\.textClipping$/;
constant TEXT_TYPES (line 18) | const TEXT_TYPES = {
constant TEXT_SIZE_UPPER_BOUND (line 25) | const TEXT_SIZE_UPPER_BOUND = 5000;
function getTextContentFromFiles (line 30) | function getTextContentFromFiles(
method if (line 51) | if (!global.FileReader || (file.type && !(file.type in TEXT_TYPES))) {
method if (line 56) | if (file.type === '') {
FILE: src/component/utils/getWindowForNode.js
function getWindowForNode (line 12) | function getWindowForNode(node: ?Node): Window {
FILE: src/component/utils/isElement.js
function isElement (line 12) | function isElement(node: ?Node): boolean {
FILE: src/component/utils/isEventHandled.js
function isEventHandled (line 20) | function isEventHandled(value: DraftHandleValue): boolean {
FILE: src/component/utils/isHTMLAnchorElement.js
function isHTMLAnchorElement (line 14) | function isHTMLAnchorElement(node: ?Node): boolean {
FILE: src/component/utils/isHTMLBRElement.js
function isHTMLBRElement (line 14) | function isHTMLBRElement(node: ?Node): boolean {
FILE: src/component/utils/isHTMLElement.js
function isHTMLElement (line 12) | function isHTMLElement(node: ?Node): boolean {
FILE: src/component/utils/isHTMLImageElement.js
function isHTMLImageElement (line 14) | function isHTMLImageElement(node: ?Node): boolean {
FILE: src/component/utils/isInstanceOfNode.js
function isInstanceOfNode (line 12) | function isInstanceOfNode(target: ?EventTarget): boolean {
FILE: src/component/utils/isSoftNewlineEvent.js
function isSoftNewlineEvent (line 16) | function isSoftNewlineEvent(e: SyntheticKeyboardEvent<>): boolean {
FILE: src/component/utils/splitTextIntoTextBlocks.js
constant NEWLINE_REGEX (line 14) | const NEWLINE_REGEX = /\r\n?|\n/g;
function splitTextIntoTextBlocks (line 16) | function splitTextIntoTextBlocks(text: string): Array<string> {
FILE: src/model/decorators/CompositeDraftDecorator.js
constant DELIMITER (line 22) | const DELIMITER = '.';
method if (line 63) | if (this._decorators[ii] !== arr[ii]) {
function getDecorationsChecker (line 83) | function getDecorationsChecker(start: number, end: number) {
method if (line 119) | if (decorations[ii] != null) {
FILE: src/model/decorators/__tests__/CompositeDraftDecorator-test.js
class ContentBlock (line 16) | class ContentBlock {
method constructor (line 17) | constructor(text) {
method getText (line 21) | getText() {
FILE: src/model/encoding/__tests__/convertFromHTMLToContentBlocks-test.js
constant DEFAULT_CONFIG (line 25) | const DEFAULT_CONFIG = {
constant IMAGE_DATA_URL (line 31) | const IMAGE_DATA_URL =
constant SUPPORTED_TAGS (line 35) | const SUPPORTED_TAGS = [
FILE: src/model/encoding/__tests__/encodeInlineStyleRanges-test.js
constant FOO (line 33) | const FOO = OrderedSet.of('foo');
constant FOO_BAR (line 34) | const FOO_BAR = OrderedSet.of('foo', 'bar');
FILE: src/model/encoding/convertFromHTMLToContentBlocks.js
constant URI (line 24) | const URI = require('URI');
constant NBSP (line 39) | const NBSP = ' ';
constant SPACE (line 40) | const SPACE = ' ';
constant REGEX_CR (line 43) | const REGEX_CR = new RegExp('\r', 'g');
constant REGEX_LF (line 44) | const REGEX_LF = new RegExp('\n', 'g');
constant REGEX_LEADING_LF (line 45) | const REGEX_LEADING_LF = new RegExp('^\n', 'g');
constant REGEX_NBSP (line 46) | const REGEX_NBSP = new RegExp(NBSP, 'g');
constant REGEX_CARRIAGE (line 47) | const REGEX_CARRIAGE = new RegExp(' ?', 'g');
constant REGEX_ZWS (line 48) | const REGEX_ZWS = new RegExp('​?', 'g');
method if (line 133) | if (isHTMLElement(node)) {
method if (line 161) | if (!isHTMLAnchorElement(node)) {
method constructor (line 315) | constructor(
method _appendText (line 538) | _appendText(text: string, style: DraftInlineStyle) {
method _trimCurrentText (line 552) | _trimCurrentText() {
method _addTextNode (line 580) | _addTextNode(node: Node, style: DraftInlineStyle) {
method _addBreakNode (line 601) | _addBreakNode(node: Node, style: DraftInlineStyle) {
method _addImgNode (line 611) | _addImgNode(node: Node, style: DraftInlineStyle) {
method _addAnchorNode (line 648) | _addAnchorNode(
method _toContentBlocks (line 687) | _toContentBlocks(
FILE: src/model/encoding/decodeInlineStyleRanges.js
constant EMPTY_SET (line 22) | const EMPTY_SET = OrderedSet<mixed>();
FILE: src/model/encoding/encodeEntityRanges.js
function encodeEntityRanges (line 25) | function encodeEntityRanges(
FILE: src/model/encoding/sanitizeDraftText.js
constant REGEX_BLOCK_DELIMITER (line 14) | const REGEX_BLOCK_DELIMITER = new RegExp('\r', 'g');
function sanitizeDraftText (line 16) | function sanitizeDraftText(input: string): string {
FILE: src/model/entity/DraftEntityInstance.js
class DraftEntityInstance (line 39) | class DraftEntityInstance extends DraftEntityInstanceRecord {
method getType (line 40) | getType(): DraftEntityType {
method getMutability (line 44) | getMutability(): DraftEntityMutability {
method getData (line 48) | getData(): Object {
FILE: src/model/entity/__tests__/getEntityKeyForSelection-test.js
constant COLLAPSED_SELECTION (line 22) | const COLLAPSED_SELECTION = initialSelectionState.merge({
constant COLLAPSED_SELECTION_ENTITY_END (line 27) | const COLLAPSED_SELECTION_ENTITY_END = initialSelectionState.merge({
constant NON_COLLAPSED_SELECTION (line 32) | const NON_COLLAPSED_SELECTION = initialSelectionState.merge({
FILE: src/model/entity/getEntityKeyForSelection.js
function entityKey (line 24) | function getEntityKeyForSelection(
FILE: src/model/entity/getTextAfterNearestEntity.js
function getTextAfterNearestEntity (line 20) | function getTextAfterNearestEntity(
FILE: src/model/immutable/BlockTree.js
method getLength (line 77) | getLength();
function generateLeaves (line 127) | function generateLeaves(
function areEqual (line 145) | function areEqual(a: any, b: any): boolean {
FILE: src/model/immutable/CharacterMetadata.js
class CharacterMetadata (line 43) | class CharacterMetadata extends CharacterMetadataRecord {
method getStyle (line 44) | getStyle(): DraftInlineStyle {
constant EMPTY (line 124) | const EMPTY = new CharacterMetadata();
FILE: src/model/immutable/ContentBlock.js
constant EMPTY_SET (line 25) | const EMPTY_SET = OrderedSet<string>();
class ContentBlock (line 52) | class ContentBlock extends ContentBlockRecord implements BlockNode {
method constructor (line 53) | constructor(config: BlockNodeConfig) {
method getKey (line 58) | getKey(): BlockNodeKey {
method getType (line 63) | getType(): DraftBlockType {
method getText (line 68) | getText(): string {
method getCharacterList (line 73) | getCharacterList(): List<CharacterMetadata> {
method getLength (line 78) | getLength(): number {
method getDepth (line 83) | getDepth(): number {
method getData (line 88) | getData(): Map<any, any> {
method getInlineStyleAt (line 93) | getInlineStyleAt(offset: number): DraftInlineStyle {
function haveEqualStyle (line 137) | function haveEqualStyle(
function haveEqualEntity (line 144) | function haveEqualEntity(
FILE: src/model/immutable/ContentBlockNode.js
constant EMPTY_SET (line 39) | const EMPTY_SET = OrderedSet<string>();
class ContentBlockNode (line 80) | class ContentBlockNode
method constructor (line 84) | constructor(props: ContentBlockNodeConfig = defaultRecord) {
method getKey (line 90) | getKey(): BlockNodeKey {
method getType (line 95) | getType(): DraftBlockType {
method getText (line 100) | getText(): string {
method getCharacterList (line 105) | getCharacterList(): List<CharacterMetadata> {
method getLength (line 110) | getLength(): number {
method getDepth (line 115) | getDepth(): number {
method getData (line 120) | getData(): Map<any, any> {
method getInlineStyleAt (line 125) | getInlineStyleAt(offset: number): DraftInlineStyle {
FILE: src/model/immutable/ContentState.js
class ContentStateRecordHelper (line 56) | class ContentStateRecordHelper {
class ContentState (line 75) | class ContentState extends ContentStateRecord {
method getEntityMap (line 76) | getEntityMap(): EntityMap {
method getBlockMap (line 81) | getBlockMap(): BlockMap {
method getSelectionBefore (line 86) | getSelectionBefore(): SelectionState {
method getSelectionAfter (line 91) | getSelectionAfter(): SelectionState {
method getBlockForKey (line 96) | getBlockForKey(key: string): BlockNodeRecord {
FILE: src/model/immutable/DefaultDraftBlockRenderMap.js
constant UL_WRAP (line 26) | const UL_WRAP = <ul className={cx('public/DraftStyleDefault/ul')} />;
constant OL_WRAP (line 27) | const OL_WRAP = <ol className={cx('public/DraftStyleDefault/ol')} />;
constant PRE_WRAP (line 28) | const PRE_WRAP = <pre className={cx('public/DraftStyleDefault/pre')} />;
FILE: src/model/immutable/EditorBidiService.js
method any (line 29) | any> {
FILE: src/model/immutable/EditorState.js
method if (line 138) | if (contentState.getBlockMap().count() === 0) {
method if (line 552) | if (!editorState.getAllowUndo()) {
FILE: src/model/immutable/SelectionState.js
class SelectionState (line 40) | class SelectionState extends SelectionStateRecord {
method serialize (line 41) | serialize(): string {
method getAnchorKey (line 61) | getAnchorKey(): string {
method getAnchorOffset (line 65) | getAnchorOffset(): number {
method getFocusKey (line 69) | getFocusKey(): string {
method getFocusOffset (line 73) | getFocusOffset(): number {
method getIsBackward (line 77) | getIsBackward(): boolean {
method getHasFocus (line 81) | getHasFocus(): boolean {
method hasEdgeWithin (line 89) | hasEdgeWithin(blockKey: string, start: number, end: number): boolean {
method isCollapsed (line 112) | isCollapsed(): boolean {
method getStartKey (line 119) | getStartKey(): string {
method getStartOffset (line 123) | getStartOffset(): number {
method getEndKey (line 129) | getEndKey(): string {
method getEndOffset (line 133) | getEndOffset(): number {
method createEmpty (line 139) | static createEmpty(key: string): SelectionState {
FILE: src/model/immutable/__tests__/BlockTree-test.js
constant PLAIN_BLOCK (line 25) | const PLAIN_BLOCK = {
constant STYLED_BLOCK (line 31) | const STYLED_BLOCK = {
class Decorator (line 40) | class Decorator {}
FILE: src/model/immutable/__tests__/ContentBlock-test.js
constant ENTITY_KEY (line 20) | const ENTITY_KEY = 'x';
FILE: src/model/immutable/__tests__/ContentBlockNode-test.js
constant DEFAUL_BLOCK_CONFIG (line 22) | const DEFAUL_BLOCK_CONFIG = {
FILE: src/model/immutable/__tests__/ContentState-test.js
constant SINGLE_BLOCK (line 25) | const SINGLE_BLOCK = [{text: 'Lorem ipsum', key: 'a'}];
constant MULTI_BLOCK (line 26) | const MULTI_BLOCK = [
constant ZERO_WIDTH_CHAR_BLOCK (line 30) | const ZERO_WIDTH_CHAR_BLOCK = [{text: unescape('%u200B%u200B'), key: 'a'}];
FILE: src/model/immutable/__tests__/EditorState-test.js
class Decorator (line 26) | class Decorator {}
constant DEFAULT_SELECTION (line 29) | const DEFAULT_SELECTION = {
constant UNDECORATED_STATE (line 96) | const UNDECORATED_STATE = getSampleEditorState('UNDECORATED');
constant MULTI_BLOCK_STATE (line 98) | const MULTI_BLOCK_STATE = getSampleEditorState('MULTI_BLOCK');
class NextDecorator (line 234) | class NextDecorator {}
FILE: src/model/immutable/__tests__/SelectionState-test.js
constant DEFAULT_CONFIG (line 16) | const DEFAULT_CONFIG = {
method let (line 45) | let selectionState;
constant COLLAPSED (line 79) | const COLLAPSED = getSample('COLLAPSED');
constant MULTI_BLOCK (line 80) | const MULTI_BLOCK = getSample('MULTI_BLOCK');
constant WITHIN_BLOCK (line 81) | const WITHIN_BLOCK = getSample('WITHIN_BLOCK');
FILE: src/model/immutable/__tests__/findRangesImmutable-test.js
constant SAMPLE_LIST (line 23) | const SAMPLE_LIST = List.of(1, 1, 1, 1, 1);
FILE: src/model/immutable/findRangesImmutable.js
method if (line 29) | if (!haystack.size) {
FILE: src/model/keys/generateRandomKey.js
constant MULTIPLIER (line 15) | const MULTIPLIER = Math.pow(2, 24);
function generateRandomKey (line 17) | function generateRandomKey(): string {
FILE: src/model/keys/mockUUID.js
function mockUUID (line 16) | function mockUUID(): string {
FILE: src/model/modifier/DraftEntitySegments.js
method if (line 90) | if (direction === 'forward') {
FILE: src/model/modifier/DraftRemovableWord.js
constant CHAMELEON_CHARS (line 22) | const CHAMELEON_CHARS = "['\u2018\u2019]";
constant WHITESPACE_AND_PUNCTUATION (line 26) | const WHITESPACE_AND_PUNCTUATION = '\\s|(?![_])' + punctuation;
constant DELETE_STRING (line 28) | const DELETE_STRING =
constant DELETE_REGEX (line 41) | const DELETE_REGEX = new RegExp(DELETE_STRING);
constant BACKSPACE_STRING (line 43) | const BACKSPACE_STRING =
constant BACKSPACE_REGEX (line 56) | const BACKSPACE_REGEX = new RegExp(BACKSPACE_STRING);
function getRemovableWord (line 58) | function getRemovableWord(text: string, isBackward: boolean): string {
FILE: src/model/modifier/__tests__/AtomicBlockUtils-test.js
constant ENTITY_KEY (line 35) | const ENTITY_KEY = contentState.getLastCreatedEntityKey();
constant CHARACTER (line 36) | const CHARACTER = ' ';
FILE: src/model/modifier/exploration/DraftTreeOperations.js
method if (line 27) | if (__DEV__) {
FILE: src/model/modifier/exploration/NestedRichTextEditorUtil.js
constant NESTING_DISABLED_TYPES (line 34) | const NESTING_DISABLED_TYPES = ['code-block', 'atomic'];
method EditorState (line 40) | EditorState => {
FILE: src/model/modifier/getCharacterRemovalRange.js
function getCharacterRemovalRange (line 33) | function getCharacterRemovalRange(
function getEntityRemovalRange (line 114) | function getEntityRemovalRange(
FILE: src/model/modifier/getRangesForDraftEntity.js
function getRangesForDraftEntity (line 27) | function getRangesForDraftEntity(
FILE: src/model/paste/__mocks__/getSafeBodyFromHTML.js
function getUnsafeBodyFromHTML (line 13) | function getUnsafeBodyFromHTML(html) {
FILE: src/model/paste/__tests__/DraftPasteProcessor-test.js
constant CUSTOM_BLOCK_MAP (line 22) | const CUSTOM_BLOCK_MAP = Map({
constant EMPTY_CHAR_METADATA (line 52) | const EMPTY_CHAR_METADATA = OrderedSet();
FILE: src/model/transaction/ContentStateInlineStyle.js
method modifyInlineStyle (line 27) | modifyInlineStyle(contentState, selectionState, inlineStyle, true);
function modifyInlineStyle (line 39) | function modifyInlineStyle(
FILE: src/model/transaction/__tests__/getContentStateFragment-test.js
constant DEFAULT_SELECTION (line 71) | const DEFAULT_SELECTION = {
FILE: src/model/transaction/__tests__/insertFragmentIntoContentState-test.js
constant DEFAULT_BLOCK_CONFIG (line 31) | const DEFAULT_BLOCK_CONFIG = {
FILE: src/model/transaction/__tests__/insertIntoList-test.js
constant SAMPLE_LIST (line 18) | const SAMPLE_LIST = Immutable.List.of(0, 1, 2, 3, 4);
FILE: src/model/transaction/__tests__/insertTextIntoContentState-test.js
constant EMPTY (line 23) | const EMPTY = CharacterMetadata.EMPTY;
FILE: src/model/transaction/__tests__/moveBlockInContentState-test.js
constant BLOCK_PROPS_BLACKLIST (line 73) | const BLOCK_PROPS_BLACKLIST = [
FILE: src/model/transaction/__tests__/removeEntitiesAtEdges-test.js
function ensureEntityWithMutability (line 33) | function ensureEntityWithMutability(
FILE: src/model/transaction/adjustBlockDepthForContentState.js
function adjustBlockDepthForContentState (line 17) | function adjustBlockDepthForContentState(
FILE: src/model/transaction/applyEntityToContentBlock.js
function applyEntityToContentBlock (line 18) | function applyEntityToContentBlock(
FILE: src/model/transaction/applyEntityToContentState.js
function applyEntityToContentState (line 20) | function applyEntityToContentState(
FILE: src/model/transaction/getSampleStateForTesting.js
constant ENTITY_KEY (line 25) | const ENTITY_KEY = '2';
constant BLOCKS (line 27) | const BLOCKS = [
FILE: src/model/transaction/insertTextIntoContentState.js
function insertTextIntoContentState (line 24) | function insertTextIntoContentState(
FILE: src/model/transaction/moveBlockInContentState.js
method if (line 32) | if (!key) {
FILE: src/model/transaction/removeEntitiesAtEdges.js
function removeEntitiesAtEdges (line 24) | function removeEntitiesAtEdges(
function getRemovalRange (line 69) | function getRemovalRange(
function removeForBlock (line 106) | function removeForBlock(
FILE: src/model/transaction/removeRangeFromContentState.js
method if (line 33) | if (!key) {
method if (line 409) | if (startOffset === 0) {
method while (line 415) | while (endOffset > startOffset) {
FILE: src/model/transaction/splitBlockInContentState.js
method if (line 32) | if (!key) {
FILE: src/util/uuid.js
function uuid (line 15) | function uuid(): string {
FILE: website/src/components/DraftEditorExample/index.js
function RichEditorExample (line 17) | function RichEditorExample(props) {
function getBlockStyle (line 117) | function getBlockStyle(block) {
function StyleButton (line 126) | function StyleButton({onToggle, active, label, style}) {
constant BLOCK_TYPES (line 144) | const BLOCK_TYPES = [
function BlockStyleControls (line 157) | function BlockStyleControls({editorState, onToggle}) {
constant INLINE_STYLES (line 179) | const INLINE_STYLES = [
function InlineStyleControls (line 186) | function InlineStyleControls({editorState, onToggle}) {
FILE: website/src/pages/index.js
function ClientOnly (line 21) | function ClientOnly({children, fallback}) {
function VideoContainer (line 28) | function VideoContainer() {
function Home (line 49) | function Home() {
Condensed preview — 438 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,367K chars).
[
{
"path": ".alexignore",
"chars": 420,
"preview": "# The Code of Conduct calls out language that can't be used so it's not linted.\nCODE_OF_CONDUCT.md\n\n# The CHANGELOG cont"
},
{
"path": ".alexrc.js",
"chars": 553,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": ".dependabot/config.yml",
"chars": 450,
"preview": "version: 1\nupdate_configs:\n - package_manager: \"javascript\"\n directory: \"/examples/draft-0-10-0/playground\"\n upda"
},
{
"path": ".eslintignore",
"chars": 226,
"preview": "lib/\ndist/\ndocs/\nnode_modules/\nwebsite/\ngulpfile.js\nscripts/module-map.js\nscripts/jest/preprocessor.js\nscripts/jest/hast"
},
{
"path": ".eslintrc.js",
"chars": 655,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 471,
"preview": "#### Do you want to request a *feature* or report a *bug*?\n\n#### What is the current behavior?\n\n#### If the current beha"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 767,
"preview": "*Before* submitting a pull request, please make sure the following is done...\n\n1. Fork the repo and create your branch f"
},
{
"path": ".github/workflows/ci.yml",
"chars": 562,
"preview": "name: CI\n\non: [push, pull_request]\n\njobs:\n ci:\n runs-on: ubuntu-latest\n strategy:\n fail-fast: false\n ma"
},
{
"path": ".gitignore",
"chars": 137,
"preview": "static/\ndist/\nlib/\nbuild/\nnode_modules\nwebsite/src/docs/\nnpm-debug.log\n!website/static/\nyarn-error.log\n.DS_Store\nmeta/bu"
},
{
"path": "CHANGELOG.md",
"chars": 47754,
"preview": "# Changelog\n\nNotable changes to Draft.js will be documented in this file.\n\nChanges to `src` are live in production on fa"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3541,
"preview": "# Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and"
},
{
"path": "CONTRIBUTING.md",
"chars": 3567,
"preview": "# Contributing to Draft.js\nWe want to make contributing to this project as approachable and transparent as\npossible.\n\n##"
},
{
"path": "LICENSE",
"chars": 1086,
"preview": "MIT License\n\nCopyright (c) Facebook, Inc. and its affiliates.\n\nPermission is hereby granted, free of charge, to any pers"
},
{
"path": "LICENSE-examples",
"chars": 650,
"preview": "Copyright (c) 2013-present, Facebook, Inc. All rights reserved.\n\nThe examples provided by Facebook are for non-commercia"
},
{
"path": "README.md",
"chars": 7558,
"preview": "<p align=\"center\">\n <a href=\"http://draftjs.org/\">\n <img src=\"https://draftjs.org/img/draftjs-logo.svg\" alt=\"draftjs"
},
{
"path": "docs/APIReference-APIMigration.md",
"chars": 3535,
"preview": "---\nid: v0-10-api-migration\ntitle: v0.10 API Migration\n---\n\nThe Draft.js v0.10 release includes a change to the API for "
},
{
"path": "docs/APIReference-AtomicBlockUtils.md",
"chars": 653,
"preview": "---\nid: api-reference-atomic-block-utils\ntitle: AtomicBlockUtils\n---\n\nThe `AtomicBlockUtils` module is a static set of u"
},
{
"path": "docs/APIReference-CharacterMetadata.md",
"chars": 3980,
"preview": "---\nid: api-reference-character-metadata\ntitle: CharacterMetadata\n---\n\n`CharacterMetadata` is an Immutable\n[Record](http"
},
{
"path": "docs/APIReference-CompositeDecorator.md",
"chars": 201,
"preview": "---\nid: api-reference-composite-decorator\ntitle: CompositeDecorator\n---\n\n## Advanced Topic Article\n\nSee the [advanced to"
},
{
"path": "docs/APIReference-ContentBlock.md",
"chars": 6364,
"preview": "---\nid: api-reference-content-block\ntitle: ContentBlock\n---\n\n`ContentBlock` is an Immutable\n[Record](https://web.archive"
},
{
"path": "docs/APIReference-ContentState.md",
"chars": 9625,
"preview": "---\nid: api-reference-content-state\ntitle: ContentState\n---\n\n`ContentState` is an Immutable\n[Record](https://web.archive"
},
{
"path": "docs/APIReference-Data-Conversion.md",
"chars": 2255,
"preview": "---\nid: api-reference-data-conversion\ntitle: Data Conversion\n---\n\nBecause a text editor doesn't exist in a vacuum and it"
},
{
"path": "docs/APIReference-Editor.md",
"chars": 9553,
"preview": "---\nid: api-reference-editor\ntitle: Editor Component\n---\n\nThis article discusses the API and props of the core controlle"
},
{
"path": "docs/APIReference-EditorChangeType.md",
"chars": 2663,
"preview": "---\nid: api-reference-editor-change-type\ntitle: EditorChangeType\n---\n\n[EditorChangeType](https://github.com/facebook/dra"
},
{
"path": "docs/APIReference-EditorState.md",
"chars": 13725,
"preview": "---\nid: api-reference-editor-state\ntitle: EditorState\n---\n\n`EditorState` is the top-level state object for the editor.\n\n"
},
{
"path": "docs/APIReference-Entity.md",
"chars": 3722,
"preview": "---\nid: api-reference-entity\ntitle: Entity\n---\n\n`Entity` is a static module containing the API for creating, retrieving,"
},
{
"path": "docs/APIReference-KeyBindingUtil.md",
"chars": 940,
"preview": "---\nid: api-reference-key-binding-util\ntitle: KeyBindingUtil\n---\n\nThe `KeyBindingUtil` module is a static set of utility"
},
{
"path": "docs/APIReference-Modifier.md",
"chars": 5429,
"preview": "---\nid: api-reference-modifier\ntitle: Modifier\n---\n\nThe `Modifier` module is a static set of utility functions that enca"
},
{
"path": "docs/APIReference-RichUtils.md",
"chars": 1776,
"preview": "---\nid: api-reference-rich-utils\ntitle: RichUtils\n---\n\nThe `RichUtils` module is a static set of utility functions for r"
},
{
"path": "docs/APIReference-SelectionState.md",
"chars": 8200,
"preview": "---\nid: api-reference-selection-state\ntitle: SelectionState\n---\n\n`SelectionState` is an Immutable \n[Record](https://web."
},
{
"path": "docs/Advanced-Topics-Block-Components.md",
"chars": 5402,
"preview": "---\nid: advanced-topics-block-components\ntitle: Custom Block Components\n---\n\nDraft is designed to solve problems for str"
},
{
"path": "docs/Advanced-Topics-Block-Styling.md",
"chars": 1583,
"preview": "---\nid: advanced-topics-block-styling\ntitle: Block Styling\n---\n\nWithin `Editor`, some block types are given default CSS "
},
{
"path": "docs/Advanced-Topics-Custom-Block-Render.md",
"chars": 5064,
"preview": "---\nid: advanced-topics-custom-block-render-map\ntitle: Custom Block Rendering\n---\n\nThis article discusses how to customi"
},
{
"path": "docs/Advanced-Topics-Decorators.md",
"chars": 5627,
"preview": "---\nid: advanced-topics-decorators\ntitle: Decorators\n---\n\nInline and block styles aren't the only kind of rich styling t"
},
{
"path": "docs/Advanced-Topics-EditorState-Race-Conditions.md",
"chars": 4012,
"preview": "---\nid: advanced-topics-editorstate-race-conditions\ntitle: EditorState Race Conditions\n---\n\nDraft `Editor` is a _control"
},
{
"path": "docs/Advanced-Topics-Entities.md",
"chars": 5940,
"preview": "---\nid: advanced-topics-entities\ntitle: Entities\n---\n\nThis article discusses the Entity system, which Draft uses for ann"
},
{
"path": "docs/Advanced-Topics-Inline-Styles.md",
"chars": 3258,
"preview": "---\nid: advanced-topics-inline-styles\ntitle: Complex Inline Styles\n---\n\nWithin your editor, you may wish to provide a wi"
},
{
"path": "docs/Advanced-Topics-Issues-and-Pitfalls.md",
"chars": 4581,
"preview": "---\nid: advanced-topics-issues-and-pitfalls\ntitle: Issues and Pitfalls\n---\n\nThis article addresses some known issues wit"
},
{
"path": "docs/Advanced-Topics-Key-Bindings.md",
"chars": 3228,
"preview": "---\nid: advanced-topics-key-bindings\ntitle: Key Bindings\n---\n\nThe `Editor` component offers flexibility to define custom"
},
{
"path": "docs/Advanced-Topics-Managing-Focus.md",
"chars": 1710,
"preview": "---\nid: advanced-topics-managing-focus\ntitle: Managing Focus\n---\n\nManaging text input focus can be a tricky task within "
},
{
"path": "docs/Advanced-Topics-Nested-Lists.md",
"chars": 776,
"preview": "---\nid: advanced-topics-nested-lists\ntitle: Nested Lists\n---\n\nThe Draft framework provides support for nested lists, as "
},
{
"path": "docs/Advanced-Topics-Text-Direction.md",
"chars": 1304,
"preview": "---\nid: advanced-topics-text-direction\ntitle: Text Direction\n---\n\nFacebook supports dozens of languages, which means tha"
},
{
"path": "docs/Overview.md",
"chars": 3104,
"preview": "---\nid: getting-started\ntitle: Overview\nonPageNav: 'none'\n---\n\nDraft.js is a framework for building rich text editors in"
},
{
"path": "docs/QuickStart-API-Basics.md",
"chars": 2345,
"preview": "---\nid: quickstart-api-basics\ntitle: API Basics\n---\n\nThis document provides an overview of the basics of the `Draft` API"
},
{
"path": "docs/QuickStart-Rich-Styling.md",
"chars": 3761,
"preview": "---\nid: quickstart-rich-styling\ntitle: Rich Styling\n---\n\nNow that we have established the basics of the top-level API, w"
},
{
"path": "examples/draft-0-10-0/color/color.html",
"chars": 7063,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/convertFromHTML/convert.html",
"chars": 5348,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/entity/entity.html",
"chars": 6654,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/iframe/iframe.html",
"chars": 9283,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/link/link.html",
"chars": 8121,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/media/media.html",
"chars": 8686,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/plaintext/plaintext.html",
"chars": 3138,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/playground/README.md",
"chars": 108763,
"preview": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).\n\nBelow you"
},
{
"path": "examples/draft-0-10-0/playground/package.json",
"chars": 837,
"preview": "{\n \"name\": \"playground\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"codemirror\": \"^5.58.3\",\n "
},
{
"path": "examples/draft-0-10-0/playground/public/index.html",
"chars": 1602,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "examples/draft-0-10-0/playground/public/manifest.json",
"chars": 331,
"preview": "{\n \"short_name\": \"Draft.js Playground\",\n \"name\": \"Draft.js Playground example\",\n \"icons\": [\n {\n \"src\": \"favic"
},
{
"path": "examples/draft-0-10-0/playground/src/App.css",
"chars": 3348,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/App.js",
"chars": 10244,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/App.test.js",
"chars": 900,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/DraftJsPlaygroundContainer.css",
"chars": 2090,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/DraftJsRichEditorExample.css",
"chars": 2065,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/DraftJsRichEditorExample.js",
"chars": 5783,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/GkManager.js",
"chars": 1291,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/index.css",
"chars": 817,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/index.js",
"chars": 1103,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/playground/src/registerServiceWorker.js",
"chars": 4713,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/rich/RichEditor.css",
"chars": 1947,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/rich/rich.html",
"chars": 7869,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/tex/.babelrc",
"chars": 27,
"preview": "{\"presets\":[\"@babel/env\"]}\n"
},
{
"path": "examples/draft-0-10-0/tex/js/app.js",
"chars": 912,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tex/js/components/TeXBlock.js",
"chars": 4170,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tex/js/components/TeXEditorExample.js",
"chars": 3689,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tex/js/data/content.js",
"chars": 1856,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tex/js/modifiers/insertTeXBlock.js",
"chars": 1823,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tex/js/modifiers/removeTeXBlock.js",
"chars": 1428,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tex/package.json",
"chars": 603,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"start\": \"babel-node ./server.js\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^"
},
{
"path": "examples/draft-0-10-0/tex/public/TeXEditor.css",
"chars": 2455,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tex/public/index.html",
"chars": 1252,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/tex/readme.md",
"chars": 418,
"preview": "# TEX\n\nThe TeX editor in the Draft repository provides a live example of custom block rendering, with TeX syntax transla"
},
{
"path": "examples/draft-0-10-0/tex/server.js",
"chars": 1605,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/tweet/tweet.html",
"chars": 4856,
"preview": "<!--\nCopyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n\nThis file provided by Facebook is for non-co"
},
{
"path": "examples/draft-0-10-0/universal/.babelrc",
"chars": 38,
"preview": "{ \"presets\": [\"@babel/preset-react\"] }"
},
{
"path": "examples/draft-0-10-0/universal/client.js",
"chars": 909,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/universal/editor.js",
"chars": 1631,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/universal/index.js",
"chars": 1311,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.\n *\n * This file provided by Facebook is for"
},
{
"path": "examples/draft-0-10-0/universal/package.json",
"chars": 691,
"preview": "{\n \"name\": \"universal\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"draft-"
},
{
"path": "examples/draft-0-10-0/universal/readme.md",
"chars": 698,
"preview": "# Universal rendering\n\nDraft is well suited for universal (isomorphic) rendering contexts:\n\nHere, we have three files:\n\n"
},
{
"path": "gulpfile.js",
"chars": 7004,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "meta/meeting-notes/2017-02-10-weekly-meeting.md",
"chars": 1764,
"preview": "# Draft.js Weekly 2/10/17\n\n* (again) Can we transfer the draftjs.com (http://draftjs.com/) domain to daniel lo nigro? (q"
},
{
"path": "meta/meeting-notes/2017-02-17-weekly-meeting.md",
"chars": 636,
"preview": "# Draft.js Weekly 2/17/17\n\n* (again) Can we transfer the draftjs.com (http://draftjs.com/) domain to daniel lo nigro? (q"
},
{
"path": "meta/meeting-notes/2017-02-24-weekly-meeting.md",
"chars": 772,
"preview": "# Draft.js Weekly 2/17/17\n\n* Updates on ongoing projects\n * v0.10.0 and v0.11.0@next releases\n * when publishi"
},
{
"path": "meta/meeting-notes/2017-03-10-weekly-meeting.md",
"chars": 817,
"preview": "# Draft.js Weekly 3/10/17\n\n* Android/mobile web support update (@mmmoussa)\n * Working on two more improvements related "
},
{
"path": "meta/meeting-notes/2017-03-17-weekly-meeting.md",
"chars": 84,
"preview": "# Draft.js Weekly 3/17/17\n\nDiscussed https://github.com/facebook/draft-js/pull/1067\n"
},
{
"path": "meta/meeting-notes/2017-03-24-weekly-meeting.md",
"chars": 182,
"preview": "# Draft.js Weekly 3/24/17\n\n* Upcoming 0.10.1 release\n * Last blocker is figuring out Entity deletion change - debuggi"
},
{
"path": "meta/meeting-notes/2017-03-31-weekly-meeting.md",
"chars": 277,
"preview": "# Draft.js Weekly 3/31/17\n\n* Introduced Feature Flags\n* Releasing from Master, instead of a release branch\n * Ideally"
},
{
"path": "meta/meeting-notes/2017-04-14-weekly-meeting.md",
"chars": 251,
"preview": "# Draft.js Weekly 4/14/17\n\n* Continued discussion of automated syncing between Facebook and Github versions of Draft, to"
},
{
"path": "meta/meeting-notes/2017-04-21-weekly-meeting.md",
"chars": 275,
"preview": "# Draft.js Weekly 4/21/17\n\n* Discussed fixes for bugs\n* [Gboard auto-translate](https://www.theverge.com/2017/3/9/148640"
},
{
"path": "meta/meeting-notes/2017-04-28-weekly-meeting.md",
"chars": 71,
"preview": "# Draft.js Weekly 4/28/17\n\n* still working on internal sync of v0.10.1\n"
},
{
"path": "meta/meeting-notes/2017-05-05-weekly-meeting.md",
"chars": 98,
"preview": "# Draft.js Weekly 5/05/17\n\n* Internal testing of v0.10.1 going well\n* Some folks out at JSConf EU\n"
},
{
"path": "meta/meeting-notes/2017-05-19-weekly-meeting.md",
"chars": 65,
"preview": "# Draft.js Weekly 5/19/17\n\n* Draft v0.10.1 release went smoothly\n"
},
{
"path": "meta/meeting-notes/2017-05-26-weekly-meeting.md",
"chars": 134,
"preview": "# Draft.js Weekly 5/26/17\n\n* Planning a bug-bash/issues triage session in June\n* Posting internally at FB to recruit mor"
},
{
"path": "meta/meeting-notes/2017-06-02-weekly-meeting.md",
"chars": 176,
"preview": "# Draft.js Weekly 6/02/17\n\n* Discussed ongoing fix to work better with React Fiber\n* Set date for internal FB bug/issues"
},
{
"path": "meta/meeting-notes/2017-07-07-weekly-meeting.md",
"chars": 1198,
"preview": "# Draft.js Weekly 07/07/17\n\nAgenda Items:\n\n* Goal: Review/close 30 PRs by end of the half.\n * Review 3 every Friday\n "
},
{
"path": "meta/meeting-notes/2017-07-14-weekly-meeting.md",
"chars": 1915,
"preview": "# Draft.js Weekly 07/14/17\n\nAgenda Items:\n\n* Intros for new folks\n* Update on automated PR syncing between Github and Fa"
},
{
"path": "meta/meeting-notes/2017-07-21-weekly-meeting.md",
"chars": 1751,
"preview": "# Draft.js Weekly 07/21/17\n\nAgenda Items:\n\n* Intros\n* Minor release soon? We have a couple of bug fixes and the 'ariaMul"
},
{
"path": "meta/meeting-notes/2017-07-28-weekly-meeting.md",
"chars": 234,
"preview": "# Draft.js Weekly 07/28/17\n\nAgenda Items:\n\n* Intros\n* v0.11.0 alpha release 🎉 - https://github.com/facebook/draft-js/iss"
},
{
"path": "meta/meeting-notes/2017-08-04-weekly-meeting.md",
"chars": 415,
"preview": "# Draft.js Weekly 08/04/2017\n\nAgenda Items:\n\n* Intros\n* Anyone want to do one of these two tasks?\n * “**[Draft.js] U"
},
{
"path": "meta/meeting-notes/2017-08-11-weekly-meeting.md",
"chars": 479,
"preview": "# Draft.js Weekly 08/11/2017\n\nAgenda Items:\n\n* Intros\n* React team maintainers mainly working on React 16.0 release\n* pr"
},
{
"path": "meta/meeting-notes/2017-08-18-weekly-meeting.md",
"chars": 291,
"preview": "# Draft.js Weekly 08/18/2017\n\nDraft.js Weekly 08/18/201\n\nAgenda Items:\n* Intros\n* React team maintainers mainly working "
},
{
"path": "meta/meeting-notes/2017-09-01-weekly-meeting.md",
"chars": 1219,
"preview": "# Draft.js Weekly 09/01/2017\n\nAgenda Items:\n* Intros\n* Upcoming stuff:\n * WIP - Hack-a-month to support richer featur"
},
{
"path": "meta/meeting-notes/2017-09-08-weekly-meeting.md",
"chars": 1986,
"preview": "# Draft.js Weekly 09/08/2017\n\nAgenda Items:\n* * Super awesome docs PR - https://github.com/facebook/draft-js/pull/1371#p"
},
{
"path": "meta/meeting-notes/2017-09-15-weekly-meeting.md",
"chars": 330,
"preview": "# Draft.js Weekly 09/15/17\n\n* Proposal to support multiple entities per character - https://github (https://github.com/f"
},
{
"path": "meta/meeting-notes/2017-09-22-weekly-meeting.md",
"chars": 660,
"preview": "# Draft.js Weekly 09/22/17\n\n* Better test coverage for Draft and browser changes\n * Interesting issue: “`focus()` cau"
},
{
"path": "meta/meeting-notes/2017-09-29-weekly-meeting.md",
"chars": 275,
"preview": "# Draft.js Weekly 09/29/17\n\n* Issues with landing PRs into FB - instructions for landing a PR written up\n internally\n* "
},
{
"path": "meta/meeting-notes/2017-10-06-weekly-meeting.md",
"chars": 68,
"preview": "# Draft.js Weekly 10/06/17\n\n* Discussed race conditions in Draft.js\n"
},
{
"path": "meta/meeting-notes/2017-10-13-weekly-meeting.md",
"chars": 1474,
"preview": "# Draft.js Weekly 10/13/17\n\n* * Idea: Highlight broken/invalid text in red (Sophie's comments below:)\n * bad things h"
},
{
"path": "meta/meeting-notes/2017-10-20-weekly-meeting.md",
"chars": 165,
"preview": "# Draft.js Weekly 10/20/17\n\n* Potentially onboarding external maintainers\n* Upcoming project to add new improved feature"
},
{
"path": "meta/meeting-notes/2017-11-03-weekly-meeting.md",
"chars": 165,
"preview": "# Draft.js Weekly 11/03/17\n\n* Update on new experimental feature\n* Migrating docs to Docusaurus - https://docusaurus.io/"
},
{
"path": "meta/meeting-notes/2017-11-17-weekly-meeting.md",
"chars": 128,
"preview": "# Draft.js Weekly 11/17/17\n\n* Continued work moving docs to Docusaurus\n* Jest snapshot test conversion landed\n* New main"
},
{
"path": "meta/meeting-notes/2017-12-01-weekly-meeting.md",
"chars": 115,
"preview": "# Draft.js Weekly 12/01/17\n\n* Moving weekly meeting time so more folks can attend\n* Update on Docusaurus migration\n"
},
{
"path": "meta/meeting-notes/2017-12-08-weekly-meeting.md",
"chars": 91,
"preview": "# Draft.js Weekly 12/08/17\n\n* Review ongoing work on experimental feature\n* Need to fix CI\n"
},
{
"path": "meta/meeting-notes/2017-12-15-weekly-meeting.md",
"chars": 122,
"preview": "# Draft.js Weekly 12/15/17\n\n* Discussed issues which arise when using Draft.js with React's \"async\n scheduling\" enabled"
},
{
"path": "meta/meeting-notes/2018-01-05-weekly-meeting.md",
"chars": 398,
"preview": "# Draft.js Weekly 01/05/18\n\n* Docusaurus migration almost complete, thanks @aadsm\n* Update on experimental features\n * "
},
{
"path": "meta/meeting-notes/2018-01-19-weekly-meeting.md",
"chars": 71,
"preview": "# Draft.js Weekly 01/19/18\n\n* Tried to fix CI, linting inconsistencies\n"
},
{
"path": "meta/meeting-notes/2018-01-26-weekly-meeting.md",
"chars": 924,
"preview": "# Draft.js Weekly 01/26/18\n\n* Switching to biweekly for a while\n* Discussed support for upcoming API changes in React in"
},
{
"path": "meta/meeting-notes/2018-02-08-weekly-meeting.md",
"chars": 4960,
"preview": "# Draft.js Weekly 02/08/18\n\n* Intros - welcome to Twitter web team! 🎉\n* Discussion:\n * Twitter team planning to try D"
},
{
"path": "meta/meeting-notes/2018-02-23-weekly-meeting.md",
"chars": 1019,
"preview": "# Draft.js Weekly 02/08/18\n\n* DELAYED until next week: Demo of new filesize tracking courtesy of Alan Norbauer\n * in"
},
{
"path": "meta/meeting-notes/2018-09-07-meeting.md",
"chars": 3595,
"preview": "# Draft.js Meeting Notes - 9/7\n## Attendees\n- Claudio (Facebook, data center tools team in Dublin)\n- Flarnie (Facebook, "
},
{
"path": "meta/meeting-notes/2018-10-12-meeting.md",
"chars": 4030,
"preview": "# Draft.js Meeting Notes - 10/12\n\n## Attendees\nClaudio Procida, Flarnie Marchan, Julian Krispel, Marco Botto, Nivedita C"
},
{
"path": "meta/roadmaps/2017-h1.md",
"chars": 2041,
"preview": "# H1 2017 Roadmap Update\n\n**tldr:** Our first goal is to achieve stability by catching up on releases, bug fixes, issues"
},
{
"path": "package.json",
"chars": 3777,
"preview": "{\n \"name\": \"draft-js\",\n \"description\": \"A React framework for building text editors.\",\n \"version\": \"0.11.7\",\n \"keywo"
},
{
"path": "prettier.config.js",
"chars": 498,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "scripts/jest/hasteImpl.js",
"chars": 1666,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "scripts/jest/preprocessor.js",
"chars": 1372,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "scripts/jest/shims.js",
"chars": 313,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "scripts/module-map.js",
"chars": 626,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/.flowconfig",
"chars": 1747,
"preview": "[ignore]\n.*/__tests__.*\n.*/react/node_modules/.*\n.*/react-dom/node_modules/.*\n.*/fbjs/node_modules/.*\n.*/node_modules/in"
},
{
"path": "src/Draft.js",
"chars": 2320,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/NonASCIIStringSnapshotSerializer.js",
"chars": 1238,
"preview": "/**\n * (c) Meta Platforms, Inc. and affiliates. Confidential and proprietary.\n *\n * @flow strict-local\n * @format\n * @on"
},
{
"path": "src/__mocks__/generateRandomKey.js",
"chars": 331,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/DraftEditor.css",
"chars": 1566,
"preview": "/**\n * (c) Meta Platforms, Inc. and affiliates. Confidential and proprietary.\n *\n * This source code is licensed under t"
},
{
"path": "src/component/base/DraftEditor.react.js",
"chars": 23572,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/DraftEditorFlushControlled.js",
"chars": 425,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/DraftEditorPlaceholder.css",
"chars": 519,
"preview": "/**\n * (c) Meta Platforms, Inc. and affiliates. Confidential and proprietary.\n *\n * This source code is licensed under t"
},
{
"path": "src/component/base/DraftEditorPlaceholder.react.js",
"chars": 2157,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/DraftEditorProps.js",
"chars": 8535,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/DraftScrollPosition.js",
"chars": 331,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/DraftTextAlignment.js",
"chars": 317,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/__tests__/DraftEditor.react-test.js",
"chars": 3894,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/base/__tests__/__snapshots__/DraftEditor.react-test.js.snap",
"chars": 157,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`must has editorKey same as props 1`] = `\"hash\"`;\n\nexports[`must has"
},
{
"path": "src/component/contents/DraftEditorBlock.react.js",
"chars": 8345,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/DraftEditorContents-core.react.js",
"chars": 8847,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/DraftEditorLeaf.react.js",
"chars": 5491,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/DraftEditorTextNode.react.js",
"chars": 3714,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/__tests__/DraftEditorBlock.react-test.js",
"chars": 13867,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/__tests__/DraftEditorContents.react-test.js",
"chars": 2178,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/__tests__/DraftEditorTextNode-test.js",
"chars": 6957,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/__tests__/__snapshots__/DraftEditorBlock.react-test.js.snap",
"chars": 3294,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`must allow update when \\`block\\` has changed 1`] = `1`;\n\nexports[`m"
},
{
"path": "src/component/contents/exploration/DraftEditorBlockNode.react.js",
"chars": 11508,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/exploration/DraftEditorContentsExperimental.react.js",
"chars": 6314,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/exploration/DraftEditorDecoratedLeaves.react.js",
"chars": 2504,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/exploration/DraftEditorNode.react.js",
"chars": 3762,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/exploration/__tests__/DraftEditorBlockNode.react-test.js",
"chars": 12440,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/exploration/__tests__/DraftEditorContentsExperimental.react-test.js",
"chars": 3122,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/contents/exploration/__tests__/__snapshots__/DraftEditorBlockNode.react-test.js.snap",
"chars": 14546,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders block with child that have wrapperElement 1`] = `\n<blockquo"
},
{
"path": "src/component/contents/exploration/__tests__/__snapshots__/DraftEditorContentsExperimental.react-test.js.snap",
"chars": 3449,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders ContentBlockNode 1`] = `\n<div\n data-contents=\"true\"\n>\n <b"
},
{
"path": "src/component/handlers/DraftEditorModes.js",
"chars": 906,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/composition/DOMObserver.js",
"chars": 4958,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/composition/DraftEditorCompositionHandler.js",
"chars": 9220,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/composition/__tests__/DraftEditorCompostionHandler-test.js",
"chars": 7172,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/drag/DraftEditorDragHandler.js",
"chars": 5323,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/DraftEditorEditHandler.js",
"chars": 1681,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/__tests__/__snapshots__/editOnBeforeInput-test.js.snap",
"chars": 2372,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`editor is updated with new text if it does not match current select"
},
{
"path": "src/component/handlers/edit/__tests__/editOnBeforeInput-test.js",
"chars": 6627,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/__tests__/editOnBlur-test.js",
"chars": 2889,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/__tests__/editOnInput-test.js",
"chars": 3416,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/SecondaryClipboard.js",
"chars": 2443,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/__tests__/SecondaryClipboard-test.js",
"chars": 4244,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/__tests__/__snapshots__/SecondaryClipboard-test.js.snap",
"chars": 14307,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`at the end of an intermediate block, cut merges with the adjacent c"
},
{
"path": "src/component/handlers/edit/commands/__tests__/__snapshots__/removeTextWithStrategy-test.js.snap",
"chars": 18003,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`across blocks with forward delete is a no-op 1`] = `\nObject {\n \"A\""
},
{
"path": "src/component/handlers/edit/commands/__tests__/removeTextWithStrategy-test.js",
"chars": 6909,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandBackspaceToStartOfLine.js",
"chars": 2003,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandBackspaceWord.js",
"chars": 1580,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandDeleteWord.js",
"chars": 1474,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandInsertNewline.js",
"chars": 665,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandMoveSelectionToEndOfBlock.js",
"chars": 966,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandMoveSelectionToStartOfBlock.js",
"chars": 1023,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandPlainBackspace.js",
"chars": 1655,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandPlainDelete.js",
"chars": 1636,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandTransposeCharacters.js",
"chars": 2470,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/keyCommandUndo.js",
"chars": 1538,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/moveSelectionBackward.js",
"chars": 1701,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/moveSelectionForward.js",
"chars": 1538,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/commands/removeTextWithStrategy.js",
"chars": 2530,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/editOnBeforeInput.js",
"chars": 10630,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/editOnBlur.js",
"chars": 2023,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/editOnCompositionStart.js",
"chars": 880,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/editOnCopy.js",
"chars": 991,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/editOnCut.js",
"chars": 2301,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
},
{
"path": "src/component/handlers/edit/editOnDragOver.js",
"chars": 542,
"preview": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found i"
}
]
// ... and 238 more files (download for full content)
About this extraction
This page contains the full source code of the facebookarchive/draft-js GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 438 files (2.1 MB), approximately 570.4k tokens, and a symbol index with 364 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.