ant-design / ant-design/x

feat(Sender): support custom paste text filter via pasteFilter prop

Open
#1,946 1 comment 1 reaction 0 assignees View on GitHub
enhancement javascript
Dominant language
TypeScript
Stars
4.8k
Forks
1.2k
Avg merge
3d 3h
Merged PRs (30d)
2

Description

Hi!

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @ant-design/x@2.5.0 for the project I'm working on.

Problem

When using Sender with slotConfig mode, pasting multi-line text into the textarea causes all line breaks to be stripped by the internal getCleanedText() function. This makes it
impossible to preserve the original formatting of pasted content.

In our use case, users frequently paste code snippets or structured text that rely on line breaks for readability. The automatic cleaning removes this formatting, degrading the user
experience.

Proposed Solution

Add a pasteFilter prop to SenderProps that allows users to provide a custom paste text filtering function. When provided, it replaces the default getCleanedText() behavior, giving users
full control over how pasted text is processed.

Here is the diff that solved my problem:

diff --git a/node_modules/@ant-design/x/es/sender/Sender.js b/node_modules/@ant-design/x/es/sender/Sender.js
index a24fd78..7d821fb 100644
--- a/node_modules/@ant-design/x/es/sender/Sender.js
+++ b/node_modules/@ant-design/x/es/sender/Sender.js
@@ -54,6 +54,7 @@ const ForwardSender = /*#__PURE__*/React.forwardRef((props, ref) => {
footer,
header,
onPaste,
+ pasteFilter,
onPasteFile,
autoSize = {
maxRows: 8
@@ -202,6 +203,7 @@ const ForwardSender = /*#__PURE__*/React.forwardRef((props, ref) => {
onKeyDown,
onPaste,
onPasteFile,
+ pasteFilter,
disabled,
readOnly,
submitType,
@@ -216,7 +218,7 @@ const ForwardSender = /*#__PURE__*/React.forwardRef((props, ref) => {
onBlur,
skill,
...restProps
- }), [innerValue, triggerValueChange, slotConfig, onKeyUp, onKeyDown, onPaste, onPasteFile, disabled, readOnly, submitType, prefixCls, styles, classNames, autoSize, components,
triggerSend, placeholder, onFocus, onBlur, skill, restProps]);
+ }), [innerValue, triggerValueChange, slotConfig, onKeyUp, onKeyDown, onPaste, onPasteFile, pasteFilter, disabled, readOnly, submitType, prefixCls, styles, classNames, autoSize,
components, triggerSend, placeholder, onFocus, onBlur, skill, restProps]);

// ============================ Focus =============================
const onContentMouseDown = e => {
diff --git a/node_modules/@ant-design/x/es/sender/components/SlotTextArea.js b/node_modules/@ant-design/x/es/sender/components/SlotTextArea.js
index 081f637..ee7730a 100644
--- a/node_modules/@ant-design/x/es/sender/components/SlotTextArea.js
+++ b/node_modules/@ant-design/x/es/sender/components/SlotTextArea.js
@@ -21,6 +21,7 @@ const SlotTextArea = /*#__PURE__*/React.forwardRef((_, ref) => {
onKeyDown,
onPaste,
onPasteFile,
+ pasteFilter,
disabled,
readOnly,
submitType = 'enter',
@@ -582,7 +583,7 @@ const SlotTextArea = /*#__PURE__*/React.forwardRef((_, ref) => {
}
if (text) {
let success = false;
- const cleanedText = getCleanedText(text);
+ const cleanedText = Boolean(pasteFilter) ? pasteFilter(text) : getCleanedText(text);
try {
success = document.execCommand('insertText', false, cleanedText);
} catch (err) {
diff --git a/node_modules/@ant-design/x/es/sender/interface.d.ts b/node_modules/@ant-design/x/es/sender/interface.d.ts
index 9ba984b..9286732 100644
--- a/node_modules/@ant-design/x/es/sender/interface.d.ts
+++ b/node_modules/@ant-design/x/es/sender/interface.d.ts
@@ -103,6 +103,7 @@ export interface SenderProps extends Partial void | false;
onPaste?: React.ClipboardEventHandler;
onPasteFile?: (files: FileList) => void;
+ pasteFilter?: (value: string) => string;
components?: SenderComponents;
classNames?: Partial>;
styles?: Partial>;
@@ -124,4 +125,4 @@ export type SenderRef = Omit & Omit text} // Keep original text as-is
/>

// Or apply custom filtering
text.replace(/[^\S\n]+/g, ' ').trim()} // Normalize spaces but keep newlines
/>

This issue body was partially generated by patch-package.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by comparing the mentioned Sender.js, components/SlotTextArea.js, and interface.d.ts files with their source counterparts, focusing on how paste handling and SenderProps are wired. Verify the custom filter preserves or transforms pasted text as requested, while the existing default behavior remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.