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

diff --git a/src/app/components/editor/output.ts b/src/app/components/editor/output.ts
index 38c54499305b5ebd2f24b66b002562b25edae727..5d0443fa847ca404eb7781c16a9505ce01000aab 100644 (file)
--- a/src/app/components/editor/output.ts
+++ b/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, '');

diff --git a/src/app/organisms/room/RoomInput.tsx b/src/app/organisms/room/RoomInput.tsx
index e869e16d0a8eefcb7956fa38f016bbb647190bb8..a50c80047f0441964ee2b117059a058130fd8e41 100644 (file)
--- a/src/app/organisms/room/RoomInput.tsx
+++ b/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': {