import { Dispatch, CSSProperties } from "react"; import { JSX } from "react/jsx-runtime"; interface IMarkdownSettings { styleStartTag: string; styleNameEndTag: string; styleEndTag: string; defaultStyle: string; dropDownStartTag: string; dropDownEndTag: string; dropDownValueSeparator: string; dropDownSelectedValueTag: string; calcStartTag: string; calcNameEndTag: string; calcEndTag: string; calcConditionSeparator: string; calcAndSeparator: string; atStartTag: string; atEndTag: string; } type EditorV3TextBlockType = "text" | "at" | "select"; interface IEditorV3TextBlockOptionalParams { label?: string; style?: string; type?: EditorV3TextBlockType; isLocked?: true | undefined; lineStartPosition?: number; markdownSettings?: IMarkdownSettings; } interface IEditorV3TextBlock extends IEditorV3TextBlockOptionalParams { text: string; } export class EditorV3TextBlock implements IEditorV3TextBlock { protected _defaultContentProps: EditorV3ContentProps; text: string; label?: string; style?: string; type: EditorV3TextBlockType; isActive: boolean; isSelected: boolean; isLocked: true | undefined; lineStartPosition: number; get lineEndPosition(): number; get mergeKey(): string; get data(): IEditorV3TextBlock; /** * Get the word positions within the text block * @returns Array of word positions */ get wordPositions(): EditorV3WordPosition[]; constructor(arg?: IEditorV3TextBlock | HTMLSpanElement | DocumentFragment | string, forcedParams?: IEditorV3TextBlockOptionalParams); protected markdownStyleLabel(markdownText: string, markdownSettings: IMarkdownSettings, set?: boolean): { style: string | undefined; label: string | undefined; text: string; }; setActive(active: boolean): void; protected applyStyle(span: HTMLSpanElement, style?: EditorV3Style): void; toHtml(renderProps: EditorV3RenderProps, style?: EditorV3Style): DocumentFragment; protected toMarkdownStyleLabel(markdownSettings: IMarkdownSettings): string; toMarkdown(markdownSettings?: IMarkdownSettings): string; } interface IEditorV3AtBlockOptionalParams extends IEditorV3TextBlockOptionalParams { atListFunction?: (typedString: string) => Promise>[]>; maxAtListLength?: number; atData?: Record; } interface IEditorV3AtBlock extends IEditorV3TextBlock, IEditorV3AtBlockOptionalParams { } export class EditorV3AtBlock extends EditorV3TextBlock implements IEditorV3AtBlock { /** * Promise function that will return list of string values to display * @param typedString Text entered into the block so far * @returns Promise of array of strings */ atListFunction: (typedString: string) => Promise>[]>; /** * Maximum number of items to display in the returned list */ maxAtListLength: number; atData: Record; get data(): IEditorV3AtBlock; get wordPositions(): EditorV3WordPosition[]; constructor(arg: IEditorV3AtBlock | HTMLSpanElement | DocumentFragment | string, forcedParams?: IEditorV3AtBlockOptionalParams); toHtml(renderProps: EditorV3RenderProps, style?: EditorV3Style): DocumentFragment; toMarkdown(markdownSettings?: IMarkdownSettings): string; } interface IEditorV3SelectBlockOptionalParams extends IEditorV3TextBlockOptionalParams { availableOptions?: EditorV3DropListItem>[]; } interface IEditorV3SelectBlock extends IEditorV3TextBlock, IEditorV3SelectBlockOptionalParams { } /** * EditorV3SelectBlock - text block that can be one among a list of options */ declare class EditorV3SelectBlock extends EditorV3TextBlock implements IEditorV3SelectBlock { get availableOptions(): EditorV3DropListItem>[]; set availableOptions(value: EditorV3DropListItem>[]); get data(): IEditorV3SelectBlock; get wordPositions(): EditorV3WordPosition[]; constructor(arg: IEditorV3SelectBlock | HTMLSpanElement | DocumentFragment | string, forcedParams?: IEditorV3SelectBlockOptionalParams); showDropdown: () => void; toHtml(renderProps: EditorV3RenderProps, style?: EditorV3Style): DocumentFragment; toMarkdown(markdownSettings?: IMarkdownSettings): string; } /** * Available text alignments */ export enum EditorV3Align { "left" = "left", "center" = "center", "decimal" = "decimal", "right" = "right" } /** * Object container for all avaialble styles, name: React.CSSProperties */ interface EditorV3Style extends React.CSSProperties { isLocked?: boolean; isNotAvailable?: boolean; } export interface EditorV3Styles extends Record { [styleName: string]: EditorV3Style; } interface EditorV3DropListItem> { text: string; data?: T; listRender?: HTMLLIElement; } /** * Text block class objects EditorV3 */ type EditorV3BlockClass = EditorV3TextBlock | EditorV3AtBlock | EditorV3SelectBlock; /** * Content object for EditorV3 * @param textAlignment Alignment of text withing the editor * @param decimalAlignPercent Percent of width to align decimal to, 0-100; * @param caret Current position of the caret * @param styles Available styles * @param showMarkdown Print markdown syntax instead of rendering * @param markdownSettings Settings for markdown */ interface EditorV3ContentProps { allowMarkdown: boolean; allowNewLine: boolean; allowWindowView: boolean; decimalAlignPercent: number; markdownSettings: IMarkdownSettings; showMarkdown: boolean; styles?: EditorV3Styles; textAlignment: EditorV3Align; atListFunction?: (typedString: string) => Promise>[]>; maxAtListLength: number; } interface EditorV3ContentPropsInput { allowMarkdown?: boolean; allowNewLine?: boolean; allowWindowView?: boolean; decimalAlignPercent?: number; markdownSettings?: IMarkdownSettings; showMarkdown?: boolean; styles?: EditorV3Styles; textAlignment?: EditorV3Align; atListFunction?: (typedString: string) => Promise>[]>; maxAtListLength?: number; } /** * Line import object for EditorV3 */ interface IEditorV3Line { textBlocks: (IEditorV3AtBlock | IEditorV3TextBlock | IEditorV3SelectBlock)[]; contentProps?: EditorV3ContentPropsInput; } /** * Complete import object for EditorV3 */ export interface IEditorV3 { lines: IEditorV3Line[]; contentProps?: EditorV3ContentPropsInput; } /** * Cursor position object for EditorV3 */ interface EditorV3Position { startLine: number; startChar: number; endLine: number; endChar: number; isCollapsed?: boolean; focusAt?: "start" | "end"; } interface EditorV3PositionF { initialLine: number; initialChar: number; focusLine: number; focusChar: number; } /** * Word positions in the content */ interface EditorV3WordPosition { line: number; startChar: number; endChar: number; isLocked: boolean; } /** * Render properties passed down to elements */ interface EditorV3RenderProps { atListFunction?: (typedString: string) => Promise>[]>; caretPosition?: EditorV3Position | null; currentEl?: HTMLDivElement | HTMLSpanElement; doNotSplitWordSpans?: boolean; editableEl?: HTMLDivElement; markdownSettings?: IMarkdownSettings; maxAtListLength?: number; styles?: EditorV3Styles; } declare class EditorV3PositionClass implements EditorV3Position { initialLine: number; initialChar: number; focusLine: number; focusChar: number; get isCollapsed(): boolean; get startLine(): number; get endLine(): number; get startChar(): number; get endChar(): number; lastAction: "keydown" | "move" | "select"; lastKey?: string; get pos(): EditorV3Position; get posF(): EditorV3PositionF; get data(): { initialLine: number; initialChar: number; focusLine: number; focusChar: number; startLine: number; startChar: number; endLine: number; endChar: number; isCollapsed?: boolean; focusAt?: "start" | "end"; }; constructor(initialLine: number, initialChar: number, focusLine: number, focusChar: number, lineLengths: number[], words: EditorV3WordPosition[]); /** * Set caret from position * @param pos New position */ setCaret(posInput: EditorV3Position): void; /** * Move caret left * @param shiftKey Shift key pressed * @param ctrlKey Control key pressed */ moveLeft(shiftKey: boolean, ctrlKey: boolean): void; /** * Move caret Right * @param shiftKey Shift key pressed * @param ctrlKey Control key pressed */ moveRight(shiftKey: boolean, ctrlKey: boolean): void; /** * Move caret up * @param shiftKey Shift key pressed * @param ctrlKey Control key pressed */ moveUp(shiftKey: boolean, ctrlKey: boolean): void; /** * Move caret down * @param shiftKey Shift key pressed * @param ctrlKey Control key pressed */ moveDown(shiftKey: boolean, ctrlKey: boolean): void; /** * Move caret home * @param shiftKey Shift key pressed * @param ctrlKey Control key pressed */ moveHome(shiftKey: boolean, ctrlKey: boolean): void; /** * Move caret end * @param shiftKey Shift key pressed * @param ctrlKey Control key pressed */ moveEnd(shiftKey: boolean, ctrlKey: boolean): void; } export class EditorV3Line implements IEditorV3Line { textBlocks: EditorV3BlockClass[]; contentProps: EditorV3ContentProps; /** * Render current line as HTML * @param renderProps Current render properties * @returns */ toHtml(renderProps: EditorV3RenderProps): HTMLDivElement; /** * Get a markdown DocumentFragment for the line * @param markdownSettings Settings for the markdown string * @returns The markdown for the line */ toMarkdown(renderProps: EditorV3RenderProps): HTMLDivElement; /** * Get the line as a text string */ get lineText(): string; /** * Get the markdown for the line */ get lineMarkdown(): string; /** * Return position of each word in the lineText * @param checkText Text to check, if not provided uses this.lineText * @returns Array of word positions */ get wordPositions(): EditorV3WordPosition[]; /** * Get the length of the line */ get lineLength(): number; /** * Get the line as a JSON object */ get data(): IEditorV3Line; constructor(arg?: IEditorV3Line | HTMLDivElement | EditorV3BlockClass[] | string, contentProps?: EditorV3ContentPropsInput); /** * Gets the block at a position * @param pos The position to get the block at * @returns The block at the position */ getBlockAt(pos: number): EditorV3BlockClass | undefined; /** * Gets style at a line position * @param pos The position to get the style at * @returns The style at the position */ getStyleAt(pos: number): string | undefined; /** * Set one of the lines blocks to be active * @param pos Sets the active block at the position * @returns The active block */ setActiveBlock(pos: EditorV3Position | EditorV3PositionClass): EditorV3BlockClass | undefined; /** * Get the text blocks from a position to another * @param startPos Start position * @param endPosOpt End position, if not provided uses the end of the line * @param splitLocked Split locked blocks * @returns Text blocks from startPos to endPos */ subBlocks(startPos: number, endPosOpt?: number, splitLocked?: boolean): EditorV3BlockClass[]; /** * Get the text blocks from the start of the line to a position * @param pos Position to get blocks to * @param splitLocked Split locked blocks * @returns Blocks from start to pos */ upToPos(pos: number, splitLocked?: boolean): EditorV3BlockClass[]; /** * Get the text blocks from a position to the end of the line * @param pos Position to get blocks from * @param splitLocked Split locked blocks * @returns Blocks from pos to end */ fromPos(pos: number, splitLocked?: boolean): EditorV3BlockClass[]; /** * Split the line into two * @param pos Position to split at * @returns The remainer of the line after the split */ splitLine(pos: number): EditorV3Line; /** * Insert text blocks into the line * @param newTextBlocks Array of text blocks to insert * @param pos Position to insert at */ insertBlocks(newTextBlocks: EditorV3BlockClass[], pos: number): void; /** * Remove part of the line * @param startPos Start position to remove * @param endPos End position to remove (exclusive) * @returns self */ removeSection(startPos: number, endPos: number): EditorV3BlockClass[]; /** * Delete a character from the line * @param pos Character to remove * @returns self */ deleteCharacter(pos: number): this; /** * Apply a style to a section of the line * @param styleName Style to apply * @param startPos Start position to apply style * @param endPos End position to apply style (exclusive) * @returns self */ applyStyle(styleName: string, startPos: number, endPos: number): this; /** * Remove style from a section of the line * @param startPos Start position to remove style * @param endPos End position to remove style (exclusive) * @returns self */ removeStyle(startPos: number, endPos: number): this; } /** * Represents the content of an EditorV3 instance. */ export class EditorV3Content implements IEditorV3 { /** * Current text alignment */ get textAlignment(): EditorV3Align; /** * Set text alignment * Can be left, center, right, or justify */ set textAlignment(newTa: EditorV3Align); /** * Current decimal alignment percent */ get decimalAlignPercent(): number; set decimalAlignPercent(newDap: number); /** * Current available styles in the editor */ get styles(): EditorV3Styles | undefined; set styles(newStyles: EditorV3Styles | undefined); get allowMarkdown(): boolean; set allowMarkdown(newAllow: boolean); get markdownSettings(): IMarkdownSettings; set markdownSettings(newSettings: IMarkdownSettings); get showMarkdown(): boolean; set showMarkdown(newShow: boolean); get allowWindowView(): boolean; set allowWindowView(newAllow: boolean); get atListFunction(): ((typedString: string) => Promise>[]>) | undefined; get maxAtListLength(): number; /** * Current lines in the editor */ lines: EditorV3Line[]; get allowNewLine(): boolean; set allowNewLine(newAllow: boolean); get lineLengths(): number[]; get wordPositions(): { line: number; startChar: number; endChar: number; isLocked: boolean; }[]; get caretPosition(): EditorV3Position | null; set caretPosition(posInput: EditorV3Position | null); get caretPositionF(): EditorV3PositionF | null; set caretPositionF(posInput: EditorV3PositionF | null); /** * Indicates if the current content can be updated with this selection * @param pos * @returns boolean */ isCaretLocked(pos?: EditorV3PositionClass | null): boolean; private get _isLockable(); /** * Text from the element */ get text(): string; /** * Markdown text from the element */ get markdownText(): string; /** * Current content properties */ get contentProps(): EditorV3ContentProps; /** * Data representation of content */ get data(): IEditorV3; /** * Element to render */ toHtml(renderProps: EditorV3RenderProps): DocumentFragment; /** * Render Markdown in an Fragment * @param markdownSettings Markdown settings, current settings by default * @returns Documentfragment with rendered markdown */ toMarkdownHtml(renderProps: EditorV3RenderProps): DocumentFragment; /** * Create a new EditorV3Content instance * @param arg Stringified JSON or HTML/text * @param props Optional properties * @returns Instance of the object */ constructor(arg?: string | HTMLDivElement | IEditorV3, props?: EditorV3ContentPropsInput); /** * Loads a string into the content. Will attempt to parse as JSON, then as HTML/text * @param arg string input */ loadString(arg: string, props?: EditorV3ContentPropsInput): void; /** * Returns the content specified by a position * @param pos Position of the content to return * @returns Lines specified by the position */ subLines(pos: EditorV3Position): EditorV3Line[]; /** * Returns the content from the start to a position * @param endLine * @param endChar * @returns Lines up to the end position */ upToPos(endLine: number, endChar: number): EditorV3Line[]; /** * Returns the content from a position to the end * @param startLine * @param startChar * @returns Lines from the start position to the end */ fromPos(startLine: number, startChar: number): EditorV3Line[]; /** * Returns the current style at a position * @param line Line to check * @param character character number to check * @returns string Style name or undefined */ getStyleAt(line: number, character: number): string | undefined; /** * Add a line break at the caret position, removes selection * @param pos Portion of content to replace with a new line * @returns Position at the start of the new line */ splitLine(pos: EditorV3Position): EditorV3Position; /** * Merge line and the following line * @param line First line that will be merged */ mergeLines(line: number): void; /** * Delete a character or selection * @param backwards Delete direction * @param pos Optional caret position */ deleteCharacter(backwards: boolean, pos?: EditorV3Position): void; /** * Find text within the content * @param text String to search for * @returns Array of positions or null if not found */ getTextPosition(text: string): EditorV3Position[] | null; /** * Remove a selection and optionally insert new lines * @param pos Position of section to remove * @param newLines Line content to insert * @returns */ splice(pos: EditorV3Position, newLines?: EditorV3Line[]): EditorV3Line[]; /** * Apply style to selection * @param styleName Style to apply * @param applyPos Position to apply style to, is missing caret position will be used * @returns self */ applyStyle(styleName: string, applyPos?: EditorV3Position): this; /** * Remove style from selection * @returns self */ removeStyle(removePos?: EditorV3Position): this; /** * Update target element with conntent and set caret position * @param editableEl DOM element to render inside */ redraw(editableEl: HTMLDivElement, focus: boolean): void; /** * Check status of content, e.g. after a mouseUp event */ checkStatus(): void; /** * Handle keydown event in the holding div * @param e Handle keydown event */ handleKeydown(e: React.KeyboardEvent): void; /** * Handle keyup event in the holding div * @param e Handle keyup event */ handleKeyup(e: React.KeyboardEvent): void; /** * Handle copy and cut inside the holding div * @param e Copy or cut event */ handleCopy: (e: React.ClipboardEvent) => void; /** * Handle paste inside the holding div * @param e Paste event */ handlePaste(e: React.ClipboardEvent): void; } /** * Returns an object containing values/functions for using a debounced value * * `currentValue`: Current, non-debounced value * `setCurrentValue`: Function to update the current value * `forceUpdate`: Function to force the current value to bypassing debounce * `undo`: Function to go back to previous version * `redo`: Function to go forwards to undone version * `stack`: Array of all values in the stack * `index`: Current index in the stack * * Example: * * `const { currentValue, setCurrentValue } = useDebounce(value, setValue);` * * @param value The value to be debounced * @param setValue Used to update the value after debounce * @param debounceMilliseconds Number of milliseconds to debounce by, defaults to 500, leave null for only forced updates * @param onChange Function to be called when the value changes * @param onDebounce Function to be called when the value is internally debounced * @param comparisonFunction Function to compare the current value with the previous value, defaults to lodash isEqual * @returns object * */ export const useDebounceStack: (value: T, setValue: Dispatch, debounceMilliseconds?: number | null, onChange?: (newValue: T, index: number, stack: T[]) => void, onDebounce?: (newValue: T) => void, comparisonFunction?: (oldValue: T, newValue: T) => boolean) => { currentValue: T | null; setCurrentValue: Dispatch; forceUpdate: (newValue?: T) => void; undo: (steps?: number) => void; redo: (steps?: number) => void; stack: T[] | null; index: number; }; export const getObjectDiff: (obj1: unknown, obj2: unknown) => any; export const joinV3intoBlock: (lines: IEditorV3[]) => IEditorV3; export const splitV3intoLines: (value: IEditorV3) => IEditorV3[]; export const toHtml: (text: string) => string; export const fromHtml: (text: string) => string; interface BaseSelectProps extends React.SelectHTMLAttributes { id: string; value: string | number | undefined; availableOptions: { label: string; value: string | number | boolean | undefined; disabled?: boolean; }[]; change: (ret: string | number | boolean | undefined) => void; label?: string; } export const BaseSelect: { ({ id, value, availableOptions, change, label, ...rest }: BaseSelectProps): JSX.Element; displayName: string; }; interface BaseInputProps extends React.InputHTMLAttributes { id: string; value: string | number | undefined; onNewValue?: (ret: string | number) => void; label?: string; } export const BaseInput: { ({ id, value, onNewValue, label, ...rest }: BaseInputProps): JSX.Element; displayName: string; }; interface EditorV3Props extends React.HTMLAttributes { id: string; input: string | IEditorV3; editable?: boolean; setText?: (ret: string) => void; setObject?: (ret: IEditorV3) => void; customStyleMap?: EditorV3Styles; allowNewLine?: boolean; textAlignment?: EditorV3Align; decimalAlignPercent?: number; style?: CSSProperties; resize?: boolean | "vertical"; noBorder?: boolean; spellCheck?: boolean; styleOnContextMenu?: boolean; allowMarkdown?: boolean; allowWindowView?: boolean; markdownSettings?: IMarkdownSettings; debounceMilliseconds?: number | null; atListFunction?: (at: string) => Promise>[]>; maxAtListLength?: number; } export const EditorV3: { ({ id, input, editable, setText, setObject, style, allowMarkdown, allowWindowView, allowNewLine, decimalAlignPercent, markdownSettings, customStyleMap, textAlignment, resize, noBorder, spellCheck, styleOnContextMenu, debounceMilliseconds, atListFunction, maxAtListLength, ...rest }: EditorV3Props): JSX.Element; displayName: string; }; interface BaseEdivotV3Props extends EditorV3Props { label?: string; errorText?: string; } export const BaseEditorV3: ({ label, errorText, style, resize, ...rest }: BaseEdivotV3Props) => JSX.Element; interface BaseCheckboxProps extends React.HTMLAttributes { id: string; checked: boolean; change: (ret: boolean) => void; label?: string; } export const BaseCheckbox: { ({ id, checked, change, label, ...rest }: BaseCheckboxProps): JSX.Element; displayName: string; }; interface ExpanderProps extends React.HTMLAttributes { lineChild: React.ReactNode; children: React.ReactNode; open?: boolean; timeMs?: number; disabled?: boolean; height?: number; contentBoxStyle?: React.CSSProperties; } export const Expander: { ({ lineChild, children, open, timeMs, height, disabled, contentBoxStyle, ...rest }: ExpanderProps): JSX.Element; displayName: string; }; interface ObjectEditorItemOptions { name: string; label?: string; type: "select" | "string" | "boolean" | "number"; options?: { label: string; value: string | number | boolean | undefined; }[]; dataPath?: string; customRenderer?: (value: string | string[] | number | number[] | boolean | undefined | null) => JSX.Element; } interface ItemInputProps extends React.HTMLAttributes { dataPoint: string; } export const ItemInput: { ({ dataPoint, ...rest }: ItemInputProps): JSX.Element; displayName: string; }; interface ObjectEditorProps> { object: T; setObject: React.Dispatch>; objectTemplate: ObjectEditorItemOptions[]; } export const ObjectEditor: { >({ object, setObject, objectTemplate, }: ObjectEditorProps): JSX.Element; displayName: string; }; interface StylesEditorProps { styles: EditorV3Styles; setStyles: React.Dispatch>; styleItems?: ObjectEditorItemOptions[]; } export const StylesEditor: ({ styles, setStyles, styleItems, }: StylesEditorProps) => JSX.Element; //# sourceMappingURL=editor-v3.d.ts.map