Replace tokens in initial content with NodeView

1

Hi everyone, this is my first post. I’m a relative noobie and just can’t find any info on best way to achieve the following:

We’re migrating from an old editor library, which used tokens in the text to denote placeholders that need to be replaced with valid values:

"Some text with a {{placeHolder}} that needs replacing"

I want to replace {{placeHolder}} when prose-mirror initiates with preferably a nodeView react component. I’ve been experimenting, and the best I can come up with so far, is a Decorator.widget that prepends the nodeView in front of the actual token.

I’m sure Decorators aren’t the way to go, but have only used them as a learning exercise.

How should i best achieve this? What is the correct way of parsing incoming content and transforming to a different format?

An extension can’t latch onto this as is plain text so doesn’t have a tag or style i can query. I’ve also experimented with plugins, but I’m not clear on how to cycle through matched place holders and update each, whilst maintaining correct to/from positions when replacing each one.

Any help or examples would be greatly appreciated

2

Possibly the way to go here is to parse these documents using custom logic that emits a special node type when it encounters a placeholder, and then render that node type the way you need these placeholders to be rendered.

3

Hi Marijn, are you saying to parse the html prior to adding as content to the editor?

That’s what I’m currently doing, but was hoping there’d be a smart prose-mirror/remirror way of formatting the content before it’s added to the view

4

Not sure if its any easier, but it appears you can work out a migration script that converts these overloaded text string as templates into the appropriate document schema before hand. You’ll have a node type or types for those placeholders and then define them via JSON. Though the new node type, like marijn says, is shared with any approach. No parsing required though if these exist before hand. These documents as the template might be easier to develop as well, if you have a nice UI, since it’s just composing a prosemirror document, and then creating a copy of it for another instance.

Ex:

{type: 'doc',
 children: [
   {type: 'paragraph', 
    children: [
      {type: 'text', text: 'Some text with a '}
      {type: 'user_text_field', attrs: {placeholder: 'Placeholder'},
      {type: 'text', text: ' that needs replacing '}
   ]
]}