Skip to content

feat(Sender): tag slot add clear btn #1317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IsDyh01 wants to merge 7 commits into
base: next
Choose a base branch
from
Open

feat(Sender): tag slot add clear btn #1317

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
35675fd
feat(Sender): tag slot add clear btn
IsDyh01 Nov 10, 2025
3d20d90
docs(Sender): update tag slot docs
IsDyh01 Nov 11, 2025
ad19484
fix(docs): fix docs
IsDyh01 Nov 11, 2025
b8be7f8
test: add test case
IsDyh01 Nov 11, 2025
59dfe1a
fix: delete log
IsDyh01 Nov 11, 2025
6e3d0a4
test: add test case
IsDyh01 Nov 11, 2025
a616827
Merge branch 'next' into feat/tag-add-clear-btn
kimteayon Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 40 additions & 2 deletions packages/x/components/sender/SlotTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { CaretDownFilled } from '@ant-design/icons';
import { CaretDownFilled, CloseOutlined } from '@ant-design/icons';
import { Dropdown, Input, InputRef } from 'antd';
import classnames from 'classnames';
import pickAttrs from 'rc-util/lib/pickAttrs';
Expand Down Expand Up @@ -137,6 +137,29 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
}
};

const removeTagSlot = (key: string, e?: EventType) => {
const span = getSlotDom(key);
if (span && editableRef.current && editableRef.current.contains(span)) {
editableRef.current.removeChild(span);
}
slotDomMap.current.delete(key);
// 移除配置与值
slotConfigRef.current = (slotConfigRef.current || []).filter((item) => item.key !== key);
setSlotValues((prev) => {
const next = { ...prev };
delete next[key];
return next;
});
setSlotPlaceholders((prev) => {
const next = new Map(prev);
next.delete(key);
return next;
});
// 触发 onChange
const newValue = getEditorValue();
onChange?.(newValue.value, e, newValue.config);
};

const renderSlot = (node: SlotConfigType, slotSpan: HTMLSpanElement) => {
if (!node.key) return null;
const value = getSlotValues()[node.key];
Expand Down Expand Up @@ -195,7 +218,22 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
</Dropdown>
);
case 'tag':
return <div className={`${prefixCls}-slot-tag`}>{node.props?.label || ''}</div>;
return (
<div className={`${prefixCls}-slot-tag`}>
<span className={`${prefixCls}-slot-tag-label`}>{node.props?.label || ''}</span>
{!readOnly && (
<span
className={`${prefixCls}-slot-tag-remove`}
onMouseDown={(e) => e.preventDefault()}
onClick={(e) => {
removeTagSlot(node.key as string, e as unknown as EventType);
}}
Comment on lines +242 to +244
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Following the change in removeTagSlot, the onClick handler should be updated to not pass the event object. The event from onClick is a MouseEvent, which is incompatible with the EventType expected by onChange.

Suggested change
onClick={(e) => {
removeTagSlot(node.key as string, e as unknown as EventType);
}}
onClick={() => {
removeTagSlot(node.key as string);
}}

>
<CloseOutlined />
</span>
)}
</div>
);
case 'custom':
return node.customRender?.(
value,
Expand Down
30 changes: 29 additions & 1 deletion packages/x/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2374,7 +2374,35 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
<div
class="ant-sender-slot-tag"
>
@ Chuck
<span
class="ant-sender-slot-tag-label"
>
@ Chuck
</span>
<span
class="ant-sender-slot-tag-remove"
>
<span
aria-label="close"
class="anticon anticon-close"
role="img"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</div>
</span>
, the date is
Expand Down
Loading