diff --git a/src/component/handlers/edit/editOnBeforeInput.js b/src/component/handlers/edit/editOnBeforeInput.js index ea7c4dd1f3..61f9f3b72d 100644 --- a/src/component/handlers/edit/editOnBeforeInput.js +++ b/src/component/handlers/edit/editOnBeforeInput.js @@ -22,6 +22,7 @@ const editOnInput = require('editOnInput'); const getEntityKeyForSelection = require('getEntityKeyForSelection'); const isEventHandled = require('isEventHandled'); const isSelectionAtLeafStart = require('isSelectionAtLeafStart'); +const isSelectionAtBlockEndWithNewLine = require('isSelectionAtBlockEndWithNewLine'); const nullthrows = require('nullthrows'); const setImmediate = require('setImmediate'); @@ -162,6 +163,16 @@ function editOnBeforeInput( editor._latestCommittedEditorState, ); } + + if (!mustPreventNative) { + // When there is \n at the end of the block, there is one extra \n added in DraftEditorLeaf for the content to render properly in browsers + // editOnInput takes care of it, but we must prevent the new char to land natively between the two + // as in that case the check in editOnInput wouldn't detect the situation properly + mustPreventNative = isSelectionAtBlockEndWithNewLine( + editor._latestCommittedEditorState, + ); + } + if (!mustPreventNative) { // Let's say we have a decorator that highlights hashtags. In many cases // we need to prevent native behavior and rerender ourselves -- diff --git a/src/component/selection/isSelectionAtBlockEndWithNewLine.js b/src/component/selection/isSelectionAtBlockEndWithNewLine.js new file mode 100644 index 0000000000..1d426acdcf --- /dev/null +++ b/src/component/selection/isSelectionAtBlockEndWithNewLine.js @@ -0,0 +1,25 @@ +/** + * 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. + * + * @emails oncall+draft_js + * @flow strict-local + * @format + */ +'use strict'; + +import type EditorState from 'EditorState'; + +function isSelectionAtBlockEndWithNewLine(editorState: EditorState): boolean { + const selection = editorState.getSelection(); + const anchorKey = selection.getAnchorKey(); + const offset = selection.getStartOffset(); + + const block = editorState.getCurrentContent().getBlockForKey(anchorKey); + + return block.getLength() === offset && block.getText()[offset - 1] === '\n'; +} + +module.exports = isSelectionAtBlockEndWithNewLine;