@hlang-org/editor-react

Interfaces

ClipboardState

Defined in: packages/editor-react/src/hooks/useClipboard.ts:34

Methods

canPaste()

canPaste(): boolean;

Defined in: packages/editor-react/src/hooks/useClipboard.ts:51

Whether the in-memory clipboard holds something to paste.

Returns

boolean

copy()

copy(): void;

Defined in: packages/editor-react/src/hooks/useClipboard.ts:36

Copy the current selection into the clipboard (no graph change).

Returns

void

cut()

cut(): void;

Defined in: packages/editor-react/src/hooks/useClipboard.ts:38

Copy the selection, then delete it as one undo step.

Returns

void

duplicate()

duplicate(): void;

Defined in: packages/editor-react/src/hooks/useClipboard.ts:47

Clone the current selection in place (offset), selecting the clones.

Returns

void

paste()

paste(flowPos?): void;

Defined in: packages/editor-react/src/hooks/useClipboard.ts:45

Paste the clipboard as fresh nodes, selecting them. If flowPos is given (the canvas cursor in flow space), the pasted set is anchored there; else a small fixed offset is used. Prefers the system clipboard (cross-document), falling back to the in-memory copy. Async because it reads the OS clipboard.

Parameters

Returns

void

remove()

remove(): void;

Defined in: packages/editor-react/src/hooks/useClipboard.ts:49

Delete the current selection as one undo step.

Returns

void

DiagnosticsState

Defined in: packages/editor-react/src/hooks/useDiagnostics.ts:11

Properties

Methods

worstOf()

worstOf(id): Diagnostic | undefined;

Defined in: packages/editor-react/src/hooks/useDiagnostics.ts:15

The most severe diagnostic on a node (error > warning), or undefined.

Parameters

Returns

Diagnostic | undefined

EditorProviderProps

Defined in: packages/editor-react/src/context.tsx:15

Properties

GraphView

Defined in: packages/editor-react/src/hooks/useGraphSync.ts:17

Properties

HistoryState

Defined in: packages/editor-react/src/hooks/useHistory.ts:11

Properties

Methods

redo()

redo(): void;

Defined in: packages/editor-react/src/hooks/useHistory.ts:15

Returns

void

undo()

undo(): void;

Defined in: packages/editor-react/src/hooks/useHistory.ts:14

Returns

void

HlangEdgeData

Defined in: packages/editor-react/src/mapping/types.ts:28

Data payload attached to a React Flow edge. Carries the hlang port ids so a custom edge can distinguish, e.g., an error-port edge from a normal one.

Extends

• Record<string, unknown>

Indexable

[key: string]: unknown

Properties

HlangFlowProps

Defined in: packages/editor-react/src/hooks/useHlangFlow.ts:40

Properties

HlangNodeData

Defined in: packages/editor-react/src/mapping/types.ts:20

Data payload attached to a React Flow node. Carries the full EditorNode so custom node components can render ports, params, kind, etc. The index signature satisfies React Flow's Record<string, unknown> data constraint while keeping our own field strongly typed.

Extends

• Record<string, unknown>

Indexable

[key: string]: unknown

Properties

NodeBox

Defined in: packages/editor-react/src/hooks/useReconnect.ts:26

A node's live geometry (flow space) supplied by the host for hit-testing.

Properties

NodeViewState

Defined in: packages/editor-react/src/mapping/convert.ts:19

Per-node view flags reflected into React Flow (from editor-core's view-state).

Properties

ReconnectHandle

Defined in: packages/editor-react/src/hooks/useReconnect.ts:34

Methods

hitTestEdge()

hitTestEdge(nodeId, box): string | undefined;

Defined in: packages/editor-react/src/hooks/useReconnect.ts:43

Given a dragged node's live box, find the nearest edge its centre lands on (within a tolerance derived from the node's own size), or undefined. This owns the geometry (edge iteration + point-to-segment distance) so hosts don't re-implement it. Edges incident to the node itself are ignored.

Parameters

Returns

string | undefined

insertOnEdge()

insertOnEdge(
   nodeId, 
   edgeId, 
   at?
): boolean;

Defined in: packages/editor-react/src/hooks/useReconnect.ts:48

Splice nodeId onto edgeId (drop-on-edge insert). Returns true if a legal splice happened. Optionally snaps the node to at (e.g. the edge midpoint).

Parameters

Returns

boolean

onReconnect()

onReconnect(oldEdge, connection): void;

Defined in: packages/editor-react/src/hooks/useReconnect.ts:36

RF onReconnect: move an edge's endpoint to a new port (one undo step).

Parameters

Returns

void

RenameHandle

Defined in: packages/editor-react/src/hooks/useRename.ts:10

Methods

rename()

rename(id, name): void;

Defined in: packages/editor-react/src/hooks/useRename.ts:11

Parameters

Returns

void

SelectionState

Defined in: packages/editor-react/src/hooks/useSelection.ts:14

Properties

Methods

clear()

clear(): void;

Defined in: packages/editor-react/src/hooks/useSelection.ts:20

Returns

void

isSelected()

isSelected(id): boolean;

Defined in: packages/editor-react/src/hooks/useSelection.ts:17

Parameters

Returns

boolean

selectEdges()

selectEdges(ids, mode): void;

Defined in: packages/editor-react/src/hooks/useSelection.ts:19

Parameters

Returns

void

selectNodes()

selectNodes(ids, mode): void;

Defined in: packages/editor-react/src/hooks/useSelection.ts:18

Parameters

Returns

void

ViewStateState

Defined in: packages/editor-react/src/hooks/useViewState.ts:14

Properties

Methods

clear()

clear(): void;

Defined in: packages/editor-react/src/hooks/useViewState.ts:23

Returns

void

isHidden()

isHidden(id): boolean;

Defined in: packages/editor-react/src/hooks/useViewState.ts:17

Parameters

Returns

boolean

isLocked()

isLocked(id): boolean;

Defined in: packages/editor-react/src/hooks/useViewState.ts:18

Parameters

Returns

boolean

setHidden()

setHidden(id, hidden): void;

Defined in: packages/editor-react/src/hooks/useViewState.ts:19

Parameters

Returns

void

setLocked()

setLocked(id, locked): void;

Defined in: packages/editor-react/src/hooks/useViewState.ts:20

Parameters

Returns

void

toggleHidden()

toggleHidden(id): void;

Defined in: packages/editor-react/src/hooks/useViewState.ts:21

Parameters

Returns

void

toggleLocked()

toggleLocked(id): void;

Defined in: packages/editor-react/src/hooks/useViewState.ts:22

Parameters

Returns

void

Type Aliases

HlangRFEdge

type HlangRFEdge = RFEdge<HlangEdgeData>;

Defined in: packages/editor-react/src/mapping/types.ts:41

A React Flow edge specialized to hlang.

HlangRFNode

type HlangRFNode = RFNode<HlangNodeData, NodeKind>;

Defined in: packages/editor-react/src/mapping/types.ts:38

A React Flow node specialized to hlang. type is the node kind (R/T/W).

Functions

EditorProvider()

function EditorProvider(__namedParameters): ReactElement;

Defined in: packages/editor-react/src/context.tsx:20

@hlang-org/editor-react

React bindings for the hlang visual editor. Hooks and context that connect a headless @hlang-org/editor-core to React Flow (@xyflow/react). This is the ONLY layer that imports React Flow — the core stays framework-agnostic, and design-system styling lives in @hlang-org/editor-ui, not here.

Parameters

Returns

ReactElement

endpointsFromConnection()

function endpointsFromConnection(connection): 
  | {
  source: Endpoint;
  target: Endpoint;
}
  | undefined;

Defined in: packages/editor-react/src/mapping/convert.ts:71

Extract the source (O) and target (I) endpoints from a React Flow connection. Returns undefined when either handle is missing — hlang always wires named ports, so a connection without handles cannot be represented.

Parameters

Returns

| { source: Endpoint; target: Endpoint; } | undefined

findPort()

function findPort(node, portId): PortDescriptor | undefined;

Defined in: packages/editor-react/src/mapping/types.ts:44

Look up a port descriptor on an editor node by id.

Parameters

Returns

PortDescriptor | undefined

toRFEdge()

function toRFEdge(edge, sourceNode): HlangRFEdge;

Defined in: packages/editor-react/src/mapping/convert.ts:48

Convert an editor edge to a React Flow edge, preserving O->I direction.

Parameters

Returns

HlangRFEdge

toRFNode()

function toRFNode(node, view?): HlangRFNode;

Defined in: packages/editor-react/src/mapping/convert.ts:33

Convert an editor node to a React Flow node. Optional view flags map to React Flow's native hidden (removed from the rendered canvas), selected (so programmatic selection like ⌘A reflects on the canvas), and, when locked, draggable/selectable: false (pinned). Kept pure — callers supply the flags from core.viewState/core.selection, so this stays trivially testable.

Parameters

Returns

HlangRFNode

useClipboard()

function useClipboard(core): ClipboardState;

Defined in: packages/editor-react/src/hooks/useClipboard.ts:132

Parameters

Returns

ClipboardState

useConnect()

function useConnect(core): (connection) => void;

Defined in: packages/editor-react/src/hooks/useConnect.ts:37

Returns an onConnect handler that commits a validated ConnectCommand.

Parameters

Returns

(connection) => void

useDiagnostics()

function useDiagnostics(core): DiagnosticsState;

Defined in: packages/editor-react/src/hooks/useDiagnostics.ts:20

Parameters

Returns

DiagnosticsState

useEdgeChanges()

function useEdgeChanges(core): (changes) => void;

Defined in: packages/editor-react/src/hooks/useChanges.ts:52

Parameters

Returns

(changes) => void

useEditor()

function useEditor(): EditorCore;

Defined in: packages/editor-react/src/context.tsx:25

Access the EditorCore from context. Throws if used outside a provider.

Returns

EditorCore

useGraphSync()

function useGraphSync(core): GraphView;

Defined in: packages/editor-react/src/hooks/useGraphSync.ts:23

Subscribe to model changes and return the current React Flow view.

Parameters

Returns

GraphView

useHistory()

function useHistory(core): HistoryState;

Defined in: packages/editor-react/src/hooks/useHistory.ts:18

Parameters

Returns

HistoryState

useHlangFlow()

function useHlangFlow(core): HlangFlowProps;

Defined in: packages/editor-react/src/hooks/useHlangFlow.ts:70

Parameters

Returns

HlangFlowProps

useIsValidConnection()

function useIsValidConnection(core): IsValidConnection;

Defined in: packages/editor-react/src/hooks/useConnect.ts:18

Returns an isValidConnection predicate backed by the core validator.

Parameters

Returns

IsValidConnection

useNodeChanges()

function useNodeChanges(core): (changes) => void;

Defined in: packages/editor-react/src/hooks/useChanges.ts:24

Parameters

Returns

(changes) => void

useReconnect()

function useReconnect(core): ReconnectHandle;

Defined in: packages/editor-react/src/hooks/useReconnect.ts:51

Parameters

Returns

ReconnectHandle

useRename()

function useRename(core): RenameHandle;

Defined in: packages/editor-react/src/hooks/useRename.ts:14

Parameters

Returns

RenameHandle

useSelection()

function useSelection(core): SelectionState;

Defined in: packages/editor-react/src/hooks/useSelection.ts:23

Parameters

Returns

SelectionState

useViewState()

function useViewState(core): ViewStateState;

Defined in: packages/editor-react/src/hooks/useViewState.ts:26

Parameters

Returns

ViewStateState