Separate content into two parts and get innerHTML of them

1

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.

2

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

3

Sorry for replying after a long time, but that’s what I did exactly!

I put the pseudocode here to help others may face the same doubts in the future:

  1. First, I need to slice the selection to what I want (since I can’t get the innerHTML of it directly)
const { size } = state.doc.content;

const selectionConfigs =
        order > 0 ? [state.selection.$anchor, state.doc.resolve(size)] : [state.doc.resolve(0), state.selection.$anchor];
const selectionAfterCursor = EditorExecutor.getNewSelection(selectionConfigs[0], selectionConfigs[1]);
  1. Apply this transaction to Prosemirror
tr.setSelection(selectionAfterCursor);
tr.instantlyUpdate = true;

editor.dispatch(tr);
  1. Then serialize it and get its HTML with
const div = document.createElement('div');

const selectionContent = view.state.selection.content();

const fragment = DOMSerializer.fromSchema(view.state.schema).serializeFragment(selectionContent.content);
div.appendChild(fragment);

return div.innerHTML

:slight_smile: