Makes EditorView non-nullable in useLayoutGroupEffect and `useEdito…

…rEventCallback` (#83)

* only run callback if the view is defined

* only fire effects when view is available

.yarn/versions/25690ba0.yml

@@ -0,0 +1,2 @@
+releases:
+  "@nytimes/react-prosemirror": minor

README.md

@@ -165,7 +165,7 @@ export function SelectionWidget() {
   const ref = useRef()
 
   useEditorEffect((view) => {
-    if (!view || !ref.current) return
+    if (!ref.current) return
 
     const viewClientRect = view.dom.getBoundingClientRect()
     const coords = view.coordsAtPos(view.state.selection.anchor))
@@ -232,7 +232,6 @@ import { useEditorEventCallback } from "@nytimes/react-prosemirror";
 
 export function BoldButton() {
   const onClick = useEditorEventCallback((view) => {
-    if (!view) return;
     const toggleBoldMark = toggleMark(view.state.schema.marks.bold);
     toggleBoldMark(view.state, view.dispatch, view);
   });
@@ -577,7 +576,7 @@ export function SelectionWidget() {
   const ref = useRef()
 
   useEditorEffect((view) => {
-    if (!view || !ref.current) return
+    if (!ref.current) return
 
     const viewClientRect = view.dom.getBoundingClientRect()
     const coords = view.coordsAtPos(view.state.selection.anchor))

src/hooks/useEditorEffect.ts

@@ -20,7 +20,7 @@ import { useLayoutGroupEffect } from "../contexts/LayoutGroup.js";
  * EditorView lives in an ancestor component.
  */
 export function useEditorEffect(
-  effect: (editorView: EditorView | null) => void | (() => void),
+  effect: (editorView: EditorView) => void | (() => void),
   dependencies?: DependencyList
 ) {
   const { editorView } = useContext(EditorContext);
@@ -33,7 +33,9 @@ export function useEditorEffect(
   // every time it changes, because it will most likely
   // be defined inline and run on every re-render.
   useLayoutGroupEffect(
-    () => effect(editorView),
+    () => {
+      if (editorView) effect(editorView);
+    },
     // The rules of hooks want to be able to statically
     // verify the dependencies for the effect, but this will
     // have already happened at the call-site.

src/hooks/useEditorEventCallback.ts

@@ -19,7 +19,7 @@ import { useEditorEffect } from "./useEditorEffect.js";
  * providers.
  */
 export function useEditorEventCallback<T extends unknown[], R>(
-  callback: (view: EditorView | null, ...args: T) => R
+  callback: (view: EditorView, ...args: T) => R
 ) {
   const ref = useRef(callback);
   const { editorView } = useContext(EditorContext);
@@ -29,7 +29,9 @@ export function useEditorEventCallback<T extends unknown[], R>(
   }, [callback]);
 
   return useCallback(
-    (...args: T) => ref.current(editorView, ...args),
+    (...args: T) => {
+      if (editorView) ref.current(editorView, ...args);
+    },
     [editorView]
   );
 }