html and content editable normalizer

plugins/talk-plugin-rich-text-pell/client/components/Editor.js

@@ -4,6 +4,7 @@ import { init } from 'pell';
 import styles from './Editor.css';
 import cn from 'classnames';
 import { pluginName } from '../../package.json';
+import { htmlNormalizer } from '../utils';
 
 class Editor extends React.Component {
   ref = null;
@@ -18,7 +19,7 @@ class Editor extends React.Component {
       onChange: richTextBody => {
         // We want to save the original comment body
         const originalBody = this.ref.childNodes[1].innerText;
-        onChange(originalBody, { richTextBody });
+        onChange(originalBody, { richTextBody: htmlNormalizer(richTextBody) });
       },
       actions,
       classes: {
@@ -101,6 +102,7 @@ Editor.propTypes = {
   actions: PropTypes.array,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
+  isReply: PropTypes.bool,
 };
 
 export default Editor;

plugins/talk-plugin-rich-text-pell/client/utils.js

@@ -0,0 +1,10 @@
+export function htmlNormalizer(htmlInput) {
+  const str = htmlInput;
+  // We are normalizing the input from contenteditable of each browser, also removing unnecesary html tags
+  // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation
+  return str
+    .replace('<p>', '<div>') // IE outputs <p> instead of <div>s
+    .replace('</p>', '</div>') // IE outputs <p> instead of <div>s
+    .replace('<div>', '<br>')
+    .replace('</div>', '');
+}