Separate content into two parts and get innerHTML of them

Currently, I want to separate a prosemirror view into two parts from the cursor I entered, and get each innerHTML of them. I split the task into these steps but faced the problem:

  1. Get cursor position with state.selection.$from.pos;
  2. The target selection should be [0, cursor_pos] and [cursor_pos, state.doc.content.size];
  3. Construct new Selection with arrays mentioned above;
  4. But, how to get expect innerHTML of these two selections?

For example, I have

<span>You can take <span class="search-highlight">selection</span>.$from.parent.textBetween(0, <span class="search-highlight">selection</span>.$from.parent.<span class="search-highlight">content</span>.size, "%") <span class="search-highlight">to</span> <span class="search-highlight">get</span> the whole text of the paragraph (where % will replace non-text nodes so...
</span>

If my cursor in the first can, I want to get result like these

  1. <span>You </span>

<span>can take <span class="search-highlight">selection</span>.$from.parent.textBetween(0, <span class="search-highlight">selection</span>.$from.parent.<span class="search-highlight">content</span>.size, "%") <span class="search-highlight">to</span> <span class="search-highlight">get</span> the whole text of the paragraph (where % will replace non-text nodes so...
</span>

Since the html can’t be separate directly, so I think I should interact with Selection and View to reach my goal.

Thx.

You could take a slice of the document and serialize its content.