Imagem do texto normal:
Obs: Pretendo formatar melhor a seleção, mas no caso o que estou precisando é reverter o processo através do método cancelar:
Quando não existe um parágrafo no meio eu simplesmente faço assim para remover a seleção:
<p> texto aqui <span data-id="15621658090031467d481" [demais atributos...]>parte selecionada</span> fim do texto</p>
$('[data-id="15621658090031467d481"]').contents().unwrap();
Mas no caso do parágrafo, o método separa o texto fechando o parágrafo anterior e o próximo. Criando um pacote conforme o exemplo abaixo:
<p>
<strong>Gasolina, tomate e remédios foram os vilões do mês</strong></p
<p>Já os principais impactos individuais no mês, segundo o IBGE, vieram das altas da gasolina (2,66%), tomate (28,64%) e dos remédios (2,25%), refletindo este último o reajuste anual, em vigor desde 31 de março, co
</p>
<span class="color with-paragraph hightcolor-3 ng-scope" data-id="15621658090031467d481" id="mark_15621658090031467d481" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3" style="z-index: 3" data-selection="2" data-category="">
<span class="paragraph color hightcolor-3" data-id="15621658090031467d481" id="mark_15621658090031467d481" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3" style="z-index: 3" data-selection="2" data-category="">
<p>m teto de 4,33%.</p>
</span>
<span class="paragraph color hightcolor-3" data-id="15621658090031467d481" id="mark_15621658090031467d481" data-color="3" data-user="23455" data-date="2019-07-03 11:51:45" data-timestamp="1562165505000" data-note="" data-text="m teto de 4,33%. Outros destaqu" title="" data-zindex="3" style="z-index: 3" data-selection="2" data-category="">
<p>Outros destaqu</p>
</span>
<i class="tabs tab-3"></i>
</span>
<p>es de alta no mês foram passagem aérea (5,32%), ônibus urbano (0,74%) e plano de saúde (0,80%). wqerqwrqwrqwr gfsd sdgsdgs</p>
No caso, como eu poderia reverter isso, mantendo a formatação do parágrafo original?
Método que faz o cancelamento (porém não está rodando da forma que eu queria):
function cancel(id) {
var $el = $('[data-id="' + id + '"]');
if ($el.hasClass('with-paragraph-'+id)) {
var $current = [], j = 0;
$el.children('span.paragraph p')
.each(function(i, val){
$current[i] = val;
j++;
});
var $current_1 = $current[0],
$current_2 = $current[1];
for (var i=0; i < $el.children('span.paragraph p').length; i++) {
if (i != $el.children('span.paragraph p').length - 1) {
var $prev = $el.parent().find('.with-paragraph-'+id).prev();
// $prev.attr('id', 'prev_'+id);
$($prev).html($($prev).html() + $($current_1).html())
} else {
var $next = $el.parent().find('.with-paragraph-'+id).next();
// $next.attr('id', 'next_'+id);
$($next).html($($current_2).html() + $($next).html())
}
}
$el.remove();
} else {
$el.contents().unwrap();
}
}
Aqui funciona, porém só faz qua 2 parágrafos, preciso que seja para todos os parágrafos
Este é um exemplo quando seleciono o texto, fazendo a marca
Este exemplo está mais próximo do que preciso (porém ainda dá problemas)