Insert span correctly

[AnsBdran]

I have created a button that inserts an HTML span like this <span style="display: inline">some text</span>, after inserting the span, everything is typed after still goes inside the span, I don't want that, how to fix it??

[AnsBdran]

          <RichTextEditor.ControlsGroup>
              <Menu>
                <MenuTarget>
                  <Button size='compact-xs' variant='outline' color='gray'>
                    رموز مميزة
                  </Button>
                </MenuTarget>
                <MenuDropdown>
                  <ScrollAreaAutosize mah={400} offsetScrollbars>
                    {Object.keys(SPECIAL_SYMBOLS).map((symbol) => (
                      <MenuItem
                        ta='center'
                        ff={specialSymbolsFont.style.fontFamily}
                        key={symbol}
                        onClick={() => {
                          editor?.commands.insertContent(
                            `<span style="display: inline">${symbol}</span>`,
                            {
                              parseOptions: {
                                preserveWhitespace: false,
                              },
                              applyInputRules: false,
                            }
                          );
                        }}
                      >
                        {symbol}
                      </MenuItem>
                    ))}
                  </ScrollAreaAutosize>
                </MenuDropdown>
              </Menu>
            </RichTextEditor.ControlsGroup>

[AnsBdran]

import TextStyle from '@tiptap/extension-text-style';
import TextExtension from '@tiptap/extension-text';

    extensions: [
      Document,
      Paragraph,
      TextExtension,
      StarterKit,
      Underline,
      Link,
      Superscript,
      SubScript,
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
      TextStyle.configure({
        HTMLAttributes: { class: 'special-symbol' },
      }),
    ],

[bdbch]

@AnsBdran please don't mention people directly - Philipp is not maintaining Tiptap anymore and probably doesn't appreciate random mentions in his inbox.

The problem is propably that the span is inclusive.

https://tiptap.dev/docs/editor/core-concepts/schema#inclusive

One solution would be to insert a white space after your span (so the editor can place the cursor outside of the span) or extend the extension handling your span's and setting the inclusive prop to false.

[AnsBdran]

where to put the inclusive option??

[AnsBdran]

'use client';
import {
  Button,
  InputLabel,
  Menu,
  MenuDropdown,
  MenuItem,
  MenuTarget,
  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, SPECIAL_SYMBOLS } from '@/config/consts';
import { useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { specialSymbolsFont } from '@/app/fonts';
import TextStyle from '@tiptap/extension-text-style';
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({
        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>
                  <ScrollAreaAutosize mah={400} offsetScrollbars>
                    {Object.keys(SPECIAL_SYMBOLS).map((symbol) => (
                      <MenuItem
                        ta='center'
                        ff={specialSymbolsFont.style.fontFamily}
                        key={symbol}
                        onClick={() => {
                          editor?.commands.insertContent(
                            `<span style="display: inline">${symbol}</span>`, {
                              
                            }
                          );
                        }}
                      >
                        {symbol}
                      </MenuItem>
                    ))}
                  </ScrollAreaAutosize>
                </MenuDropdown>
              </Menu>
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
          <RichTextEditor.Content />
        </RichTextEditor>
        {error && (
          <Text mt={2.5} className={styles.errorMessage}>
            {error}
          </Text>
        )}
      </Stack>
    </>
  );
};

[AnsBdran]

sorry about the mention

[AnsBdran]

I solved it.

const Span  = Mark.create({
  name: 'span',
group: 'inline',
  addOptions() {
    return {
      HTMLAttributes: {
        class: 'special-symbol'
      }
    }
  },
  parseHTML: () => [
    {
      tag: 'span',
      getAttrs: () => ({class: 'special-symbol'})
    }
  ],
  renderHTML({HTMLAttributes})  {
    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
  }
  ,inclusive: false,
  keepOnSplit: false
})