Use consistent module layout and naming

.yarn/versions/fb01eea5.yml

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

src/components/Editor.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ReactNode } from "react";
+
+import { useEditorView } from "../hooks/useEditorView.js";
+import type { UseEditorViewOptions } from "../hooks/useEditorView.js";
+
+import { EditorContext } from "./EditorContext.js";
+
+export interface EditorProps extends UseEditorViewOptions {
+  mount: HTMLElement | null;
+  children?: ReactNode | null;
+}
+
+export function Editor({ mount, children, ...options }: EditorProps) {
+  const value = useEditorView(mount, options);
+  return (
+    <EditorContext.Provider value={value}>{children}</EditorContext.Provider>
+  );
+}

src/contexts/EditorContext.ts → src/components/EditorContext.ts

@@ -26,5 +26,3 @@ export interface EditorContextValue {
 export const EditorContext = createContext(
   null as unknown as EditorContextValue
 );
-
-export const EditorProvider = EditorContext.Provider;

src/components/LayoutGroup.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useLayoutEffect, useRef } from "react";
+import type { EffectCallback } from "react";
+
+import { useForceUpdate } from "../hooks/useForceUpdate.js";
+
+import { LayoutGroupContext } from "./LayoutGroupContext.js";
+
+export interface LayoutGroupProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Provides a boundary for grouping layout effects.
+ *
+ * Descendant components can invoke the `useLayoutGroupEffect` hook to register
+ * effects that run after all descendants within the group have processed their
+ * regular layout effects.
+ */
+export function LayoutGroup({ children }: LayoutGroupProps) {
+  const createQueue = useRef(new Set<() => void>()).current;
+  const destroyQueue = useRef(new Set<() => void>()).current;
+
+  const forceUpdate = useForceUpdate();
+  const isUpdatePending = useRef(true);
+
+  const ensureFlush = useCallback(() => {
+    if (!isUpdatePending.current) {
+      forceUpdate();
+      isUpdatePending.current = true;
+    }
+  }, [forceUpdate]);
+
+  const register = useCallback<typeof useLayoutEffect>(
+    (effect: EffectCallback) => {
+      let destroy: ReturnType<EffectCallback>;
+      const create = () => {
+        destroy = effect();
+      };
+
+      createQueue.add(create);
+      ensureFlush();
+
+      return () => {
+        createQueue.delete(create);
+        if (destroy) {
+          destroyQueue.add(destroy);
+          ensureFlush();
+        }
+      };
+    },
+    [createQueue, destroyQueue, ensureFlush]
+  );
+
+  useLayoutEffect(() => {
+    isUpdatePending.current = false;
+    createQueue.forEach((create) => create());
+    createQueue.clear();
+    return () => {
+      destroyQueue.forEach((destroy) => destroy());
+      destroyQueue.clear();
+    };
+  });
+
+  return (
+    <LayoutGroupContext.Provider value={register}>
+      {children}
+    </LayoutGroupContext.Provider>
+  );
+}

src/components/LayoutGroupContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import type { EffectCallback } from "react";
+
+export interface LayoutGroupContextValue {
+  (effect: EffectCallback): ReturnType<EffectCallback>;
+}
+
+export const LayoutGroupContext = createContext(
+  null as unknown as LayoutGroupContextValue
+);

src/components/NodeViews.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import type { ReactPortal } from "react";
+
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { ROOT_NODE_KEY } from "../plugins/react.js";
+
+import { NodeViewsContext } from "./NodeViewsContext.js";
+import type { NodeViewsContextValue } from "./NodeViewsContext.js";
+
+type NodeViewsProps = {
+  portals: NodeViewsContextValue;
+};
+
+export function NodeViews({ portals }: NodeViewsProps) {
+  const rootRegisteredPortals = portals[ROOT_NODE_KEY];
+  const [rootPortals, setRootPortals] = useState<ReactPortal[]>(
+    rootRegisteredPortals?.map(({ portal }) => portal) ?? []
+  );
+
+  // `getPos` is technically derived from the EditorView
+  // state, so it's not safe to call until after the EditorView
+  // has been updated
+  useEditorEffect(() => {
+    setRootPortals(
+      rootRegisteredPortals
+        ?.sort((a, b) => a.getPos() - b.getPos())
+        .map(({ portal }) => portal) ?? []
+    );
+  }, [rootRegisteredPortals]);
+
+  return (
+    <NodeViewsContext.Provider value={portals}>
+      {rootPortals}
+    </NodeViewsContext.Provider>
+  );
+}

src/contexts/PortalRegistryContext.ts → src/components/NodeViewsContext.ts

@@ -1,22 +1,22 @@
 import { ReactPortal, createContext } from "react";
 
-import { NodeKey } from "../plugins/react.js";
-
-export type RegisteredPortal = {
+type NodeViewRegistration = {
   getPos: () => number;
   portal: ReactPortal;
 };
 
-export type PortalRegistry = Record<NodeKey, RegisteredPortal[]>;
+export interface NodeViewsContextValue {
+  [key: symbol | string]: NodeViewRegistration[];
+}
 
 /**
- * A map of node view keys to portals.
+ * A context containing a map of node view keys to portals.
  *
  * Each node view registers a portal under its parent's
  * key. Each can then retrieve the list of portals under their
  * key, allowing portals to be rendered with the appropriate
  * hierarchy.
  */
-export const PortalRegistryContext = createContext<PortalRegistry>(
-  null as unknown as PortalRegistry
+export const NodeViewsContext = createContext(
+  null as unknown as NodeViewsContextValue
 );

src/components/ProseMirror.tsx

@@ -1,25 +1,8 @@
-import type { EditorState, Plugin, Transaction } from "prosemirror-state";
-import type { EditorProps, EditorView } from "prosemirror-view";
 import React from "react";
-import type { ReactNode } from "react";
 
-import { EditorProvider } from "../contexts/EditorContext.js";
-import { LayoutGroup } from "../contexts/LayoutGroup.js";
-import { useEditorView } from "../hooks/useEditorView.js";
-
-interface Props extends EditorProps {
-  mount: HTMLElement | null;
-  children?: ReactNode | null;
-  defaultState?: EditorState;
-  state?: EditorState;
-  plugins?: readonly Plugin[];
-  dispatchTransaction?(this: EditorView, tr: Transaction): void;
-}
-
-function Editor({ mount, children, ...props }: Props) {
-  const value = useEditorView(mount, props);
-  return <EditorProvider value={value}>{children}</EditorProvider>;
-}
+import { Editor } from "./Editor.js";
+import type { EditorProps } from "./Editor.js";
+import { LayoutGroup } from "./LayoutGroup.js";
 
 /**
  * Renders the ProseMirror View onto a DOM mount.
@@ -42,7 +25,7 @@ function Editor({ mount, children, ...props }: Props) {
  * }
  * ```
  */
-export function ProseMirror(props: Props) {
+export function ProseMirror(props: EditorProps) {
   return (
     <LayoutGroup>
       <Editor {...props} />

src/contexts/__tests__/DeferredLayoutEffects.test.tsx → src/components/__tests__/LayoutGroup.test.tsx

@@ -1,9 +1,10 @@
 import { act, render, screen } from "@testing-library/react";
 import React, { useLayoutEffect, useState } from "react";
 
-import { LayoutGroup, useLayoutGroupEffect } from "../LayoutGroup.js";
+import { useLayoutGroupEffect } from "../../hooks/useLayoutGroupEffect.js";
+import { LayoutGroup } from "../LayoutGroup.js";
 
-describe("DeferredLayoutEffects", () => {
+describe("LayoutGroup", () => {
   jest.useFakeTimers("modern");
 
   it("registers multiple effects and runs them", () => {

src/hooks/__tests__/useEditorViewLayoutEffect.test.tsx

@@ -4,8 +4,8 @@ import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import React from "react";
 
-import { EditorContext } from "../../contexts/EditorContext.js";
-import { LayoutGroup } from "../../contexts/LayoutGroup.js";
+import { EditorContext } from "../../components/EditorContext.js";
+import { LayoutGroup } from "../../components/LayoutGroup.js";
 import { useEditorEffect } from "../useEditorEffect.js";
 
 function TestComponent({

src/hooks/useEditorEffect.ts

@@ -2,8 +2,8 @@ import type { EditorView } from "prosemirror-view";
 import { useContext } from "react";
 import type { DependencyList } from "react";
 
-import { EditorContext } from "../contexts/EditorContext.js";
-import { useLayoutGroupEffect } from "../contexts/LayoutGroup.js";
+import { EditorContext } from "../components/EditorContext.js";
+import { useLayoutGroupEffect } from "../hooks/useLayoutGroupEffect.js";
 
 /**
  * Registers a layout effect to run after the EditorView has

src/hooks/useEditorEventCallback.ts

@@ -1,7 +1,7 @@
 import type { EditorView } from "prosemirror-view";
 import { useCallback, useContext, useRef } from "react";
 
-import { EditorContext } from "../contexts/EditorContext.js";
+import { EditorContext } from "../components/EditorContext.js";
 
 import { useEditorEffect } from "./useEditorEffect.js";
 

src/hooks/useEditorEventListener.ts

@@ -2,7 +2,7 @@ import type { Plugin } from "prosemirror-state";
 import type { DOMEventMap, EditorView } from "prosemirror-view";
 import { useCallback, useContext, useRef } from "react";
 
-import { EditorContext } from "../contexts/EditorContext.js";
+import { EditorContext } from "../components/EditorContext.js";
 import type { EventHandler } from "../plugins/componentEventListeners.js";
 
 import { useEditorEffect } from "./useEditorEffect.js";

src/hooks/useEditorState.ts

@@ -1,7 +1,7 @@
 import type { EditorState } from "prosemirror-state";
 import { useContext } from "react";
 
-import { EditorContext } from "../contexts/EditorContext.js";
+import { EditorContext } from "../components/EditorContext.js";
 
 /**
  * Provides access to the current EditorState value.