How do I bundle prosemirror-example-setup and use in the browser?

1

Hello,

I installed the npm package prosemirror-example-setup. There is a file dist/index.js but this doesn’t seem suitable to include in the browser.

Are there simple steps to bundle this with a basic editor and include in the browser?

There is already a rollup config there, can I not re-purpose it to include an editor and bundle a browser friendly .js file?

Thanks, Bahadir

1 Like
2

You have to use a bundler such as Rollup, Webpack, or Browserify to combine the various ProseMirror modules (example-setup doesn’t include the rest of the library) into a browser-loadable file.

3

I created a bare minimal webpack bundle for anyone interested in getting started with prosemirror-example-setup

It doesn’t do anything other than bundle the example for inclusion in an html script tag.

4

For the curious, I’ve written a tutorial-ish guide on how to setup a basic ProseMirror instance.

Checkout: http://hexopress.com/@joe/blog/2019/01/07/how-to-install-use-prosemirror-in-your-project

5

maybe we need more detail to run the example for fresh people just like me. i have change rollup.config.js to this:

module.exports = {
  input: "./src/index.js",
  output: {format: "umd", file: "dist/index.js"},
  sourcemap: true,
  plugins: [require("rollup-plugin-buble")()],
  external(id) { return !/^[\.\/]/.test(id) },
  name: 'mckmck', //the object for html
}

and in html:

var plugins = mckmck.exampleSetup({
  schema: mckmck.basicSchema
});
var view = new mckmck.EditorView(document.querySelector("#editor"), {
  state: mckmck.EditorState.create({
    schema: mckmck.basicSchema,
    plugins: plugins
  })
});

and then i run then dist/index.html in chrome. i get error:

Uncaught TypeError: Cannot read property ‘smartQuotes’ of undefined

1 Like