feat: linkedin validation

apps/frontend/src/app/global.scss

@@ -538,4 +538,9 @@ html[dir='rtl'] [dir='ltr'] {
 
 .ProseMirror:focus {
     outline: none;
+}
+
+.ProseMirror .mention {
+  font-weight: bold;
+  color: #ae8afc;
 }

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

@@ -104,23 +104,19 @@ const Span = Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       'span',
-      mergeAttributes(HTMLAttributes, {
-        'data-linkedin-id': HTMLAttributes.linkedinId,
-        class: 'mention',
-      }),
+      mergeAttributes(
+        // Exclude linkedinId from HTMLAttributes to avoid duplication
+        Object.fromEntries(
+          Object.entries(HTMLAttributes).filter(([key]) => key !== 'linkedinId')
+        ),
+        {
+          'data-linkedin-id': HTMLAttributes.linkedinId,
+          class: 'mention',
+        }
+      ),
       `@${HTMLAttributes.label}`,
     ];
   },
-
-  addNodeView() {
-    return ({ HTMLAttributes }) => {
-      const span = document.createElement('span');
-      span.classList.add('mention');
-      span.dataset.linkedinId = HTMLAttributes.linkedinId;
-      span.innerText = `@${HTMLAttributes.label}`;
-      return { dom: span };
-    };
-  },
 });
 
 export const EditorWrapper: FC<{
@@ -557,22 +553,25 @@ export const Editor: FC<{
     [props.value, id]
   );
 
-  const addLinkedinTag = useCallback((text: string) => {
-    const id = text.split('(')[1].split(')')[0];
-    const name = text.split('[')[1].split(']')[0];
+  const addLinkedinTag = useCallback(
+    (text: string) => {
+      const id = text.split('(')[1].split(')')[0];
+      const name = text.split('[')[1].split(']')[0];
 
-    editor
-      ?.chain()
-      .focus()
-      .insertContent({
-        type: 'mention',
-        attrs: {
-          linkedinId: id,
-          label: `@${name}`,
-        },
-      })
-      .run();
-  }, []);
+      editor
+        ?.chain()
+        .focus()
+        .insertContent({
+          type: 'mention',
+          attrs: {
+            linkedinId: id,
+            label: name,
+          },
+        })
+        .run();
+    },
+    [editor]
+  );
 
   if (!editor) {
     return null;

libraries/helpers/src/utils/strip.html.validation.ts

@@ -130,7 +130,10 @@ const underlineMap = {
   '0': '0̲',
 };
 
-export const stripHtmlValidation = (value: string, replaceBold = false): string => {
+export const stripHtmlValidation = (
+  value: string,
+  replaceBold = false
+): string => {
   const html = (value || '')
     .replace(/ /gi, ' ')
     .replace(/^<p[^>]*>/i, '')
@@ -138,13 +141,23 @@ export const stripHtmlValidation = (value: string, replaceBold = false): string
     .replace(/<\/p>/gi, '');
 
   if (replaceBold) {
-    return striptags(convertToAscii(html));
+    return striptags(convertLinkedinMention(convertToAscii(html)));
   }
 
   // Strip all other tags
   return striptags(html);
 };
 
+export const convertLinkedinMention = (value: string) => {
+  return value.replace(
+    /<span.+?data-linkedin-id="(.+?)".+?>(.+?)<\/span>/gi,
+    (match, id, name) => {
+      console.log(id, name);
+      return `@[${name.replace('@', '')}](${id})`;
+    }
+  );
+};
+
 export const convertToAscii = (value: string): string => {
   return value
     .replace(/<strong>(.+?)<\/strong>/gi, (match, p1) => {