JSFiddle - React, Tailwind, and code Playground

by Shawn Cooke

HTML

<p class="parent" contenteditable="true">Bacon ipsum dolor amet jowl chicken pork loin <span class="move">[move text]</span>tail. Short ribs meatball
    <br>bresaola beef boudin hamburger, cow rump swine. Pork belly ribeye leberkas venison
    <br>ground <span class="move">[move text]</span>round shoulder pork <span class="move">[move text]</span>chop, strip steak drumstick doner t-bone alcatra pancetta turkey boudin.
    <br>Filet mignon pork chop tongue t-bone jowl strip steak. Cow spare ribs bresaola, tail
    <br>chicken brisket pastrami shank strip steak ribeye biltong pancetta short
    <br>ribs corned beef meatloaf. <span class="move">[move text]</span>Hamburger meatloaf pig strip steak.</p>

CSS

.parent {
    background-color: #F7F7F7;
}
.move {
    background-color: khaki;
    margin: 0 2px;
}

JavaScript

$(document).on('keyup','.move',function(e){ 
    if (e.ctrlKey && (e.which === 37 || e.which === 39)){
      //move character at right or left of span to the other side
      //to simulate the whole span moved  
    }    
    e.stopPropagation();   
});