How to unconnect a User Component

[rohailtaha]

I want to dynamically unlink a component from craft. Once the connect function is called, I want to somehow unconnect the corresponding node:

// how to unconnect dynamically?
<div ref={ref => connect(ref)}> </div>

I have the following UserComponent:

function DivBlock({children}) {
	return (
		<Wrapper>
			{({ connect }) => 
                                // I want to rerun it to unlink
				<div ref={connect}> {children} </div>
			}
		</Wrapper>
	)
}

My Wrapper component is like this:

function Wrapper(children) {
	const { isNodeDisabled, connectors: { connect } } = useNode(node => ({
		isNodeDisabled: !!node.data.custom.disabled,
	}))

      return children({ connect: isNodeDisabled ? ref => null : ref => connect(ref)})
}

Initially isNodeDisabled is false. I dynamically set it to true at some time. The Wrapper function rerenders with isNodeDisabled set to true and correct value of connect prop passed to DivBlock but the div block remains connected (selectable, hovered etc).

I read the craft docs, but there don't seem to be any help.

[flashlog]

You'll probably have to write your own custom event to unlink dynamically. Here's how it might work:

• Use the custom event handler: https://craft.js.org/docs/api/editor#override-default-event-handlers

import {
  DefaultEventHandlers,
  DefaultEventHandlersOptions,
  Editor,
  EditorStore,
  NodeId
} from '@craftjs/core'

class CustomEventHandlers extends DefaultEventHandlers {
  handlers() {
    const defaultHandlers = super.handlers();

    return {
      ...defaultHandlers,
      unlink: (el: HTMLElement, id: NodeId) => {
        // Remove DOM reference from store
        this.options.store.actions.setDOM(id, null);
        // Unbind event listeners
        this.unbindEventListeners(el);

      },
    };
  }
}

const App = () => {
  return (
    <Editor
      // Use your own event handlers
      handlers={(store) =>
        new CustomEventHandlers({ store})
      }
    >
      ...
    </Editor>
  )
}