InlineEditor

一个 React 组件库，提供"选中文字 → 指令输入 → 内容回填"的内联编辑交互体验。

🚀 安装

npm install inline-editor
# 或
yarn add inline-editor
# 或
pnpm add inline-editor

📖 使用方法

基础使用

import { InlineEditor } from 'inline-editor';

function App() {
  const containerRef = useRef<HTMLDivElement>(null);

  const handleRequest = async (payload) => {
    // 调用你的AI服务
    const response = await fetch('/api/ai-process', {
      method: 'POST',
      body: JSON.stringify(payload)
    });
    return await response.text();
  };

  const handleReplace = (info) => {
    console.log('内容被替换:', info);
  };

  return (
    <div ref={containerRef}>
      <p>这是一段可以编辑的文本...</p>
      <InlineEditor
        targetRef={containerRef}
        onRequest={handleRequest}
        onReplace={handleReplace}
      />
    </div>
  );
}

支持 Markdown

import { InlineEditor } from 'inline-editor';
import ReactMarkdown from 'react-markdown';

function MarkdownApp() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef}>
      <ReactMarkdown>
        # 这是一个 Markdown 文档
        
        你可以**选中**任何文本进行编辑
      </ReactMarkdown>
      <InlineEditor
        targetRef={containerRef}
        onRequest={handleRequest}
        onReplace={handleReplace}
      />
    </div>
  );
}

🔧 API

InlineEditor Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | targetRef | RefObject<HTMLElement> | - | 目标容器的 ref | | onRequest | (payload: RequestPayload) => Promise<string> | - | AI 请求处理函数 | | onReplace | (info: ReplaceInfo) => void | - | 内容替换回调 | | onSave? | () => void | - | 保存回调 | | onError? | (error: unknown) => void | - | 错误处理回调 | | onClose? | () => void | - | 关闭回调 |

类型定义

interface RequestPayload {
  selectedText: string;
  instruction: string;
  blockIndex: number;
}

interface ReplaceInfo {
  originalText: string;
  newText: string;
  blockIndex: number;
}

🎯 特性

• ✅ 智能编辑: AI 驱动的文本编辑体验
• ✅ Markdown 支持: 完美支持 Markdown 文档编辑
• ✅ 响应式设计: 适配各种屏幕尺寸
• ✅ TypeScript: 完整的类型支持
• ✅ 轻量级: 无额外依赖，体积小巧

📄 许可证

MIT License