feat(Sender): support custom paste text filter via pasteFilter prop
- 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