Move cursor out of span

[AnsBdran]

I have created a custom characters inserted on button click, the problem is when I try to continue writing the content still goes inside the span, how to solve it:

[AnsBdran]

The code

'use client';
import {
  Button,
  InputLabel,
  Menu,
  MenuDropdown,
  MenuItem,
  MenuTarget,
  rem,
  ScrollAreaAutosize,
  Stack,
  Text,
} from '@mantine/core';
import { RichTextEditor, Link } from '@mantine/tiptap';
import { useEditor } from '@tiptap/react';
import Highlight from '@tiptap/extension-highlight';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import TextAlign from '@tiptap/extension-text-align';
import Superscript from '@tiptap/extension-superscript';
import SubScript from '@tiptap/extension-subscript';
import styles from './styles.module.css';
import { consts, symbols } from '@/config/consts';
import { useEffect } from 'react';
import { useTranslations } from 'next-intl';
import TextStyle from '@tiptap/extension-text-style';
import { symbolsFont } from '@/app/fonts';
import TextExtension from '@tiptap/extension-text';
import Paragraph from '@tiptap/extension-paragraph';
import Document from '@tiptap/extension-document';

type Props = {
  onBlur: () => void;
  onChange: (value: string) => void;
  value: string;
  error?: string;
  label: string;
  leftDirection?: boolean;
};

export const TextEditor = ({
  onBlur,
  label,
  error,
  value,
  onChange,
  leftDirection,
}: Props) => {
  const t = useTranslations();
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      TextExtension,
      StarterKit,
      Underline,
      Link,
      Superscript,
      SubScript,
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
      TextStyle.configure({
        mergeNestedSpanStyles: false,
        HTMLAttributes: { class: 'special-symbol' },
      }),
    ],
    content: value,
    onBlur,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
    immediatelyRender: false,
  });

  useEffect(() => {
    if (!value) {
      editor?.commands.clearContent();
    }
  }, [value]);

  return (
    <>
      <Stack gap={0}>
        <InputLabel>{label}</InputLabel>
        <RichTextEditor
          dir={leftDirection ? 'ltr' : ''}
          editor={editor}
          // withTypographyStyles={false}
          classNames={{
            content: `${styles.content} ${error ? styles.error : ''}`,
            root: `${styles.root} ${error ? styles.error : ''}`,
          }}
          lang='arabic'
        >
          <RichTextEditor.Toolbar sticky stickyOffset={consts.HEADER_HEIGHT}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>

            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>

            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>

            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>

            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>

            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Undo />
              <RichTextEditor.Redo />
            </RichTextEditor.ControlsGroup>

            <RichTextEditor.ControlsGroup>
              <Menu>
                <MenuTarget>
                  <Button size='compact-xs' variant='outline' color='gray'>
                    رموز مميزة
                  </Button>
                </MenuTarget>
                <MenuDropdown ff={symbolsFont.style.fontFamily}>
                  <ScrollAreaAutosize mah={400} offsetScrollbars>
                    {[
                      'H',
                      'R',
                      'U',
                      'O',
                      'E',
                      'I',
                      '"',
                      'L',
                      'A',
                      'S',
                      'D',
                      'F',
                      'C',
                      'V',
                      'B',
                      'N',
                      'M',
                    ].map((symbol) => (
                      <MenuItem
                        ta='center'
                        key={symbol}
                        onClick={() => {
                          editor?.commands.insertContent(
                            `<span style="">${symbol}</span>`,
                            {
                              parseOptions: {
                                preserveWhitespace: false,
                              },
                            }
                          );
                          editor?.commands.setTextSelection(
                            editor.state.selection.to + 9
                          );
                          editor?.commands.unsetAllMarks();
                        }}
                      >
                        {symbol}
                      </MenuItem>
                    ))}
                  </ScrollAreaAutosize>
                </MenuDropdown>
              </Menu>
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
          <RichTextEditor.Content />
        </RichTextEditor>
        {error && (
          <Text mt={2.5} className={styles.errorMessage}>
            {error}
          </Text>
        )}
      </Stack>
    </>
  );
};