Weave.js
prerelease Prerelease 5.6.0 Latest 5.4.2 5.4.1 5.4.0 5.3.0 5.2.2 5.2.1
↑↓ navigate · ↵ select · esc close
Weave.js
Weave.js
prerelease Prerelease 5.6.0 Latest 5.4.2 5.4.1 5.4.0 5.3.0 5.2.2 5.2.1

WeaveTextV2Node

Text node with native on-canvas editing API Reference

Overview

The WeaveTextV2Node class represents a text element on the Weave.js canvas, with editing drawn natively on the canvas instead of a DOM textarea overlay. It is a drop-in replacement for WeaveTextNode; the existing class is unchanged and stays available.

Built on a Konva.Shape with its own layout engine, it keeps the editing and idle appearance identical, and is the foundation for rich text.

The class extends the WeaveNode class

Type

This node nodeType property value is text, the same as WeaveTextNode.

Existing documents load and render without migration. Register WeaveTextV2Node instead of WeaveTextNode: a Weave instance holds one handler per node type, so both cannot be registered together.

Import

import { WeaveTextV2Node } from "@inditextech/weave-sdk";

Instantiation

const node = new WeaveTextV2Node({
  config: {
    edition: { outline: { color: "#0074ff", width: 1, padding: 0 } },
    sizeWarning: { threshold: 200000 },
  },
});

Differences from WeaveTextNode

  • Renders through WeaveTextV2Shape (a Konva.Shape) with Konva.Text-compatible getters (text(), fontSize(), getTextWidth(), …​). The onEnterTextNodeEditMode and onExitTextNodeEditMode event payload node is a WeaveTextV2Shape, not a Konva.Text.

  • Editing happens on the canvas: a hidden proxy textarea handles typing, IME and clipboard, and the caret and selection are painted on the utility layer, together with an outline of the text box (useful with fixed width or height). There is no DOM overlay.

  • Entering edit mode on existing text selects all of it (like Figma), so typing replaces it; a newly created node starts with the caret.

  • Selection supports click, drag, double-click (word), triple-click (paragraph), arrows, Home/End and Up/Down on visual lines.

  • Undo/redo is local to the edit session (typing, deletion, paste and IME composition each coalesce into one step). Leaving edit mode commits a single updateNode, skipped when the text is unchanged. While editing, keydown does not propagate to the page, so app-level undo does not fire; window.weaveTextEditing holds the editing node id.

  • Clipboard is plain text only. Large pastes are laid out in time slices.

  • All four layouts (smart, auto-all, auto-height, fixed) keep their behavior. Auto-sized layouts measure from the engine and no longer depend on the zoom level.

  • WeaveTextToolAction works with it unchanged.

Content model

Content is stored as blocks (paragraphs) of runs ({ t, m }: text and marks). The text prop stays as a derived mirror. A node without blocks is synthesized from text on load without rewriting the document; a whole-text link becomes a full-range link mark.

Marks already present in a document are preserved when the text is edited, but they are not rendered yet and cannot be created from the editor: rich formatting is out of scope for now.

Parameters

Name Type Required Default Description

config

DeepPartial<WeaveTextV2Properties>

Config parameters for the node.

Configuration

Same properties as WeaveTextNode, except edition, plus:

edition.borderSize does not exist on WeaveTextV2Node: there is no DOM textarea border to size. Passing it is a type error. Use edition.outline instead.
Property Default Description

edition.outline.enabled

true

Draw an outline of the text box while editing.

edition.outline.color

#0074ff

Outline colour.

edition.outline.width

1

Outline width in screen pixels (constant across zoom levels).

edition.outline.padding

0

Gap between the text box and the outline, in screen pixels.

sizeWarning.threshold

200000

Serialized size of blocks (characters) above which the onTextSizeWarning event is emitted. Content is never truncated.

Events

Event Payload Description

onEnterTextNodeEditMode

{ node: WeaveTextV2Shape }

An edit session started.

onExitTextNodeEditMode

{ node: WeaveTextV2Shape }

An edit session ended and its content was committed.

onTextSizeWarning

{ node: WeaveTextV2Shape, size: number, threshold: number }

The serialized blocks grew past sizeWarning.threshold. Emitted once per crossing.

Same behavior and methods as WeaveTextNode: getLink, setLink and removeLink.

Exports

WeaveTextV2Node, WeaveTextV2Shape, TextLayoutEngine, TextEditSession, TextEditModel and the related types. TextEditSession works on a TextEditTarget and a TextEditHost, so other shapes can reuse the layout engine and the editor.

Server side

Measurement and painting work on the node-canvas backend (setupCanvasBackend()) and were also verified on the skia-canvas backend (setupSkiaBackend()). Register fonts in your app; they are not registered by the SDK.