anki/ts/sveltelib/position/auto-update.ts
Henrik Giesel 8f8f3bd465
Insert symbols overlay (#2051)
* Add flag for enabling insert symbols feature

* Add symbols overlay directory

* Detect if :xy is inserted into editable

* Allow naive updating of overlay, and special handling of ':'

* First step towards better Virtual Element support

* Update floating to reference range on insert text

* Position SymbolsOverlay always on top or bottom

* Add a data-provider to emulate API

* Show correct suggestions in symbols overlay

* Rename to replacementLength

* Allow replacing via clicking in menu

* Optionally remove inline padding of Popover

* Hide Symbols overlay on blur of content editable

* Add specialKey to inputHandler and generalize how arrow movement is detected

- This way macOS users can use Ctrl-N to mean down, etc.

* Detect special key from within SymbolsOverlay

* Implement full backwards search while typing

* Allow navigating symbol menu and accepting with enter

* Add some entries to data-provider

* Satisfy eslint

* Generate symbolsTable from sources

* Use other github source, allow multiple names

In return, symbol must be unique

* Automatically scroll in symbols dropdown

* Use from npm packages rather than downloading from URL

* Remove console.log

* Remove print

* Add pointerDown event to input-handler

- so that SymbolsOverlay can reset on field click

* Make tab do the same as enter

* Make font a bit smaller but increase relative icon size

* Satisfy type requirement of handlerlist

* Revert changing default size of DropdownItems

* Remove some now unused code for bootstrap dropdowns
2022-09-10 18:46:59 +10:00

58 lines
1.4 KiB
TypeScript

// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { FloatingElement, ReferenceElement } from "@floating-ui/dom";
import { autoUpdate as floatingUiAutoUpdate } from "@floating-ui/dom";
import type { ActionReturn } from "svelte/action";
import type { Callback } from "../../lib/typing";
/**
* The interface of `autoUpdate` of floating-ui.
* This means PositioningCallback can be used with that, but also invoked as it is.
*
* @example ```
* // Invoke the positioning algorithm handily
* position(myReference, (_, _, callback) => {
* callback();
* })`
*/
export type PositioningCallback = (
reference: ReferenceElement,
floating: FloatingElement,
position: Callback,
) => Callback;
/**
* The interface of a function that calls `computePosition` of floating-ui.
*/
export type PositionFunc = (
reference: ReferenceElement,
callback: PositioningCallback,
) => Callback;
function autoUpdate(
reference: ReferenceElement,
/**
* The method to position the floating element.
*/
position: PositionFunc,
): ActionReturn<PositionFunc> {
let cleanup: Callback;
function destroy() {
cleanup?.();
}
function update(position: PositionFunc): void {
destroy();
cleanup = position(reference, floatingUiAutoUpdate);
}
update(position);
return { destroy, update };
}
export default autoUpdate;