Can i only set specific nodes editable?

1

I try to make an editor where all content not editable by default. Only my custom nodes (for example <var-input>) should be editable.

Example content: <p>This is a non editable text</p><p><var-input id="12345" kind="{}" choices="[]" value="">This <strong>is</strong> editable</var-input></p><p>This also not editable.</p>

Only the content between the tags <var-input ...> and </var-input> should be editable.

How can i do that?

2

You could filter transactions to block changes outside of the allowed ranges, but actually setting only those editable (as in contenteditable=true) is not something this library supports.

3

Sorry i’m new to prosemirror.

Can you give me an example how can i block all transactions for this specific editor and filter the transactions to allow those that came from my node?

4

I don’t know how i can block transcations. Please help me

5

The second parameter of the EditorView constructor is a props object. One of the members is a dispatch callback that you can specify. You will get all transaction traffic through that callback. The guide has the general gist. The transaction will contain both location information and step’s taken that you will use to determine if an an edit is allowed. To block a transaction, you’ll just not call EditorState.apply(tr) in the dispatch callback.

6

Can you give me a specific example?

I have also problems with my node, i can’t edit the content. Why?