Example of inserting nodes

Hi again,

Here is how I try to insert an empty paragraph at the beginning of an existing document. Can somebody point me to what’s wrong with that code? Nothing happens, and there aren’t any errors thrown:

var pm = require(‘prosemirror’); var proseModel = require(‘prosemirror/dist/model/index.js’); var editor = new pm.ProseMirror({ place: document.querySelector(".full") });

var content = proseModel.Fragment.from(null); var n = new proseModel.Node(editor.schema.nodes.paragraph, {}, content, []) editor.tr.insert(new proseModel.Pos([0],0), n).apply();

It was hours of trial and error to get there. And it’s the only way I found how to instantiate a Fragment object. How can I create a TextFragment for example? I appreciate the Reference Guide documentation, but it seem more helpful to somebody already familiar with the ins and outs of the library. Perhaps some examples of how to do common/simple things like this would help newbies like me.

Thanks much in advance!

You’re trying to insert it at the start of the first element ([0] moves into the first child of the document, 0 then indicates the offset at the start of that). This should work:

editor.tr.insert(pm.schema.node("paragraph"), new Pos([], 0)).apply()

I actually did try Pos([],0), but I’m getting:

Uncaught TypeError: Cannot read property ‘sliceBetween’ of undefined(…)replace @ replace.js:68replace @ replace.js:77apply @ replace.js:92apply @ step.js:65step @ transform.js:61_transform.Transform.replaceWith @ replace.js:305_transform.Transform.insert @ replace.js:312(anonymous function) @ VM9040:2InjectedScript._evaluateOn @ VM8942:875InjectedScript._evaluateAndWrap @ VM8942:808InjectedScript.evaluate @ VM8942:664

But, so I’m trying to a paragraph inside an already existing paragraph and that’s the problem? Shouldn’t I get some error, since I’m doing something wrong…

If I try to insert a paragraph at a place where it’s not allowed, apply will just return false and nothing changes. If I insert it at Pos([], 0), it appears. If I insert it at a position that doesn’t actually exist in the document, that crashes. Which one were you doing when you got the error?

I create an editor like this:

var editor = new ProseMirror({ place: document.querySelector(".full") });

where .full is an empty DIV:

then in the chrome console I try:

editor.tr.insert(editor.schema.node(“paragraph”), new Pos([], 0)).apply()

and I get the error. My version of ProseMirror is whatever npm gave me 2 days ago - 0.4.0.

If you can’t reproduce that exception, I can try to create a sample HTML file that does it.

But, I also think that an attempt to insert a paragraph where it’s not allowed should result in an error that tells me (the user) what is it that I am trying that is not allowed. Or is there something else I can call if I get ‘false’ from apply in order to determine why it failed?

Thanks again for prompt and informative replies! Boris

Your parameters are out of order. It should read:

editor.tr.insert(new Pos([], 0),editor.schema.node("paragraph")).apply()

I think an empty document will have a default paragraph to start. In my test, the paragraph above will be inserted at the beginning, producing two paragraphs.

Normally as a programmer, you will compute a legal position for the node since you own the schema. For insertion failures, it is often because the parent node can’t contain the type you are inserting. That is also defined in the schema.

Ha, that is silly, I feel stupid! Hmm, how to minimize such silent failures? Is it really that lack of type checking in JavaScript makes it too hard to avoid them?

Thanks a lot!

Don’t worry. We have all done it. Sometimes the only way I find my bug is by posting it. Only then is it obvious.

I will let @marijn provide a comment here about error messages. I don’t think it is the lack of type checking though.

1 Like

Rethinking my reply: sure, if Javascript were typed, the compiler would have caught the parameter mismatch.