Full example with plugins, toolbar etc.

[kennethacohen]

Hey there!

Would be super helpful to see a proper pattern for how folks generally create an editor with a set of basic plugins etc. I've played around with PM and have generally created an editor with class components, but nothing via hooks. Just not sure how to do this the "right" way.

Right now, I'm using an ExtensionManager that I initiate with the set of plugins, keymaps etc, and then reference those when using the hook:

const schema = new Schema({
  nodes: addListNodes(fallbackSchema.spec.nodes, "paragraph block*", "block"),
  marks: fallbackSchema.spec.marks
})

export function HookEditor() {
  /**
   * Add ExtensionManager to state
   * 
   */
  const [extensions, setExtensions] = useState<ExtensionManager>(
    new ExtensionManager([

      // plugins
      new History(),
      new Placeholder({
        placeholder: "This is text..."
      }),
    ])
  )

  /**
   * Generate EditorState given set of extension plugins etc.
   * 
   */
  const [state, setState] = useProseMirror({ 
    schema,
    plugins: [
      ...extensions.plugins,
      ...extensions.keymaps({ schema }),

      keymap(baseKeymap),
    ]
  })

  /**
   * Update state
   * 
   * @param newState 
   */
  const handleChange = (newState: EditorState) => {
    setState(newState)
  }

  return (
    <Box
      border="1px solid"
      borderRadius="lg"
      padding={2}
    >
      <ProseMirror
        state={state}
        onChange={handleChange}
      />
    </Box>
  )
}

[dminkovsky]

Hi Kenneth! Thanks a lot for starting this discussion.

I totally agree: a simple usage example with plugins and a toolbar has been sorely missing.

So, I just created one: https://codesandbox.io/s/use-prosemirror-basic-example-nie7f. Please take a look and let me know what you think. I'll add it to the README if you think it's good.

PS. Not familiar with ExtensionManager. What is that?

[dminkovsky]

@michael you mentioned some interest in this as well.

[kennethacohen]

Amazing! Will check this out, thanks for putting it together.

Sorry, the ExtensionManager pattern is just one I have seen in other RTE libs like TipTap + Rich Markdown Editor:

https://github.com/ueberdosis/tiptap/blob/main/packages/tiptap/src/Utils/ExtensionManager.js

[michael]

Yeah I hope I'm ready to share soon. Things are working already, but need to do a bit of cleanup. Generally I really think having a complete but still simple to understand example is better then a configurable library. In the past I made the mistake to add too many generalisations (in our own library), like configurable menu bars etc. Now i just render some React components based on ProseMirror's state and it does the job very well. Super easy to understand also.

@dminkovsky would it make sense if I just post a few code snippets here for discussion and then maybe turn it into a reference example of useProsemirror.

[dminkovsky]

For sure, please do!

[kennethacohen]

The code sandbox is a great start - thanks again for pulling this together. As someone who hasn't spent a ton of time with PM, I think it would be super helpful to put together some examples for most common use cases - TipTap does this super well imo.

[dminkovsky]

Great to hear. What other common use cases are you thinking of? Images? Is there a specific tiptap page you have in mind?

FWIW, this library is intended to be a thin layer on top of ProseMirror and React, to help with integrating ProseMirror into the React flow, but otherwise allowing you use ProseMirror however you want. Tiptap, on the other hand, seems to be a fully-fledged editor based on ProseMirror—or a ProseMirror distribution as I like to think of them (another one is Remirror)—which is not the aim of this library. But that said, I agree it makes sense to help get people started with basic use-cases.

Thank you!

[miphe]

I'm working on implementing a React editor for markdown (prosemirror-markdown schema made that super simple). The examples in the codesandbox works like a charm, bold/italic, but implementing a link proved to be much more of a challenge since this would mean reading from selection, creating a prompt for the link text and URL, and updating the editor state after that. It's definitely something I think we could use an example of. There're ways to implement links in the prosemirror docs, but since we're in the world of React many of those approaches feels wrong and I'd much rather work with React components and declarative code.

[dminkovsky]

Hi @miphe. Thanks for pointing this out. I should expand it to include a link editor, for sure. Not sure what my timeline would be at the moment, because I have a lot of urgent things going on, but I agree that should be a top priority for this project. By the way, will be adding an image example per #13.

[miphe]

That's great, I'll have a look at that as well. It's probably something I'll need to implement soon as well. I've started on a PoC on a link option, it can be seen in this codesandbox.

[yelnyafacee]

hi, how can I modify the editor layour to this:
https://prnt.sc/128byeo

instead of this?
https://prnt.sc/128c0v9

[jcayzac]

Hi!

I noted the example also doesn't support Markdown input like the example on http://prosemirror.net/
I just found out this repo and haven't played with the code yet, so wondering if there's anything missing to support that or I can just add prosemirror-markdown as a plugin and it'll work?

This looks nicer than prosemirror-react. Thanks for making it.

[dminkovsky]

Hello @jcayzac! Thank you for posting about this.

I have never used prosemirror-markdown, but judging from the example and looking at the module's README, it's just a schema you can use to edit a structure that will parse/serialize neatly to Markdown. This library facilitates configuring, mounting and then updating the ProseMirror editor, so it'll work with this schema like with any other schema, so it should be fine! I'm sure the example shows you how they do the parsing/serializing. If you try it out and have time, feel free to fork my CodeSandbox with an example.

Thanks!
Dmitry

[bmwalters]

Hey, I extended the sandbox with support for a font-size selector. It demos how to use custom marks, a custom schema, and a custom command implementation. It also uses a ref in order to restore focus to the editor upon selecting a size option.

https://codesandbox.io/s/use-prosemirror-basic-example-extended-with-custom-font-size-mark-h5e2e

[dminkovsky]

Thanks a lot @bmwalters. What I get a chance, I will integrate this codesandbox and the one that shows how to do uploads and post it to the readme.