极简Tiptap编辑器

这是为Shadcn构建的极简Tiptap编辑器组件。它为用户提供了一个简单清晰的编辑器，用于编写和格式化文本。

安装

在使用极简Tiptap编辑器组件之前，你需要安装以下软件包：

npm install @tiptap/core @tiptap/extension-heading @tiptap/extension-horizontal-rule @tiptap/extension-image @tiptap/extension-link @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-typography @tiptap/extension-code-block-lowlight @tiptap/extension-color @tiptap/extension-text-style lowlight

极简Tiptap编辑器组件依赖于Shadcn的以下组件：

接下来，复制minimal-tiptap目录并粘贴到你的项目中。你可以自由使用和修改这些代码。

属性

极简Tiptap编辑器组件接受Tiptap编辑器组件的所有属性。以下是额外的属性：

value是编辑器的初始值。
onChange是一个接收编辑器值的函数。
editorContentClassName是一个字符串，用于为EditorContent组件添加类。
output是输出值的格式。可以是'html'、'json'或'text'。默认为'html'。
placeholder是一个字符串，在编辑器中显示为占位符。
editorClassName是一个字符串，用于为useEditor钩子添加类，即编辑器本身。
throttleDelay是一个数字，用于延迟编辑器的节流。默认为1000。

使用方法

import { useState } from 'react'
import { MinimalTiptapEditor } from './minimal-tiptap'

export const App = () => {
  const [value, setValue] = useState('')

  return (
    <MinimalTiptapEditor
      value={value}
      onChange={setValue}
      throttleDelay={2000}
      className="w-full"
      editorContentClassName="p-5"
      output="html"
      placeholder="在此输入你的描述..."
      autofocus={true}
      immediatelyRender={true}
      editable={true}
      injectCSS={true}
      shouldRerenderOnTransaction={false}
      editorClassName="focus:outline-none"
    />
  )
}