TypeError: root.getSelection is not a function

[legitmaxwu]

Hi, thanks for this library! I like the idea of using React to render the editor.

I'm trying to set it up in my Next.js project. I have @nytimes/[email protected] installed, and I have a minimal setup:

"use client";

import { EditorState } from "prosemirror-state";
import {
  ProseMirror,
  ProseMirrorDoc,
  reactKeys,
} from "@nytimes/react-prosemirror";
import { schema } from "prosemirror-schema-basic";

import dynamic from "next/dynamic";

const ProseMirrorEditor = dynamic(
  () =>
    Promise.resolve(() => (
      <ProseMirror
        defaultState={EditorState.create({ schema, plugins: [reactKeys()] })}
      >
        <ProseMirrorDoc />
      </ProseMirror>
    )),
  { ssr: false },
);

export default ProseMirrorEditor;

However, I'm getting the following error when I try to interact with the editor:

Unhandled Runtime Error
TypeError: root.getSelection is not a function

Call Stack
NodeViewDesc.setSelection
node_modules/.pnpm/@[email protected][email protected][email protected]_pro_c2gfulo3vqcyszuxgmzn63zkkq/node_modules/@nytimes/react-prosemirror/dist/esm/viewdesc.js (306:29)
NodeViewDesc.setSelection
node_modules/.pnpm/@[email protected][email protected][email protected]_pro_c2gfulo3vqcyszuxgmzn63zkkq/node_modules/@nytimes/react-prosemirror/dist/esm/viewdesc.js (301:57)
selectionToDOM
node_modules/.pnpm/[email protected]/node_modules/prosemirror-view/dist/index.js (2247:22)
ReactEditorView.updateStateInner
node_modules/.pnpm/[email protected]/node_modules/prosemirror-view/dist/index.js (5409:17)
ReactEditorView.update
node_modules/.pnpm/[email protected]/node_modules/prosemirror-view/dist/index.js (5324:14)
ReactEditorView.update
node_modules/.pnpm/@[email protected][email protected][email protected]_pro_c2gfulo3vqcyszuxgmzn63zkkq/node_modules/@nytimes/react-prosemirror/dist/esm/hooks/useEditor.js (86:15)
ReactEditorView.runPendingEffects
node_modules/.pnpm/@[email protected][email protected][email protected]_pro_c2gfulo3vqcyszuxgmzn63zkkq/node_modules/@nytimes/react-prosemirror/dist/esm/hooks/useEditor.js (82:18)
<unknown>
node_modules/.pnpm/@[email protected][email protected][email protected]_pro_c2gfulo3vqcyszuxgmzn63zkkq/node_modules/@nytimes/react-prosemirror/dist/esm/hooks/useEditor.js (256:19)

Any idea why this might be the case?

[smoores-dev]

Is this a server-side error or are you seeing this in the browser console?

[smoores-dev]

(Funny enough, I was just working on SSR in Next.js (#148), but I didn't run into this, which is... odd!)

[legitmaxwu]

I'm seeing it in the browser console!

[smoores-dev]

Ok, that makes more sense than in the server logs, at least! What browser are you using?

[legitmaxwu]

Chrome Version 131.0.6778.140 (Official Build) (arm64)

The error appears when I try to type anything into the editor. If you have an existing setup that works in Next.js I would love to see how it's structured.

[smoores-dev]

I don't have anything public facing right now, unfortunately :/. But this looks right to me, and I don't see why this would be happening -- that should be running document.getSelection() (root should be document), and all browsers have supported document.getSelection() essentially forever.

Would you be able to set a breakpoint in the browser debugger and see what value root is?

[legitmaxwu]

I logged it--It's a ReactEditorView object! (for some reason it's hard for me to copy the text)

Thanks so much for your help and quick responses, by the way!

[legitmaxwu]

When I initially focus on the editor (and before typing something / causing the error) root is just the document, like you said it should be. Perhaps it's getting overridden somewhere?

[smoores-dev]

No problem! This is super weird, and almost certainly a bug in React ProseMirror, though I don't know... how?? I'll have to try to reproduce tomorrow and see if I can figure out the cause. Thanks for reporting!

[smoores-dev]

@legitmaxwu which version of Next.js and React are you using?

[smoores-dev]

Ah, ok. The short term solution is to downgrade your prosemirror-view version - and internal API that we rely on has changed. Make sure you use the prosemirror-view version that React ProseMirror specifies in its peer dependencies, currently 1.34.2! I'll open a PR to update to the newer version shortly.

[legitmaxwu]

Thanks so much for your help!! I locked to [email protected] and it fixed everything. I use [email protected] and [email protected]

Since React Prosemirror uses internal Prosemirror APIs, maybe it makes sense to lock the peer dependencies to a specific version? (e.g. 1.34.2 vs ^1.34.2) Since even minor version bumps can be breaking. Maybe there's other downsides I haven't considered but it would've helped here

[smoores-dev]

Great! Glad it's fixed. We do actually pin to a specific version of prosemirror-view for just that reason: https://github.com/nytimes/react-prosemirror/blob/main/package.json#L102 but most package managers don't make it very clear when a peer dep version constraint is violated, unfortunately

[legitmaxwu]

Oh wow, yeah, my package.json had ^1.34.2 so I assumed the peer dependency wasn't pinned haha.

[smoores-dev]

Going to close this issue! I'll open a PR to bump us up to the latest prosemirror-view