Prompt Kit Editor

一个功能强大的 React 提示词编辑器组件库，专为 AI 提示词编写和编辑场景设计。

✨ 特性

• 🎯 专为提示词设计 - 针对 AI 提示词编写场景优化
• 📏 自动高度调整 - 根据内容自动调整编辑器高度
• 🔢 字符计数 - 实时显示字符数和限制
• 🎨 现代化 UI - 美观的界面设计，支持深色模式
• ⚡ TypeScript 支持 - 完整的类型定义
• 🔧 高度可定制 - 丰富的配置选项
• 📱 响应式设计 - 适配各种屏幕尺寸

🚀 安装

npm install prompt-kit-editor

📖 使用方法

基础用法

import React, { useState } from 'react';
import { PromptEditorRender, PromptEditorProvider } from 'prompt-kit-editor';

function App() {
  const [prompt, setPrompt] = useState('');

  return (
    <PromptEditorProvider>
      <PromptEditorRender
        value={prompt}
        onChange={setPrompt}
        placeholder="请输入您的提示词..."
        isControled={true}
        fontSize={16}
        onFocus={() => console.log('编辑器获得焦点')}
        onBlur={() => console.log('编辑器失去焦点')}
        className="my-editor"
      />
    </PromptEditorProvider>
  );
}

🔧 API 参考

PromptEditorRender Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | readonly | boolean | false | 是否为只读模式，禁用所有编辑操作 | | placeholder | ReactNode | - | 占位符内容，可以是字符串或 React 组件 | | className | string | - | 自定义 CSS 类名 | | dataTestID | string | - | 测试用的 data-testid 属性 | | defaultValue | string | - | 编辑器的默认值（非受控模式） | | fontSize | number | 14 | 编辑器字体大小 | | value | string | - | 编辑器的值（受控模式） | | onChange | (value: string) => void | - | 值变化时的回调函数 | | onFocus | () => void | - | 编辑器获得焦点时的回调函数 | | onBlur | () => void | - | 编辑器失去焦点时的回调函数 | | options | Record<string, string \| number> | - | 编辑器的额外配置选项 | | isControled | boolean | false | 是否为受控组件模式 | | getEditor | (editor: EditorAPI) => void | - | 获取编辑器实例的回调函数 |

PromptEditorProvider

提供编辑器上下文的组件，需要包裹在 PromptEditorRender 外层。

💡 使用示例

只读模式

<PromptEditorProvider>
  <PromptEditorRender
    defaultValue="这是一个只读的提示词编辑器"
    readonly={true}
    placeholder="只读模式"
  />
</PromptEditorProvider>

获取编辑器实例

import { EditorAPI } from '@coze-editor/editor/preset-prompt';

function EditorWithAPI() {
  const [editor, setEditor] = useState<EditorAPI | null>(null);

  const handleGetEditor = (editorInstance: EditorAPI) => {
    setEditor(editorInstance);
    console.log('编辑器实例:', editorInstance);
  };

  return (
    <PromptEditorProvider>
      <PromptEditorRender
        getEditor={handleGetEditor}
        placeholder="获取编辑器实例示例"
      />
    </PromptEditorProvider>
  );
}

自定义配置

<PromptEditorProvider>
  <PromptEditorRender
    fontSize={18}
    className="custom-editor"
    dataTestID="prompt-editor"
    options={{
      lineHeight: 1.6,
      tabSize: 2
    }}
    placeholder="自定义配置示例"
  />
</PromptEditorProvider>

🌟 演示

运行演示项目：

cd demo
npm install
npm run dev

然后访问 http://localhost:3000 查看各种使用示例。

📦 构建

# 构建库文件
npm run build

# 开发模式
npm run dev

# 代码检查
npm run lint

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

• GitHub 仓库
• NPM 包
• 在线演示