diff --git a/apps/frontend/src/app/global.scss b/apps/frontend/src/app/global.scss index 70fe681a..547773ae 100644 --- a/apps/frontend/src/app/global.scss +++ b/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; } \ No newline at end of file diff --git a/apps/frontend/src/components/new-launch/editor.tsx b/apps/frontend/src/components/new-launch/editor.tsx index 8c4af1de..0ee4e6d3 100644 --- a/apps/frontend/src/components/new-launch/editor.tsx +++ b/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; diff --git a/libraries/helpers/src/utils/strip.html.validation.ts b/libraries/helpers/src/utils/strip.html.validation.ts index 6d1df7f4..1880c08b 100644 --- a/libraries/helpers/src/utils/strip.html.validation.ts +++ b/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(/^
]*>/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(
+ /