Hi there, I’m writing a ProseMirror plugin that sets the origin for a portion of text. That is whether it has been typed manually or pasted in (for now).
Basically this is what I’d like to achieve, let’s say this is my desired HTML output:
<p><span data-origin="userId,pasted">Lorem ipsum</span><span data-origin="userId,typed"> manual input</span><span data-origin="userId,pasted"> dolor sit amet</span></p>
I’ve been able to set the Mark correctly for pasted content, but I don’t manage to apply the mark to content that’s manually typed.
Approach 1:
handleTextInput: (view, from, to, text) => {
const mark = view.state.schema.mark('content-origin', {
source: `${this.options.user.sub},${ContentOriginKind.INPUT}`,
})
const tr = view.state.tr
.addMark(from, to, mark)
view.state.apply(tr)
},
My logic is simply the following:
On the handleTextInput handler, create a transaction that adds a mark at the position supplied in the arguments, apply that transaction, done.
That doesn’t seem to work tho. Am I missing something? Perhaps I don’t understand well how transactions are treated? If so could you point me to some resources around this topic?
Approach 2:
handleTextInput: (view, from, to, text) => {
const mark = view.state.schema.mark('content-origin', {
source: `${this.options.user.sub},${ContentOriginKind.INPUT}`,
})
const tr = view.state.tr
.insertText(text, from, to)
.addMark(from, to, mark)
view.state.apply(tr)
return true
},
Where the logic is the following:
Prevent the text from being inserted (by returning true).
Insert the text manually and mark it.
The result with this is that no text is inserted at all, again seems like my transaction is discarded.
Maybe I’m missing something simple but crucial, so please if you can spot any flaws in my reasoning let me know, or maybe there’s another route I’m not considering…
Thanks in advance.