chore: add error when hooks is used outside of EditorContext (#286)

* added Error when using useEditor or useNode outside of EditorContext

* changed EditorContext default to null

Author: ankri

packages/core/src/editor/EditorContext.tsx

@@ -3,4 +3,4 @@ import { createContext } from 'react';
 import { EditorStore } from './store';
 
 export type EditorContext = EditorStore;
-export const EditorContext = createContext<EditorContext>({} as EditorContext);
+export const EditorContext = createContext<EditorContext>(null);

packages/core/src/editor/useInternalEditor.ts

@@ -4,8 +4,10 @@ import {
   QueryCallbacksFor,
   wrapConnectorHooks,
   ChainableConnectors,
+  ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT,
 } from '@craftjs/utils';
 import { useContext, useMemo } from 'react';
+import invariant from 'tiny-invariant';
 
 import { EditorContext } from './EditorContext';
 import { QueryMethods } from './query';
@@ -35,8 +37,10 @@ export type useInternalEditorReturnType<C = null> = useCollectorReturnType<
 export function useInternalEditor<C>(
   collector?: EditorCollector<C>
 ): useInternalEditorReturnType<C> {
-  const handlers = useEventHandler();
   const store = useContext(EditorContext);
+  invariant(store, ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT);
+
+  const handlers = useEventHandler();
   const collected = useCollector(store, collector);
 
   const connectors = useMemo(

packages/core/src/hooks/tests/EditorContext.test.tsx

@@ -0,0 +1,38 @@
+import {
+  ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT,
+  ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT,
+} from '@craftjs/utils';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { useEditor } from '../useEditor';
+import { useNode } from '../useNode';
+
+/**
+ * since we are mocking useInternalEditor in useEditor.test.tsx we are using a dedicated test suite here
+ */
+describe('Using useEditor outside of EditorContext', () => {
+  it('should throw an error when we use useEditor outside of <Editor />', () => {
+    const TestComponent = () => {
+      useEditor();
+      return null;
+    };
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrowError(ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT);
+  });
+});
+
+describe('Using useNode outside of EditorContext', () => {
+  it('should throw an error when we use useNode outside of <Editor />', () => {
+    const TestComponent = () => {
+      useNode();
+      return null;
+    };
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrowError(ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT);
+  });
+});

packages/core/src/nodes/useInternalNode.ts

@@ -1,4 +1,6 @@
+import { ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT } from '@craftjs/utils';
 import { useMemo, useContext } from 'react';
+import invariant from 'tiny-invariant';
 
 import { NodeContext, NodeContextType } from './NodeContext';
 
@@ -26,6 +28,8 @@ export function useInternalNode<S = null>(
   collect?: (node: Node) => S
 ): useInternalNodeReturnType<S> {
   const context = useContext(NodeContext);
+  invariant(context, ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT);
+
   const { id, related, connectors } = context;
 
   const { actions: EditorActions, query, ...collected } = useInternalEditor(

packages/utils/src/constants.ts

@@ -43,3 +43,11 @@ export const ERROR_DESERIALIZE_COMPONENT_NOT_IN_RESOLVER = `An Error occurred wh
 Available components in resolver: %availableComponents%
 
 More info: https://craft.js.org/r/docs/api/editor#props`;
+
+export const ERROR_USE_EDITOR_OUTSIDE_OF_EDITOR_CONTEXT = `You can only use useEditor in the context of <Editor />. 
+
+Please only use useEditor in components that are children of the <Editor /> component.`;
+
+export const ERROR_USE_NODE_OUTSIDE_OF_EDITOR_CONTEXT = `You can only use useNode in the context of <Editor />. 
+
+Please only use useNode in components that are children of the <Editor /> component.`;