add docs about using mantine popover for tiptap mention extension

[imranbarbhuiya]

Currently, tiptap mention extension provides an example of using it with tiptap. And idk how can I use mantine instead of tippy as both the apis are totally different. If u add docs about how to do it, it'll be great.

Edit: I just found that some tiptap extensions already uses this package so it'll be bundled in my production site. So I won't be able to remove this package by using mantine for mention. But it'll be great if mantine provides a mention box like autocomplete, or select so we can get the same colors and design

[rtivital]

Mentions are planned to be added as a part of 5.9 release. Tippy cannot be removed, it is a part of tiptap core.

[gl3nn]

@rtivital Is there any update on this? I already spend a lot of effort trying to get Mentions to work in tiptap but it's very tedious. The Mentions example that tiptap provides uses tippy, but that in the background uses popper, which gave me the flushSync bug. And in my specific case, using the RTE in a popover, was not working together well with the tippy popup that would close the popover on any interaction.

It would be great to have an example on how to use it with Mantine instead of tippy.

Unrelated, but I also noticed that the useEditor hook combined with an undebounced onUpdate that changes the controlled state of the editor content is pretty much unusable. The useEditor hook straight up destroy and recreates the editor on every dependency update. (Sure after some experimenting there were ways around this but overall it feels a lot less user friendly than the quill solution and tiptap lacks proper documentation on how to use their editor in a controlled state manner with react.)

Apologies if this sounds like a rant. Of course the tiptap move has a lot of advantages as well so I fully support it! It would however definitely be nice if we can wait with the quill deprecation until we have at least this Mentions extension properly working.

[rtivital]

No, there are no updates on this. I had issues with tiptap packages installation to mantine monorepo, all additional features of tiptap is postponed until 2.0 is out. You can still use rte package, it is not going anywhere until 6.0 release.

[gl3nn]

Now that 6.0 is out, is there any update on the Mentions bit? Would still be nice to have an example of that cause it's just not that trivial to get it working with Mantine.

[rtivital]

All additional features of tiptap are postponed until tiptap 2.0 is released.

[gl3nn]

Ah that's a pity, I guess we're stuck on 5.x for a while then. Thanks for the reply!

[pspeter3]

TipTap 2.0 is out now. It would be great to have docs about how to use the Popover and Badge components / styles for TipTap Mentions.

[rtivital]

I've explored the topic and there is not much documentation to provide. TipTap documentation is pretty straightforward, mentions extension can be used as described in the tiptap documentation. There is nothing else I can provide on Mantine side.

[chris-feist]

Is it possible to provide an example mantine theme for tippy?
https://atomiks.github.io/tippyjs/v6/themes/

[AlonMiz]

here's a working example with react-hook-form

import { type SuggestionKeyDownProps, type SuggestionProps } from '@tiptap/suggestion';
import '@mantine/tiptap/styles.css';
import { RichTextEditor, Link } from '@mantine/tiptap';
import { type Extensions, ReactRenderer, useEditor } from '@tiptap/react';
import Highlight from '@tiptap/extension-highlight';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import Mention from '@tiptap/extension-mention';
import TextAlign from '@tiptap/extension-text-align';
import TextDirection from 'tiptap-text-direction';
import { forwardRef, useEffect, useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { createPortal } from 'react-dom';
import { Menu } from '@mantine/core';

type VariableItem = {
  id: string;
  label: string;
};

type MentionListProps = SuggestionProps<VariableItem>;

export const MentionList = forwardRef<HTMLDivElement, MentionListProps>(
  ({ clientRect, command, query, items }, ref) => {
    const handleCommand = (id: string) => {
      const item = items.find((item) => item.id === id);
      if (!item) return;
      command(item);
    };

    return createPortal(
      <Menu opened position="bottom-start">
        <Menu.Target>
          <div
            style={{
              position: 'absolute',
              top: clientRect?.()?.bottom,
              left: clientRect?.()?.left,
            }}
          />
        </Menu.Target>

        <Menu.Dropdown>
          {items.map((item) => (
            <Menu.Item key={item.id} onClick={() => handleCommand(item.id)}>
              {item.label}
            </Menu.Item>
          ))}
        </Menu.Dropdown>
      </Menu>,
      document.body,
    );
  },
);
MentionList.displayName = 'MentionList';


export const FormRichTextEditor: React.FC<{ name: string; variables: VariableItem[] }> = ({
  name,
  variables,
}) => {
  const { control, setValue, getValues } = useFormContext();
  const extensions = useMemo(() => {
    const baseExtensions: Extensions = [
      StarterKit,
      Underline,
      Link,
      TextDirection.configure({ types: ['heading', 'paragraph'], defaultDirection: 'rtl' }),
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'], defaultAlignment: 'right' }),
    ];
    if (variables.length) {
      baseExtensions.push(
        Mention.configure({
          renderHTML(props) {
            return [
              'span',
              {
                style: `border: 1px solid #ccc; padding: 2px 4px; border-radius: 4px;`,
              },
              `#${props.node.attrs.label}`,
            ];
          },
          suggestion: {
            items: ({ query }) => {
              return variables.filter((item) => item.label.includes(query));
            },
            char: '#',
            render() {
              let reactRenderer: ReactRenderer | null = null;

              return {
                onStart: (props) => {
                  reactRenderer = new ReactRenderer(MentionList, {
                    props,
                    editor: props.editor,
                  });
                },
                onUpdate(props) {
                  reactRenderer?.updateProps(props);
                },
                onExit() {
                  reactRenderer?.destroy();
                },
              };
            },
          },
        }),
      );
      return baseExtensions;
    }
  }, [variables]);

  const editor = useEditor({
    extensions,
    content: getValues(name),
  });

  useEffect(() => {
    if (!editor) return;
    editor.on('update', () => {
      setValue(name, editor.getHTML());
    });
    return () => {
      editor.off('update');
    };
  }, [editor]);

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { value } }) => (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar>
            <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.ControlsGroup>

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

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

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

          <RichTextEditor.Content />
        </RichTextEditor>
      )}
    />
  );
};