URLs in prosemirror

1

Hello Everyone, Is there is a possible way to add video or images infront of pasted urls on prosemirror? For example, if I paste a youtube url, can we add youtube video or atleast its preview in front of this url?

Thank you

2

This isn’t something that the library will do for you, but it’s definitely possible to write your own extension that does this (possibly through the handlePaste prop).

3

Thank you @marijn , I’m just getting started in prosemirror. Is there any example that I can refer to regarding handlePaste?

4

This is a little messy, but here is one way to handle it that we use in our code base to convert special urls into custom iframe nodes.

import {Plugin} from "prosemirror-state"

let handle = (view, slice) => {
  // allow other handlers a chance to deal with this input if we don't take it
  var handle = false

  // in our case we only want to deal with urls pasted in by themselves
  // so we bail if the thing pasted is more than just a single bit of text
  if (slice.content.childCount > 1) return handle

  // walk the inner content of the pasted node (which as I recall is usually a paragraph)
  // there is probably a better way to do this
  slice.content.descendants((node, pos, parent) => {
    // check that we're dealing with text and that it matches our expected url pattern
    if (node.type.name == 'text' && /^https:\/\/features\.(mpr|mprnews|apmreports)\.org\/.*?\.html$/.test(node.text)) {
      handle = true // let subsequent handlers know we took this one

      // create our custom node
      let newNode = view.state.config.schema.nodes.apm_inline_frame.create({ src: node.text })

      // in our case we can just insert the newly created node into the existing document
      view.dispatch(view.state.tr.replaceSelectionWith(newNode))

      // I've removed some code that displays a custom react dialog (don't get me started)
      // which messes with view focus so you may not need this one.
      view.focus()
  })

  return handle
}

// used when configuring our Editor instance
export function createStandaloneLinksPlugin() {
  return new Plugin({
    props: {
      handlePaste(view, event, slice) {
        return handle(view, slice)
      }
    }
  })
}
1 Like
5

Actually Im really new to prosemirror and I’m trying to understand. Can you please help me in understanding this code. Actually I also want to replace the urls pasted (like youtube and vimeo) with iframe.

Thank you

6

I added some comments above.

website/index.js at master · ProseMirror/website · GitHub has an example of using a plugin, but Prosemirror is a complex (and powerful) enough framework that there’s really no substitute for reading (and re-reading) the guide.

If you want a full-featured editor that’s more or less ready to rock out of the box I’d recommend looking at TipTap or Remirror (both based on Prosemirror) or Trix (from the Basecamp folks). Prosemirror by itself is meant to be the building blocks for powerful structured data editors but is not really a drop-in editing solution. If you want to go fully custom I found a lot of inspiration looking at what Fidus Writer · GitHub has done with it.

7

Thank you so much for the explanation, and I’m understanding now. And thank you for the resources.