tiptap

Tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.https://tiptap.dev/docs/editor/getting-started/overview

Our blog system already has the capability to read MD files, but editing MD files requires an additional editor and a
separate directory to store them.
Therefore, we have switched to using a database + TipTap rich text method to store our blog content.

git repository

This chapter is part of the Next.js beginner course series. Check out the following Git repository and switch to the
extra2 branch to view the code for this chapter.

course-repositoryhttps://github.com/malred/hexo-blog-nextjs-course

Install and configure TipTap

Since there are many dependencies required, we will install the new dependencies by modifying the package.json file and
then running an install.

{
  "dependencies": {
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-toggle": "^1.1.0",
    "@tailwindcss/typography": "^0.5.14",
    "@tiptap/core": "^2.4.0",
    "@tiptap/extension-character-count": "^2.4.0",
    "@tiptap/extension-color": "^2.4.0",
    "@tiptap/extension-document": "^2.4.0",
    "@tiptap/extension-dropcursor": "^2.4.0",
    "@tiptap/extension-focus": "^2.4.0",
    "@tiptap/extension-heading": "^2.4.0",
    "@tiptap/extension-image": "^2.4.0",
    "@tiptap/extension-paragraph": "^2.4.0",
    "@tiptap/extension-subscript": "^2.4.0",
    "@tiptap/extension-superscript": "^2.4.0",
    "@tiptap/extension-text": "^2.4.0",
    "@tiptap/extension-text-align": "^2.4.0",
    "@tiptap/extension-text-style": "^2.4.0",
    "@tiptap/pm": "^2.4.0",
    "@tiptap/react": "^2.4.0",
    "@tiptap/starter-kit": "^2.4.0",
    "@tiptap/suggestion": "^2.4.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "@tiptap/extension-font-family": "^3.0.0",
    "@tiptap/extension-highlight": "^2.6.6",
    "@tiptap/extension-link": "^3.0.0",
    "@tiptap/extension-list-keymap": "^3.0.0",
    "@tiptap/extension-table": "^2.6.6",
    "@tiptap/extension-table-cell": "^2.6.6",
    "@tiptap/extension-table-header": "^2.6.6",
    "@tiptap/extension-table-row": "^2.6.6",
    "@tiptap/extension-task-item": "^2.6.6",
    "@tiptap/extension-task-list": "^3.0.0",
    "lowlight": "^3.1.0",
    "marked": "^14.0.0",
    "next": "14.2.5",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.5.2",
    "sass": "^1.77.6",
    "lucide-react": "^0.400.0"
  }
}

Among these dependencies, aside from TipTap, the others are for the component library.

Page for writing articles

Create a page for writing articles using TipTap.

- app
    - blog
        - [slug]
            - write
                - page.tsx

code:

jsx

'use client';
import React, {FormEvent, useState} from 'react';
import TipTap from "@/components/TipTap";
import {Button} from "@/components/ui/button";

const Page = (props) => {
    // contents of the tiptap editor 
    const [richText, setRichText] = useState(`
            descripte   ddd 
        <p>This is a basic example of implementing images. Drag to re-order.</p>
        <img src="https://placehold.co/800x400" />
        <img src="https://placehold.co/800x400/6A00F5/white" />
        <p>
          The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
        </p>
        <ul>
          <li>Nested elements (like this list item) will be focused with the default setting of <code>mode: all</code>.</li>
          <li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
        </ul>

        <p>
          That’s a boring paragraph followed by a fenced code block:
        </p>
        <pre><code>for (var i=1; i <= 20; i++)
{
  if (i % 15 == 0)
    console.log("FizzBuzz");
  else if (i % 3 == 0)
    console.log("Fizz");
  else if (i % 5 == 0)
    console.log("Buzz");
  else
    console.log(i);
}</code></pre>
        <p>
          Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
        </p>
`)

    return (
        <div className={'m-12'}>
            <form onSubmit={(e: FormEvent) => {
                e.preventDefault()
                console.log(richText)
            }}>
                <h1 className={'font-bold mr-2 text-2xl'}>{props.params.slug}</h1>
                {/* tiptap editor */}
                <TipTap
                    description={richText}
                    onChange={(text) => {
                        setRichText(text)
                    }}/>
                <Button
                    type={'submit'} className={'my-4'}>
                    Submit
                </Button>
            </form>
        </div>
    );
};

export default Page;

tiptap editor

Create a TipTap editor component.

1
2
3

- app
- components
    - TipTap.tsx

jsx

'use client';

import './styled.scss'

import {EditorContent, ReactNodeViewRenderer, useEditor} from "@tiptap/react";
import {StarterKit} from "@tiptap/starter-kit";
import Heading from '@tiptap/extension-heading'
import BubbleToolbar from "@/components/BubbleToolbar";
import {CharacterCount} from "@tiptap/extension-character-count";

import {Color} from '@tiptap/extension-color'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import TextStyle from '@tiptap/extension-text-style'

import Dropcursor from '@tiptap/extension-dropcursor'
import Image from '@tiptap/extension-image'
import {useEffect, useState} from "react";
import FloatingToolbar from "@/components/FloatingToolbar";

// @tiptap-pro/extension-file-handler is not in the npm registry, or you have no permission to fetch it.
// import FileHandler from '@tiptap-pro/extension-file-handler'

import Focus from '@tiptap/extension-focus'
import {FontFamily} from "@tiptap/extension-font-family";
import ListItem from "@tiptap/extension-list-item";
import BulletList from "@tiptap/extension-bullet-list";
import Code from "@tiptap/extension-code";

import ListKeymap from '@tiptap/extension-list-keymap'

import Blockquote from '@tiptap/extension-blockquote'
import HardBreak from '@tiptap/extension-hard-break'
import HorizontalRule from '@tiptap/extension-horizontal-rule'

import Highlight from '@tiptap/extension-highlight'
import {common, createLowlight} from 'lowlight'

const lowlight = createLowlight(common)

lowlight.highlight('html', '"use strict";')
lowlight.highlight('css', '"use strict";')
lowlight.highlight('js', '"use strict";')
lowlight.highlight('ts', '"use strict";')

import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import TableRow from '@tiptap/extension-table-row'

import TaskItem from '@tiptap/extension-task-item'
import TaskList from '@tiptap/extension-task-list'

import Link from '@tiptap/extension-link'

// import Highlight from '@tiptap/extension-highlight'

import Subscript from '@tiptap/extension-subscript'
import Superscript from '@tiptap/extension-superscript'

import TextAlign from '@tiptap/extension-text-align'

export default function TipTap({
                                   description,
                                   onChange
                               }: {
    description: string
    onChange: (richText: string) => void
}) {
    // Editor settings, such as which plugins to use, and what features are supported.
    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                // Disable an included extension
                history: false,
                // codeBlock: false,
                // code: false
                gapcursor: true
            }),
            Heading,
            Document,
            Paragraph,
            Dropcursor,
            Text,
            TextStyle,
            Color,
            CharacterCount.configure({
                mode: 'nodeSize',
            }),
            Focus.configure({
                className: 'has-focus',
                mode: 'all',
            }),
            Code,
            BulletList,
            ListItem,
            FontFamily,
            ListKeymap,
            // CodeBlock,
            Blockquote,
            HardBreak,
            HorizontalRule,
            Highlight,
            Image.configure({
                allowBase64: true,
                inline: true,
            }),
            Table.configure({
                // resizable: true,
                // allowTableNodeSelection: true
            }),
            TableRow,
            TableHeader,
            TableCell,
            Text,
            TaskList,
            TaskItem.configure({
                // nested: true,
                HTMLAttributes: {
                    class: 'list-none',
                },
            }),
            Link.configure({
                HTMLAttributes: {
                    class: 'underline cursor-pointer text-blue-400',
                },
                openOnClick: true,
                // linkOnPaste: true,
                autolink: true,
                defaultProtocol: 'https',
            }),
            Highlight.configure({multicolor: true}),
            Subscript,
            Superscript,
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
        ],
        autofocus: true,
        content: description,
        editorProps: {
            attributes: {
                class:
                    'p-2 rounded-md border min-h-[150px] border-input bg-back  disabled:cursor-not-allowed disabled:opacity-50'
            }
        },
        onUpdate({editor}) {
            onChange(editor.getHTML())
            console.log(editor.getHTML())
        }
    })

    // 防止编辑器未加载时操作出错
    const [isEditable, setIsEditable] = useState(true)

    useEffect(() => {
        if (editor) {
            editor.setEditable(isEditable)
        }
    }, [isEditable, editor])

    return (
        <div className={' flex flex-col justify-stretch min-h-[250px] min-w-[250px]'}>
            {/* bubble menu, It's the floating toolbar that appears when you long-press and drag the mouse to select content. */}
            <BubbleToolbar editor={editor}/>
            {/* The floating toolbar that automatically appears when you press enter to start a new line. */}
            <FloatingToolbar editor={editor}/>
            {/* The toolbar at the top of the editor, which I originally didn't want to implement, is mainly for using the table component. */}
            <div className="control-group flex flex-row flex-wrap gap-2 mb-2">
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().insertTable({rows: 3, cols: 3, withHeaderRow: true}).run()
                    }
                >
                    Insert table
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addColumnBefore().run()}>
                    Add column before
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addColumnAfter().run()}>Add column after
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().deleteColumn().run()}>Delete column
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addRowBefore().run()}>Add row before
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addRowAfter().run()}>Add row after
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().deleteRow().run()}>Delete row
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().deleteTable().run()}>Delete table
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().mergeCells().run()}>Merge cells
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().splitCell().run()}>Split cell
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().toggleHeaderColumn().run()}>
                    Toggle header column
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().toggleHeaderRow().run()}>
                    Toggle header row
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().toggleHeaderCell().run()}>
                    Toggle header cell
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().mergeOrSplit().run()}>Merge or split
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().setCellAttribute('colspan', 2).run()}>
                    Set cell attribute
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().fixTables().run()}>Fix tables
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().goToNextCell().run()}>Go to next cell
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().goToPreviousCell().run()}>
                    Go to previous cell
                </button>
            </div>

            {/* editor content */}
            <EditorContent editor={editor}/>

            {/* count of words */}
            <div
                className={`character-count `}>
                <br/>
                {editor?.storage.characterCount.characters()} characters
                {' '}
                {editor?.storage.characterCount.words()} words
            </div>
        </div>
    )
}

BubbleToolbar

1
2
3

- app
- components
    - BubbleToolbar.tsx

BubbleToolbar, It’s the floating toolbar that appears when you long-press and drag the mouse to select content.

jsx

'use client';
import './styled.scss'
import {BubbleMenu, type Editor} from "@tiptap/react";
import {Toggle} from './ui/toggle'
import {
    Heading,
    Heading2,
    Heading3, Heading4,
    Italic,
    List,
    Image,
    ListOrdered,
    LucideBold,
    Minus,
    Strikethrough,
    Superscript,
    Link2,
    Link2Off,
    Braces,
    Brackets, SquareCheck, Subscript,
    AlignJustify, AlignLeft, AlignRight, AlignCenter
} from "lucide-react";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {useCallback} from "react";


type Props = {
    editor: Editor | null
}

export default function BubbleToolbar({editor}: Props) {
    if (!editor)
        return null

    const addImage = useCallback(() => {
        const url = window.prompt('URL')

        if (url) {
            editor.chain().focus().setImage({src: url}).run()
        }
    }, [editor])


    const setLink = useCallback(() => {
        const previousUrl = editor.getAttributes('link').href
        const url = window.prompt('URL', previousUrl)

        // cancelled
        if (url === null) {
            return
        }

        // empty
        if (url === '') {
            editor.chain().focus().extendMarkRange('link').unsetLink()
                .run()

            return
        }

        // update link
        editor.chain().focus().extendMarkRange('link').setLink({href: url})
            .run()
    }, [editor])

    return (
        <BubbleMenu className={'w-fit shadow-md rounded-lg'} editor={editor} tippyOptions={{duration: 100}}>
            <div className="bubble-menu flex-wrap rounded-lg">
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 1})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 1}).run()
                    }}
                >
                    <Heading className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 2})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 2}).run()
                    }}
                >
                    <Heading2 className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 3})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 3}).run()
                    }}
                >
                    <Heading3 className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 4})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 4}).run()
                    }}
                >
                    <Heading4 className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('bold')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleBold().run()
                    }}
                >
                    <LucideBold className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('italic')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleItalic().run()
                    }}
                >
                    <Italic className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('strike')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleStrike().run()
                    }}
                >
                    <Strikethrough className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('bulletList')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleBulletList().run()
                    }}
                >
                    <List className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('orderedList')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleOrderedList().run()
                    }}
                >
                    <ListOrdered className={'h-4 w-4'}/>
                </Toggle>
                <div className={'inline-block mx-1'}>
                    <Select
                        onValueChange={(value) => {
                            console.log(value)
                            switch (value) {
                                case 'Purple':
                                    editor.chain().focus().setColor('#958DF1').run()
                                    break
                                case 'Red':
                                    editor.chain().focus().setColor('#F98181').run()
                                    break
                                case 'Orange':
                                    editor.chain().focus().setColor('#FBBC88').run()
                                    break
                                case 'Yellow':
                                    editor.chain().focus().setColor('#FAF594').run()
                                    break
                                case 'Blue':
                                    editor.chain().focus().setColor('#70CFF8').run()
                                    break
                                case 'Teal':
                                    editor.chain().focus().setColor('#94FADB').run()
                                    break
                                case 'Green':
                                    editor.chain().focus().setColor('#B9F18D').run()
                                    break
                                case 'Unset color':
                                    editor.chain().focus().unsetColor().run()
                                    break
                            }
                        }}>
                        <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder={'theme'}/>
                        </SelectTrigger>
                        <SelectContent>
                            {[
                                {
                                    name: 'Purple',
                                    val: '#958DF1'
                                },
                                {
                                    name: 'Red',
                                    val: '#F98181'
                                },
                                {
                                    name: 'Orange',
                                    val: '#FBBC88'
                                },
                                {
                                    name: 'Yellow',
                                    val: '#FAF594'
                                },
                                {
                                    name: 'Blue',
                                    val: '#70CFF8'
                                },
                                {
                                    name: 'Teal',
                                    val: '#94FADB'
                                },
                                {
                                    name: 'Green',
                                    val: '#B9F18D'
                                },
                                {
                                    name: 'Unset color',
                                    val: ''
                                }
                            ].map((item) => (
                                <SelectItem
                                    value={item.name}
                                    data-testid={`set${item.name}`}
                                    style={{
                                        color: item.val
                                    }}
                                    className={
                                        `bg-[${item.val}] focus:bg-[${item.val}] focus:brightness-125
                                         ${editor.isActive('textStyle', {color: item.val}) ? 'is-active' : ''}`
                                    }
                                    // onClick={() => editor.chain().focus().setColor(item.val).run()}
                                >
                                    {item.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
                <div className={'inline-block mx-1'}>
                    <Select
                        onValueChange={(value) => {
                            console.log(value)
                            switch (value) {
                                case 'Purple':
                                    editor.chain().focus().toggleHighlight({color: '#958DF1'}).run()
                                    break
                                case 'Red':
                                    editor.chain().focus().toggleHighlight({color: '#F98181'}).run()
                                    break
                                case 'Orange':
                                    editor.chain().focus().toggleHighlight({color: '#ffc078'}).run()
                                    break
                                case 'Yellow':
                                    editor.chain().focus().toggleHighlight({color: '#FAF594'}).run()
                                    break
                                case 'Blue':
                                    editor.chain().focus().toggleHighlight({color: '#70CFF8'}).run()
                                    break
                                case 'Teal':
                                    editor.chain().focus().toggleHighlight({color: '#94FADB'}).run()
                                    break
                                case 'Green':
                                    editor.chain().focus().toggleHighlight({color: '#B9F18D'}).run()
                                    break
                                case 'Unset color':
                                    editor.chain().focus().unsetHighlight().run()
                                    break
                            }
                        }}>
                        <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder={'highlight'}/>
                        </SelectTrigger>
                        <SelectContent>
                            {[
                                {
                                    name: 'Purple',
                                    val: '#958DF1'
                                },
                                {
                                    name: 'Red',
                                    val: '#F98181'
                                },
                                {
                                    name: 'Orange',
                                    val: '#FBBC88'
                                },
                                {
                                    name: 'Yellow',
                                    val: '#FAF594'
                                },
                                {
                                    name: 'Blue',
                                    val: '#70CFF8'
                                },
                                {
                                    name: 'Teal',
                                    val: '#94FADB'
                                },
                                {
                                    name: 'Green',
                                    val: '#B9F18D'
                                },
                                {
                                    name: 'Unset color',
                                    val: ''
                                }
                            ].map((item, index) => (
                                <SelectItem
                                    key={index}
                                    value={item.name}
                                    data-testid={`set${item.name}`}
                                    style={{
                                        background: item.val
                                    }}
                                    className={
                                        `bg-[${item.val}] focus:bg-[${item.val}] focus:brightness-125
                                         ${editor.isActive('textStyle', {color: item.val}) ? 'is-active' : ''}`
                                    }
                                    // onClick={() => editor.chain().focus().setColor(item.val).run()}
                                >
                                    {item.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
                <div className={'inline-block mx-1'}>
                    <Select
                        onValueChange={(value) => {
                            switch (value) {
                                case 'inter':
                                    editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()
                                    break
                                case 'comic-sans':
                                    editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()
                                    break
                                case 'serif':
                                    editor.chain().focus().setFontFamily('serif').run()
                                    break
                                case 'monospace':
                                    editor.chain().focus().setFontFamily('monospace').run()
                                    break
                                case 'cursive':
                                    editor.chain().focus().setFontFamily('cursive').run()
                                    break
                                case 'css-variable':
                                    editor.chain().focus().setFontFamily('var(--title-font-family)').run()
                                    break
                                case 'comic-sans-quoted':
                                    editor.chain().focus().setFontFamily('"Comic Sans MS", "Comic Sans"').run()
                                    break
                                case 'unsetFontFamily':
                                    editor.chain().focus().unsetFontFamily().run()
                                    break
                            }
                        }}
                    >
                        <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder={'font family'}/>
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem
                                onClick={() => editor.chain().focus().setFontFamily('Inter').run()}
                                className={editor.isActive('textStyle', {fontFamily: 'Inter'}) ? 'is-active' : ''}
                                data-test-id="inter"
                                value={'inter'}
                            >
                                Inter
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()
                                }
                                className={
                                    editor.isActive('textStyle', {fontFamily: 'Comic Sans MS, Comic Sans'})
                                        ? 'is-active'
                                        : ''
                                }
                                data-test-id="comic-sans"
                                value={"comic-sans"}
                            >
                                Comic Sans
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('serif').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'serif'}) ? 'is-active' : ''}
                                data-test-id="serif"
                                value="serif"
                            >
                                Serif
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('monospace').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'monospace'}) ? 'is-active' : ''}
                                data-test-id="monospace"
                                value="monospace"
                            >
                                Monospace
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('cursive').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'cursive'}) ? 'is-active' : ''}
                                data-test-id="cursive"
                                value="cursive"
                            >
                                Cursive
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('var(--title-font-family)').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'var(--title-font-family)'}) ? 'is-active' : ''}
                                data-test-id="css-variable"
                                value="css-variable"
                            >
                                CSS variable
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('"Comic Sans MS", "Comic Sans"').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: '"Comic Sans"'}) ? 'is-active' : ''}
                                data-test-id="comic-sans-quoted"
                                value="comic-sans-quoted"
                            >
                                Comic Sans quoted
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().unsetFontFamily().run()
                                }
                                data-test-id="unsetFontFamily"
                                value="unsetFontFamily"
                            >
                                Unset font family
                            </SelectItem>
                        </SelectContent>
                    </Select>
                </div>
                <Toggle
                    size={'sm'}
                    onClick={() => editor.chain().focus().toggleCodeBlock().run()}
                    className={`${editor.isActive('codeBlock') ? 'is-active' : ''}`}
                >
                    <Braces className={'w-4 h-4'}/>
                </Toggle>
                {/*<Toggle*/}
                {/*    onClick={() => editor.chain().focus().toggleCode().run()}*/}
                {/*    className={editor.isActive('code') ? 'is-active' : ''}*/}
                {/*>*/}
                {/*    <ChevronsLeftRight className={'h-4 w-4'}/>*/}
                {/*</Toggle>*/}
                {/*<Toggle*/}
                {/*    size={'sm'}*/}
                {/*    onClick={() => editor.chain().focus().setCodeBlock().run()}*/}
                {/*    disabled={editor.isActive('codeBlock')}*/}
                {/*    className={'inline'}*/}
                {/*>*/}
                {/*    <Braces className={'w-4 h-4'} />*/}
                {/*</Toggle>*/}
                <Toggle
                    size={'sm'}
                    onClick={() => editor.chain().focus().toggleBlockquote().run()}
                    className={`${editor.isActive('blockquote') ? 'is-active' : ''}`}
                >
                    <Brackets className={'h-4 w-4'}/>
                </Toggle>
                {/*<Toggle*/}
                {/*    size={'sm'}*/}
                {/*    onClick={() => () => editor.chain().focus().setHardBreak().run()}*/}
                {/*>*/}
                {/*    <CornerDownLeft className={'h-4 w-4'}/>*/}
                {/*</Toggle>*/}
                <Toggle
                    size={'sm'}
                    onClick={() => editor.chain().focus().setHorizontalRule().run()}
                >
                    <Minus className={'h-4 w-4'}/>
                </Toggle>
                <Image onClick={addImage} className={'m-2 cursor-pointer h-5 w-5'}/>

                <Toggle
                    onClick={() => editor.chain().focus().toggleTaskList().run()}
                    className={editor.isActive('taskList') ? 'is-active' : ''}
                >
                    <SquareCheck className={'h-4 w-4'}/>
                </Toggle>

                {/*链接*/}
                <Link2
                    onClick={setLink}
                    className={`h-5 w-5 m-2 cursor-pointer
                     ${editor.isActive('link') ? 'is-active' : ''}`}/>

                <Toggle
                    onClick={() => editor.chain().focus().unsetLink().run()}
                    disabled={!editor.isActive('link')}
                >
                    <Link2Off className={'h-4 w-4'}/>
                </Toggle>
                {/*上下标*/}
                <Toggle
                    onClick={() => editor.chain().focus().toggleSuperscript().run()}
                    className={editor.isActive('superscript') ? 'is-active' : ''}
                >
                    <Superscript className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().toggleSubscript().run()}
                    className={editor.isActive('subscript') ? 'is-active' : ''}
                >
                    <Subscript className={'h-4 w-4'}/>
                </Toggle>
                {/*对齐*/}
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('left').run()}
                    className={editor.isActive({textAlign: 'left'}) ? 'is-active' : ''}
                >
                    <AlignLeft className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('center').run()}
                    className={editor.isActive({textAlign: 'center'}) ? 'is-active' : ''}
                >
                    <AlignCenter className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('right').run()}
                    className={editor.isActive({textAlign: 'right'}) ? 'is-active' : ''}
                >
                    <AlignRight className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('justify').run()}
                    className={editor.isActive({textAlign: 'justify'}) ? 'is-active' : ''}
                >
                    <AlignJustify className={'h-4 w-4'}/>
                </Toggle>
            </div>
        </BubbleMenu>
    )
}

FloatingToolbar

1
2
3

- app
- components
    - FloatingToolbar.tsx

FloatingToolbar, The floating toolbar that automatically appears when you press enter to start a new line.

end

visit http://localhost:3000/blog/xxx/write

Next, we will introduce Prisma to operate the database and store these rich texts in the database.

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

Using TipTap rich text editor with Next.js