Skip to content
This repository was archived by the owner on Feb 6, 2023. It is now read-only.

Commit 9a9ccbd

Browse files
walaurafacebook-github-bot
authored andcommitted
formatPastedText prop
Summary: A missing use case for draft i've ran into a couple times is that when text is pasted, there are ways to override the default paste handler and do your own thing. Overriding the default paste handler means you have to manage your own fragment, have logic to handle html potentially, and then insert the blocks you generate in the proper place relative to the cursor and selection. More often than not, this seems overkill? An example: (and the reason I'm posting this RFC) is that i'm trying to turn leading tabs into spaces when pasting markdown lists, since they can't be parsed. Users can't actually _type_ a tab so this is only a problem on pastes. Reimplementing the paste handler for this is doable but using the proposed method, it's implementation becomes a oneliner. ## Precedent There's some precedent to this type of handler. `blockRendererFn` and `blockStyleFn` both plug into a similar way, overriding the default implementation. Then `handlePastedText` of course works similarly and I decided to copy its signature, when it comes to naming all `handle*` functions return a handle, which is not what we want in this case. ## Q's Handling html might be a bit smelly? it is doable but you really don't wanna transform raw html to raw html, at that point you do wanna replace the paste handler. What I've done is that it's the responsibility of `formatPastedText` to pass the html result through or eat it up and return undefined, formatting only the static text. I'd be cool with just assuming that if `formatPastedText` exists, we ignore `html` automatically, and that simplifies the signature Reviewed By: claudiopro Differential Revision: D22574367 fbshipit-source-id: afe1fac1bb11328e354805161cf9489a77245eff
1 parent 862a5b2 commit 9a9ccbd

File tree

2 files changed

+20
-4
lines changed

2 files changed

+20
-4
lines changed

src/component/base/DraftEditorProps.js

+4
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@ export type DraftEditorProps = {
8181
// use case should not have any block or inline styles, it is recommended
8282
// that you set this to `true`.
8383
stripPastedStyles: boolean,
84+
formatPastedText?: (
85+
text: string,
86+
html: ?string,
87+
) => {text: string, html: ?string},
8488
tabIndex?: number,
8589
// exposed especially to help improve mobile web behaviors
8690
autoCapitalize?: string,

src/component/handlers/edit/editOnPaste.js

+16-4
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,18 @@ function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
9494
}
9595

9696
let textBlocks: Array<string> = [];
97-
const text: string = (data.getText(): any);
98-
const html: string = (data.getHTML(): any);
97+
let text: string = (data.getText(): any);
98+
let html: string = (data.getHTML(): any);
9999
const editorState = editor._latestEditorState;
100100

101+
if (editor.props.formatPastedText) {
102+
const {
103+
text: formattedText,
104+
html: formattedHtml,
105+
} = editor.props.formatPastedText(text, html);
106+
text = formattedText;
107+
html = ((formattedHtml: any): string);
108+
}
101109
if (
102110
editor.props.handlePastedText &&
103111
isEventHandled(editor.props.handlePastedText(text, html, editorState))
@@ -118,11 +126,15 @@ function editOnPaste(editor: DraftEditor, e: SyntheticClipboardEvent<>): void {
118126
// editor in Firefox and IE will not include empty lines. The resulting
119127
// paste will preserve the newlines correctly.
120128
const internalClipboard = editor.getClipboard();
121-
if (data.isRichText() && internalClipboard) {
129+
if (
130+
!editor.props.formatPastedText &&
131+
data.isRichText() &&
132+
internalClipboard
133+
) {
122134
if (
123135
// If the editorKey is present in the pasted HTML, it should be safe to
124136
// assume this is an internal paste.
125-
html.indexOf(editor.getEditorKey()) !== -1 ||
137+
html?.indexOf(editor.getEditorKey()) !== -1 ||
126138
// The copy may have been made within a single block, in which case the
127139
// editor key won't be part of the paste. In this case, just check
128140
// whether the pasted text matches the internal clipboard.

0 commit comments

Comments
 (0)