Merge pull request #4770 from thematters/fix/trim-moment-empty-content

fix(Moment): sanitize moment content
thematters · Aug 23, 2024 · 514545c · 514545c
2 parents 1c9f4a5 + 4894fef
commit 514545c
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 24 deletions.
diff --git a/src/common/utils/comment/index.ts b/src/common/utils/comment/index.ts
@@ -75,19 +75,6 @@ export function filterResponses<T extends Response | Comment>(
   })
 }
 
-export function trimCommentContent(content: string) {
-  // clear empty p tag
-  let trimContent = content.replace(/^(<p>\s*<\/p>)+|(<p>\s*<\/p>)+$/g, '')
-  // clear empty line and space at the beginning
-  trimContent = trimContent.replace(/^(<p>(<br class="smart">|\s)+)/g, '<p>')
-  // clear empty line and space at the end
-  trimContent = trimContent.replace(
-    /((<br class="smart">|\s)+<\/p>)+$/g,
-    '</p>'
-  )
-  return trimContent
-}
-
 export const highlightComment = (
   targetElement: HTMLElement,
   isParentComment?: boolean,

diff --git a/src/common/utils/text/index.ts b/src/common/utils/text/index.ts
@@ -60,3 +60,19 @@ export const truncate = (
     str.length - suffixLen
   )}`
 }
+
+export function sanitizeContent(content: string) {
+  // clear empty p tag
+  let sanitizedContent = content.replace(/^(<p>\s*<\/p>)+|(<p>\s*<\/p>)+$/g, '')
+  // clear empty line and space at the beginning
+  sanitizedContent = sanitizedContent.replace(
+    /^(<p>(<br class="smart">|\s)+)/g,
+    '<p>'
+  )
+  // clear empty line and space at the end
+  sanitizedContent = sanitizedContent.replace(
+    /((<br class="smart">|\s)+<\/p>)+$/g,
+    '</p>'
+  )
+  return sanitizedContent
+}
diff --git a/src/components/Dialogs/ArticleCommentFormDialog/CommentForm/index.tsx b/src/components/Dialogs/ArticleCommentFormDialog/CommentForm/index.tsx
@@ -3,7 +3,7 @@ import { useContext, useEffect, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { MAX_ARTICLE_COMMENT_LENGTH } from '~/common/enums'
-import { dom, formStorage, stripHtml, trimCommentContent } from '~/common/utils'
+import { dom, formStorage, sanitizeContent, stripHtml } from '~/common/utils'
 import {
   Dialog,
   SpinnerBlock,
@@ -78,10 +78,10 @@ const CommentForm: React.FC<CommentFormProps> = ({
 
   const handleSubmit = async (event?: React.FormEvent<HTMLFormElement>) => {
     const mentions = dom.getAttributes('data-id', content)
-    const trimContent = trimCommentContent(content)
+    const sanitizedContent = sanitizeContent(content)
     const input = {
       comment: {
-        content: trimContent,
+        content: sanitizedContent,
         replyTo: replyToId,
         articleId,
         parentId,

diff --git a/src/components/Forms/ArticleCommentForm/index.tsx b/src/components/Forms/ArticleCommentForm/index.tsx
@@ -7,7 +7,7 @@ import {
   OPEN_UNIVERSAL_AUTH_DIALOG,
   UNIVERSAL_AUTH_TRIGGER,
 } from '~/common/enums'
-import { dom, formStorage, stripHtml, trimCommentContent } from '~/common/utils'
+import { dom, formStorage, sanitizeContent, stripHtml } from '~/common/utils'
 import {
   Button,
   SpinnerBlock,
@@ -93,11 +93,11 @@ export const ArticleCommentForm: React.FC<ArticleCommentFormProps> = ({
 
   const handleSubmit = async (event?: React.FormEvent<HTMLFormElement>) => {
     const mentions = dom.getAttributes('data-id', content)
-    const trimContent = trimCommentContent(content)
+    const sanitizedContent = sanitizeContent(content)
     const input = {
       id: commentId,
       comment: {
-        content: trimContent,
+        content: sanitizedContent,
         replyTo: replyToId,
         articleId,
         parentId,

diff --git a/src/components/Forms/MomentCommentForm/index.tsx b/src/components/Forms/MomentCommentForm/index.tsx
@@ -10,7 +10,7 @@ import {
   UNIVERSAL_AUTH_TRIGGER,
   UPDATE_NEWEST_MOMENT_COMMENT,
 } from '~/common/enums'
-import { formStorage, stripHtml, trimCommentContent } from '~/common/utils'
+import { formStorage, sanitizeContent, stripHtml } from '~/common/utils'
 import {
   Button,
   SpinnerBlock,
@@ -107,10 +107,10 @@ const MomentCommentForm = ({
   const isValid = contentCount > 0 && contentCount <= MAX_MOMENT_COMMENT_LENGTH
 
   const handleSubmit = async (event?: React.FormEvent<HTMLFormElement>) => {
-    const trimContent = trimCommentContent(content)
+    const sanitizedContent = sanitizeContent(content)
     const input = {
       comment: {
-        content: trimContent,
+        content: sanitizedContent,
         momentId,
         type: 'moment',
       },

diff --git a/src/components/Forms/MomentForm/index.tsx b/src/components/Forms/MomentForm/index.tsx
@@ -10,7 +10,12 @@ import {
   MAX_MOMENT_CONTENT_LENGTH,
   OPEN_MOMENT_FORM,
 } from '~/common/enums'
-import { formStorage, parseFormSubmitErrors, stripHtml } from '~/common/utils'
+import {
+  formStorage,
+  parseFormSubmitErrors,
+  sanitizeContent,
+  stripHtml,
+} from '~/common/utils'
 import {
   Button,
   ClearMomentDialog,
@@ -165,7 +170,7 @@ const MomentForm = ({ setFirstRendered }: MomentFormProps) => {
       const { data } = await putMoment({
         variables: {
           input: {
-            content,
+            content: sanitizeContent(content),
             assets: assets.map(({ assetId }) => assetId),
           },
         },