#Tiptap Rich Text Editor Issue (v8.2.5)

3 messages · Page 1 of 1 (latest)

hardy olive
#

hi, i tried to import rich text editor but couln't manage to import all styles successfully.

  • i attached example i tried from doc's with bubblemenu
  • i also attached tiptap migration guide from v2 to v3 that states BubbleMenu's import has changed which different from Mantine docs
  • lastly, i attached my current ui that looks accurate but i can't see applied effects highlighted
image.png image.png image.png
hardy olive
# 
import "@mantine/core/styles.css";
import "@mantine/tiptap/styles.css";

import { MantineProvider } from "@mantine/core";
import { Flex, ScrollArea } from "@mantine/core";
import { RichTextEditor, Link } from "@mantine/tiptap";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { BubbleMenu } from "@tiptap/react/menus";

export default function App() {
  const editor = useEditor({
    extensions: [StarterKit, Link],
    content: "<p>Select some text to see bubble menu</p>",
  });

  return (
    <MantineProvider>
      <Flex gap={"xs"}>
        <ScrollArea w={400} h={300}>
          <RichTextEditor editor={editor}>
            {editor && (
              <BubbleMenu editor={editor}>
                <RichTextEditor.ControlsGroup>
                  <RichTextEditor.Bold />
                  <RichTextEditor.Italic />
                  <RichTextEditor.Underline />
                  <RichTextEditor.Strikethrough />
                  <RichTextEditor.Highlight />
                  <RichTextEditor.Link />
                  <RichTextEditor.Blockquote />
                  <RichTextEditor.ClearFormatting />
                </RichTextEditor.ControlsGroup>
              </BubbleMenu>
            )}

            <RichTextEditor.Content />
          </RichTextEditor>
        </ScrollArea>
      </Flex>
    </MantineProvider>
  );
}
hardy olive