I use tinymce to implement wysiwyg editor and I try to find multiple code block by regular expression,replace backtics and toggle code block.But when I try to replace backticks and if I have more then one string of content before code block,all my strings before code block immidiately squizes to one.

For example if I have this content:

after replacing backticks and toggling code block I have this content:

so my second string content just go to the first string and second string disapper.

This is my code:

'use client';
import React, {FC, useEffect, useRef, useState} from 'react';
import {Editor} from '@tinymce/tinymce-react';
import styles from './editor.module.scss';
import Image from 'next/image';
import Arrow from '@assets/svg/arrow_right.svg';
import Link from 'next/link';
import {addImage, handleClick, readFile, saveFile} from '@/app/editor/Functions';
import {EditorEvent} from 'tinymce';


const ArticleEditor: FC = () => {
        const editorRef = useRef<any>(null);
        const [editorState, setEditorState] = useState('');
        const [htmlValue, setHtmlValue] = useState('');
        const blockStyles: {
            [key: number]: { symbol: string; tag: string; }
        } = {
            0 : {symbol : '[', tag : 'a'},
            1 : {symbol : '```', tag : 'pre'},
        };
        let newRegex: RegExp;
        const startOffset = editorRef.current ? editorRef.current.selection.getRng().startOffset : 0;
        const endOffset = editorRef.current ? editorRef.current.selection.getRng().endOffset : 0;
        
        const [keyboardEvent, setKeyboardEvent] =
            useState<EditorEvent<KeyboardEvent>>();
        
        
        // function to build regex
        const wrapRegex = (symbol: string) => {
            if (symbol === '```') {
                newRegex = /^```n+(?<text>((w+)?([sS]*?)))n+```$/gm;
            } else if (symbol === '[') {
                newRegex = /[(?<text>.*)]((?<link>.*))/gm;
            }
            if (newRegex) {
                const matchRegex = newRegex.exec(editorState);
                if (matchRegex && matchRegex.groups) {
                    console.log(matchRegex);
                    for (const key in blockStyles) {
                        const value = blockStyles[key];
                        if (symbol === value.symbol) {
                            replaceStyleSymbols(symbol, value.tag, matchRegex);
                        }
                    }
                }
                
            }
            
        };
 
        
        
        const replaceStyleSymbols = (symbol: string, tag: string, regexGroups?: RegExpExecArray) => {
            const {text} = getFullWordWithCoordinates(symbol, keyboardEvent ? keyboardEvent : null);
            if (regexGroups && regexGroups.groups) {
               if (symbol === '```') {
                    const content = editorRef.current.getContent({format : 'text'});
                    if (keyboardEvent && keyboardEvent.key === 'Enter') {
                        const codeText = regexGroups.groups.text.replaceAll('nn', 'n');
                        const newContent = editorState.replace(text,
                            `<p><pre><code>${codeText}</code></pre></p>`);
                        editorRef.current.setContent(newContent);
                        editorRef.current.focus();
                        editorRef.current.selection.select(editorRef.current.getBody(), true);
                        editorRef.current.selection.collapse(false);
                    }
                    
                }
                
        };
        const getFullWordWithCoordinates = (symbol: string, event: EditorEvent<KeyboardEvent> | null) => {
            let wholeWordStart = symbol === '```' ? editorState.indexOf(symbol) : startOffset;
            let wholeWordEnd = symbol === '```' ? editorState.length : endOffset;
            if (event && event.key === ' ') {
                wholeWordStart--;
            }
            
            if (symbol === '```') {
                while (editorState.charAt(wholeWordEnd) !== symbol && wholeWordEnd < editorState.length) {
                    wholeWordEnd++;
                }
            } 
            return {
                text : editorState.slice(wholeWordStart,
                    symbol === '[' ? editorState.indexOf(')') + 1 : wholeWordEnd),
                start : wholeWordStart,
                end : wholeWordEnd
            };
        };
        
        // function to handle matched symbol with dictionary value
        const handleRegex = () => {
            
            let currentValue: { symbol: string; tag: string } = {symbol : '', tag : ''};
            for (const key in blockStyles) {
                const value = blockStyles[key];
                if (editorState.includes(value.symbol)) {
                    currentValue = value;
                }
            }
            if (currentValue) {
              
                    wrapRegex(currentValue.symbol);
                
            }
        };
        
      
        useEffect(() => {
            handleRegex();
        }, [editorState]);
        
        
        return (
            <>
                <div className={styles.article__editor}>
                    
                    
                    <Editor>
                        onInit={(_evt, editor) => (editorRef.current = editor)}
                        inline={true}
                        onClick={(event) => handleClick(event, editorRef)}
                        onEditorChange={(newValue, editor) => {
                            setHtmlValue(newValue);
                            setEditorState(editor.getContent({format : 'text'}));
                        }}
                       
                        init={{
                            height : 500,
                            menubar : false,
                            plugins : [
                                'advlist',
                                'lists',
                                'importcss',
                                'image',
                                'autolink',
                                'preview',
                                'visualblocks',
                                'code',
                                'codesample',
                                'fullscreen',
                                'media',
                                'table',
                            ],
                           }}
            </>
        );
    }
;

export default ArticleEditor;

Can someone tell me how resolve my problem?

I will be appreciate for any help.

I tried to add

tag after replacing code block and tried to change object for replace,for example I tried to replace form editorRef.content,but it still doesn’t work.