TextEditor

import { TextEditor } from 'pixi-silk/ui/textedit';

Experimental

Text you can click and edit on the canvas. It draws a SilkText plus a caret and a selection drawn with silk.

Typing goes through a hidden <textarea> that follows the caret on screen. Input methods (Japanese, Chinese, dead keys), mobile keyboards, autocorrect, the emoji picker and the clipboard all work.

• Click to place the caret, drag to select, Shift + click to extend. Double click selects a word, triple click a paragraph. On touch, tap places the caret and a long press selects a word.
• Editing keys follow the platform. Escape leaves the editor.
• Undo merges consecutive typing. Pass history to share the app’s undo stack.

Events: focus, blur, input (every edit), change (on commit, when the text changed), submit (Enter in a single-line editor) and tab. The same values are on TextEditor.state.

Rich text (mixed styles in one editor) and right-to-left text are not supported.

Experimental: the API may change in a minor release.

Example#

const name = new TextEditor({ text: 'Untitled', fontSize: 14, multiline: false, width: 200 });

name.on('change', (text: string) => console.log('renamed to', text));
world.addChild(name);

Extends#

• Container

Constructors#

Constructor#

new TextEditor(options?: TextEditorOptions): TextEditor;

Experimental

Parameters#

Returns#

TextEditor

Overrides#

Container.constructor

Properties#

Accessors#

composition#

Get Signature#

get composition(): 
  | {
  end: number;
  start: number;
}
  | null;

Experimental

Range of the text an input method is composing, or null.

Returns

Type Literal

{
  end: number;
  start: number;
}

null

field#

Get Signature#

get field(): HTMLTextAreaElement | null;

Experimental

The hidden text field while it exists (created on first focus).

Returns

HTMLTextAreaElement | null

focused#

Get Signature#

get focused(): boolean;

Experimental

True while the editor has keyboard focus.

Returns

boolean

multiline#

Get Signature#

get multiline(): boolean;

Experimental

True for a multi-line editor.

Returns

boolean

readOnly#

Get Signature#

get readOnly(): boolean;

Experimental

Selectable and copyable, but not editable.

Returns

boolean

Set Signature#

set readOnly(v: boolean): void;

Experimental

Sets TextEditor.readOnly.

Parameters

Returns

void

selectable#

Get Signature#

get selectable(): boolean;

Experimental

Whether pointer input places a caret and selects.

Returns

boolean

Set Signature#

set selectable(v: boolean): void;

Experimental

Sets TextEditor.selectable.

Parameters

Returns

void

selectedText#

Get Signature#

get selectedText(): string;

Experimental

The selected text.

Returns

string

selectionEnd#

Get Signature#

get selectionEnd(): number;

Experimental

End of the selection (the larger offset).

Returns

number

selectionStart#

Get Signature#

get selectionStart(): number;

Experimental

Start of the selection (the smaller offset).

Returns

number

value#

Get Signature#

get value(): string;

Experimental

The text. Setting it replaces the text and puts the caret at the end, without an undo step.

Returns

string

Set Signature#

set value(v: string): void;

Experimental

Sets TextEditor.value.

Parameters

Returns

void

Methods#

blur()#

blur(): this;

Experimental

Takes keyboard focus away and commits the text.

Returns#

this

chain()#

static chain(editors: readonly TextEditor[]): () => void;

Experimental

Links editors in Tab order, like fields of a form: Tab moves to the next one, Shift + Tab back. Returns the unlink function.

Parameters#

Returns#

() => void

deleteBackward()#

deleteBackward(unit?: "grapheme" | "word" | "line"): boolean;

Experimental

Deletes the selection, or the grapheme, word or line before the caret.

Parameters#

Returns#

boolean

deleteForward()#

deleteForward(unit?: "grapheme" | "word" | "line"): boolean;

Experimental

Deletes the selection, or the grapheme, word or line after the caret.

Parameters#

Returns#

boolean

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Blurs (which commits the text), removes the hidden text field and stops listening for input.

Parameters#

Returns#

void

Overrides#

Container.destroy

focus()#

focus(selectAll?: boolean): this;

Experimental

Gives the editor keyboard focus. selectAll selects the whole text, as tabbing into a field does.

Parameters#

Returns#

this

handleKey()#

handleKey(e: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey"> & {
  isComposing?: boolean;
  keyCode?: number;
}): boolean;

Experimental

Handles a key press the way the hidden field receives it. Returns true when the editor used the key. You only need it to drive the editor from your own key handling.

Parameters#

Returns#

boolean

hitTest()#

hitTest(global: PointData): CaretHit;

Experimental

The caret position under a point in global (screen) coordinates.

Parameters#

Returns#

CaretHit

insert()#

insert(text: string, kind?: TextEditKind): boolean;

Experimental

Replaces the selection with text, as typing does. Returns false when nothing changed.

Parameters#

Returns#

boolean

redo()#

redo(): void;

Experimental

Redoes the last undone edit.

Returns#

void

redraw()#

redraw(): void;

Experimental

Draws the caret, selection and placeholder again. Happens on its own after every change.

Returns#

void

select()#

select(anchor: number, focus?: number): this;

Experimental

Selects from anchor to focus (a caret when focus is left out). Offsets snap to grapheme boundaries.

Parameters#

Returns#

this

selectAll()#

selectAll(): this;

Experimental

Selects the whole text.

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

Advances the caret blink and animations by dt seconds. Returns true while it still moves.

Parameters#

Returns#

boolean

undo()#

undo(): void;

Experimental

Undoes the last text edit (in the app’s history when it was given one with undo()).

Returns#

void