prosemirror | The ProseMirror WYSIWYM editor | Editor library

Tiptap (and many other text editors based on ProseMirror) has this amazing API where we can chain commands.

For example:

I'm having a problem where onDestroy is not called inside a Svelte component when the component's parent HTML element is removed. How can I fix this? I'm creating my element like this, in order to properly interface with another JS lib (TipTap/ProseMirror).

Example: https://svelte.dev/repl/4e1ef2e35fce432b9ba63f87db0c95cb

App.svelte

I have a prosemirror based editor that I'd like to enable real-time collaboration on. So I've set up a socket server as described here

I set up the WebsocketProvider as a useRef() so that we're not constantly re-creating it everytime we render the component (before I was spinning up dozens of websockets). However, now it's not even getting defined, as the console.log(this.yXmlFragment, this.provider) in get plugins() is returning both as undefined

My desired behavior is that I want provider and yXmlFragment to be updated only when the sectionID changes, not for any other re-render. But it's not even being set the first time. Can anyone explain how I'm wrong?

I'm working on trying to extend this markdown editor library - which itself extends Prosemirror. I'd like to build my own Node which has the following schema:

I'm building a Forum/kind of like Wikipedia where users have a rich text editor and can upload images. I thought about saving that "text"(Prosemirror html) as a text file in a Filesystem(Google Cloud Storage) instead of a String in a mysql database. Because then, I would not have to limit the String / and it would be cheaper storing that text. I would then use mysql to reference to that file to still keep relations.

Would this be a good practice or am I missing something ?

I use JavascriptExecutor to input the text. My code snippet is as follows

I'm not exactly sure how to word this, but I am using Javascript to change text. I am using Javascript on the site Quizlet. As you can see, there are two columns: terms and definitions. As of now, the script changes both when I only want it to change the term list. Here's a video, too: https://drive.google.com/file/d/1ly3askpLQjzXeCMx9Mk9iVpSEXCw6i25/view

Works, but changes both:

I found a package here: https://stackblitz.com/edit/y-prosemirror-ynw2fg?file=index.ts I have downloaded and enter image description here

I ran npm install and the dependencies should be installed already. But when I run node index.ts or ts-node index.ts errors show up:

I want all empty

elements in html to have a line break inside it, and use css to make this effect.

Details:

Both of the p tags below should have same appearance (across browsers and zoom levels)

All other customs styles of p tags are same