Handy utilities for dealing with `<div contenteditable="true">` areas.

[1] convertToMarkup.js

// 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 };

[2] convertToText.js

/*
  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(/ /gi, ' ');
  value = value.replace(/&/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 };

[3] convertOnPaste.js

// 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 };