Skip to content

Instantly share code, notes, and snippets.

@nathansmith
Last active November 16, 2023 12:43
Show Gist options
  • Save nathansmith/86b5d4b23ed968a92fd4 to your computer and use it in GitHub Desktop.
Save nathansmith/86b5d4b23ed968a92fd4 to your computer and use it in GitHub Desktop.
Handy utilities for dealing with `<div contenteditable="true">` areas.
// Helpers.
import { convertToText } from './';
/*
You would call this when receiving a plain text
value back from an API, and before inserting the
text into the `contenteditable` area on a page.
*/
const convertToMarkup = (str = '') => {
return convertToText(str).replace(/\n/g, '<br>');
};
// Export.
export { convertToMarkup };
/*
You would call this after getting an element's
`.innerHTML` value, while the user is typing.
*/
const convertToText = (str = '') => {
// Ensure string.
let value = String(str);
// Convert encoding.
value = value.replace(/&nbsp;/gi, ' ');
value = value.replace(/&amp;/gi, '&');
// Replace `<br>`.
value = value.replace(/<br>/gi, '\n');
// Replace `<div>` (from Chrome).
value = value.replace(/<div>/gi, '\n');
// Replace `<p>` (from IE).
value = value.replace(/<p>/gi, '\n');
// Remove extra tags.
value = value.replace(/<(.*?)>/g, '');
// Trim each line.
value = value
.split('\n')
.map((line = '') => {
return line.trim();
})
.join('\n');
// No more than 2x newline, per "paragraph".
value = value.replace(/\n\n+/g, '\n\n');
// Clean up spaces.
value = value.replace(/[ ]+/g, ' ');
value = value.trim();
// Expose string.
return value;
};
// Export.
export { convertToText };
// Helpers.
import { convertToText } from './';
// Constants.
const f = 'function';
const o = 'object';
/*
You would call this when a user pastes from
the clipboard into a `contenteditable` area.
*/
const convertOnPaste = (
event = {
preventDefault() {},
}
) => {
// Prevent paste.
event.preventDefault();
// Set later.
let value = '';
// Does method exist?
const hasEventClipboard = !!(
event.clipboardData &&
typeof event.clipboardData === o &&
typeof event.clipboardData.getData === f
);
// Get clipboard data?
if (hasEventClipboard) {
value = event.clipboardData.getData('text/plain');
}
// Insert into temp `<textarea>`, read back out.
const textarea = document.createElement('textarea');
textarea.innerHTML = value;
value = textarea.innerText;
// Clean up text.
value = convertToText(value);
// Insert text.
if (typeof document.execCommand === f) {
document.execCommand('insertText', false, value);
}
};
// Export.
export { convertOnPaste };
@ANN-MB
Copy link

ANN-MB commented Apr 20, 2020

About the fallback : it trims all line breaks.
Why don't you use the same .replace() values with innerText or .text() ? It works for me.
Also you can merge two of your .replace() methods into one :

.replace(/\n+\s+\n+/g, "\n\n").replace(/\n\n+/g, "\n\n"); to .replace(/(\n+\s+\n+)|(\n\n+)/g, "\n\n")

Thanks nathansmith by the way ! It helped a lot :)

Vanilla JavaScript solution below.

const handlePaste = function(e) {
  var value = (window.clipboardData) ? window.clipboardData.getData('text') : e.clipboardData.getData('text/plain');

  if (!value) {
    window.setTimeout(function() {
      var el = e.target,
        value = el.innerText.replace(/[ ]+/g, " ").replace(/(\n+\s+\n+)|(\n\n+)/g,"\n\n");
      el.innerText = value;
    }, 16);
    return false;
  }
  e.preventDefault();
  var texta = document.createElement("textarea");
  texta.value = value;
  value = texta.value;
  value = value.trim();
  value = value.replace(/[ ]+/g, " ").replace(/(\n+\s+\n+)|(\n\n+)/g,"\n\n");
  if (document.selection) {
    if (document.documentMode === 8) {
      value = value.replace(/\n/g, '<br>');
    }
    document.selection.createRange().pasteHTML(value);
  } else {
    document.execCommand("insertText", false, value);
  }
}

@nathansmith
Copy link
Author

cc: @ANN-MB

It's been awhile since I last updated this gist.

I replaced what I had with what I currently use.

It's much more streamlined, and removes the unnecessary fallback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment