Optimize the algorithm to merge text nodes with decorations

I need help figuring out how to merge two arrays of nodes with decorations. I have a VERY inefficient algorithm that works, but I need something better or any ideas.

I have two arrays of such text nodes. In general each node consists of text and text decorations (color, font styles etc.) and from, to indexes. I want to merge these two arrays so that text would remain the same but the decorations would be merged.

Here’s my current algorithm that iterates through each letter of the content, checks if the letter has any decorations and creates a separate node for the letter with all the decorations:

const getDecorationsByIndex = (nodes, index) => {
  const foundNodes: any[] = [];

  nodes.forEach(node => {
    if (index >= node.from && index < node.to) {
      foundNodes.push(node);
    }
  });

  return foundNodes.flatMap(node => node.textData?.decorations || []);
};

const mergeNodes = (nodes1, nodes2, content) => {
  const mergedNodes = [...content].map((s, index) => {
    const decorations1 = getDecorationsByIndex(nodes1, index);
    const decorations2 = getDecorationsByIndex(nodes2, index);

    return {
      id: '',
      nodes: [],
      type: Node_Type.TEXT,
      textData: {
        decorations: [...decorations1, ...decorations2],
        text: s,
      },
    };
  });

  return mergedNodes;
};

As an example let’s take a simple text def someFoo which has various decorations, from color to font weight.

Each of the arrays fully represent the text.
This one adds some boldness:

 [
    {
        "type": "TEXT",
        "id": "",
        "nodes": [],
        "textData": {
            "text": "de",
            "decorations": [
                {
                    "type": "BOLD",
                    "fontWeightValue": 700
                }
            ]
        },
        "from": 0,
        "to": 2
    },
    {
        "type": "TEXT",
        "id": "",
        "nodes": [],
        "textData": {
            "text": "f someFoo",
            "decorations": []
        },
        "from": 2,
        "to": 11
    }
]

The second array adds colors:

[
    {
        "id": "",
        "nodes": [],
        "type": "TEXT",
        "textData": {
            "decorations": [
                {
                    "type": "COLOR",
                    "colorData": {
                        "foreground": "#d73a49"
                    }
                }
            ],
            "text": "def"
        },
        "from": 0,
        "to": 3
    },
    {
        "id": "",
        "nodes": [],
        "type": "TEXT",
        "textData": {
            "decorations": [],
            "text": " "
        },
        "from": 3,
        "to": 4
    },
    {
        "id": "",
        "nodes": [],
        "type": "TEXT",
        "textData": {
            "decorations": [
                {
                    "type": "COLOR",
                    "colorData": {
                        "foreground": "#6f42c1"
                    }
                }
            ],
            "text": "someFoo"
        },
        "from": 4,
        "to": 11
    }
]

The result should be one array of these nodes that in the end would have the same text with all the decorations. Help me either optimize my algorithm or point me to right direction how should I approach merging these nodes. Thank you.