Skip to main content

NodeHelpers

Methods that helps describe a specified Node.

Usage​

useEditor hook​

You can access the NodeHelpers via the node query method in the useEditor hook.

import {useEditor} from "@craftjs/core";

const TextComponent = () => {
  const { id } = useNode();
  const { query: {node} } = useEditor();
  const isRoot = node(id).Root(),
        isDraggable = node(id).Draggable();
  ...
}

User Component rules​

NodeHelpers can also be accessed via the last parameter of each User Component rules.

const MyComp = () => {

}
MyComp.craft = { 
  rules: {
    canDrag: (node: Node, helper: NodeHelpers) => {
      const ancestors = helper(node.id).ancestors();
      ...
    },
    canMoveIn : (incoming: Node[], self: Node, helper: NodeHelpers) => {
      const isRoot = helper(self.id).isRoot();
      ...
    }
    canMoveOut: (outgoing: Node[], self: Node, helper: NodeHelpers) => {
      const isDeletable = helper(self.id).isDeletable();
      ...
    }
  }
}

Methods​

get​

Function

Get Node object from id

Returns​

  • Node

descendants​

Function

Returns an array of Node ids of all child Nodes of a given Node.

Parameters​

  • deepboolean
    If set to true, retrieve all descendants in nested levels. Default is false
  • includeOnly?'childNodes' | 'linkedNodes'
    Get descendants that are either childNodes or linkedNodes. If unset, get all descendants

Returns​

  • NodeId[]
// The descendants of `div` when deep=false
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>
// The descendants of `div` when deep=true
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>

const Container = () => {
  return (
    <div>
      <Element id="linked-div">
        <h1>Hello</h1>
      <Element>
    </div>
  )
}
// The descendants of `div` when deep=true and includeOnly="childNodes" only
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>

const Container = () => {
  return (
    <div>
      <Element id="linked-div">
        <h1>Hello</h1>
      <Element>
    </div>
  )
}
// The descendants of `div` when deep=true and includeOnly="linkedNodes" only
<div> 
  <h2>Yo</h2>
  <Element is={Container}>
    <h3>Child</h3>
  </Element>
</div>

const Container = () => {
  return (
    <div>
      <Element id="linked-div">
        <h1>Hello</h1>
      <Element>
    </div>
  )
}

ancestors​

Function

Returns an array of Node ids of all ancestors

Returns​

  • NodeId[]

linkedNodes​

Function

Returns an array of linked Node ids

Returns​

  • NodeId[]

childNodes​

Function

Returns an array of child Node ids

Returns​

  • NodeId[]

isRoot​

Function

Returns true if a given Node is the Root Node

Returns​

  • boolean
const App  = () => {
  return (
    <Editor>
      <Frame>
        <div> // true
          <div>Yo</div> // false
          <h2>It's me</h2> // false
          <Element is={Container}> // false 
            <h3>Child</h3> // false
          </Element>
        </div>
      </Frame>
    </Editor>
  )
}

isCanvas​

Function

Check if a given Node is a Canvas

Returns​

  • boolean
const App  = () => {
  return (
    <Editor>
      <Frame>
        <Element canvas> // true
          <div>Yo</div> // false
          <Element is={Container}>It's me</Element> // false
          <Element canvas> // true 
            <h3>Child</h3> // false
          </Element>
        </Element>
      </Frame>
    </Editor>
  )
}

isLinkedNode​

Function

Check if a given Node is linked to the parent Node via an arbitary id

Returns​

  • boolean
const App  = () => {
  return (
    <Editor>
      <Frame>
        <Element canvas> // false
          <div>Yo</div> // false
          <Element is={Hero}>It's me</Element> // false
        </Element>
      </Frame>
    </Editor>
  )
}

const Hero = ({background, title}) => {
  return (
    <div style={{ background }}>
      <Element id="title" is={Text} text={title} /> // true
      ...
    </div>
  )
}

isDeletable​

Function

A Node may be deleted as long as it is not one of the following:

  • Root Node
  • Top-level Node

Parameters​

  • nodeNode
    The Node object to check

Returns​

  • boolean
const App  = () => {
  return (
    <Editor resolves={{Container}}>
      <Frame>
        <div> // false
          <div>Yo</div> // true
          <h2>It's me</h2> // true
          <Element canvas> // true 
            <h3>Child</h3> // true
            <Container /> // true
          </Element>
        </div>
      </Frame>
    </Editor>
  )
}

const Container = () => {
  return (
    <div>
      <Element id="main"> // false
        <h2>Hi</h2> // true
      </Element>
    </div>
  )
}

isTopLevelNode​

Function

A Node is considered top-level if it's one of the following:

  • The Root Node
  • A linked Node defined inside a User Component

Parameters​

  • nodeNode
    The Node object to check

Returns​

  • boolean
const App  = () => {
  return (
    <Editor resolves={{Container}}>
      <Frame>
        <div> // true
          <div>Yo</div> // false
          <h2>It's me</h2> // false
          <div> // false 
            <h3>Child</h3> // false
            <Container /> // false
          </div>
        </div>
      </Frame>
    </Editor>
  )
}

const Container = () => {
  return (
    <div>
      <Element id="main"> // true
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
      <Element id="secondary"> // true
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
    </div>
  )
}

isParentOfTopLevelNode​

Function

This returns true if a Node's User Component defines a <Element /> in its render method.

Returns​

  • boolean
const App  = () => {
  return (
    <Editor resolves={{Container}}>
      <Frame>
        <Element> // false
          <div>Yo</div> // false
          <h2>It's me</h2> // false
          <Element> // false 
            <h3>Child</h3> // false
            <Container /> // true
          </Element>
        </Element>
      </Frame>
    </Editor>
  )
}

const Container = () => {
  return (
    <div>
      <Element id="main"> // false
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
      <Element id="seconday"> // false
        <h2>Hi</h2> // false
        <Element> // false
          <h2>Hi</h2> // false
        </Element>
      </Element>
    </div>
  )
}

isDraggable​

Function

A Node may be dragged and moved if it satisfies both of the following conditions:

  • The Node is an immediate child of a Canvas Node, hence it's draggable
  • The Node's canDrag rule allows it to be moved

Parameters​

  • onError(err: string) => void
    Error callback

Returns​

  • boolean

isDroppable​

Function

Check if a Node is Droppable relative to the target Node.

Parameters​

  • targetIdNodeId
    The target Node
  • onError(err: string) => void
    Error callback

Returns​

  • boolean

Example​

In the following example, we're checking if our MyCanvas component would be able to accept the current selected Node in the editor.

const MyCanvas = () => {
  const { id } = useNode();
  const { canWeAcceptTheSelectedNode } = useEditor((state, query) => ({
    canWeAcceptTheSelectedNode: state.events.selected && query.node(id).Droppable(state.events.selected)
  }));
}

toSerializedNode​

Function

Gets the current Node in it's SerializedNode form

Returns​

  • SerializedNode

toNodeTree​

Function

Gets the current Node and its descendants in its NodeTree form

Parameters​

  • includeOnly?'childNodes' | 'linkedNodes'
    Get descendants that are either childNodes or linkedNodes. If unset, get all descendants

Returns​

  • NodeTree