fix: Sender skill focus at start (#1504)

* fix: submit disabled

* fix: submit disabled

* feat: update

* feat: update

* test: css

* fix: onchange

* fix: onchange

* fix: sender onchange

* fix: sender onchange

* feat: sender

* feat: sender

* fix: sender onchange

* fix: sender

* test: sender

* test: snap

* test: snap

* test: snap

* test: actions

* feat: sender

* test: snap

* test: snap

* test: snap

* test: snap

* fix: ts

* fix: ts

* fix: skill focus

* fix: skill focus

* fix: skill focus

* fix: skill focus

* docs: update

* docs: update

* feat: focus

Author: kimteayon

packages/x/components/sender/SlotTextArea.tsx

@@ -113,26 +113,27 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
     const newValue = getEditorValue();
     if (skillDomRef.current) {
       if (!newValue?.value && newValue.slotConfig.length === 0) {
+        skillDomRef.current.setAttribute('contenteditable', 'true');
         skillDomRef.current.classList.add(`${prefixCls}-skill-empty`);
       } else {
+        skillDomRef.current.setAttribute('contenteditable', 'false');
         skillDomRef.current.classList.remove(`${prefixCls}-skill-empty`);
       }
     }
-
     onChange?.(newValue.value, e, newValue.slotConfig, newValue.skill);
   };
+
   const buildSlotSpan = (key: string) => {
     const span = document.createElement('span');
     span.setAttribute('contenteditable', 'false');
     span.dataset.slotKey = key;
     span.className = `${prefixCls}-slot`;
-
     return span;
   };
 
   const buildSkillSpan = (key: string) => {
     const span = document.createElement('span');
-    span.setAttribute('contenteditable', 'true');
+    span.setAttribute('contenteditable', 'false');
     span.dataset.skillKey = key;
     span.dataset.placeholder = placeholder;
     span.className = `${prefixCls}-skill`;
@@ -494,6 +495,7 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
     // 触发onChange回调
     triggerValueChange(e);
   };
+
   const insertSkill = () => {
     if (skill && skillRef.current !== skill) {
       removeSkill(false);
@@ -549,13 +551,10 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
         const slotKey = (node as Element)?.getAttribute?.('data-slot-key') || '';
         const nodeType = (node as Element)?.getAttribute?.('data-node-type') || '';
         const nodeConfig = slotConfigMap.get(slotKey);
-
         if (node.nodeType !== Node.ELEMENT_NODE) continue;
-
         if (nodeConfig?.type === 'input') {
           return (node as Element).querySelector<HTMLInputElement>('input');
         }
-
         if (nodeConfig?.type === 'content' && nodeType !== 'nbsp') {
           return node;
         }
@@ -602,9 +601,10 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
       onKeyDown?.(e as unknown as React.KeyboardEvent<HTMLTextAreaElement>);
       return;
     }
+    const selection = window.getSelection();
+
     // 处理退格键删除slot
     if (key === 'Backspace' && target === editableRef.current) {
-      const selection = window.getSelection();
       if (selection?.focusOffset === 1) {
         const slotKey = (selection.anchorNode?.parentNode as Element)?.getAttribute?.(
           'data-slot-key',
@@ -650,6 +650,16 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
         return;
       }
     }
+
+    if (
+      skillDomRef.current &&
+      selection?.anchorNode &&
+      skillDomRef.current.contains(selection.anchorNode)
+    ) {
+      skillDomRef.current.setAttribute('contenteditable', 'false');
+      skillDomRef.current.classList.remove(`${prefixCls}-skill-empty`);
+      focus({ cursor: 'end' });
+    }
   };
 
   // ============================ Input Event ============================
@@ -840,6 +850,7 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
     if (!selection) return;
     const range = document.createRange();
     range.selectNodeContents(editor);
+
     switch (options.cursor) {
       case 'start':
         range.collapse(true);
@@ -868,6 +879,7 @@ const SlotTextArea = React.forwardRef<SlotTextAreaRef>((_, ref) => {
     slotDomMap?.current?.clear();
     onInternalInput(null as unknown as React.FormEvent<HTMLDivElement>);
   };
+
   // ============================ Effects =============================
 
   useEffect(() => {

packages/x/components/sender/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -22,7 +22,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
       >
         <span
           class="ant-sender-skill"
-          contenteditable="true"
+          contenteditable="false"
           data-placeholder="Press Enter to send message"
           data-skill-key="writing"
         >
@@ -727,7 +727,7 @@ exports[`renders components/sender/demo/agent.tsx extend context correctly 1`] =
       >
         <span
           class="ant-sender-skill"
-          contenteditable="true"
+          contenteditable="false"
           data-placeholder=""
           data-skill-key="writing"
         >
@@ -3249,7 +3249,7 @@ exports[`renders components/sender/demo/slot-filling.tsx extend context correctl
       >
         <span
           class="ant-sender-skill"
-          contenteditable="true"
+          contenteditable="false"
           data-placeholder="Enter to send message"
           data-skill-key="travelId"
         >

packages/x/components/suggestion/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -345,10 +345,8 @@ Array [
         >
           <input
             aria-autocomplete="list"
-            aria-controls="test-id_list"
             aria-expanded="false"
             aria-haspopup="listbox"
-            aria-owns="test-id_list"
             autocomplete="off"
             class="ant-select-input"
             id="test-id"

packages/x/components/suggestion/__tests__/__snapshots__/demo.test.ts.snap

@@ -140,10 +140,8 @@ exports[`renders components/suggestion/demo/trigger.tsx correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="test-id_list"
           autocomplete="off"
           class="ant-select-input"
           id="test-id"