网站搜索

javascript - 如何在 Tiptap React 编辑器中将单行转换为标题而不改变整个段落?


我在一个 React 项目中使用 Tiptap 编辑器,并且在将段落中的单行转换为标题时遇到了问题。当我尝试将单行转换为标题时,整个段落却被转换了。以下是我正在做的操作:

我有一段文字。我在这段文字中选择了一行。我尝试仅将选中的这一行转换为标题(例如,)。然而,不仅仅是选中的这一行,整个段落都被转换成了标题。

以下是一些额外的细节:

我正在使用最新版的 Tiptap 和 React。

扩展

Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle,
TextStyleExtended,
StarterKit.configure({
 bulletList: {
   keepMarks: true,
   keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
 },
 orderedList: {
   keepMarks: true,
   keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
 },
 // heading: {
 //   levels: [1, 2, 3, 4, 5, 6],
 // },
 // paragraph: {},
}),
Image.configure({
 allowBase64: true,
}),
Link.configure({
 openOnClick: false,
 autolink: true,
}),
Code,
];

编辑

export default function Editor(props: Props) {
  const { content, setFieldValue, isEdit } = props;
  if (isEdit && content.length === 0) return <>...loading</>;
  return (
    <Box
      sx={{
        border: "1px solid #E5E5E5",
        borderRadius: "8px",
      }}
    >
      <EditorProvider
        slotBefore={<MenuBar />}
        extensions={extensions}
        content={content}
        onUpdate={({ editor }) => {
          setFieldValue("content", editor.getHTML());
        }}
      />
    </Box>
  );
}