(core) Add our very own implementation of tokenfield (aka pillbox, tag list)

Summary:
- Supports auto-completion
- Supports various keyboard interactions to delete/select/copy-paste tokens
- Supports various mouse interactions to select and move tokens.
- Supports undo/redo while editing tokens.

Test Plan: stand-alone fixture and browser test verify the supported behaviors

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2789
This commit is contained in:
Dmitry S
2021-04-30 18:34:09 -04:00
parent 5baae7437a
commit 2f26f140c8
5 changed files with 660 additions and 2 deletions

View File

@@ -17,7 +17,7 @@ export interface MouseDragHandler {
onStop(endEv: MouseEvent): void;
}
export type MouseDragStart = (startEv: MouseEvent, elem: Element) => MouseDragHandler|null;
export type MouseDragStart = (startEv: MouseEvent, elem: HTMLElement) => MouseDragHandler|null;
export function mouseDragElem(elem: HTMLElement, onStart: MouseDragStart): IDisposable {
@@ -30,7 +30,7 @@ export function mouseDrag(onStart: MouseDragStart): DomElementMethod {
return (elem) => { mouseDragElem(elem, onStart); };
}
function _startDragging(startEv: MouseEvent, elem: Element, onStart: MouseDragStart) {
function _startDragging(startEv: MouseEvent, elem: HTMLElement, onStart: MouseDragStart) {
const dragHandler = onStart(startEv, elem);
if (dragHandler) {