6d5
< 
9,11d7
< var notatend=false, clicked=false;
< var prefix="", nothing="", cnotatend="", cnt=0;
< 
17,46c13
<      //placeCaretAtEnd(document.getElementById("storyboard"));
<    if (document.getElementById('myprefix')) {
<      prefix=document.getElementById('myprefix').value;
<    }
<    if (document.getElementById('mywith')) {
<      cnotatend=document.getElementById('mywith').value;
<    }
<    if (document.getElementById('mynae')) {
<    if (document.getElementById('mynae').value != '') {
<      notatend=true;
<      document.getElementById('mynae').value='';
<    }
<    }
<      if (prefix != "" || notatend == true) clicked=false;
<      if (prefix == "") {
<      placeCaret(document.getElementById("storyboard"), notatend);
<      } else if (cnotatend != "") {
<      cnt=1;
<      placeCaret(document.getElementById("storyboard"), cnotatend);
<      cnotatend="";
<      } else {
<      cnt++;
<      if (cnt == 3) {
<      prefix="";
<      placeCaret(document.getElementById("storyboard"), notatend);
<      }
<      }
<      notatend=false;
<    } else {
<      fixfirefox();
---
>      placeCaretAtEnd(document.getElementById("storyboard"));
53,140d19
< function placeCaret(el, isStart) { // thanks to https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
<   if (!clicked || 1 == 1) {
<    if (document.getElementById('myprefix')) {
<      prefix=document.getElementById('myprefix').value;
<      document.getElementById('myprefix').value="";
<    }
<    if (document.getElementById('mywith')) {
<      cnotatend=document.getElementById('mywith').value;
<      if (cnotatend != "" && prefix != "") isStart=cnotatend;
<      document.getElementById('mywith').value="";
<    }
<    if (prefix != "") {
<     if (el.innerHTML.indexOf(prefix) != -1) {
<     el.innerHTML=el.innerHTML.replace(prefix, prefix + isStart);
<     prefix+=isStart;
<     } else if (el.innerHTML.replace(/&nbsp;/g,' ').indexOf(prefix.replace(/&nbsp;/g,' ')) != -1) {
<     el.innerHTML=el.innerHTML.replace(/&nbsp;/g,' ').replace(prefix.replace(/&nbsp;/g,' '), prefix.replace(/&nbsp;/g,' ') + isStart);
<     prefix+=isStart;
<     } else {
<     var words=prefix.replace(/&nbsp;/g,' ').split(' ');
<     var firstgo=prefix.replace(/&nbsp;/g,' '); //.replace(/&nbsp;/g,' ').replace(words[0] + ' ',' ');
<     var origfg=prefix;
<     for (var iij=0; iij<words.length; iij++) {
<       if (origfg == prefix) {
<       firstgo=firstgo.replace(/&nbsp;/g,' ').replace(words[iij] + ' ',' ');
<       //alert('|' + firstgo + '| ... ' + el.innerHTML.replace(/&nbsp;/g,' ').indexOf(firstgo) + ' vs |' + el.innerHTML.replace(/&nbsp;/g,' ') + '|');
<       if (el.innerHTML.replace(/&nbsp;/g,' ').indexOf(firstgo) != -1) {
<       if (firstgo.trim() != '') {
<     el.innerHTML=el.innerHTML.replace(/&nbsp;/g,' ').replace(firstgo.replace(/&nbsp;/g,' '), firstgo.replace(/&nbsp;/g,' ') + isStart);
<       prefix=firstgo.replace(/&nbsp;/g,' ');
<       }
<       } else if (el.innerHTML.replace(/&nbsp;/g,' ').indexOf(firstgo.trim()) != -1) {
<       if (firstgo.trim() != '') {
<     el.innerHTML=el.innerHTML.replace(/&nbsp;/g,' ').replace(firstgo.replace(/&nbsp;/g,' ').trim(), firstgo.replace(/&nbsp;/g,' ').trim() + isStart);
<       prefix=firstgo.replace(/&nbsp;/g,' ').trim();
<       }
<       }
<       }
<     }
<     prefix+=isStart;
<     }
<    } else if (1 == 2 && navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
<     el=el;
<    } else {
<     el.focus();
<     if (typeof window.getSelection != "undefined"
<             && typeof document.createRange != "undefined") {
<         var range = document.createRange();
<         range.selectNodeContents(el);
<         range.collapse(isStart);
<         clicked=false;
<         var sel = window.getSelection();
<         sel.removeAllRanges();
<         sel.addRange(range);
<     } else if (typeof document.body.createTextRange != "undefined") {
<         var textRange = document.body.createTextRange();
<         textRange.moveToElementText(el);
<         textRange.collapse(isStart);
<         clicked=false;
<         textRange.select();
<     }
<    }
<   }
<   clicked=false;
< }
< 
< function fixfirefox() {
< 
< if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
<  if (document.getElementById("storyboard").innerHTML.indexOf('<br>') != -1) {
<     document.getElementById("storyboard").innerHTML=document.getElementById("storyboard").innerHTML.replace(/\&nbsp\;\&nbsp\;\<br\>/g,'&nbsp;&nbsp;<BR>').replace(/\<br\>\&nbsp\;\&nbsp\;/g,'&nbsp;&nbsp;<BR>').replace(/\<br\>\<br\>/g,'&nbsp;&nbsp;<BR>').replace(/\<br\>\&nbsp\;\<br\>/g,'&nbsp;&nbsp;<BR>').replace(/\&nbsp\;\<br\>/g,'&nbsp;').replace(/\ \<br\>/g,'&nbsp;').replace(/\<br\>/g,'');
<  }
< }
< 
< }
< 
< function getCaretPositionString() {  // https://stackoverflow.com/questions/48946330/angular5-get-cursor-position-in-a-contenteditable-div-using-innerhtml-and-pipe
<     var element = document.querySelector('#storyboard');
<     var range = window.getSelection().getRangeAt(0);
<     var preCaretRange = range.cloneRange();
<     preCaretRange.selectNodeContents(element);
<     preCaretRange.setEnd(range.endContainer, range.endOffset);
<     document.getElementById('myprefix').value=preCaretRange.toString();
<     //alert('|' + ('' + preCaretRange.toString()) + '|');
<     if (('' + preCaretRange.toString()).length == 0) { document.title='here'; notatend=true; document.getElementById('mynae').value='true'; } else { notatend=false; document.getElementById('mynae').value='';    }
<     return ('' + preCaretRange.toString()); //.length;
< }
< 
158,167d36
< 
< function handleEvent(e) {
<     var keycode = (e.keyCode ? e.keyCode : e.which);
<     if (keycode == '13') {
< if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1 && !notatend) {
<     document.getElementById("storyboard").innerHTML+='<br>';
< }
<     }
<     //keepactive();
< }
173,196d41
< function fit() {
< var ip=0;
< if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
<   ip=0;
< } else {
<   document.getElementById('storyboard').focus();
< }
<   if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
<      document.getElementById('mytah').value='x';
<   }
< }
< 
< function keepactive() {
<   if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
<      document.getElementById('mytah').value=document.getElementById('mytah').value;
<   } else {
<      document.getElementById('mytah').value='x';
<      document.getElementById('mynae').value='';
<      document.getElementById('myprefix').value='';
<      prefix='';
<      notatend=false;
<   }
< }
< 
203,205d47
< if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
< wtw+='<h4>Your Fairy Story follows ... good luck, and please double up on your Enter keys,  optionally clicking helper links for Emoji placement ...</h4>' + String.fromCharCode(13);
< } else {
207d48
< }
209c50
< wtw+='<div onkeydown="keepactive();" onclick="prefix=nothing; clicked=true; prefix=getCaretPositionString(); " contenteditable="true" style="background-color:yellow;width:98%;height:200px;border:10px groove red;padding:3px 3px 3px 3px;" id="storyboard">Once upon a time&nbsp;</div>' + String.fromCharCode(13);
---
> wtw+='<div contenteditable="true" style="background-color:yellow;width:98%;height:200px;border:10px groove red;padding:3px 3px 3px 3px;" id="storyboard">Once upon a time </div>' + String.fromCharCode(13);
211c52
< wtw+='<details open><summary></summary><table style="width:100%;height:260px;" border=2><tr>' + String.fromCharCode(13);
---
> wtw+='<table style="width:100%;height:260px;" border=2><tr>' + String.fromCharCode(13);
213c54
< wtw+='<iframe id="fsac1" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=skull%2Cghost%2Calien%2Cimp%2Cangel%2Cprincess%2Ccrystal_ball%2Cjapanese_ogre%2Cspace_invader%2Cjapanese_goblin&outans=Skull%2CGhost%2CAlien%2CAngry+Face+with+Horns%2CBaby+Angel%2CPriness%2CCrystal+Ball%2COgre%2CAlien+Monster%2CGoblin&heading=Fairy+Story+Characters&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=2033817289"></iframe>' + String.fromCharCode(13);
---
> wtw+='<iframe id="fsac1" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=skull%2Cghost%2Calien%2Cimp%2Cangel%2Cprincess%2Ccrystal_ball%2Cjapanese_ogre%2Cspace_invader%2Cjapanese_goblin&outans=Skull%2CGhost%2CAlien%2CAngry+Face+with+Horns%2CBaby+Angel%2CPriness%2CCrystal+Ball%2COgre%2CAlien+Monster%2CGoblin&heading=Fairy+Story+Characters&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Ffairy_story_assistant.html%3Femoji%3D&rand=2033817289"></iframe>' + String.fromCharCode(13);
215,217c56,58
< wtw+='<iframe id="fsac2" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=man&outans=&heading=Fairy+Story+People&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=311259562"></iframe>' + String.fromCharCode(13);
< wtw+='</td></tr></table></details><details open><summary></summary><table style="width:100%;height:260px;" border=2><tr><td style="width:48%;background-color:cyan;">' + String.fromCharCode(13);
< wtw+='<iframe id="fsac3" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=clock&outans=&heading=Fairy+Story+Times&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=1390790034"></iframe>' + String.fromCharCode(13);
---
> wtw+='<iframe id="fsac2" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=man&outans=&heading=Fairy+Story+People&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Ffairy_story_assistant.html%3Femoji%3D&rand=311259562"></iframe>' + String.fromCharCode(13);
> wtw+='</td></tr><tr><td style="width:48%;background-color:cyan;">' + String.fromCharCode(13);
> wtw+='<iframe id="fsac3" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=clock&outans=&heading=Fairy+Story+Times&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Ffairy_story_assistant.html%3Femoji%3D&rand=1390790034"></iframe>' + String.fromCharCode(13);
219,220c60,61
< wtw+='<iframe id="fsac4" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=automobile%2Cvehicle%2Ctractor%2Cambulance%2Cbicycle%2Cpolice%2Cconstruction%2Ctraffic%2Ctruck%2Ctram%2Cbus%2Chelicopter%2Cboat%2Cplane%2C&outans=&heading=Fairy+Story+Transport&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2F' + document.URL.split('#')[0].split('?')[0].split('/')[eval(-1 + document.URL.split('#')[0].split('?')[0].split('/').length)] + '%3Femoji%3D&rand=285342407"></iframe>' + String.fromCharCode(13);
< wtw+='</td></tr></table></details>' + String.fromCharCode(13);
---
> wtw+='<iframe id="fsac4" style="width:100%;height:260px;" src="//www.rjmprogramming.com.au/PHP/emoticon_keyboard_shortcuts.php?iframeplease=y&inans=automobile%2Cvehicle%2Ctractor%2Cambulance%2Cbicycle%2Cpolice%2Cconstruction%2Ctraffic%2Ctruck%2Ctram%2Cbus%2Chelicopter%2Cboat%2Cplane%2C&outans=&heading=Fairy+Story+Transport&subheading=Helper&urlprefix=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Ffairy_story_assistant.html%3Femoji%3D&rand=285342407"></iframe>' + String.fromCharCode(13);
> wtw+='</td></tr></table>' + String.fromCharCode(13);
223,225d63
< wtw+='<textarea style="display:none;" rows=1 cols=120 id="myprefix" value=""></textarea>' + String.fromCharCode(13);
< wtw+='<textarea style="display:none;" rows=1 cols=120 id="mywith" value=""></textarea>' + String.fromCharCode(13);
< wtw+='<textarea style="display:none;" rows=1 cols=120 id="mynae" value=""></textarea>' + String.fromCharCode(13);
227d64
<    setTimeout(fit,2000);
238,245d74
<       if (top.document.getElementById('myprefix').value != '') {
<       clicked=false;
<       cnotatend=decodeURIComponent(bits[1]).substring(decodeURIComponent(bits[1]).indexOf('<')) + '&nbsp;';
<       top.document.getElementById('mywith').value=cnotatend;
<       //placeCaret(top.document.getElementById('storyboard'),decodeURIComponent(bits[1]).substring(decodeURIComponent(bits[1]).indexOf('<')) + '&nbsp;');
<       } else if (top.document.getElementById('mynae').value != '') {
<       top.document.getElementById('storyboard').innerHTML=decodeURIComponent(bits[1]).substring(decodeURIComponent(bits[1]).indexOf('<')) + '&nbsp;' + top.document.getElementById('storyboard').innerHTML;
<       } else {
247d75
<       }
252,263c80,82
<       if (top.document.getElementById('myprefix').value != '') {
<       clicked=false;
<       cnotatend='<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i>&nbsp;';
<       top.document.getElementById('mywith').value=cnotatend;
<       //placeCaret(top.document.getElementById('storyboard'),'<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i>&nbsp;');
<       } else if (top.document.getElementById('mynae').value != '') {
<       top.document.getElementById('storyboard').innerHTML='<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i>&nbsp;' + top.document.getElementById('storyboard').innerHTML;
<       } else {
<       top.document.getElementById('storyboard').innerHTML+='<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i>&nbsp;';
<       }
<       if (top.document.getElementById('mytah')) top.document.getElementById('mytah').value='x';
<       //placeCaretAtEnd(top.document.getElementById('storyboard'));
---
>     top.document.getElementById('storyboard').innerHTML+='<i class="em em-' + rest.replace(/\+/g,'_').replace(/\ /g,'_') + '"></i>&nbsp;';
>     if (top.document.getElementById('mytah')) top.document.getElementById('mytah').value='x';
>     //placeCaretAtEnd(top.document.getElementById('storyboard'));