Skip to main content

​
useEditor

The primary hook for accessing editor state and actions. 
import { useEditor } from "@open-email/editor";

const { document, selectedNodeId, actions } = useEditor();

​
Returns

​
document
EmailDocument
The current email document.
​
selectedNodeId
string | null
The ID of the currently selected node.
​
mode
'visual' | 'code' | 'preview'
The current editor mode.
​
isDirty
boolean
True if the document has unsaved changes.
​
actions
object
Methods to modify the state: updateNode, addNode, deleteNode, moveNode, selectNode, setMode.

​
useSelectedNode

A convenience hook to get the full node object for the currently selected node. 
import { useSelectedNode } from "@open-email/editor";

const node = useSelectedNode();

if (node) {
  console.log("Selected:", node.type);
}

​
useNode

Get a specific node by its ID. 
import { useNode } from "@open-email/editor";

const node = useNode("some-node-id");

​
useDragDrop

Access the current drag and drop state. 
import { useDragDrop } from "@open-email/editor";

const { activeId, activeData, overId } = useDragDrop();

​
useSidebarDraggable

Makes a sidebar component draggable. 
import { useSidebarDraggable } from "@open-email/editor";

const { attributes, listeners, setNodeRef, isDragging } = useSidebarDraggable(
  "button", // component type
  "Button", // label
);

​
useNodeDraggable

Makes an existing node draggable (in canvas or layers). 
import { useNodeDraggable } from "@open-email/editor";

const { attributes, listeners, setNodeRef, isDragging } = useNodeDraggable(
  nodeId,
  parentId,
  index,
  "Label",
  "canvas", // or "layers"
);

​
useNodeDroppable

Makes a node a drop target. If the node accepts children, drops will be inserted as the first child. If not, drops will be inserted after the node. 
import { useNodeDroppable } from "@open-email/editor";

const { setNodeRef, isOver } = useNodeDroppable(
  nodeId,
  parentId,
  index,
  acceptsChildren,
);

​
useDropZone

Creates a drop indicator zone between nodes. 
import { useDropZone } from "@open-email/editor";

const { setNodeRef, isOver } = useDropZone(parentId, index);

​
useContainerDropZone

Creates a drop zone for an empty container. 
import { useContainerDropZone } from "@open-email/editor";

const { setNodeRef, isOver } = useContainerDropZone(containerId);