Support Strict mode and memoize node view components

.eslintrc.json

@@ -17,6 +17,7 @@
   },
   "rules": {
     "no-console": ["error", { "allow": ["error"] }],
+    "react/prop-types": "off",
     "react-hooks/exhaustive-deps": [
       "warn",
       {

.github/workflows/check.yml

@@ -48,8 +48,5 @@ jobs:
       - name: Install dependencies
         run: yarn
 
-      - uses: browser-actions/setup-chrome@v1
-      - uses: browser-actions/setup-firefox@v1
-
       - name: Test
         run: yarn test

README.md

@@ -40,6 +40,8 @@ yarn add @nytimes/react-prosemirror
   - [`useEditorEventListener`](#useeditoreventlistener-1)
   - [`useEditorEffect`](#useeditoreffect-1)
   - [`NodeViewComponentProps`](#nodeviewcomponentprops)
+  - [`useStopEvent`](#usestopevent)
+  - [`useSelectNode`](#useselectnode)
   - [`widget`](#widget)
 
 <!-- tocstop -->
@@ -573,12 +575,13 @@ export function SelectionWidget() {
 
 ```tsx
 type NodeViewComponentProps = {
-  decorations: readonly Decoration[];
-  innerDecorations: DecorationSource;
-  node: Node;
-  children?: ReactNode | ReactNode[];
-  isSelected: boolean;
-  pos: number;
+  nodeProps: {
+    decorations: readonly Decoration[];
+    innerDecorations: DecorationSource;
+    node: Node;
+    children?: ReactNode | ReactNode[];
+    getPos: () => number;
+  };
 } & HTMLAttributes<HTMLElement>;
 ```
 
@@ -594,6 +597,27 @@ and should pass them through to their top-level DOM element.
 In addition to accepting these props, all node view components _must_ forward
 their ref to their top-level DOM element.
 
+### `useStopEvent`
+
+```tsx
+type useStopEvent = (stopEvent: (view: EditorView, event: Event) => boolean): void
+```
+
+This hook can be used within a node view component to register a
+[stopEvent handler](https://prosemirror.net/docs/ref/#view.NodeView.stopEvent).
+Events for which this returns true are not handled by the editor.
+
+### `useSelectNode`
+
+```tsx
+type useSelectNode = (selectNode: () => void, deselectNode?: () => void): void
+```
+
+This hook can be used within a node view component to register
+[selectNode and deselectNode handlers](https://prosemirror.net/docs/ref/#view.NodeView.selectNode).
+The selectNode handler will only be called when a NodeSelection is created whose
+node is this one.
+
 ### `widget`
 
 ```tsx

demo/main.tsx

@@ -19,6 +19,8 @@ import React, {
   Ref,
   StrictMode,
   forwardRef,
+  useCallback,
+  useMemo,
   useState,
 } from "react";
 import { createRoot } from "react-dom/client";
@@ -196,7 +198,7 @@ const Footnote = forwardRef(function Footnote(
 });
 
 const TestWidget = forwardRef(function TestWidget(
-  { widget, pos, ...props }: WidgetViewComponentProps,
+  { widget, getPos, ...props }: WidgetViewComponentProps,
   ref: ForwardedRef<HTMLSpanElement>
 ) {
   return (
@@ -303,6 +305,25 @@ function DemoEditor() {
   const [state, setState] = useState(editorState);
   const [showReactNodeViews, setShowReactNodeViews] = useState(true);
 
+  const nodeViews = useMemo(
+    () =>
+      showReactNodeViews
+        ? {
+            paragraph: Paragraph,
+            list: List,
+            list_item: ListItem,
+            footnote: Footnote,
+          }
+        : undefined,
+    [showReactNodeViews]
+  );
+
+  const dispatchTransaction = useCallback(function (tr) {
+    setState((prev) => {
+      return prev.apply(tr);
+    });
+  }, []);
+
   return (
     <main>
       <h1>React ProseMirror Demo</h1>
@@ -324,25 +345,12 @@ function DemoEditor() {
         key={`${showReactNodeViews}`}
         className="ProseMirror"
         state={state}
-        dispatchTransaction={function (tr) {
-          setState((prev) => {
-            return prev.apply(tr);
-          });
-        }}
+        dispatchTransaction={dispatchTransaction}
         plugins={plugins}
-        nodeViews={
-          showReactNodeViews
-            ? {
-                paragraph: Paragraph,
-                list: List,
-                list_item: ListItem,
-                footnote: Footnote,
-              }
-            : undefined
-        }
+        nodeViews={nodeViews}
         customNodeViews={showReactNodeViews ? undefined : customNodeViews}
       >
-        <ProseMirrorDoc as={<article />} />
+        <ProseMirrorDoc />
       </ProseMirror>
     </main>
   );

docs/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React-ProseMirror Demo</title>
-    <script type="module" crossorigin src="/react-prosemirror/assets/index-DM4UcNX5.js"></script>
+    <script type="module" crossorigin src="/react-prosemirror/assets/index-B5SGPZtJ.js"></script>
     <link rel="stylesheet" crossorigin href="/react-prosemirror/assets/index-DAGU9WLy.css">
   </head>
   <body>

package.json

@@ -57,7 +57,9 @@
     "@vitejs/plugin-react": "^4.3.1",
     "@wdio/browser-runner": "^9.0.9",
     "@wdio/cli": "^9.0.9",
+    "@wdio/dot-reporter": "^9.1.0",
     "@wdio/mocha-framework": "^9.0.8",
+    "@wdio/spec-reporter": "^9.1.0",
     "@wdio/types": "^9.0.8",
     "@yarnpkg/sdks": "^3.0.0-rc.38",
     "concurrently": "^7.6.0",