When viewing the HTML source for the Changelog page I noticed that the closing tags of all header elements are decremented by 1, e.g.

<h4>Bug fixes</h3>

I think this is due to a wrong setting here.

BTW, the viewport meta element is declared twice.

When I run the make command it throws an error after this line because meta is null.
var meta = /^!(\{[^]*?\})\n\n/.exec(text)

exports.buildFile = function(file) {
  var text = fs.readFileSync(file, "utf8"), result
  if (/\.md$/.test(file)) {
    var meta = /^!(\{[^]*?\})\n\n/.exec(text)
    if (!meta) throw new Error("Missing or invalid metainfo on " + file)
    var data = JSON.parse(meta[1])
    data.content = text.slice(meta[0].length)
    data.fileName = file
    result = mold.defs[data.template](data)
  } else {
    result = mold.bake(file, text)()
  }
  return result
}

Hello guys. First of all, thanks for your work.

I am building an application where I am using the Tiptap editor witch based on the Prosemirror editor. I have a floating menu that is under the cursor and I want it to always be shown above the keyboard on mobile devices and not hide under it. So I used scrollMargin and scrollThreshold.

  scrollMargin: { bottom: 80px }, 
  scrollThreshold:  { bottom: 80px }

And it works well when pressing enter, arrow up and arrow down keys on desktop, or enter key on android. But doesn't work at all on iOS.

Expected behavior:
When pressing Enter, the cursor should be 80px above the keyboard

Here are examples:

IOS

Android

Can you fix it? Thanks!

The index page links to the prosemirror npm module (which hasn't been updated in a year) where it should probably discuss the individual modules:

It's not too hard to figure out for folks who are already familiar with Node, but it might also be nice to have a "Getting Started" section in the documentation, since none of the example pages really offer a full installation procedure or complete code listing.

I'm using Ubuntu in Windows Subsystem for Linux. I don't know whether it's related or not.

To reproduce:

git clone https://github.com/ProseMirror/website.git
cd website
npm install
make
npm run devserver -- --port 8888

Now go to http://localhost:8888/examples/markdown/

devserver throws and exits while loading http://localhost:8888/moduleserve/mod/__/node_modules/entities/maps/entities.json

/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:2223
throw err
^

SyntaxError: Unexpected token (1:9)
at Parser.pp$4.raise (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp.semicolon (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:581:61)
at Parser.pp$1.parseExpressionStatement (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:966:10)
at Parser.pp$1.parseStatement (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:730:24)
at Parser.pp$1.parseBlock (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:981:25)
at Parser.pp$1.parseStatement (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:709:33)
at Parser.pp$1.parseTopLevel (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/d/prosemirror/website/node_modules/tariff/node_modules/acorn/dist/acorn.js:3098:39)

In package-lock.json:

    "entities": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
    },
    "moduleserve": {
      "version": "0.8.5",
      "resolved": "https://registry.npmjs.org/moduleserve/-/moduleserve-0.8.5.tgz",
      "dev": true,
    },

The problem is entities wants to require several JSON files. moduleserver.js then tries to transforms it in ModuleServer.sendScript() as if they're JavaScript. The transform() callback provided by devserver.js of course assumes a valid JavaScript file and transforms it with tariff, which ends in an error.

Please have a look into it. Thank you.

Unless somebody is trying to hack my connection, it seems that the SSL certificate on prosemirror.net has been expired today. Is somebody else experiencing the same?

Some of the keyboard commands in the Schemas from scratch example conflict with existing macOS system shortcuts (CMD-space triggers spotlight, CMD-q quits the current application, etc). These sorts of challenges trip me up in general so I have no clue what a better set would be, but it might be worth tweaking to avoid having a reader accidentally quit their browser.

Placing the cursor after comma linting decoration and triggering deleting several times causes unexpected text insertion. See gif below:

This was tested on Chrome version 80

I am getting the following error when following the readme instructions to run the demo locally. I think the issue is due to cyclic import of "./instance" between "instance.js" and "defaultinstances.js".

$ npm start

> [email protected] start /Users/jtblin/src/product-fabric/ProseMirror/website
> node src/demo/collab/server/start.js

/Users/jtblin/src/product-fabric/ProseMirror/website/src/demo/collab/server/defaultinstances.js:9
newInstance("Example", $node("doc", null, [
^

TypeError: newInstance is not a function
    at populateDefaultInstances (/Users/jtblin/src/product-fabric/ProseMirror/website/src/demo/collab/server/defaultinstances.js:9:1)
    at Object.<anonymous> (/Users/jtblin/src/product-fabric/ProseMirror/website/src/demo/collab/server/instance.js:132:3)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/jtblin/src/product-fabric/ProseMirror/website/src/demo/collab/server/server.js:6:37)

I'm seeing a red error message on the upper right corner of my screen on http://prosemirror.net/demo/collab.html#edit-Example.

Error: Request failed: Bad Gateway

502 Bad Gateway

The console output is:

GET http://prosemirror.net/docs/Example 502 (Bad Gateway)
    req @ bundle_collab.js:580
    GET @ bundle_collab.js:591
    start @ bundle_collab.js:61
    connectFromHash @ bundle_collab.js:259
    1../comment @ bundle_collab.js:268
    s @ bundle_collab.js:1
    e @ bundle_collab.js:1
    (anonymous function) @ bundle_collab.js:1

Gitignore contains:

/public/css/editor.css

The file editor.css is referenced in both index.html and example.html.

Previously the ProseMirror view was made available on window.pm.

I find this useful when wanting to try out basic ProseMirror thingies. Maybe we can set the views accessible as window.EditorView or whatever would be proper?

I guess this would apply to the demo as well if we decide to go ahead with this.

The next section link uses the character ⮞ ("black rightwards equilateral arrowhead"). This character isn't available in Chrome on OS X and shows up as a Unicode square.

Containing example code snippets for a few types of nodes, and describing the way a schema's structure works.

it would help to have a table of contents or some kind of navigation tree in the guide, as it's relatively long. Also the font sizes for the sections (h2) and subsections (h3) are not easy to differentiate, which made me look into the code to tell whether a new section started :P

If I'm in the Transform reference page and click on a Node link, I am taken to the Node reference page. The transform submenu does not close and the model submenu does not open.

Currently, the only link to the forums is on the homepage. Can we add it to the top-level menu too?

Currently everywhere i see main site as http://prosemirror.net but browsers don't like plain http any more. I suggest you to redirect from http to https version by default. And replace all visible links here on github repos.

Entering text adds two of the pressed character.

Quick heads up that for IE11, the Collaborative editing demo throws a 'Promise' is undefined error and the Embedded Code Editor example throws a Object doesn't support property or method 'assign' error.

A quick and simple solution could be adding a polyfill service like <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> to these examples.

When I go to any page in discuss.prosemirror.net, all I see is a blank page.

In the console, I see the error Uncaught ReferenceError: Discourse is not defined. I am getting this error in Chrome 88.0.4324.150 and Firefox 85.0.2.

Example URLs where this issue is encountered:

• https://discuss.prosemirror.net/
• https://discuss.prosemirror.net/t/how-easy-prosemirror-to-set-up-and-use/3170

For anyone else encountering this, using Google's cache (in the dropdown next to the search result) is a decent work-around if you just want to read the content.

Looks like the build process expects CHANGELOG.md before it gets downloaded.

Steps to Reproduce

1. git pull main prosemirror repo, cd into it, yarn install (fyi, demo there works great)
2. cd ./website, yarn install, make

Results

$ make
mkdir -p public//
node src/build/build.js pages//backers.html
mkdir -p public//docs/changelog/
node src/build/build.js pages//docs/changelog/index.html
fs.js:640
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/Users/username/Development/Repos/prosemirror/website/src/build/../../markdown/../CHANGELOG.md'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at mold.defs.markdownFile (/Users/username/Development/Repos/prosemirror/website/src/build/templates.js:20:23)
    at Mold.dispatch (/Users/username/Development/Repos/prosemirror/website/node_modules/mold-template/mold.js:38:25)
    at eval (eval at evaluate (/Users/username/Development/Repos/prosemirror/website/node_modules/mold-template/mold.js:188:10), <anonymous>:9:12)
    at exports.buildFile (/Users/username/Development/Repos/prosemirror/website/src/build/buildfile.js:28:35)
    at /Users/username/Development/Repos/prosemirror/website/src/build/build.js:9:16
    at Array.forEach (native)
    at Object.<anonymous> (/Users/username/Development/Repos/prosemirror/website/src/build/build.js:8:23)
make: *** [public//docs/changelog/index.html] Error 1

Workaround

Manually downloaded CHANGELOG.md via the command in the Makefile:

$ curl https://raw.githubusercontent.com/ProseMirror/prosemirror/master/CHANGELOG.md > CHANGELOG.md

…then ran make again and worked fine.

Version

Current ProseMirror/website master (40f9dd7)
MacOS 10.12.3
$ node --version
v6.10.0
$ yarn --version
0.21.3

In the markdown example, when I add a link to the last word of the WYSIWYM editor, the link will expand whenever I type other words.

The editor at the home page works well when add the link to the last word.

Andrew

I'm using node version v10.

After i run make cmd and when i open the /examples/markdown/ website path, i got an error show that punycode is not defined.

I checked it and find this error in make cmd:

node bin/build-example.js example/markdown/index.js > public/examples/markdown/example.js
'punycode' is imported by ../node_modules/markdown-it/lib/index.js, but could not be resolved – treating it as an external dependency
'punycode' is imported by commonjs-external:punycode, but could not be resolved – treating it as an external dependency
Creating a browser bundle that depends on Node.js built-in module ('punycode'). You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins
No name was provided for external module 'punycode' in options.globals – guessing 'punycode'

Also i find this: markdown-it/markdown-it#230 (comment)

So I know the reason is punycode is node build-in module, and should use some special way to build it. But I find that your website is work well in markdown example: https://prosemirror.net/examples/markdown/ but not mine: https://prosemirror.xheldon.com/examples/markdown/

So I want to know What the magic do you use? Thanks!

I don't yet have the expertise to fix it.
It worked a few days ago.

Hey folks, thanks for the lovely text editor.

I'm trying to run the website on windows but make command is failing. I had to download GnuWin32 for it to run on windows 10.

Access denied - PAGES
File not found - -NAME
Access denied - PAGES
File not found - -NAME
-d was unexpected at this time.
mkdir -p public/examples/basic/
The syntax of the command is incorrect.
make: *** [Makefile:44: public/examples/basic/example.js] Error 1

It looks the folder/files might be readonly but I double checked for permission. Ran as administrator as well.

Is there a possibility of something else that I didn't do right?

At least on this page:

This page won't list the whole source code for the example, only the most interesting parts.

Points to:

https://github.com/ProseMirror/website/blob/master/pages/examples/track/example.js

But it should to:

https://github.com/ProseMirror/website/blob/master/example/track/index.js

Hi,

Thank you so much for the great work on ProseMirror! I just got started, and finding it a joy to use.

I have a suggestion for improvement in the docs. I was looking at the reference, and found that it was a bit difficult to navigate to the available classes, so I wrote a quick bookmarklet that gave me this:

I'm finding this extremely useful to navigate through the docs. If you think it'll make a good addition, I'd be happy to send a PR.

For reference, this is the bookmarklet I used:

(function() {
  var list = Array
  .from(document.getElementsByTagName("section"))
  .map(section => ({ 
    section: section.querySelector("h2 a"), 
    titles: Array.from(section.querySelectorAll("h4 > a")) 
  }));
list.shift();
var listEl = document.getElementsByTagName("body").item(0).appendChild(document.createElement("nav"));
listEl.id = "toc";
listEl.className = "fixed";
listEl.style.top = "0px";
listEl.style.bottom = "10px";
listEl.style.left = "calc(50% + 360px)";
listEl.style.right = "";
listEl.innerHTML = `
  <ul>
    ${list.map(({section, titles}) => `
      <li>${section.outerHTML}</li>
      <li>
        <ul>
          ${titles.map(title => `
            <li>${title.outerHTML}</li>
          `).join("")}
        </ul>
      </li>
    `).join("")}
  </ul>
`
})()

I need to use jsonwebtoken lib in collab client.
I did:

npm install jsonwebtoken

then in collabl client

import * as jwt  from "jsonwebtoken";

When I open collab client I ended up with something like:

Uncaught Error: http://localhost:8888/moduleserve/mod/__/node_modules/safe-buffer/index/__mod/buffer: Not Found

It looks to me that somehow standard libraries are not properly linked by moduleserver.
How can I add npm packages?

If I run the website locally, opening any of the demo pages makes a 404 when the JS for the demo is requested.

I notice although the given URL like http://localhost:8888/moduleserve/mod/src/demo/basic is a 404, I can access the JS at http://localhost:8888/moduleserve/mod/__/src/demo/basic.

I had a look at the website today, and I saw the post-it note, saying "You can edit this", so I tried and it didn't work.

The js console says TypeError: baseKeymap.lookup is not a function.

Tested on Firefox Nightly (52) and Dev edition (51), current Chrome Release and Canary, the same error happens everywhere.

When following the instructions in the README and trying to build a local copy of the website using make, the process errors outputting:

Error: ENOENT: no such file or directory, open '/zpool/home/mk/prosemirror/website/src/build/../../node_modules/prosemirror-gapcursor/src/README.md'

As prosemirror-gapcursor is not included in the dependencies, it isn't installed. After inserting

"prosemirror-gapcursor": "^0.22.1",

in package.json (and issuing npm install again, of course) building the website finishes succesfully. However, running

npm run devserver -- --port 8888

results in not being able to open any of the examples, causing errors like

Error: ENOENT: no such file or directory, open '/zpool/home/mk/prosemirror/website/src/../pages/examples/basic/index.html'

Indeed, the index.html files are not generated.

Hi,

I was not sure what was the right place to report issues for the the Codemirror NodeView demo, but since source for it is here I've decided to do it here.

Here is the list of things I found to not behave according to (at least my) expectations:

1. If you place a cursor right after the editor view and hit backspace it moves text under the text editor into the editor itself. I am not entirely sure what would make sense here. I suspect one of the following:

   • Select an editor NodeView as it matches what happens if you had a "Horizontal rule" in the place of editor. If you do press backspace once again delete the whole editor view. I think even though this requires additional press on backspace it does provide user clear signal what's about to happen.
   • Select an editor NodeView when cursor is right in front or after the NodeView. I think this would clearly communicate that delete / backspace will get rid of NodeView without extra keypress.
   • Just move cursor into the NodeView, essentially do what ArrowLeft would have done. I'm not sure if that behavior would be intuitive but I suspect less surprising.
   • Move cursor into the NodeView and delete last character in it. I'm not really in favor of it, but that is certainly an option.

   I think it would also make sense to add Ctrl-Backspace keybinding to perform current behavior (move text after cursor into the editor view) and extend Ctrl-Enter keybinding to somewhat do what it already does but more closely mirror Ctrl-Backspace in other Ctrl modifier would allow you to move text in & out of the editor view.

2. If you place cursor right before the editor view and hit delete it appends editor content to the previous line removing editor if line of the cursor isn't empty, or it remove empty line the cursor is on and moves cursor into an editor.

   Not going to list all the options here but would expect option to just mirror choice above. I also would expect that behavior to be the same regardless of whether line of cursor is empty or not.

3. If you delete all the content of the editor and keep pressing backspace nothing happens. In fact only way to remove editor is to delete all the content then place cursor in front of the editor and press delete. Here's options I think would provide more intuitive behavior:

   • If highlighting an NodeView on first backspace / delete is a chosen solution, then there's nothing to do it would actually cover this.
   • If editor content is emptied and backspace is pressed just delete NodeView. Same for delete if editor content is empty it should probably just delete editor node.

4. If you have text selected before the editor and keep extending selection with Shift-ArrowRight / Shift-ArrowDown keys nothing happens. On the other hand if you have text selected right after the editor and use Shift-ArrowLeft it extends selection with in the editor but only per line basis and Shift-ArrowUp does nothing. Also note that extending selection from with-in the editor to the outside of it does not work at all.

   • I'm not sure that extending selection with in the editor makes much sense, maybe treating as NodeView as atomic would make more sense here.

5. If you have selection with-in the editor and you click outside of the editor text remains selected. Not saying it's incorrect but I wanted to point this out as well as it would help in the summary below.

Summary

I think my general observation is that there must be two different types of NodeView:

Atomic NodeView (kind of a Portal)

Such NodeView could be treated be treated from the outside as a single characters, except when cursor moves across it (cursor is moved across it or user clicks it) NodeView hook could onEnter(dir) is invoked which NodeView could cancel to take over the ProseMirror's events and perform all the range manipulation internally. It can also possibly exit itself whenever that makes sense (like when cursor is moved passed it's own content or Ctrl-Enter etc...)

all the events are from the ProseMirror are delegated to it. NodeView could also be responsible of triggering exiting itself (moving cursor past the NodeView).

Inline NodeView (just a alternate rendering of text range)

I need to look into more details to write something up, but my intuition is that it might be useful to have a NodeView which does just a rendering of a text range, meaning that all of the actual event handling (cursor positioning, selection, etc...) is taken care of by a ProseMirror while the rendering of the state is delegated to this NodeView.

As I don't know nearly enough about ProseMirror I might be drawing wrong conclusions, but it seems to me there would be a value in some of the cursor handling out to the NodeView interface so that NodeView implementer does not need to handle all of the edge cases for entering / deleting NodeView or care about details of keymap that ProseMirror has being setup with (for example I tend to use ctrl-f / ctr-b for navigation which works as expected in ProseMirror except it won't actually enter the the embedded editor as no mapping was setup).

When adding text on the collab example, I see a note that says

Make fails since we now include prose-mirror as a proper npm package rather than a Git repository (see 7650385).

Showing how to define your own menu structure, how to add new widgets, etc

Selecting the heading options from the Type... menu applies to the outer paragraph and the inner footnote node even if just text in the inner node is selected. Not sure if this is an actual bug or just a misunderstanding of how the footnotes functionality is intended to behave.

We should create a guide on how to create a ProseMirror add-on. Suggestions welcome on what this should include.

If I try to download the website and run the demos locally the lint demo throws the following error when hovering over the problems

bundle_lint.js:13119 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

If I download the bundle_lint.js from the live website and replace the one built from the git repo with that, everything works.

The build is looking for CHANGELOG.md in the prosemirror package, which only exists in vesrion 0.2.0. Perhaps we should update the package.json of this repo to reflect this?

> $ make                                                                                                                                     
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^
Error: ENOENT: no such file or directory, open '/Users/eric/Code/github/ProseMirror/website/src/build/../../markdown/../node_modules/prosemirror/CHANGELOG.md'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:431:33)
    at mold.defs.markdownFile (/Users/eric/Code/github/ProseMirror/website/src/build/templates.js:17:34)
    at Mold.dispatch (/Users/eric/Code/github/ProseMirror/website/node_modules/mold-template/mold.js:30:25)
    at eval (eval at evaluate (/Users/eric/Code/github/ProseMirror/website/node_modules/mold-template/mold.js:180:10), <anonymous>:8:12)
    at /Users/eric/Code/github/ProseMirror/website/src/build/build.js:36:35
    at Array.forEach (native)
    at Object.<anonymous> (/Users/eric/Code/github/ProseMirror/website/src/build/build.js:27:7)
    at Module._compile (module.js:398:26)
make: *** [public/changelog.html] Error 1

We noticed that the Footnote demo the tooltip does not work in Safari (Mac OS, Version 11.0.3 (13604.5.6)).

Behavior

Tooltip opens but no cursor is visible. Text can not be changed.

Expected

Text can be changed.

Solution

Add

.footnote-tooltip {
    -webkit-user-select: text;
}
.ProseMirror {
    -webkit-user-select: text;
}

to the footnote-tooltip css class. It appears that Safari sets it to 'none' by default.

I would have submitted a pull request, but for some reasons make did not work to build the website. Here's the glitch where it is now working in Safari.

We now reference to static files with absolute URLs (e.g. /site.js), so opening public/index.html as we suggest in the README does not work.

Perhaps we could suggest running a local node server a la http-server, or include a small static files server in node.

1, clone ProseMirror/website
2, change pages/examples/dino/example.js content as below

const dinoNodeSpec = {
  attrs: {type: {default: "brontosaurus"}},
  inline: true,
  group: "inline",
  draggable: true,
  atom: true,
  toDOM: node => [
      'span',
      '@' + node.attrs.type
  ],
  parseDOM: [{
    tag: "img[dino-type]",
    getAttrs: dom => {
      let type = dom.getAttribute("dino-type")
      return dinos.indexOf(type) > -1 ? {type} : false
    }
  }]
}

Some input problems are shown below：

Input is interrupted，Input method disappear，temp content is selected. And Can't continue to input anything(both Chinese and English).Looks like the editor loses focus

English can be entered normally, Chinese and Japanese will not work。

But， when dinoNodeSpec return ["img", {src: "/img/dino/" + node.attrs.type + ".png"}],there is no problem, you can normally enter.
Is there any problem with my code?

I use mac and browser is chrome(Version 61.0.3163.100 (Official Build) (64-bit));
I use a MAC's own input method。
System Preferences / Keyboard / Input Sources
Add Japanese and Pinyin-Simplified

This is because the npm package is just a stub for the moment.

What's the best way to build the website? Checking out prosemirror manually into node_modules/, and building the source inside that folder?

Currently, the reference guide describes Node#inlineContent as
"True when this node has inline content."

I suggest it be changed to "True when this node allows inline content". "True when this node accepts inline content" could also work.

The reason I suggest the change is because node.inlineContent can be true even it is does not have any content. The way I read the original description is that the node must have content to have a true value for the inlineContent property, when it fact it can be empty and still return a true value.

A minor suggestion, but it has confused me a few times now. What do you think?

Hey friends, looks like the dino demo is broken if one is using the latest master from prosemirror/ProseMirror. I cloned the repo and ran through the installation scripts but when I try and load the page at /demo_dino.html I just get the regular ProseMirror instance without the dino button on the menu bar:

I ran into this problem because I was trying to use the demo as a stand in for the documentation around extending the document model, but couldn't get it to work. I then tried to rebuild this demo, but couldn't get that to work either.

The make command is failing because of changes to the ProseMirror API.

Can we tie the prosemirror dependency to a commit? That way the API can continue to change and guarantee the website will work. When the website should get an updated version of ProseMirror, the package dependency can be updated.

Guide is great. But after reading through it I still feel I do not understand what is necessary to store into a database to be able to restore the editor between sessions, and where I get this and how restore it. I see toJSON method on state, for example.

Moreover, in collab example this is even more through. If I have authority full of steps and I am loading an editor to continue working from existing steps, how I initialize the state/steps/collab plugin properly.