Some kind of tutorial?

#1

I am trying to learn ProseMirror and I have installed the basic example. However, I don’t have too much of a solid modern JS background and such I have no idea how to declare new plugins or even use the api (other than editorprops). Is this library supposed to be so hostile towards novices?

#2

Hi @Celestialray

I’m sorry you are struggling getting started with ProseMirror. Personally, I appreciate the numerous examples on the website and that it has excellent documentation. Have you read this guide that explains all ProseMirror concepts?

#3

OP was a bit rude but it is frustrating that the website ignores the megatons of npm knowledge and setup required to get to the point where you could actually write code and do something with it. I have a feeling all the Node experts working on this project don’t realize just how much they’re assuming the user must know.

The source code seems to be using a futuristic JavaScript syntax? Isn’t that something you need to set up in Node as well? (ie transpiling to browser-compatible JS?) It’s never explained.

(I don’t even want to use Node at all, my ultimate goal is to develop an editor and then ship it as a browser-compatible .js file, but I accept I’ll have to learn it to get to that point.)

I think a from-basics tutorial would be great (I could probably help with that, I’m a technical writer but total npm noob).

1 Like
#4

Hi all,

the author of this library wrote an excellent book on a lot of the basics. Unfortunately, I don’t think the current state of JavaScript allows the creation of complex products without a certain level of knowledge about the language as well as the (sometimes frustrating) eco-system.

The JavaScript version used in the examples is called ES6 which is what the book is also based on. Most browsers support this out of the box already. The examples for ProseMirror use Rollup to provide support for older browsers (see here).

2 Likes
#5

I’m trying to register a plugin like this:

plugins: [ exampleSetup({schema: mySchema}), selectionPlugin() ]

But I get the following error: selectionPlugin is not a function

I don’t understand, I thought that’s how you register plugins as per documentation?

#6

Plugins are objects. exampleSetup is a function that returns an object. Hence the brackets. selectionPlugin is not a function. Just remove the brackets.

We all started with JavaScript at some point. We all struggled with JavaScript, npm modules, build processes and whatnot. This is a general problem of the JavaScript community. @frederik 's suggestion might a good starting point for you.

#7

I thought so. I basically copy pasted the entire lint plugin and I get the error:

Cannot read property ‘state’ of undefined

While declaring the plugins like so:

plugins: [ exampleSetup({schema: mySchema}), lintPlugin ]

#8

exampleSetup returns an array, so you’ll want something like this, with a spread operator in front:

plugins: [ ...exampleSetup({schema: mySchema}), lintPlugin ]
1 Like
#9

I’m trying to apply a border outline to the text node I click on. I’ve tried looking through examples and documentation but I’m not sure what to use (I know I need to use a plugin). Do I use props’ handleClickOn? Or something else? Can someone help me with a skeleton?

Edit: I managed to do this, but I suppose it’s the wrong way of doing it:

handleClickOn(view,_,node,nodePos,event,target) { event.target.className = “highlighted-paragraph”; }

It gets rewritten in the next update cycle. Can anyone help me with the update function? How do I use it on the event.target?

#10

Hi,

no need to do this work yourself. ProseMirror will add the DOM for you. I’ve put up an example of how I’d do it. Probably there are other ways.

Best Frederik

1 Like
#11

This topic has been hijacked, so I don’t know if it’s worth replying, but I’m not talking about the basics of JS, I’m talking about the basics of how to get THIS PROJECT working.

The first “getting started” page you point users to is this: http://prosemirror.net/examples/basic/

On that page there’s some code. I’m not told where to put that code. It’s just JavaScript, so presumably it needs an HTML file to load it into a browser, but that’s not even mentioned. I have no idea what to do with that code. Is this a Node.js thing? Do Node.js people “just know” what to do with this code? I sure don’t.

#12

Click the “remix in glitch” button and you will see a complete example you can modify in browser or copy locally to run yourself. None of this is NodeJS development per-say, but as mentioned above the frustrating cost of doing business with advanced in-browser JS development. As a complete off-topic it’s one reason I’ve stayed as far away from JS work as I reasonably can.

#13

I think the community has come to regard module management and bundling as part of the basics of the language. Unfortunately, that area is also still a bit of a mess, and it’s understandable that it confuses you. I really second the suggestion that you read up a bit more. This chapter of my book might be relevant.