draft-js - npm Package Compare versions
Comparing version 0.11.0-beta2 to 0.11.0-beta3
@@ -13,6 +13,6 @@ /** | ||
| var applyEntityToContentBlock = require("./applyEntityToContentBlock"); | ||
| var Immutable = require("immutable"); | ||
| var applyEntityToContentBlock = require("./applyEntityToContentBlock"); | ||
| function applyEntityToContentState(contentState, selectionState, entityKey) { | ||
@@ -19,0 +19,0 @@ var blockMap = contentState.getBlockMap(); |
@@ -13,4 +13,2 @@ /** | ||
| var Immutable = require("immutable"); | ||
| var emptyFunction = require("fbjs/lib/emptyFunction"); | ||
@@ -20,2 +18,4 @@ | ||
| var Immutable = require("immutable"); | ||
| var List = Immutable.List, | ||
@@ -22,0 +22,0 @@ Repeat = Immutable.Repeat, |
@@ -17,6 +17,6 @@ /** | ||
| var findRangesImmutable = require("./findRangesImmutable"); | ||
| var Immutable = require("immutable"); | ||
| var findRangesImmutable = require("./findRangesImmutable"); | ||
| var List = Immutable.List, | ||
@@ -23,0 +23,0 @@ Map = Immutable.Map, |
@@ -23,6 +23,6 @@ /** | ||
| var findRangesImmutable = require("./findRangesImmutable"); | ||
| var Immutable = require("immutable"); | ||
| var findRangesImmutable = require("./findRangesImmutable"); | ||
| var List = Immutable.List, | ||
@@ -72,8 +72,10 @@ Map = Immutable.Map, | ||
| /*#__PURE__*/ | ||
| function (_Record) { | ||
| _inheritsLoose(ContentBlockNode, _Record); | ||
| function (_ref) { | ||
| _inheritsLoose(ContentBlockNode, _ref); | ||
| function ContentBlockNode() { | ||
| var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultRecord; | ||
| return _Record.call(this, decorateCharacterList(props)) || this; | ||
| /* eslint-disable-next-line constructor-super */ | ||
| return _ref.call(this, decorateCharacterList(props)) || this; | ||
| } | ||
@@ -80,0 +82,0 @@ |
@@ -25,4 +25,2 @@ /** | ||
| var Immutable = require("immutable"); | ||
| var SelectionState = require("./SelectionState"); | ||
@@ -34,2 +32,4 @@ | ||
| var Immutable = require("immutable"); | ||
| var sanitizeDraftText = require("./sanitizeDraftText"); | ||
@@ -36,0 +36,0 @@ |
@@ -60,3 +60,3 @@ /** | ||
| var knownListItemDepthClasses = (_knownListItemDepthCl = {}, _defineProperty(_knownListItemDepthCl, cx('public/DraftStyleDefault/depth0'), 0), _defineProperty(_knownListItemDepthCl, cx('public/DraftStyleDefault/depth1'), 1), _defineProperty(_knownListItemDepthCl, cx('public/DraftStyleDefault/depth2'), 2), _defineProperty(_knownListItemDepthCl, cx('public/DraftStyleDefault/depth3'), 3), _defineProperty(_knownListItemDepthCl, cx('public/DraftStyleDefault/depth4'), 4), _knownListItemDepthCl); | ||
| var HTMLTagToInlineStyleMap = Map({ | ||
| var HTMLTagToRawInlineStyleMap = Map({ | ||
| b: 'BOLD', | ||
@@ -149,2 +149,46 @@ code: 'CODE', | ||
| /** | ||
| * Try to guess the inline style of an HTML element based on its css | ||
| * styles (font-weight, font-style and text-decoration). | ||
| */ | ||
| var styleFromNodeAttributes = function styleFromNodeAttributes(node) { | ||
| var style = OrderedSet(); | ||
| if (!(node instanceof HTMLElement)) { | ||
| return style; | ||
| } | ||
| var htmlElement = node; | ||
| var fontWeight = htmlElement.style.fontWeight; | ||
| var fontStyle = htmlElement.style.fontStyle; | ||
| var textDecoration = htmlElement.style.textDecoration; | ||
| return style.withMutations(function (style) { | ||
| if (boldValues.indexOf(fontWeight) >= 0) { | ||
| style.add('BOLD'); | ||
| } else if (notBoldValues.indexOf(fontWeight) >= 0) { | ||
| style.remove('BOLD'); | ||
| } | ||
| if (fontStyle === 'italic') { | ||
| style.add('ITALIC'); | ||
| } else if (fontStyle === 'normal') { | ||
| style.remove('ITALIC'); | ||
| } | ||
| if (textDecoration === 'underline') { | ||
| style.add('UNDERLINE'); | ||
| } | ||
| if (textDecoration === 'line-through') { | ||
| style.add('STRIKETHROUGH'); | ||
| } | ||
| if (textDecoration === 'none') { | ||
| style.remove('UNDERLINE'); | ||
| style.remove('STRIKETHROUGH'); | ||
| } | ||
| }); | ||
| }; | ||
| /** | ||
| * Determine if a nodeName is a list type, 'ul' or 'ol' | ||
@@ -200,3 +244,3 @@ */ | ||
| _defineProperty(this, "currentDepth", -1); | ||
| _defineProperty(this, "currentDepth", 0); | ||
@@ -209,3 +253,3 @@ _defineProperty(this, "currentEntity", null); | ||
| _defineProperty(this, "wrapper", 'ul'); | ||
| _defineProperty(this, "wrapper", null); | ||
@@ -237,3 +281,3 @@ _defineProperty(this, "blockConfigs", []); | ||
| this.currentBlockType = 'unstyled'; | ||
| this.currentDepth = -1; | ||
| this.currentDepth = 0; | ||
| this.currentEntity = null; | ||
@@ -243,3 +287,3 @@ this.currentStyle = OrderedSet(); | ||
| this.entityMap = DraftEntity; | ||
| this.wrapper = 'ul'; | ||
| this.wrapper = null; | ||
| this.contentBlocks = []; | ||
@@ -255,3 +299,4 @@ } | ||
| this.contentBlocks = []; // Converts the HTML node to block config | ||
| this.contentBlocks = []; | ||
| this.currentDepth = 0; // Converts the HTML node to block config | ||
@@ -297,3 +342,3 @@ (_this$blockConfigs = this.blockConfigs).push.apply(_this$blockConfigs, this._toBlockConfigs([node])); // There might be some left over text in the builder's | ||
| _proto.addStyle = function addStyle(inlineStyle) { | ||
| this.currentStyle = this.currentStyle.add(inlineStyle); | ||
| this.currentStyle = this.currentStyle.union(inlineStyle); | ||
| } | ||
@@ -306,3 +351,3 @@ /** | ||
| _proto.removeStyle = function removeStyle(inlineStyle) { | ||
| this.currentStyle = this.currentStyle.remove(inlineStyle); | ||
| this.currentStyle = this.currentStyle.subtract(inlineStyle); | ||
| } // ***********************************WARNING****************************** | ||
@@ -326,3 +371,3 @@ // The methods below this line are private - don't call them directly. | ||
| characterList: this.characterList, | ||
| depth: Math.max(0, this.currentDepth), | ||
| depth: this.currentDepth, | ||
| parent: null, | ||
@@ -337,3 +382,2 @@ children: List(), | ||
| this.currentBlockType = 'unstyled'; | ||
| this.currentDepth = -1; | ||
| this.currentText = ''; | ||
@@ -429,2 +473,8 @@ return block; | ||
| if (nodeName === 'br') { | ||
| this._addBreakNode(node); | ||
| continue; | ||
| } | ||
| if (isValidImage(node)) { | ||
@@ -442,15 +492,9 @@ this._addImgNode(node); | ||
| var inlineStyle = HTMLTagToInlineStyleMap.get(nodeName); | ||
| if (inlineStyle !== undefined) { | ||
| this.addStyle(inlineStyle); | ||
| } | ||
| var inlineStyle = HTMLTagToRawInlineStyleMap.has(nodeName) ? OrderedSet.of(HTMLTagToRawInlineStyleMap.get(nodeName)) : OrderedSet(); | ||
| var attributesStyle = styleFromNodeAttributes(node); | ||
| this.addStyle(inlineStyle); | ||
| this.addStyle(attributesStyle); | ||
| blockConfigs.push.apply(blockConfigs, this._toBlockConfigs(Array.from(node.childNodes))); | ||
| if (inlineStyle !== undefined) { | ||
| this.removeStyle(inlineStyle); | ||
| } | ||
| this._updateStyleFromNodeAttributes(node); | ||
| this.removeStyle(attributesStyle); | ||
| this.removeStyle(inlineStyle); | ||
| } | ||
@@ -524,2 +568,10 @@ | ||
| this._appendText(text); | ||
| }; | ||
| _proto._addBreakNode = function _addBreakNode(node) { | ||
| if (!(node instanceof HTMLBRElement)) { | ||
| return; | ||
| } | ||
| this._appendText('\n'); | ||
| } | ||
@@ -590,43 +642,2 @@ /** | ||
| /** | ||
| * Try to guess the inline style of an HTML element based on its css | ||
| * styles (font-weight, font-style and text-decoration). | ||
| */ | ||
| ; | ||
| _proto._updateStyleFromNodeAttributes = function _updateStyleFromNodeAttributes(node) { | ||
| if (!(node instanceof HTMLElement)) { | ||
| return; | ||
| } | ||
| var htmlElement = node; | ||
| var fontWeight = htmlElement.style.fontWeight; | ||
| var fontStyle = htmlElement.style.fontStyle; | ||
| var textDecoration = htmlElement.style.textDecoration; | ||
| if (boldValues.indexOf(fontWeight) >= 0) { | ||
| this.addStyle('BOLD'); | ||
| } else if (notBoldValues.indexOf(fontWeight) >= 0) { | ||
| this.removeStyle('BOLD'); | ||
| } | ||
| if (fontStyle === 'italic') { | ||
| this.addStyle('ITALIC'); | ||
| } else if (fontStyle === 'normal') { | ||
| this.removeStyle('ITALIC'); | ||
| } | ||
| if (textDecoration === 'underline') { | ||
| this.addStyle('UNDERLINE'); | ||
| } | ||
| if (textDecoration === 'line-through') { | ||
| this.addStyle('STRIKETHROUGH'); | ||
| } | ||
| if (textDecoration === 'none') { | ||
| this.removeStyle('UNDERLINE'); | ||
| this.removeStyle('STRIKETHROUGH'); | ||
| } | ||
| } | ||
| /** | ||
| * Walk the BlockConfig tree, compute parent/children/siblings, | ||
@@ -633,0 +644,0 @@ * and generate the corresponding ContentBlockNode |
@@ -13,7 +13,7 @@ /** | ||
| var UnicodeUtils = require("fbjs/lib/UnicodeUtils"); | ||
| var _require = require("immutable"), | ||
| OrderedSet = _require.OrderedSet; | ||
| var UnicodeUtils = require("fbjs/lib/UnicodeUtils"); | ||
| var substr = UnicodeUtils.substr; | ||
@@ -20,0 +20,0 @@ var EMPTY_SET = OrderedSet(); |
@@ -13,5 +13,2 @@ /** | ||
| var _require = require("immutable"), | ||
| Map = _require.Map; | ||
| var React = require("react"); | ||
@@ -21,2 +18,5 @@ | ||
| var _require = require("immutable"), | ||
| Map = _require.Map; | ||
| var UL_WRAP = React.createElement("ul", { | ||
@@ -23,0 +23,0 @@ className: cx('public/DraftStyleDefault/ul') |
@@ -267,3 +267,3 @@ /** | ||
| var alreadyHasFocus = editorState.getSelection().getHasFocus(); | ||
| var editorNode = ReactDOM.findDOMNode(_this.editor); | ||
| var editorNode = _this.editor; | ||
@@ -301,3 +301,3 @@ if (!editorNode) { | ||
| _defineProperty(_assertThisInitialized(_this), "blur", function () { | ||
| var editorNode = ReactDOM.findDOMNode(_this.editor); | ||
| var editorNode = _this.editor; | ||
| !(editorNode instanceof HTMLElement) ? process.env.NODE_ENV !== "production" ? invariant(false, 'editorNode is not an HTMLElement') : invariant(false) : void 0; | ||
@@ -308,3 +308,26 @@ editorNode.blur(); | ||
| _defineProperty(_assertThisInitialized(_this), "setMode", function (mode) { | ||
| _this._handler = handlerMap[mode]; | ||
| var _this$props = _this.props, | ||
| onPaste = _this$props.onPaste, | ||
| onCut = _this$props.onCut, | ||
| onCopy = _this$props.onCopy; | ||
| var editHandler = _objectSpread({}, handlerMap.edit); | ||
| if (onPaste) { | ||
| editHandler.onPaste = onPaste; | ||
| } | ||
| if (onCut) { | ||
| editHandler.onCut = onCut; | ||
| } | ||
| if (onCopy) { | ||
| editHandler.onCopy = onCopy; | ||
| } | ||
| var handler = _objectSpread({}, handlerMap, { | ||
| edit: editHandler | ||
| }); | ||
| _this._handler = handler[mode]; | ||
| }); | ||
@@ -456,12 +479,12 @@ | ||
| var _this$props = this.props, | ||
| blockRenderMap = _this$props.blockRenderMap, | ||
| blockRendererFn = _this$props.blockRendererFn, | ||
| blockStyleFn = _this$props.blockStyleFn, | ||
| customStyleFn = _this$props.customStyleFn, | ||
| customStyleMap = _this$props.customStyleMap, | ||
| editorState = _this$props.editorState, | ||
| readOnly = _this$props.readOnly, | ||
| textAlignment = _this$props.textAlignment, | ||
| textDirectionality = _this$props.textDirectionality; | ||
| var _this$props2 = this.props, | ||
| blockRenderMap = _this$props2.blockRenderMap, | ||
| blockRendererFn = _this$props2.blockRendererFn, | ||
| blockStyleFn = _this$props2.blockStyleFn, | ||
| customStyleFn = _this$props2.customStyleFn, | ||
| customStyleMap = _this$props2.customStyleMap, | ||
| editorState = _this$props2.editorState, | ||
| readOnly = _this$props2.readOnly, | ||
| textAlignment = _this$props2.textAlignment, | ||
| textDirectionality = _this$props2.textDirectionality; | ||
| var rootClass = cx({ | ||
@@ -468,0 +491,0 @@ 'DraftEditor/root': true, |
@@ -17,4 +17,8 @@ /** | ||
| function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var DraftEditorLeaf = require("./DraftEditorLeaf.react"); | ||
@@ -26,4 +30,2 @@ | ||
| var ReactDOM = require("react-dom"); | ||
| var Scroll = require("fbjs/lib/Scroll"); | ||
@@ -71,3 +73,13 @@ | ||
| function DraftEditorBlock() { | ||
| return _React$Component.apply(this, arguments) || this; | ||
| var _this; | ||
| for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; | ||
| _defineProperty(_assertThisInitialized(_this), "_node", void 0); | ||
| return _this; | ||
| } | ||
@@ -102,3 +114,8 @@ | ||
| var blockNode = ReactDOM.findDOMNode(this); | ||
| var blockNode = this._node; | ||
| if (blockNode == null) { | ||
| return; | ||
| } | ||
| var scrollParent = Style.getScrollParent(blockNode); | ||
@@ -130,3 +147,3 @@ var scrollPosition = getScrollPosition(scrollParent); | ||
| _proto._renderChildren = function _renderChildren() { | ||
| var _this = this; | ||
| var _this2 = this; | ||
@@ -150,8 +167,8 @@ var block = this.props.block; | ||
| start: start, | ||
| selection: hasSelection ? _this.props.selection : null, | ||
| forceSelection: _this.props.forceSelection, | ||
| selection: hasSelection ? _this2.props.selection : null, | ||
| forceSelection: _this2.props.forceSelection, | ||
| text: text.slice(start, end), | ||
| styleSet: block.getInlineStyleAt(start), | ||
| customStyleMap: _this.props.customStyleMap, | ||
| customStyleFn: _this.props.customStyleFn, | ||
| customStyleMap: _this2.props.customStyleMap, | ||
| customStyleFn: _this2.props.customStyleFn, | ||
| isLast: ii === lastLeafSet && jj === lastLeaf | ||
@@ -166,7 +183,7 @@ }); | ||
| if (!_this.props.decorator) { | ||
| if (!_this2.props.decorator) { | ||
| return leaves; | ||
| } | ||
| var decorator = nullthrows(_this.props.decorator); | ||
| var decorator = nullthrows(_this2.props.decorator); | ||
| var DecoratorComponent = decorator.getComponentForKey(decoratorKey); | ||
@@ -186,5 +203,5 @@ | ||
| var dir = UnicodeBidiDirection.getHTMLDirIfDifferent(UnicodeBidi.getDirection(decoratedText), _this.props.direction); | ||
| var dir = UnicodeBidiDirection.getHTMLDirIfDifferent(UnicodeBidi.getDirection(decoratedText), _this2.props.direction); | ||
| var commonProps = { | ||
| contentState: _this.props.contentState, | ||
| contentState: _this2.props.contentState, | ||
| decoratedText: decoratedText, | ||
@@ -204,2 +221,4 @@ dir: dir, | ||
| _proto.render = function render() { | ||
| var _this3 = this; | ||
| var _this$props = this.props, | ||
@@ -215,3 +234,6 @@ direction = _this$props.direction, | ||
| "data-offset-key": offsetKey, | ||
| className: className | ||
| className: className, | ||
| ref: function ref(_ref) { | ||
| return _this3._node = _ref; | ||
| } | ||
| }, this._renderChildren()); | ||
@@ -218,0 +240,0 @@ }; |
@@ -11,4 +11,2 @@ /** | ||
| */ | ||
| /*eslint-disable no-bitwise*/ | ||
| 'use strict'; | ||
@@ -15,0 +13,0 @@ /** |
@@ -13,4 +13,8 @@ /** | ||
| var DOMObserver = require("./DOMObserver"); | ||
| var DraftModifier = require("./DraftModifier"); | ||
| var DraftOffsetKey = require("./DraftOffsetKey"); | ||
| var EditorState = require("./EditorState"); | ||
@@ -20,9 +24,11 @@ | ||
| var getEntityKeyForSelection = require("./getEntityKeyForSelection"); | ||
| var editOnSelect = require("./editOnSelect"); | ||
| var gkx = require("./gkx"); | ||
| var getContentEditableContainer = require("./getContentEditableContainer"); | ||
| var isEventHandled = require("./isEventHandled"); | ||
| var getDraftEditorSelection = require("./getDraftEditorSelection"); | ||
| var isSelectionAtLeafStart = require("./isSelectionAtLeafStart"); | ||
| var getEntityKeyForSelection = require("./getEntityKeyForSelection"); | ||
| var nullthrows = require("fbjs/lib/nullthrows"); | ||
| /** | ||
@@ -50,8 +56,12 @@ * Millisecond delay to allow `compositionstart` to fire again upon | ||
| var stillComposing = false; | ||
| var textInputData = ''; | ||
| var domObserver = null; | ||
| function startDOMObserver(editor) { | ||
| if (!domObserver) { | ||
| domObserver = new DOMObserver(getContentEditableContainer(editor)); | ||
| domObserver.start(); | ||
| } | ||
| } | ||
| var DraftEditorCompositionHandler = { | ||
| onBeforeInput: function onBeforeInput(editor, e) { | ||
| textInputData = (textInputData || '') + e.data; | ||
| }, | ||
| /** | ||
@@ -63,2 +73,3 @@ * A `compositionstart` event has fired while we're still in composition | ||
| stillComposing = true; | ||
| startDOMObserver(editor); | ||
| }, | ||
@@ -80,3 +91,3 @@ | ||
| */ | ||
| onCompositionEnd: function onCompositionEnd(editor, e) { | ||
| onCompositionEnd: function onCompositionEnd(editor) { | ||
| resolved = false; | ||
@@ -86,6 +97,7 @@ stillComposing = false; | ||
| if (!resolved) { | ||
| DraftEditorCompositionHandler.resolveComposition(editor, e); | ||
| DraftEditorCompositionHandler.resolveComposition(editor); | ||
| } | ||
| }, RESOLVE_DELAY); | ||
| }, | ||
| onSelect: editOnSelect, | ||
@@ -103,3 +115,3 @@ /** | ||
| // composition and reinterpret the key press in edit mode. | ||
| DraftEditorCompositionHandler.resolveComposition(editor, e); | ||
| DraftEditorCompositionHandler.resolveComposition(editor); | ||
@@ -143,3 +155,3 @@ editor._onKeyDown(e); | ||
| */ | ||
| resolveComposition: function resolveComposition(editor, event) { | ||
| resolveComposition: function resolveComposition(editor) { | ||
| if (stillComposing) { | ||
@@ -149,38 +161,68 @@ return; | ||
| var mutations = nullthrows(domObserver).stopAndFlushMutations(); | ||
| domObserver = null; | ||
| resolved = true; | ||
| var composedChars = textInputData; | ||
| textInputData = ''; | ||
| var editorState = EditorState.set(editor._latestEditorState, { | ||
| inCompositionMode: false | ||
| }); | ||
| var currentStyle = editorState.getCurrentInlineStyle(); | ||
| var entityKey = getEntityKeyForSelection(editorState.getCurrentContent(), editorState.getSelection()); | ||
| var mustReset = !composedChars || isSelectionAtLeafStart(editorState) || currentStyle.size > 0 || entityKey !== null; | ||
| editor.exitCurrentMode(); | ||
| if (mustReset) { | ||
| editor.restoreEditorDOM(); | ||
| } | ||
| if (!mutations.size) { | ||
| editor.update(editorState); | ||
| return; | ||
| } // TODO, check if Facebook still needs this flag or if it could be removed. | ||
| // Since there can be multiple mutations providing a `composedChars` doesn't | ||
| // apply well on this new model. | ||
| // if ( | ||
| // gkx('draft_handlebeforeinput_composed_text') && | ||
| // editor.props.handleBeforeInput && | ||
| // isEventHandled( | ||
| // editor.props.handleBeforeInput( | ||
| // composedChars, | ||
| // editorState, | ||
| // event.timeStamp, | ||
| // ), | ||
| // ) | ||
| // ) { | ||
| // return; | ||
| // } | ||
| editor.exitCurrentMode(); | ||
| if (composedChars) { | ||
| if (gkx('draft_handlebeforeinput_composed_text') && editor.props.handleBeforeInput && isEventHandled(editor.props.handleBeforeInput(composedChars, editorState, event.timeStamp))) { | ||
| return; | ||
| } // If characters have been composed, re-rendering with the update | ||
| // is sufficient to reset the editor. | ||
| var contentState = editorState.getCurrentContent(); | ||
| mutations.forEach(function (composedChars, offsetKey) { | ||
| var _DraftOffsetKey$decod = DraftOffsetKey.decode(offsetKey), | ||
| blockKey = _DraftOffsetKey$decod.blockKey, | ||
| decoratorKey = _DraftOffsetKey$decod.decoratorKey, | ||
| leafKey = _DraftOffsetKey$decod.leafKey; | ||
| var _editorState$getBlock = editorState.getBlockTree(blockKey).getIn([decoratorKey, 'leaves', leafKey]), | ||
| start = _editorState$getBlock.start, | ||
| end = _editorState$getBlock.end; | ||
| var contentState = DraftModifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), composedChars, currentStyle, entityKey); | ||
| editor.update(EditorState.push(editorState, contentState, 'insert-characters')); | ||
| return; | ||
| } | ||
| var replacementRange = editorState.getSelection().merge({ | ||
| anchorKey: blockKey, | ||
| focusKey: blockKey, | ||
| anchorOffset: start, | ||
| focusOffset: end, | ||
| isBackward: false | ||
| }); | ||
| var entityKey = getEntityKeyForSelection(contentState, replacementRange); | ||
| var currentStyle = contentState.getBlockForKey(blockKey).getInlineStyleAt(start); | ||
| contentState = DraftModifier.replaceText(contentState, replacementRange, composedChars, currentStyle, entityKey); // We need to update the editorState so the leaf node ranges are properly | ||
| // updated and multiple mutations are correctly applied. | ||
| if (mustReset) { | ||
| editor.update(EditorState.set(editorState, { | ||
| nativelyRenderedContent: null, | ||
| forceSelection: true | ||
| })); | ||
| } | ||
| editorState = EditorState.set(editorState, { | ||
| currentContent: contentState | ||
| }); | ||
| }); // When we apply the text changes to the ContentState, the selection always | ||
| // goes to the end of the field, but it should just stay where it is | ||
| // after compositionEnd. | ||
| var documentSelection = getDraftEditorSelection(editorState, getContentEditableContainer(editor)); | ||
| var compositionEndSelectionState = documentSelection.selectionState; | ||
| editor.restoreEditorDOM(); | ||
| var editorStateWithUpdatedSelection = EditorState.acceptSelection(editorState, compositionEndSelectionState); | ||
| editor.update(EditorState.push(editorStateWithUpdatedSelection, contentState, 'insert-characters')); | ||
| } | ||
| }; | ||
| module.exports = DraftEditorCompositionHandler; |
@@ -25,4 +25,2 @@ /** | ||
| var ReactDOM = require("react-dom"); | ||
| var invariant = require("fbjs/lib/invariant"); | ||
@@ -83,3 +81,3 @@ | ||
| var node = ReactDOM.findDOMNode(this); | ||
| var node = this.leaf; | ||
| !node ? process.env.NODE_ENV !== "production" ? invariant(false, 'Missing node') : invariant(false) : void 0; | ||
@@ -92,6 +90,3 @@ var child = node.firstChild; | ||
| targetNode = child; | ||
| /* $FlowFixMe(>=0.79.1 site=www) This comment suppresses an error found | ||
| * when Flow v0.79 was deployed. To see the error delete this comment and | ||
| * run Flow. */ | ||
| } else if (child.tagName === 'BR') { | ||
| } else if (child instanceof Element && child.tagName === 'BR') { | ||
| targetNode = node; | ||
@@ -107,3 +102,3 @@ } else { | ||
| _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) { | ||
| var leafNode = ReactDOM.findDOMNode(this.leaf); | ||
| var leafNode = this.leaf; | ||
| !leafNode ? process.env.NODE_ENV !== "production" ? invariant(false, 'Missing leafNode') : invariant(false) : void 0; | ||
@@ -110,0 +105,0 @@ var shouldUpdate = leafNode.textContent !== nextProps.text || nextProps.styleSet !== this.props.styleSet || nextProps.forceSelection; |
@@ -21,4 +21,2 @@ /** | ||
| var ReactDOM = require("react-dom"); | ||
| var UserAgent = require("fbjs/lib/UserAgent"); | ||
@@ -51,17 +49,26 @@ | ||
| var NEWLINE_A = useNewlineChar ? React.createElement("span", { | ||
| key: "A", | ||
| "data-text": "true" | ||
| }, '\n') : React.createElement("br", { | ||
| key: "A", | ||
| "data-text": "true" | ||
| }); | ||
| var NEWLINE_B = useNewlineChar ? React.createElement("span", { | ||
| key: "B", | ||
| "data-text": "true" | ||
| }, '\n') : React.createElement("br", { | ||
| key: "B", | ||
| "data-text": "true" | ||
| }); | ||
| var NEWLINE_A = function NEWLINE_A(ref) { | ||
| return useNewlineChar ? React.createElement("span", { | ||
| key: "A", | ||
| "data-text": "true", | ||
| ref: ref | ||
| }, '\n') : React.createElement("br", { | ||
| key: "A", | ||
| "data-text": "true", | ||
| ref: ref | ||
| }); | ||
| }; | ||
| var NEWLINE_B = function NEWLINE_B(ref) { | ||
| return useNewlineChar ? React.createElement("span", { | ||
| key: "B", | ||
| "data-text": "true", | ||
| ref: ref | ||
| }, '\n') : React.createElement("br", { | ||
| key: "B", | ||
| "data-text": "true", | ||
| ref: ref | ||
| }); | ||
| }; | ||
| /** | ||
@@ -87,2 +94,4 @@ * The lowest-level component in a `DraftEditor`, the text node component | ||
| _defineProperty(_assertThisInitialized(_this), "_node", void 0); | ||
| _this._forceFlag = false; | ||
@@ -95,3 +104,3 @@ return _this; | ||
| _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) { | ||
| var node = ReactDOM.findDOMNode(this); | ||
| var node = this._node; | ||
| var shouldBeNewline = nextProps.children === ''; | ||
@@ -116,4 +125,10 @@ !(node instanceof Element) ? process.env.NODE_ENV !== "production" ? invariant(false, 'node is not an Element') : invariant(false) : void 0; | ||
| _proto.render = function render() { | ||
| var _this2 = this; | ||
| if (this.props.children === '') { | ||
| return this._forceFlag ? NEWLINE_A : NEWLINE_B; | ||
| return this._forceFlag ? NEWLINE_A(function (ref) { | ||
| return _this2._node = ref; | ||
| }) : NEWLINE_B(function (ref) { | ||
| return _this2._node = ref; | ||
| }); | ||
| } | ||
@@ -123,3 +138,6 @@ | ||
| key: this._forceFlag ? 'A' : 'B', | ||
| "data-text": "true" | ||
| "data-text": "true", | ||
| ref: function ref(_ref) { | ||
| return _this2._node = _ref; | ||
| } | ||
| }, this.props.children); | ||
@@ -126,0 +144,0 @@ }; |
@@ -11,4 +11,2 @@ /** | ||
| */ | ||
| /*eslint-disable no-bitwise*/ | ||
| 'use strict'; | ||
@@ -15,0 +13,0 @@ /** |
@@ -17,4 +17,2 @@ /** | ||
| var Immutable = require("immutable"); | ||
| var applyEntityToContentState = require("./applyEntityToContentState"); | ||
@@ -28,2 +26,4 @@ | ||
| var Immutable = require("immutable"); | ||
| var insertFragmentIntoContentState = require("./insertFragmentIntoContentState"); | ||
@@ -30,0 +30,0 @@ |
@@ -11,4 +11,2 @@ /** | ||
| */ | ||
| /*eslint-disable no-bitwise*/ | ||
| 'use strict'; | ||
@@ -15,0 +13,0 @@ /** |
@@ -25,2 +25,4 @@ /** | ||
| var keyCommandPlainBackspace = require("./keyCommandPlainBackspace"); | ||
| var nullthrows = require("fbjs/lib/nullthrows"); | ||
@@ -30,2 +32,11 @@ | ||
| var DOUBLE_NEWLINE = '\n\n'; | ||
| function onInputType(inputType, editorState) { | ||
| switch (inputType) { | ||
| case 'deleteContentBackward': | ||
| return keyCommandPlainBackspace(editorState); | ||
| } | ||
| return editorState; | ||
| } | ||
| /** | ||
@@ -44,3 +55,4 @@ * This function is intended to handle spellcheck and autocorrect changes, | ||
| function editOnInput(editor) { | ||
| function editOnInput(editor, e) { | ||
| if (editor._pendingStateFromBeforeInput !== undefined) { | ||
@@ -112,3 +124,20 @@ editor.update(editor._pendingStateFromBeforeInput); | ||
| // so domText is already changed by the browser and ends up being equal | ||
| // to modelText unexpectedly | ||
| // to modelText unexpectedly. | ||
| // Newest versions of Android support the dom-inputevent-inputtype | ||
| // and we can use the `inputType` to properly apply the state changes. | ||
| /* $FlowFixMe inputType is only defined on a draft of a standard. | ||
| * https://w3c.github.io/input-events/#dom-inputevent-inputtype */ | ||
| var inputType = e.nativeEvent.inputType; | ||
| if (inputType) { | ||
| var newEditorState = onInputType(inputType, editorState); | ||
| if (newEditorState !== editorState) { | ||
| editor.restoreEditorDOM(); | ||
| editor.update(newEditorState); | ||
| return; | ||
| } | ||
| } | ||
| return; | ||
@@ -115,0 +144,0 @@ } |
@@ -17,8 +17,6 @@ /** | ||
| var ReactDOM = require("react-dom"); | ||
| var getContentEditableContainer = require("./getContentEditableContainer"); | ||
| var getDraftEditorSelection = require("./getDraftEditorSelection"); | ||
| var invariant = require("fbjs/lib/invariant"); | ||
| function editOnSelect(editor) { | ||
@@ -45,6 +43,3 @@ if (editor._blockSelectEvents || editor._latestEditorState !== editor.props.editorState) { | ||
| var editorState = editor.props.editorState; | ||
| var editorNode = ReactDOM.findDOMNode(editor.editorContainer); | ||
| !editorNode ? process.env.NODE_ENV !== "production" ? invariant(false, 'Missing editorNode') : invariant(false) : void 0; | ||
| !(editorNode.firstChild instanceof HTMLElement) ? process.env.NODE_ENV !== "production" ? invariant(false, 'editorNode.firstChild is not an HTMLElement') : invariant(false) : void 0; | ||
| var documentSelection = getDraftEditorSelection(editorState, editorNode.firstChild); | ||
| var documentSelection = getDraftEditorSelection(editorState, getContentEditableContainer(editor)); | ||
| var updatedSelectionState = documentSelection.selectionState; | ||
@@ -51,0 +46,0 @@ |
@@ -13,6 +13,6 @@ /** | ||
| var UnicodeBidiService = require("fbjs/lib/UnicodeBidiService"); | ||
| var Immutable = require("immutable"); | ||
| var UnicodeBidiService = require("fbjs/lib/UnicodeBidiService"); | ||
| var nullthrows = require("fbjs/lib/nullthrows"); | ||
@@ -19,0 +19,0 @@ |
@@ -23,4 +23,2 @@ /** | ||
| var Immutable = require("immutable"); | ||
| var SampleDraftInlineStyle = require("./SampleDraftInlineStyle"); | ||
@@ -30,2 +28,4 @@ | ||
| var Immutable = require("immutable"); | ||
| var BOLD = SampleDraftInlineStyle.BOLD, | ||
@@ -32,0 +32,0 @@ ITALIC = SampleDraftInlineStyle.ITALIC; |
@@ -15,2 +15,4 @@ /** | ||
| var isSoftNewlineEvent = require("./isSoftNewlineEvent"); | ||
| var isOSX = UserAgent.isPlatform('Mac OS X'); | ||
@@ -34,4 +36,5 @@ var KeyBindingUtil = { | ||
| return isOSX ? !!e.metaKey && !e.altKey : KeyBindingUtil.isCtrlKeyCommand(e); | ||
| } | ||
| }, | ||
| isSoftNewlineEvent: isSoftNewlineEvent | ||
| }; | ||
| module.exports = KeyBindingUtil; |
@@ -27,3 +27,3 @@ /** | ||
| process.env.NODE_ENV !== "production" ? warning(!selection.isCollapsed(), 'moveSelectionBackward should only be called with a collapsed SelectionState') : void 0; | ||
| process.env.NODE_ENV !== "production" ? warning(selection.isCollapsed(), 'moveSelectionBackward should only be called with a collapsed SelectionState') : void 0; | ||
| var content = editorState.getCurrentContent(); | ||
@@ -30,0 +30,0 @@ var key = selection.getStartKey(); |
@@ -27,3 +27,3 @@ /** | ||
| process.env.NODE_ENV !== "production" ? warning(!selection.isCollapsed(), 'moveSelectionForward should only be called with a collapsed SelectionState') : void 0; | ||
| process.env.NODE_ENV !== "production" ? warning(selection.isCollapsed(), 'moveSelectionForward should only be called with a collapsed SelectionState') : void 0; | ||
| var key = selection.getStartKey(); | ||
@@ -30,0 +30,0 @@ var offset = selection.getStartOffset(); |
@@ -15,6 +15,6 @@ /** | ||
| var generateRandomKey = require("./generateRandomKey"); | ||
| var Immutable = require("immutable"); | ||
| var generateRandomKey = require("./generateRandomKey"); | ||
| var OrderedMap = Immutable.OrderedMap; | ||
@@ -21,0 +21,0 @@ |
@@ -38,3 +38,9 @@ /** | ||
| if (blockEnd === selection.getAnchorOffset()) { | ||
| targetRange = selection.set('focusKey', content.getKeyAfter(anchorKey)).set('focusOffset', 0); | ||
| var keyAfter = content.getKeyAfter(anchorKey); | ||
| if (keyAfter == null) { | ||
| return editorState; | ||
| } | ||
| targetRange = selection.set('focusKey', keyAfter).set('focusOffset', 0); | ||
| } else { | ||
@@ -41,0 +47,0 @@ targetRange = selection.set('focusOffset', blockEnd); |
| { | ||
| "name": "draft-js", | ||
| "description": "A React framework for building text editors.", | ||
| "version": "0.11.0-beta2", | ||
| "version": "0.11.0-beta3", | ||
| "keywords": [ | ||
@@ -45,2 +45,3 @@ "draftjs", | ||
| "@babel/core": "^7.3.4", | ||
| "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4", | ||
| "babel-eslint": "^8.1.1", | ||
@@ -52,3 +53,3 @@ "babel-preset-fbjs": "^3.2.0", | ||
| "es6-shim": "^0.34.4", | ||
| "eslint": "^4.2.0", | ||
| "eslint": "^5.16.0", | ||
| "eslint-config-fbjs": "^2.0.0", | ||
@@ -66,3 +67,2 @@ "eslint-config-prettier": "^2.6.0", | ||
| "gulp-babel": "^8.0.0", | ||
| "gulp-browserify-thin": "^0.1.5", | ||
| "gulp-clean-css": "^2.0.3", | ||
@@ -69,0 +69,0 @@ "gulp-concat-css": "^2.2.0", |
@@ -94,2 +94,38 @@ # [Draft.js](http://draftjs.org/) [](https://travis-ci.org/facebook/draft-js) [](https://yarn.pm/draft-js) | ||
| 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'; | ||
| function MyEditor() { | ||
| const [editorState, setEditorState] = React.useState( | ||
| EditorState.createEmpty() | ||
| ); | ||
| const editor = React.useRef(null); | ||
| function focusEditor() { | ||
| editor.current.focus(); | ||
| } | ||
| React.useEffect(() => { | ||
| focusEditor() | ||
| }, []); | ||
| return ( | ||
| <div onClick={focusEditor}> | ||
| <Editor | ||
| ref={editor} | ||
| editorState={editorState} | ||
| onChange={editorState => setEditorState(editorState)} | ||
| /> | ||
| </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. | ||
@@ -132,3 +168,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.html#polyfills)). | ||
| [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.html#polyfills)). | ||
@@ -135,0 +171,0 @@ [2] IME inputs have known issues in these browsers, especially Korean ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls.html#ime-and-internet-explorer)). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.88%
1707399
- Number of package files
- increased by1.22%
333
- Lines of code
- increased by1.93%
26278
- Number of lines in readme file
- increased by23.08%
192
Worsened metrics
- Number of low supply chain risk alerts
- increased by1.27%
80