feat: fix characters in editor

This commit is contained in:
Nevo David 2025-07-21 16:54:33 +07:00
parent a38aa176e5
commit 6ad9051838
3 changed files with 26 additions and 12 deletions

View File

@ -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,
}}

View File

@ -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(

View File

@ -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
);