Froala selection Bug

by Jithin Raj P R

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.2/css/froala_editor.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.2/css/froala_editor.pkgd.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.2/js/froala_editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.2.2/js/froala_editor.pkgd.min.js"></script>
<div class="editor">
  <html><head><title></title><style data-fr-style="true">html{margin:0px;height:auto;}body{height:auto;padding:20px;background:transparent;color:#000000;position:relative;z-index: 2;-webkit-user-select:auto;margin:0px;overflow:hidden;min-height:20px;}body:after{content:"";display:block;clear:both;}body::-moz-selection{background:#b5d6fd;color:#000;}body::selection{background:#b5d6fd;color:#000;}body, textarea.fr-code{min-height: 500px !important;}body, body:focus{outline: transparent solid 0px;}body{background: transparent; position: relative; z-index: 2; overflow-x: auto; user-select: auto;}body a{user-select: auto;}body img{max-width: calc(100% - 10px);}body.fr-disabled{user-select: none;}body [contenteditable="false"]{user-select: none;}body [contenteditable="true"]{outline: transparent solid 0px;}body .fr-video{user-select: none;}body .fr-video::after{position: absolute; content: ""; z-index: 1; top: 0px; left: 0px; right: 0px; bottom: 0px; cursor: pointer; display: block; background: rgba(0, 0, 0, 0);}body .fr-video.fr-active > *{z-index: 2; position: relative;}body .fr-video > *{box-sizing: content-box; max-width: 100%; border: none;}body table td.fr-selected-cell, body table th.fr-selected-cell{border: 1px double rgb(30, 136, 229);}body table tr{user-select: none;}body table td, body table th{user-select: text;}body .fr-no-selection table td, body .fr-no-selection table th{user-select: none;}body table{border: none; border-collapse: collapse; empty-cells: show; max-width: 100%;}body...

JavaScript

new FroalaEditor(".editor",{
iframe: true,
                    // toolbarSticky:true,
                    attribution: false,

					
                    toolbarBottom: false,
                   
                    htmlRemoveTags: [],
                    listAdvancedTypes: true,
                    htmlAllowedTags: ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', 'title', 'meta', 'center'],
                    toolbarButtons: [
                        ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'lineHeight'], ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat'], ['insertLink', 'insertImage', 'insertButton', 'insertTable', 'insertSocialMedia', 'mergeTags', 'embedly'], ['undo', 'redo', 'previewPage', 'fullscreen', 'spellChecker', 'html', 'help']
                    ],
                    toolbarButtonsMD: [
                        ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'lineHeight'], ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'formatOL', 'formatUL',...