HIsheR
115 lines
4.6 KiB
TypeScript
115 lines
4.6 KiB
TypeScript
import { effect, h, signal } from '@ui-arch/frame';
|
|
import type { MentionItem, MentionsProps } from './types.js';
|
|
|
|
// 每个实例的 listbox id 前缀，保证 aria-activedescendant 唯一
|
|
let seq = 0;
|
|
|
|
/*** 取光标前的 @ 触发词（不含 @ 本身）：没有未闭合的 @ 片段时返回 null ***/
|
|
function tokenBefore(text: string, caret: number): string | null {
|
|
const match = /@([^\s@]*)$/.exec(text.slice(0, caret));
|
|
return match ? match[1] : null;
|
|
}
|
|
|
|
/*** 用选中的名字替换光标前的 @片段，返回替换后的全文与新光标位置 ***/
|
|
function applyPick(text: string, caret: number, name: string): { text: string; caret: number } {
|
|
const head = text.slice(0, caret).replace(/@[^\s@]*$/, `@${name} `);
|
|
return { text: head + text.slice(caret), caret: head.length };
|
|
}
|
|
|
|
/*** @提及输入：textarea 内键入 @ 弹候选，↑↓ 环形移动、Enter/Tab 选中、Esc 只收本层；弹层贴输入框下沿，选中按光标替换 @片段 ***/
|
|
export function mentions(props: MentionsProps): HTMLElement {
|
|
const uid = `ua-mentions-${++seq}`;
|
|
const items = props.items;
|
|
const value = props.value ?? signal('');
|
|
const open = signal(false); // 弹层开合
|
|
const query = signal(''); // 当前 @ 后的过滤词
|
|
const active = signal(0); // 高亮项下标
|
|
const input = h('textarea', {
|
|
class: 'ua-mentions-input',
|
|
rows: String(props.rows ?? 3),
|
|
placeholder: props.placeholder ?? '',
|
|
'aria-autocomplete': 'list',
|
|
'aria-controls': uid,
|
|
'aria-expanded': 'false',
|
|
}) as HTMLTextAreaElement;
|
|
input.value = value();
|
|
const list = h('div', { class: 'ua-mentions-pop', role: 'listbox', 'aria-label': '提及建议', id: uid });
|
|
const wrap = h('div', { class: 'ua-mentions' }, input, list);
|
|
|
|
// 候选：空过滤词给全量，否则按名字 / 关键词做包含匹配
|
|
const filtered = (): MentionItem[] => (query()
|
|
? items.filter((it) => it.name.includes(query()) || (it.keywords ?? []).some((k) => k.includes(query())))
|
|
: items);
|
|
|
|
/*** 重绘弹层：同步显隐、高亮项与 aria-activedescendant（无候选时不开层） ***/
|
|
const paint = (): void => {
|
|
const shown = filtered();
|
|
const visible = open() && shown.length > 0;
|
|
wrap.classList.toggle('is-open', visible);
|
|
input.setAttribute('aria-expanded', String(visible));
|
|
list.replaceChildren(...shown.map((item, i) => h('div', {
|
|
class: `ua-mentions-item${i === active() ? ' is-active' : ''}`,
|
|
role: 'option',
|
|
id: `${uid}-${i}`,
|
|
'aria-selected': i === active() ? 'true' : 'false',
|
|
onmousedown: (e: Event) => { e.preventDefault(); pick(item); }, // 阻止默认让 textarea 不失焦
|
|
}, h('span', { class: 'ua-mentions-name' }, item.label),
|
|
item.description ? h('span', { class: 'ua-mentions-desc' }, item.description) : null)));
|
|
if (visible) input.setAttribute('aria-activedescendant', `${uid}-${active()}`);
|
|
else input.removeAttribute('aria-activedescendant');
|
|
};
|
|
|
|
/*** 选中候选：替换光标前的 @片段、写回信号、光标落到插入文本之后 ***/
|
|
const pick = (item: MentionItem): void => {
|
|
const caret = input.selectionStart ?? input.value.length;
|
|
const next = applyPick(input.value, caret, item.name);
|
|
input.value = next.text;
|
|
value(next.text);
|
|
input.setSelectionRange(next.caret, next.caret);
|
|
input.focus();
|
|
open(false);
|
|
query('');
|
|
paint();
|
|
props.onSelect?.(item);
|
|
};
|
|
|
|
input.addEventListener('input', () => {
|
|
value(input.value);
|
|
props.onInput?.(input.value);
|
|
const token = tokenBefore(input.value, input.selectionStart ?? input.value.length);
|
|
query(token ?? '');
|
|
active(0); // 每次输入重新从第一项开始高亮
|
|
open(token !== null);
|
|
paint();
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
if (!open()) return; // 未开层时所有按键交给浏览器
|
|
const shown = filtered();
|
|
if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
e.stopPropagation(); // 只收本层，不连带外层弹层
|
|
open(false);
|
|
paint();
|
|
return;
|
|
}
|
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
active((active() + (e.key === 'ArrowDown' ? 1 : -1) + shown.length) % shown.length); // 环形移动
|
|
paint();
|
|
return;
|
|
}
|
|
if ((e.key === 'Enter' || e.key === 'Tab') && shown.length) {
|
|
e.preventDefault();
|
|
pick(shown[Math.min(active(), shown.length - 1)]);
|
|
}
|
|
});
|
|
|
|
input.addEventListener('blur', () => { open(false); paint(); }); // 失焦收起
|
|
effect(() => {
|
|
const outer = value();
|
|
if (outer !== input.value) input.value = outer; // 外部改信号时同步输入框
|
|
});
|
|
return wrap;
|
|
}
|