Fix editor custom html output (#1348)

* replace paragraph with line breaks

* stop sending plain msg as custom html

* removes console log

* fix false negative for sanitized customHtml

* fix customHtmlEqualsPlainText doc

src/app/components/editor/output.ts

@@ -17,7 +17,7 @@ const textToCustomHtml = (node: FormattedText): string => {
 const elementToCustomHtml = (node: CustomElement, children: string): string => {
   switch (node.type) {
     case BlockType.Paragraph:
-      return `<p>${children}</p>`;
+      return `${children}<br/>`;
     case BlockType.Heading:
       return `<h${node.level}>${children}</h${node.level}>`;
     case BlockType.CodeLine:
@@ -25,7 +25,7 @@ const elementToCustomHtml = (node: CustomElement, children: string): string => {
     case BlockType.CodeBlock:
       return `<pre><code>${children}</code></pre>`;
     case BlockType.QuoteLine:
-      return `<p>${children}</p>`;
+      return `${children}<br/>`;
     case BlockType.BlockQuote:
       return `<blockquote>${children}</blockquote>`;
     case BlockType.ListItem:
@@ -93,3 +93,17 @@ export const toPlainText = (node: Descendant | Descendant[]): string => {
   const children = node.children.map((n) => toPlainText(n)).join('');
   return elementToPlainText(node, children);
 };
+
+/**
+ * Check if customHtml is equals to plainText
+ * by replacing `<br/>` with `/n` in customHtml
+ * and sanitizing plainText before comparison
+ * because text are sanitized in customHtml
+ * @param customHtml string
+ * @param plain string
+ * @returns boolean
+ */
+export const customHtmlEqualsPlainText = (customHtml: string, plain: string): boolean =>
+  customHtml.replace(/<br\/>/g, '\n') === sanitizeText(plain);
+
+export const trimCustomHtml = (customHtml: string) => customHtml.replace(/<br\/>$/g, '');

src/app/organisms/room/RoomInput.tsx

@@ -51,6 +51,8 @@ import {
   createEmoticonElement,
   moveCursor,
   resetEditorHistory,
+  customHtmlEqualsPlainText,
+  trimCustomHtml,
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -251,7 +253,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       uploadBoardHandlers.current?.handleSend();
 
       const plainText = toPlainText(editor.children).trim();
-      const customHtml = toMatrixCustomHTML(editor.children);
+      const customHtml = trimCustomHtml(toMatrixCustomHTML(editor.children));
 
       if (plainText === '') return;
 
@@ -271,9 +273,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       const content: IContent = {
         msgtype: MsgType.Text,
         body,
-        format: 'org.matrix.custom.html',
-        formatted_body: formattedBody,
       };
+      if (replyDraft || !customHtmlEqualsPlainText(formattedBody, body)) {
+        content.format = 'org.matrix.custom.html';
+        content.formatted_body = formattedBody;
+      }
       if (replyDraft) {
         content['m.relates_to'] = {
           'm.in_reply_to': {