How could I undo a paragraph marking

Question

Normal text image:

Image of the selected text:

Obs: I intend to format the selection better, but in case what I need is to reverse the process through the cancel method:

When there is no paragraph in the middle I simply do so to remove the selection:

<p> texto aqui <span data-id="15621658090031467d481" [demais atributos...]>parte selecionada</span> fim do texto</p>

$('[data-id="15621658090031467d481"]').contents().unwrap();

But in the case of paragraph, the method separates the text by closing the previous paragraph and the next one. Creating a package as an example below:

 <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&nbsp;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&nbsp;passagem aérea (5,32%), ônibus urbano (0,74%) e plano de saúde (0,80%). wqerqwrqwrqwr gfsd sdgsdgs</p>

In case, how could I reverse this by keeping the original paragraph formatting?

Method that makes the cancellation (but is not running the way I wanted):

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();
    }
}

Example fiddle

It works here, but it only does 2 paragraphs, I need it to be for all paragraphs

This is an example when selecting text by making the tag

This example is closer than needed (but still gives problems)

Answer 1

I’m not sure if I understand correctly (why do you need the external span around the paragraphs if the color can be set by the internal spans?), but I think the code below solves your problem:

$('span.with-paragraph span').contents().unwrap();
$('span.with-paragraph').contents().unwrap();

Note that the above two spans are removed. Hence it is possible to simplify if you do not have span.with-paragraph.