Building and Running ProseMirror

Question

I am wanting to build a website that will utilize a WYSIWYG such as ProseMirror. Their documentation is a bit clear that it is not such an easy process to build everything yet, as they have focused on other parts of development first. However, they do provide a project that you can clone and run.

I am not sure how to actually run this example however.

I have created a new folder inside my active MAMP directory, and have done npm install to get all of the items in the package.json. Then I have run npm run build so that the project is now built into the dist folder specified by default in the package.json.

However, how do I actually make it run in the browser? If I go to the browser, it is simply showing my a list of files and documents, rather than the actual application.

I have also tried running npm start but that doesn't have any linked commands in the package.json. I do see that this is using rollup.js. I have not used that before, perhaps that has some commands?

Answer 1

I created this guide for a friend. Hope this helps you and anyone looking for the same answer. It's not perfect but gets you up and running.

ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

The problem is that the documentation on how to set it up from nothing to a hello world using the demo examples is non existent. All documentation assumes you have it set up and working. This guide is to help you get to "hello world" stage

• First setup rollup. Follow the instructions for that here. You should now have the project on your computer from this and when you open the html file in your browser see the "hello world" style screen.

• cd into learn-rollup project folder and npm install prosemirror module packages:

1. prosemirror-state.
2. prosemirror-view.
3. prosemirror-model
4. prosemirror-schema-basic
5. prosemirror-schema-list
6. prosemirror-example-setup

• In the learn-rollup index.html file add the following html html code to add to learn-rollup index.html

1. The link to the css file
2. The tag in body that has id=editor

learn-rollup folder structure

• Create a copy of src/scripts/main.js and rename it mainbackup.js.

• Now replace everything in main.js with code from prosemirror.net first example.

• Run \node_module.bin\rollup -c

• Reload .html to see prosemirror working.

Answer 2

There is no 'Hello World' example that shows how to use the prosemirror libraries in themselves - the basic example linked to in the question still needs to be 'used', as shown in the closest thing that exists to a 'Hello World' example: https://prosemirror.net/examples/basic/ - which from the docs looks like it can be represented in a simpler way:

import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"

let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})

Instead you can look at wrapper libraries that provide copy/paste editors and that can be incorporated into your project.

Using ProseMirror core libraries requires that you read the docs - there is both an overview section: http://prosemirror.net/docs/guide/#intro, and a reference section: http://prosemirror.net/docs/ref/#top.intro

Answer 3

If you go to the basic example, you will see some code that uses the example project that you linked to.

That project needs to be better documented, IMHO. I don't think that it's supposed to be an example of running prose mirror, but more of an example of wiring all of the different parts up together.

All of the parts of ProseMirror are on NPM and can be installed that way, even the example project. Install the imports from NPM and then copy that code into either an index.js or HTML file and you should have a basic editor on screen. Study the basic example repo to better understand how the parts fit together.

Answer 4

To get a minimal editor up and running with rollup first install rollup:

npm i -g rollup

Install the rollup resolve plugin:

npm i @rollup/plugin-node-resolve

Then add the following to the rollup.config.js file:

import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'main.js',
  output: {
    file: 'build.js',
    format: 'iife'
  },
  plugins: [resolve()]
}

Install prosemirror basic libraries:

npm i prosemirror-schema-basic prosemirror-state prosemirror-view

Create the main.js file with the following content:

import {schema} from 'prosemirror-schema-basic'
import {EditorState} from 'prosemirror-state'
import {EditorView} from 'prosemirror-view'

let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})

Build your editor (to build.js):

rollup -c

Finally include build.js and optionally the styles in the prosemirror-view package into your HTML file and enjoy:

<html>
  <body>
    <div id="editor"></div>
    <script src="build.js"></script>
  </body>
</html>

Answer 5

I went through @Rob 's method and almost succeed. Just one thing, after completed all steps, I ran into an error(see below).

The code is from the official first example.

Don't know why that happened, I have to manually put a <div id="content"></div> after <div id="editor"></div> to get started.

But shouldn't <div id="content"></div> gets added automatically? @Rob or The official first example didn't mention you have to add this div, no clue what went wrong.

Answer 6

I'm making an update answer to this question, as some ProseMirror and Rollup bundles have been upgraded since the last answers were made.

Here are the steps that worked for me after almost 3 days of searching through the web.

In the root directory of you app, initialize node_modules and package.json :

npm init

Install ProseMirror and Rollup basic bundles that we will need for the main.js file and the rollup.config.js file :

npm install prosemirror-view prosemirror-model prosemirror-state prosemirror-transform prosemirror-schema-basic @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace @rollup/plugin-terser --save-dev

In your package.json, add those lines after the description :

"main": "dist/prosemirror-bundle.min.js",

"module": "public/js/main.js",

"type": "module",

Create a file named rollup.config.js in the root directory of your application (where your package.json is located), and fill it with those lines :

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import terser from '@rollup/plugin-terser';

export default {
    input: 'public/js/main.js', // Entry point for the bundle
    output: {
        file: 'dist/prosemirror-bundle.min.js', // Output file path and name
        format: 'umd', // Format of the output bundle (Universal Module Definition)
        name: 'ProseMirror' // Name of the exported global variable
    },
    plugins: [
        resolve({
            browser: true, // Resolve modules for browser environment
            preferBuiltins: false // Do not prefer built-in modules over local modules
        }),
        commonjs(), // Convert CommonJS modules to ES6
        replace({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), // Replace NODE_ENV variable with 'development' (or current environment)
            preventAssignment: true // Prevent replacement of variable assignment
        }),
        (process.env.NODE_ENV === 'production' && terser()) // If in production environment, minify the code
    ]
};

Create the main.js file (mine is in public/js as I mentioned in the package.json AND rollup.config.js) and write down those lines :

import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { schema } from 'prosemirror-schema-basic';

window.addEventListener('DOMContentLoaded', (event) => {
    console.log("2");

    const editorNode = document.getElementById('mad_interactive_editor');

    const state = EditorState.create({
      schema,
    });
    
    const view = new EditorView(editorNode, {
      state,
    });
});

Create an html file and add a div inside :

<div id="mad_interactive_editor"></div>

Update your package.json with the dependencies :


npm install

Build your code using rollup config file with this command :

rollup -c

You can either add —watch in the end of this command to keep watching for changes in your input file (main.js) while your are coding like this :

rollup -c —watch

If you are not in a dev environment anymore, run the following command instead, it will minify your code :


NODE_ENV=production rollup -c rollup.config.js

And you should have your ProseMirror implemented in your html page.

I hope this can help someone.