@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
97 lines • 2.28 kB
TypeScript
/**
* Create a reactive text selection tracker
*
* @example
* ```ts
* const selection = useTextSelection({
* onSelect: (state) => {
* console.log('Selected text:', state.text)
* }
* })
*
* // Subscribe to selection changes
* selection.subscribe((state) => {
* if (state.text) {
* showTooltip(state.rects[0], state.text)
* }
* })
*
* // Get currently selected text
* const text = selection.getText()
*
* // Clear selection
* selection.clear()
* ```
*/
export declare function useTextSelection(options?: TextSelectionOptions): TextSelectionRef;
/**
* Track text selection within a specific element
*
* @example
* ```ts
* const selection = useElementTextSelection(editorRef)
*
* selection.subscribe((text) => {
* console.log('Selected in editor:', text)
* })
* ```
*/
export declare function useElementTextSelection(element: Element | null): void;
/**
* Create a selection popup that appears when text is selected
*
* @example
* ```ts
* const popup = useSelectionPopup({
* onShow: (text, position) => {
* showPopup(position.x, position.y, text)
* },
* onHide: () => {
* hidePopup()
* }
* })
* ```
*/
export declare function useSelectionPopup(options: {
onShow?: (text: string, position: { x: number, y: number }) => void
onHide?: () => void
minLength?: number
}): void;
/**
* Copy selected text to clipboard with custom formatting
*
* @example
* ```ts
* const copy = useCopySelection()
*
* // Copy with markdown formatting
* copy.copyAsMarkdown()
*
* // Copy with custom prefix
* copy.copyWithPrefix('> ')
* ```
*/
export declare function useCopySelection(): void;
/**
* Text Selection Composables
*
* Reactive utilities for tracking and manipulating text selection.
*/
export declare interface TextSelectionState {
text: string
rects: DOMRect[]
ranges: Range[]
isCollapsed: boolean
}
export declare interface TextSelectionOptions {
onSelect?: (state: TextSelectionState) => void
onClear?: () => void
}
export declare interface TextSelectionRef {
get: () => TextSelectionState
subscribe: (fn: (state: TextSelectionState) => void) => () => void
getText: () => string
clear: () => void
selectAll: (element?: Element) => void
getRects: () => DOMRect[]
}