Custom node

1

Hi, I am Filip, i am new to ProseMirror. I’ve been using this rich editor and have implemented few things like custom nodes with help from the examples.

Now i would like to implement something like a link but instead of following the link when clicked i would like it to execute a function. Can this be done using custom paragraph node with click event?

Someting like:

private createPdfNode(): any {
    return {
      attrs: { value: "" },
      toDOM: (node) => [
        'p',
        {
          value: node.attrs.value,
        },
      ],
    };
  }

But how can i set the value of the paragraph and add a click event?

Thanks

2

You probably don’t want clicking a paragraph to execute an action when editing, since that’ll make putting the cursor into it really tricky. So a custom node view would work, but you’d want to render it differently inside the editor and outside of it. For example by using a customized DOMSerializer that doesn’t use the schema spec’s toDOM for one of those cases.

3

I will do different rendering later, firstly i just want to make it work like this. I was wondering how can i set value inside the paragraph and put click event using custom node view. Here it’s how it should work. I want to use pdf viewer so when i click the text in the rich editor it would open a modal dialog showing the content of the pdf. Can i do something like this?

private createPdfNode(): any {
    return {
      attrs: { value: "", "@click": functionForOpeningPdf },
      toDOM: (node) => [
        'p',
        {
          value: node.attrs.value, //how can i set the value of a paragraph?
        },
      ],
    };
  }
4

Attributes are just data stored with the node. Putting a function in there doesn’t make sense. As for the value question, I recommend you read the library guide before asking questions.