HTML tag replacement

v6
1

Hey there!
I’m trying to create my own overlay style and this is my input text:

Lorem <div id="ID" class="CLASS" data-attr="ATTR">ipsum dolor <div id="ID" class="CLASS" data-attr="ATTR">sit amet</div></div>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

and I would like it to be displayed like this:

Lorem [DIV]ipsum dolor [DIV]sit amet[/DIV][/DIV], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Is there any way to achieve that? Moreover, I would like to keep all the features related to tags (like removing [/DIV] and so on).

Any advice? Thanks!

2

I found a way to iterate over the tree nodes, so now I can easily use Decoration.replace to replace tags:

syntaxTree(view.state).iterate({
  enter: (type, from, to) => {
    if (type.name === 'OpenTag') {
      // do some magic here
    } else if (type.name === 'CloseTag') {
      // do some magic here
    }
  }
});

is it possible to get “OpenTag” based on “CloseTag”? I need to know what the id of the open tag is

 else if (type.name === 'CloseTag') {
    // how to get <OpenTag> id?
  }
3

I don’t know what you mean by the ‘id of the open tag’, but you could use the third argument to enter to get a SyntaxNode for the current node, and use .parent.firstChild to navigate to the first child of the close tag’s parent node, which will be the open tag.

4

but you could use the third argument

you mean the fourth get, right?

<div id="ID1" class="CLASS" data-attr="ATTR">
  <div id="ID2" class="CLASS" data-attr="ATTR">
    Lorem ipsum
  </div> // here I would like to get ID1
</div>   // here -> ID2