<commit_before>!{"title": "ProseMirror Editing Guide",
  "template": "guide"}

# Basic Editor Guide

This guide describes the steps you must take to put a simple
ProseMirror editor in your page.

## Bundling

ProseMirror consists of a number of different modules. The upside of
this is that you might not need to load all those modules, and you
might want to load a number of 3rd party modules. Doing your own
bundling gives you a clean way to pull in exactly the code you need.
The downside is that you have to mess around with a bundler before you
can get anything running.

“Bundling” JavaScript means taking a bunch of small modules that use
one of JavaScript's module conventions (such as
[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1), which the files
in the ProseMirror distribution use) and bundling them up in a way
that makes it possible (and quick) to run them in a browser. It is an
unfortunate artefact of the current state of the JavaScript ecosystem.

The easiest way to bundle ProseMirror is to use
[NPM](https://www.npmjs.com/) and
[browserify](http://browserify.org/). Install Browserify and the
ProseMirror modules you need through NPM.

    npm install prosemirror-state
    npm install prosemirror-view
    npm install prosemirror-schema-basic
    npm install browserify

Next, create a file that uses ProseMirror, for example:

    var EditorState = require("prosemirror-state").EditorState
    var EditorView = require("prosemirror-view").EditorView
    var schema = require("prosemirror-schema-basic").schema

    var view = new EditorView(document.body, {
      state: EditorState.create({schema: schema}),
      onAction: function(action) {
        view.updateState(view.state.applyAction(action))
      }
    })

We'll go over what that code does in a moment. To create a bundle for
your file, you can run something like this:

    browserify main.js --outfile main_bundle.js

This will find all dependencies declared in your script file, and
the dependencies of those modules, and put them together in a big file
called `main_bundle.js`.

If you include that in a webpage, and also add a link tag to load the
editor's style sheet, you should have a working editor.

    <!doctype html>
    <meta charset=utf8>
    <link rel=stylesheet
      href="path/to/node_modules/prosemirror-view/style/prosemirror.css">
    <style>.ProseMirror { background: silver }</style>
    <body>
      <script src="main_bundle.js"></script>
    </body>

Running browserify on a big codebase takes a while, so during
development, this is a bit of a pain. One solution is to use
`watchify`, which is like `browserify`, but a persistent process that
immediately updates the bundle file whenever one of the files it
depends on change. This is faster, and doesn't require you to explitly
run any commands every time you want to test your code.

Other approaches to bundling are
[webpack](https://webpack.github.io/), [rollup](http://rollupjs.org/),
and [jspm](http://jspm.io/). You should be able to use any of them to
run ProseMirror.

## Structure of an Editor

A ProseMirror _view_ (the `EditorView` class) is a component
responsible for showing the editable document in the browser, and
handling user interaction with that document.

It is not, however, responsible for tracking state. There is a
separate type of object, of the `EditorState` class, that holds the<commit_msg>Add link to watchify in basics<commit_after>!{"title": "ProseMirror Editing Guide",
  "template": "guide"}

# Basic Editor Guide

This guide describes the steps you must take to put a simple
ProseMirror editor in your page.

## Bundling

ProseMirror consists of a number of different modules. The upside of
this is that you might not need to load all those modules, and you
might want to load a number of 3rd party modules. Doing your own
bundling gives you a clean way to pull in exactly the code you need.
The downside is that you have to mess around with a bundler before you
can get anything running.

“Bundling” JavaScript means taking a bunch of small modules that use
one of JavaScript's module conventions (such as
[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1), which the files
in the ProseMirror distribution use) and bundling them up in a way
that makes it possible (and quick) to run them in a browser. It is an
unfortunate artefact of the current state of the JavaScript ecosystem.

The easiest way to bundle ProseMirror is to use
[NPM](https://www.npmjs.com/) and
[browserify](http://browserify.org/). Install Browserify and the
ProseMirror modules you need through NPM.

    npm install prosemirror-state
    npm install prosemirror-view
    npm install prosemirror-schema-basic
    npm install browserify

Next, create a file that uses ProseMirror, for example:

    var EditorState = require("prosemirror-state").EditorState
    var EditorView = require("prosemirror-view").EditorView
    var schema = require("prosemirror-schema-basic").schema

    var view = new EditorView(document.body, {
      state: EditorState.create({schema: schema}),
      onAction: function(action) {
        view.updateState(view.state.applyAction(action))
      }
    })

We'll go over what that code does in a moment. To create a bundle for
your file, you can run something like this:

    browserify main.js --outfile main_bundle.js

This will find all dependencies declared in your script file, and
the dependencies of those modules, and put them together in a big file
called `main_bundle.js`.

If you include that in a webpage, and also add a link tag to load the
editor's style sheet, you should have a working editor.

    <!doctype html>
    <meta charset=utf8>
    <link rel=stylesheet
      href="path/to/node_modules/prosemirror-view/style/prosemirror.css">
    <style>.ProseMirror { background: silver }</style>
    <body>
      <script src="main_bundle.js"></script>
    </body>

Running browserify on a big codebase takes a while, so during
development, this is a bit of a pain. One solution is to use
[`watchify`](https://github.com/substack/watchify), which is like `browserify`, but a persistent process that
immediately updates the bundle file whenever one of the files it
depends on change. This is faster, and doesn't require you to explitly
run any commands every time you want to test your code.

Other approaches to bundling are
[webpack](https://webpack.github.io/), [rollup](http://rollupjs.org/),
and [jspm](http://jspm.io/). You should be able to use any of them to
run ProseMirror.

## Structure of an Editor

A ProseMirror _view_ (the `EditorView` class) is a component
responsible for showing the editable document in the browser, and
handling user interaction with that document.

It is not, however, responsible for tracking state. There is a
separate type of object, of the `EditorState` class, that holds the
{'fraction_non_alphanumeric': 0.07344550109729334, 'fraction_numerical': 0.0011704462326261888, 'mean_word_length': 4.074981440237565, 'pattern_counts': {'":': 4, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 5, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1837907', 'n_tokens_mistral': 1940, 'n_tokens_neox': 1857, 'n_words': 906}