Support dropping plain text and image files - #3429
Open
Julia Roldi (juliaroldi) wants to merge 7 commits into
Open
Support dropping plain text and image files#3429Julia Roldi (juliaroldi) wants to merge 7 commits into
Julia Roldi (juliaroldi) wants to merge 7 commits into
Conversation
|
Julia Roldi (juliaroldi)
requested review from
Jiuqing Song (JiuqingSong)
and
a lite review from Copilot
August 4, 2026 21:59
Julia Roldi (juliaroldi)
marked this pull request as ready for review
August 4, 2026 22:00
Contributor
There was a problem hiding this comment.
Pull request overview
This PR extends RoosterJS Content Model drag-and-drop handling to support dropping external plain text and single image files, while preserving existing HTML drop behavior (including forbidden-element cleanup). It also extracts the plain-text-to-DOM conversion logic into a shared textToFragment utility so paste and drag-and-drop share identical whitespace/tab/multiline handling.
Changes:
- Extend external drop handling to support
text/plaindrops and single-image file drops. - Extract plain-text conversion into
textToFragmentand reuse it from paste and drag-and-drop code paths. - Add/adjust unit tests to validate new drop behaviors and
textToFragmentconversion rules.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/roosterjs-content-model-plugins/lib/dragAndDrop/utils/handleDroppedExternalContent.ts | Adds plain text + single image file drop support by producing a dropped content model from DataTransfer. |
| packages/roosterjs-content-model-plugins/lib/dragAndDrop/DragAndDropPlugin.ts | Routes external drops through the updated handleDroppedExternalContent (no longer pre-filtered by HTML only). |
| packages/roosterjs-content-model-plugins/test/dragAndDrop/utils/handleDroppedExternalContentTest.ts | Updates existing tests and adds coverage for plain text and image file drops. |
| packages/roosterjs-content-model-plugins/test/dragAndDrop/DragAndDropPluginTest.ts | Updates plugin tests to reflect that external drop handler is called regardless of HTML presence. |
| packages/roosterjs-content-model-dom/lib/domUtils/textToFragment.ts | Introduces shared plain-text-to-DocumentFragment conversion utility (whitespace/tab/multiline handling). |
| packages/roosterjs-content-model-dom/lib/index.ts | Re-exports textToFragment from the DOM package barrel. |
| packages/roosterjs-content-model-dom/test/domUtils/textToFragmentTest.ts | Adds unit tests for textToFragment conversion behavior. |
| packages/roosterjs-content-model-core/lib/command/paste/createPasteFragment.ts | Reuses textToFragment for paste-as-plain-text fragment creation (removes duplicated logic). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+66
to
+89
| if (types.some(type => type === 'text/html')) { | ||
| const html = dataTransfer.getData('text/html'); | ||
| if (html) { | ||
| const parsedHtml = editor.getDOMCreator().htmlToDOM(html); | ||
| cleanForbiddenElements(parsedHtml, forbiddenElements); | ||
| return domToContentModel(parsedHtml.body, createDomToModelContext()); | ||
| } | ||
| } else if (types.some(type => type === 'text/plain')) { | ||
| const text = dataTransfer.getData('text/plain'); | ||
| if (text) { | ||
| const textFragment = textToFragment(text, editor.getDocument()); | ||
| return domToContentModel(textFragment, createDomToModelContext()); | ||
| } | ||
| } else if (types.some(type => type === 'Files')) { | ||
| const files = dataTransfer.files; | ||
| const file = files?.length === 1 ? files[0] : undefined; | ||
| if (file?.type.startsWith('image/')) { | ||
| const model = createContentModelDocument(); | ||
| const paragraph = createParagraph(); | ||
| paragraph.segments.push(createImage(URL.createObjectURL(file))); | ||
| model.blocks.push(paragraph); | ||
| return model; | ||
| } | ||
| } |
Comment on lines
+85
to
+86
| paragraph.segments.push(createImage(URL.createObjectURL(file))); | ||
| model.blocks.push(paragraph); |
| return undefined; | ||
| } | ||
|
|
||
| if (types.some(type => type === 'text/html')) { |
Collaborator
There was a problem hiding this comment.
Curious, can we reuse the paste code to get model when drop?
Contributor
Author
There was a problem hiding this comment.
The paste flow currently uses extractClipboardItems to get the transfer item. I’m not sure it’s worth refactoring that code just to reuse a few lines.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Support dropping external plain text and single image files in the editor while preserving the existing HTML drop behavior and forbidden-element cleanup.
Extract plain-text DOM conversion into the shared
textToFragmentutility so paste and drag-and-drop use the same whitespace, tab, and multiline handling.How to test
yarn test:fast --testPathPattern="textToFragment|DragAndDropPlugin|handleDroppedExternalContent".