CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr. Jo
Mr. Jo

Reputation: 5261

How can I transform pasted HTML code to plain text inside contentedtiable div excluding special HTML elements?

I have been struggling with my chat for a while now. My biggest problem is unfortunately still the messages input, which is made with a contenteditable div.

Unfortunately, I have the problem that when pasting code, it gets inserted as code instead of text in the input which often destroys the input (e.g. styles of the code gets applied). I have tried to find a solution several times, but I am still not satisfied with the situation. Therefore I tried to work slowly on the matter and developed the following code:

jQuery(document).ready(function ($) {
    $("#input").on("paste", function (e) {
        let clipboardData, pastedData;

        e.stopPropagation();
        e.preventDefault();

        clipboardData = e.originalEvent.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData("text");
        pastedData = pastedData.replace(/\t/g, "    ");
        pastedData = pastedData.replace(/<\s*([^\s>]+)(?:(?!\bclass="emoji")[^>])*>(.*?)(?:<\/\1>)|<\s*([^\s>]+)(?:(?!\bclass="emoji")[^>])*\/>/g, "$2");

        $("#input").html($("#input").html() + pastedData);
        placeCaretAtEnd($("#input")[0]);
    });
});

function placeCaretAtEnd(el) {
    el.focus();

    if (typeof window.getSelection !== "undefined" && typeof document.createRange !== "undefined") {
        let range = document.createRange();

        range.selectNodeContents(el);
        range.collapse(false);

        let sel = window.getSelection();

        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange !== "undefined") {
        let textRange = document.body.createTextRange();

        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}
[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.emoji {
  font-family: -apple-system, Segoe UI, Apple Color Emoji, Segoe UI Emoj, system-ui;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" contenteditable="true" spellcheck="true"></div>

Since I built my chat like WhatsApp Web, I also have emojis which are in a wrapper object. This object should not be replaced in the input when pasting it, which I could already achieve with the code above. As soon as I insert the following code, it will be inserted as code and not as text:

<span class="emoji" contenteditable="false">😃</span>

But if I insert some code now, the HTML gets removed instead of pasted as plain text:

This element shows you how it works <span class="emoji" contenteditable="false">😃</span> <div class="insert-me-as-text">I need to be a text</div>

So the code becomes:

This element shows you how it works 😃 I need to be a text

But should look like this in the end:

enter image description here enter image description here

And also pressing Ctrl + Z needs to work again.

Upvotes: 0

Views: 477

Answers (1)

User863
User863

Reputation: 20039

Try replacing the .insert-me-as-text element with the encoded HTML

$('<div>').text('<div>...</div>').html() // encodes HTML as string


jQuery(document).ready(function($) {
  $("#input").on("paste", function(e) {
    let clipboardData, pastedData;

    e.stopPropagation();
    e.preventDefault();

    clipboardData = e.originalEvent.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData("text");
    pastedData = pastedData.replace(/\t/g, "    ");
    
    let $wrap = $('<div/>').html(pastedData);    
    $wrap.find('.insert-me-as-text').replaceWith(function() {
      return $('<div>').text(this.outerHTML).html()
    })

    $("#input").html($("#input").html() + $wrap.html());
    placeCaretAtEnd($("#input")[0]);
  });
});

function placeCaretAtEnd(el) {
  el.focus();

  if (typeof window.getSelection !== "undefined" && typeof document.createRange !== "undefined") {
    let range = document.createRange();

    range.selectNodeContents(el);
    range.collapse(false);

    let sel = window.getSelection();

    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange !== "undefined") {
    let textRange = document.body.createTextRange();

    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}
[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.emoji {
  font-family: -apple-system, Segoe UI, Apple Color Emoji, Segoe UI Emoj, system-ui;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" contenteditable="true" spellcheck="true"></div>

Upvotes: 1

Related Questions