Basic example

I’m currently using simpleMDE but it’s unusable on mobile phones. So I went and searched for “best mobile js markdown editors” and stumbled of course upon those “10 best xyz” articles. ProseMirror was one in the list and from the features it looks like it really is the best for my use case.

And while you have this exampleSetup repo, I have no idea how to actually use it in a html page.

I skimmed “the guide” but js in chrome for instance doesn’t allow import statements.

How do you use the basic example in a HTML page?

Found this: How do I bundle prosemirror-example-setup and use in the browser?

but same issue as the last post, and the blog post is no longer reachable.

Why doesn’t this editor have a “embedding into HTML pages” section?

It’s not a drop-in editor library but more of a toolkit, and unfortunately, if you’re not comfortable enough with JavaScript to bundle an npm module, you’re probably not going to have a good time with this library. Tiptap, which builds on ProseMirror, might be a better thing to start with.

1 Like

You assume too much.

I want to embed it in a SSR classic website. That is regular JS. Are you saying your “toolkit” can’t deal with common JS, really?

I was at the same starting point, so I learned how to bundle npm modules. I’m playing with TipTap now and liking it – but I still need to bundle in TipTap…

I just got the editor working on mobile and the few tests that I’ve done look pretty good. Voice to text is working. One problem I found: pasting html with url links: works on the laptop but not on my phone. I don’t know why – it’s exactly the same code.

Skypack could be a great option if you want to avoid any build step. But unfortunately ProseMirror doesn’t work well with Skypack because of this issue. (maybe that’s also interesting for you @marijn)

I just got the editor working on mobile and the few tests that I’ve done look pretty good. Voice to text is working. One problem I found: pasting html with url links: works on the laptop but not on my phone. I don’t know why – it’s exactly the same code.

If you are using tiptap you probably should create a discussion/issue at the tiptap repository with a reproducable demo.

I just realized that I can test this on ProseMirror and I found that ProseMirror has this problem too. I’ll create a separate discuss thread.

I have created a build before creating this thread. All I’d like to do is create an instance of the editor in a classic html page using “browser js”. Idk how else to describe it.

How do I do that? There is no documentation regarding that. Only how to create a build, but that part is easy.

I’m not using vue react Angular svelte Aurelia or whatever just plain browser js.

How do I instantiate the editor?

Is that question so hard to understand?

Have you looked at the source code for the prosemirror website? There are some good examples there.

1 Like

Please be kind :green_heart:

You will probably need to bundle for browsers that do not include module imports, yet

If you just want to run the vanilla and are with leaving out older browsers (like IE11), then something like this might be a good start basic-pm-setup-vanilla - StackBlitz - I just copied in the example from the website - you can play around with it without having to install anything.