Example of using ProseMirror in a Browser

1

I had significant difficulty getting started with ProseMirror. The README talks about compiling ES6 to ES5 and packaging with something like Browserify. Three hours later I came up with this:

$ mkdir prosemirror-test; cd prosemirror-test
$ cat > package.json
{
  "name": "prosemirror-test",
  "version": "0.0.1",
  "description": "Test prosemirror",
  "scripts": {
  },
  "author": "",
  "license": "BSD",
  "dependencies": {
    "browserify": "*",
    "babelify": "*",
    "babel-preset-es2015": "*",
    "prosemirror": "git://github.com/prosemirror/prosemirror.git"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  }
}

^D
$ npm install
$ cd node_modules/prosemirror/
$ npm install
$ npm run dist
$ cd ../..
$ wget http://prosemirror.net/demo_basic.html
$ wget http://prosemirror.net/demo_basic.js
$ browserify demo_basic.js -o demo_basic_bundle.js
# Open demo_basic.html
1 Like
2

Thanks! Also I wasn’t sure how to build it the best way and how to distribute the build instructions and things based on top of prosemirror. So I created this prosemirror-test repo for now https://github.com/fiduswriter/prosemirror-test .

3

I had added a “postinstall” script to my projects package.json

cd node_modules/prosemirror && npm install && npm run dist

This works great for me so far and is guaranteed to use the way the prosemirror/package.json intended for prosemirror to be built.

1 Like
4

I strongly recommend you learn about and use http://webpack.github.io/

Here’s a post on how to set it up for prosemirror: Webpack ES6 import issue

In my experience webpack is incredibly fast at compilations. I’m able to code in es6 and import prosemirror exports from the /src directory (as appose to /dist). Changes seem to take about ~100ms to compile thanks to webpack --watch cashing.

1 Like
5

Yes, I just needed something that was fast to setup and is easy to understand for someone usually working with django/python without knowing anything about bower, nodejs, npm, etc. and without any of that installed.

90% of who I am thinking about is future-me who will have forgotten about whatever I did in 3 weeks time unless I have created instructions/a script to do it for me.

We are likely to start using npm or bower + other tools for pre-compilation and JS dependency management in the near future, but we would like for that step to be separate from our step of using prosemirror first.