From e8d101121fb9dd9203a46d899124a7be4b0b2936 Mon Sep 17 00:00:00 2001 From: alex bumbu Date: Thu, 7 Sep 2017 16:10:56 -0700 Subject: [PATCH] Preserve block style when pasting plain text Summary: Preserve block style when pasting plain text. That would allow pasting into code blocks and lists and applying respective styles to new blocks. That should work for any type of block: code, list, quote, heading... Probably related github issues: - https://github.com/facebook/draft-js/issues/1276 - https://github.com/facebook/draft-js/issues/1219 Reviewed By: sophiebits Differential Revision: D5786405 fbshipit-source-id: 3c6d074b0c3fe200761164ec6c5ccf1a82df5072 --- src/component/handlers/edit/editOnPaste.js | 13 ++++++++++++- src/model/paste/DraftPasteProcessor.js | 4 +++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/component/handlers/edit/editOnPaste.js b/src/component/handlers/edit/editOnPaste.js index 1d248c85a9..d3e6cf05f7 100644 --- a/src/component/handlers/edit/editOnPaste.js +++ b/src/component/handlers/edit/editOnPaste.js @@ -22,6 +22,7 @@ var DataTransfer = require('DataTransfer'); var DraftModifier = require('DraftModifier'); var DraftPasteProcessor = require('DraftPasteProcessor'); var EditorState = require('EditorState'); +var RichTextEditorUtil = require('RichTextEditorUtil'); var getEntityKeyForSelection = require('getEntityKeyForSelection'); var getTextContentFromFiles = require('getTextContentFromFiles'); @@ -64,8 +65,15 @@ function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void { editorState.getSelection(), ), }); + var currentBlockType = RichTextEditorUtil.getCurrentBlockType( + editorState, + ); - var text = DraftPasteProcessor.processText(blocks, character); + var text = DraftPasteProcessor.processText( + blocks, + character, + currentBlockType, + ); var fragment = BlockMapBuilder.createFromArray(text); var withInsertedText = DraftModifier.replaceWithFragment( @@ -178,9 +186,12 @@ function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void { ), }); + var currentBlockType = RichTextEditorUtil.getCurrentBlockType(editorState); + var textFragment = DraftPasteProcessor.processText( textBlocks, character, + currentBlockType, ); var textMap = BlockMapBuilder.createFromArray(textFragment); diff --git a/src/model/paste/DraftPasteProcessor.js b/src/model/paste/DraftPasteProcessor.js index 0022b5dd18..f4f46550a3 100644 --- a/src/model/paste/DraftPasteProcessor.js +++ b/src/model/paste/DraftPasteProcessor.js @@ -14,6 +14,7 @@ 'use strict'; import type {DraftBlockRenderMap} from 'DraftBlockRenderMap'; +import type {DraftBlockType} from 'DraftBlockType'; import type {EntityMap} from 'EntityMap'; const CharacterMetadata = require('CharacterMetadata'); @@ -46,13 +47,14 @@ const DraftPasteProcessor = { processText( textBlocks: Array, character: CharacterMetadata, + type: DraftBlockType, ): Array { return textBlocks.map( textLine => { textLine = sanitizeDraftText(textLine); return new ContentBlock({ key: generateRandomKey(), - type: 'unstyled', + type, text: textLine, characterList: List(Repeat(character, textLine.length)), });