feat: fix characters in editor

Author: nevo-david

apps/frontend/src/components/launches/general.preview.component.tsx

@@ -17,13 +17,7 @@ export const GeneralPreviewComponent: FC<{
   const mediaDir = useMediaDirectory();
 
   const renderContent = topValue.map((p) => {
-    const newContent = stripHtmlValidation('html', p.content, true)
-      .replace(/(@.+?)(\s)/gi, (match, match1, match2) => {
-        return `<span class="font-bold" style="color: #ae8afc">${match1.trim()}${match2}</span>`;
-      })
-      .replace(/@\[(.+?)]\((.+?)\)/gi, (match, name, id) => {
-        return `<span class="font-bold" style="color: #ae8afc">@${name}</span>`;
-      });
+    const newContent = stripHtmlValidation('normal', p.content, true);
 
     const { start, end } = textSlicer(
       integration?.identifier || '',
@@ -32,14 +26,30 @@ export const GeneralPreviewComponent: FC<{
     );
 
     const finalValue =
-      newContent.slice(start, end) +
+      newContent
+        .slice(start, end)
+        .replace(/(@.+?)(\s)/gi, (match, match1, match2) => {
+          return `<span class="font-bold" style="color: #ae8afc">${match1.trim()}${match2}</span>`;
+        })
+        .replace(/@\[(.+?)]\((.+?)\)/gi, (match, name, id) => {
+          return `<span class="font-bold" style="color: #ae8afc">@${name}</span>`;
+        }) +
       `<mark class="bg-red-500" data-tooltip-id="tooltip" data-tooltip-content="This text will be cropped">` +
-      newContent.slice(end) +
+      newContent
+        .slice(end)
+        .replace(/(@.+?)(\s)/gi, (match, match1, match2) => {
+          return `<span class="font-bold" style="color: #ae8afc">${match1.trim()}${match2}</span>`;
+        })
+        .replace(/@\[(.+?)]\((.+?)\)/gi, (match, name, id) => {
+          return `<span class="font-bold" style="color: #ae8afc">@${name}</span>`;
+        }) +
       `</mark>`;
 
     return { text: finalValue, images: p.image };
   });
 
+  console.log(renderContent);
+
   return (
     <div className={clsx('w-full md:w-[555px] px-[16px]')}>
       <div className="w-full h-full relative flex flex-col">
@@ -103,7 +113,11 @@ export const GeneralPreviewComponent: FC<{
                 </div>
               </div>
               <div
-                className={clsx('text-wrap whitespace-pre', 'preview', interClass)}
+                className={clsx(
+                  'text-wrap whitespace-pre',
+                  'preview',
+                  interClass
+                )}
                 dangerouslySetInnerHTML={{
                   __html: value.text,
                 }}

apps/frontend/src/components/new-launch/editor.tsx

@@ -539,7 +539,7 @@ export const Editor: FC<{
   const { getRootProps, isDragActive } = useDropzone({ onDrop });
 
   const valueWithoutHtml = useMemo(() => {
-    return stripHtmlValidation('normal', props.value || '', false, true);
+    return stripHtmlValidation('normal', props.value || '', true);
   }, [props.value]);
 
   const addText = useCallback(

apps/frontend/src/components/new-launch/manage.modal.tsx

@@ -147,7 +147,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
           return p.values.some((a: any) => {
             return (
               countCharacters(
-                stripHtmlValidation('normal', a.content),
+                stripHtmlValidation('normal', a.content, true),
                 p?.integration?.identifier || ''
               ) === 0 && a.media?.length === 0
             );