[TagInput] 希望支持编辑功能；单tag支持独立status

[CristinaTAT]

这个功能解决了什么问题

希望添加后的文本能支持编辑功能；

单tag支持独立主题，现在所有tag的主题都是统一的；

折叠的内容框能默认提供 tag 样式（同上，支持单tag控制属性），且折叠框内支持新增和编辑（现在只能查看和删除）

输入的分割符能自定义，现在只有换行

能在任意位置新增输入，现在只能在末尾输入新增 tag

你建议的方案是什么

添加后的文本，点击后能变成Input框可编辑；
新增单tag控制属性；
折叠的内容框能默认提供 tag 样式，且折叠框内支持新增和编辑
输入的分割符能自定义，如空格，逗号等
能在任意位置新增输入

[github-actions]

👋 @CristinaTAT，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[RylanBot]

基于现有 API，完全可以自定义实现你的需求

例 1：可编辑标签

import React, { useState } from 'react';
import { Input, Tag, TagInput } from 'tdesign-react';

import type { TagInputProps, TagInputValue } from 'tdesign-react';

export default function EditableTagsDemo() {
  const [tags, setTags] = useState<TagInputValue>([
    '可点击',
    '编辑我',
    'TDesign',
  ]);

  const [editingIndex, setEditingIndex] = useState<number>(-1);
  const [draft, setDraft] = useState<string>('');

  const beginEdit = (index: number) => {
    setEditingIndex(index);
    setDraft(String(tags[index] ?? ''));
  };

  const commitEdit = () => {
    if (editingIndex < 0) return;

    const next = [...tags];
    const trimmed = draft.trim();

    if (!trimmed) {
      next.splice(editingIndex, 1);
    } else {
      next[editingIndex] = trimmed;
    }

    setTags(next);
    setEditingIndex(-1);
    setDraft('');
  };

  const valueDisplay: TagInputProps['valueDisplay'] = ({
    value,
    onClose,
  }) =>
    value.map((item, index) => {
      if (index === editingIndex) {
        return (
          <span
            key={index}
            style={{
              display: 'inline-flex',
              verticalAlign: 'middle',
              marginRight: 4,
            }}
          >
            <Input
              autoWidth
              autofocus
              size="small"
              value={draft}
              onChange={(v) => setDraft(String(v))}
              onBlur={commitEdit}
              onEnter={commitEdit}
            />
          </span>
        );
      }

      return (
        <Tag
          key={index}
          closable
          style={{
            marginRight: 4,
            cursor: 'text',
          }}
          onClick={() => beginEdit(index)}
          onClose={({ e }) => {
            e?.stopPropagation();
            onClose(index);
          }}
        >
          {item}
        </Tag>
      );
    });

  return (
    <TagInput
      value={tags}
      onChange={setTags}
      placeholder="点击已存在的标签可编辑"
      clearable
      valueDisplay={valueDisplay}
    />
  );
}

例 2：独立主题标签

import React, { useState } from 'react';
import { Tag, TagInput } from 'tdesign-react';

import type {
  TagInputProps,
  TagInputValue,
  TagProps,
} from 'tdesign-react';

export default function PerTagThemeDemo() {
  const [tags, setTags] = useState<TagInputValue>([
    'default',
    'primary',
    'warning',
    'danger',
    'success',
  ]);

  const themeMap: Record<string, TagProps['theme']> = {
    default: 'default',
    primary: 'primary',
    warning: 'warning',
    danger: 'danger',
    success: 'success',
  };

  const getTheme = (
    item: string | number,
    index: number,
  ): TagProps['theme'] => {
    const themes: TagProps['theme'][] = [
      'default',
      'primary',
      'warning',
      'danger',
      'success',
    ];

    return themeMap[String(item)] ?? themes[index % themes.length];
  };

  const valueDisplay: TagInputProps['valueDisplay'] = ({
    value,
    onClose,
  }) =>
    value.map((item, index) => (
      <Tag
        key={index}
        theme={getTheme(item, index)}
        variant="light"
        closable
        style={{ marginRight: 4 }}
        onClose={() => onClose(index, item)}
      >
        {item}
      </Tag>
    ));

  return (
    <TagInput
      value={tags}
      onChange={setTags}
      placeholder="每个标签可拥有独立主题"
      clearable
      valueDisplay={valueDisplay}
    />
  );
}

例 3：自定义分隔符

import React, { useMemo, useRef, useState } from 'react';
import { TagInput } from 'tdesign-react';

import type {
  InputRef,
  TagInputProps,
  TagInputValue,
} from 'tdesign-react';

export default function CustomSeparatorDemo() {
  const [tags, setTags] = useState<TagInputValue>([]);
  const [inputValue, setInputValue] = useState<string>('');

  const inputRef = useRef<InputRef>(null);

  const separatorReg = useMemo(
    () => /[,，;；\s]+/,
    [],
  );

  const splitAndAppend = (raw: string) => {
    if (!raw) return;

    const parts = raw
      .split(separatorReg)
      .map((s) => s.trim())
      .filter(Boolean);

    if (!parts.length) return;

    setTags((prev) =>
      Array.from(
        new Set([...(prev as string[]), ...parts]),
      ),
    );
  };

  const onInputChange: TagInputProps['onInputChange'] = (
    val,
    context,
  ) => {
    if (separatorReg.test(val)) {
      splitAndAppend(val);
      setInputValue('');
      return;
    }

    if (context?.trigger !== 'enter') {
      setInputValue(val);
    } else {
      setInputValue('');
    }
  };

  const onPaste: TagInputProps['onPaste'] = ({
    pasteValue,
    e,
  }) => {
    if (separatorReg.test(pasteValue)) {
      e.preventDefault();
      splitAndAppend(pasteValue);
      setInputValue('');
    }
  };

  return (
    <TagInput
      ref={inputRef}
      value={tags}
      onChange={setTags}
      inputValue={inputValue}
      onInputChange={onInputChange}
      onPaste={onPaste}
      placeholder="支持 逗号 / 分号 / 空格 / 换行 作为分隔符，也支持粘贴批量录入"
      clearable
    />
  );
}

[CristinaTAT]

这方案跟自己手搓没有区别了，组件支持更方便