Quill 编辑器中的不正确的列表插入

import React, { useEffect, useRef, useState } from "react"; import Quill from "quill"; import "quill/dist/quill.snow.css"; import { Mention, MentionBlot } from "quill-mention"; import "quill-mention/dist/quill.mention.css"; import EmojiPicker from "emoji-picker-react";

const BlockEmbed = Quill.import("blots/block/embed") as any;

class DividerBlot extends BlockEmbed { static blotName = "divider"; static tagName = "hr"; }

class EmojiReactionBlot extends BlockEmbed { static blotName = "emoji-reaction"; static tagName = "span"; static className = "emoji-reaction";

static create(emoji) { const node = super.create(); node.setAttribute("data-emoji", emoji); node.innerHTML = emoji; return node; } }

Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention, "blots/divider": DividerBlot, "blots/emoji-reaction": EmojiReactionBlot, });

const atValues = [ { id: 1, value: "Fredrik Sundqvist" }, { id: 2, value: "Patrik Sjölin" }, ];

const toolbarOptions = [ [{ font: [] }, { header: [1, 2, 3, 4, 5, 6, false] }], ["bold", "italic", "underline", "strike"], [{ list: "ordered" }, { list: "bullet" }, { align: [] }], ["link", "image", "video"], ["blockquote", "code-block"], ["clean"], [{ color: [] }, { background: [] }], ["hr", "emoji"], ];

const emojiPickerStyles: React.CSSProperties = { position: "absolute", zIndex: 1000, top: "60px", right: "20px", width: "300px", height: "400px", };

const QuillEditor = ({ value, handleTextEditorChange }) => { …