Issues with basic editor setup in 0.12

1

I’m currently migrating to 0.12, but am experiencing problems with the following basic editor setup:

const {EditorState} = require("prosemirror-state")
const {EditorView} = require("prosemirror-view")
const {schema} = require("prosemirror-schema-basic")
const {exampleSetup} = require("prosemirror-example-setup")

const editorView = new EditorView(document.querySelector(".full"), {
  state: EditorState.create({
    schema,
    plugins: exampleSetup({schema}),
  }),
  onAction(action) {
    editorView.updateState(editorView.state.applyAction(action));
  },
})

This is the HTML:

<!doctype html>

<meta charset="utf-8"/>
<title>Test editor</title>
<link rel=stylesheet href="styles/prosemirror.css">

<div class="full"></div>

<script src="/moduleserve/load.js" data-module="./app.js" data-require></script>

Typing text and applying marks using the keyboard shortcuts works fine, but I am experiencing the following issues:

  • Pressing Enter at the end of a paragraph does nothing (when debugging this it looks like a replace step is generated, but applying the step does not change the doc)
  • Typing "> " at the start of a paragraph throws the error Uncaught RangeError: Position 1 outside of fragment (<blockquote>).
  • Performing the following operations makes pressing Enter at the end of a paragraph work as expected: Type “ab”, put cursor behind “a”, press Enter, press Enter, move cursor into empty line, type "> " (throws error). Now pressing Enter works as expected.

Is there anything I am missing here? I tried to keep the setup as simple as possible and I’m not sure what the problem is.

2

Interesting. When I run your code, enter seems to work fine for me. Do you have a similar problem in http://prosemirror.net/demo/basic.html ? If not, could you double-check that all your installed dependencies are at 0.12.0?

3

I cannot reproduce the issues on http://prosemirror.net/demo/basic.html where everything works fine for me.

I just double-checked the dependencies and they are all at 0.12.0. Here’s all of the code that I put together for this simple setup: https://drive.google.com/open?id=0B26zh7CVRieldUtJSmhLWWlBRlk

These are the commands to get it up and running:

npm install
./node_modules/.bin/moduleserve src

Then I open http://localhost:8080, where I can reproduce the issues I described.

My node version is 4.4.2 and I could reproduce this on Chromium 52.0.2743.116 and Firefox 49.0 on Linux.

EDIT: I also just tested this on a different machine (Chromium on MacOS 10.10) where I could reproduce the same issue so it doesn’t seem to be caused by something on my machine.

4

I installed your demo, and using Chrome 52 Linux, enter still works for me. Did you try a full reinstall locally as well?

5

I downloaded and extracted the files from the Google Drive link into an empty folder and ran the commands exactly as described. I did this both on my machine (Linux) and another machine (MacOS).

What about typing "> " in my demo. Does that work for you, too?

I have no idea why it doesn’t work on my machine, but I’ll try this in a virtual machine to be sure that it’s not something specific to my local setup.

6

I just reproduced the issues in a completely fresh installation of Ubuntu 16.04 LTS with Node v4.6.1 and Firefox 47.0 in VirtualBox. Any ideas what the problem could be?

7

I’m using Node 6.3. I’m not really sure how that could be relevant, but it might be a factor.

8

I just ran the same test using Node 6.3.1 and it works fine and I could not reproduce the issues!

It feels really strange to me that the Node version is responsible for the issues I described. I think it would be a good idea to add this to the documentation. Now that Node 6.9 has transitioned into LTS it should hopefully be fine for the majority of users if we do not support Node 4.x. I also tried it with Node 6.9.1 (latest LTS) and it works fine.

I could further track down the issue and it’s related to which Node version is used to run npm install. Running npm install using Node 4.6.1 is what causes the problem.

Upgrading to Node 6.x is something I had planned anyway so it’s something I’ll just have to do along with the ProseMirror migration to 0.12.

1 Like
9

Well, that is strange, and I’d like to get to the bottom of it. The compiled JavaScript comes from NPM, so that should be the same. The packages don’t have install scripts, so they aren’t doing anything interesting during installation.

I guess I’ll have to install an old node version and dig into this.

10

Okay, I found the issue. Node 4 comes with NPM 2, which is rather awful about duplicating sub-dependencies by default. The result is that some modules end up loaded multiple times, and uses of instanceof get confused by the fact that objects come from another instance of the module they are checking against.

You can fix this with npm dedupe, or, preferably, by just upgrading to NPM 3 (in Node 6.x+).

1 Like
11

Thanks for getting to the bottom of this! Good to know what actually causes this issue.

12

Thanks to this thread! I just ran into this too (even with ProseMirror basic example), and upgrading node (in my case from 4.8.3 to 6.11.1) fixed it. To help others who are new to all this, could this be mentioned at ProseMirror Guide ? For example the paragraph

The easiest way to bundle ProseMirror is to use NPM and browserify. Install Browserify and the ProseMirror modules you need through NPM.

could say

The easiest way to bundle ProseMirror is to use NPM and browserify. Install Browserify and the ProseMirror modules you need through NPM (version 3+).

or whatever you think is appropriate. (Unless you think not many people today would have such old versions of node/npm installed.)

13

I hope NPM 2 will soon go extinct (there’s really not much reason to run it anymore), but I’ll add a note about this when I update the installation instructions.

1 Like