使用新的useFileSystem Hook构建直连磁盘的Web编辑器

import { useState, useEffect, useRef, useFileSystem } from 'react'; // 假设 react-use 提供了 useFileSystem

function DirectDiskEditor() {
  const [fileContent, setFileContent] = useState('');
  const [fileName, setFileName] = useState(null);
  const editorRef = useRef(null); // 文本区域的 Ref

  // --- 文件系统逻辑 ---
  const [fileHandle, setFileHandle] = useState(null);
  const [fileEntry, setFileEntry] = useState(null);

  // 效果：当有文件句柄时读取文件内容
  useEffect(() => {
    if (fileHandle) {
      // 假设 fileHandle 是一个 FileSystemFileHandle
      fileHandle.getFile().then(entry => {
        entry.text().then(text => {
          setFileContent(text);
          setFileName(entry.name);
        }).catch(error => {
          console.error("读取文件错误:", error);
          // 处理错误（例如，文件受保护）
        });
      }).catch(error => {
        console.error("获取文件句柄错误:", error);
      });
    }
  }, [fileHandle]);

  // 效果：当编辑器中的文件内容更改时更新文件内容
  useEffect(() => {
    if (fileEntry) {
      // 假设 fileEntry 是一个 FileSystemFileHandle
      fileEntry.createWriter().then(writer => {
        writer.truncate(); // 首先截断文件
        const encoder = new TextEncoder();
        const data = encoder.encode(fileContent);
        writer.write(data);
        writer.flush().then(() => {
          console.log('文件保存成功！');
        }).catch(error => {
          console.error("写入文件错误:", error);
        });
      }).catch(error => {
        console.error("获取写入文件句柄错误:", error);
      });
    }
  }, [fileContent, fileEntry]);

  // --- 操作 ---
  const handleOpenFile = async () => {
    try {
      // 使用 Hook 提示选择文件
      const [handle] = await useFileSystem({ mode: 'readwrite' });
      setFileHandle(handle);
      // Hook 可能还会提供 entry，或者你可能需要单独获取
      // 为简单起见，假设它被传递过来
      // setFileEntry(...); // 适当处理 entry
    } catch (error) {
      console.error("打开文件错误:", error);
      // 处理错误（例如，用户取消）
    }
  };

  const handleSaveFile = async () => {
    if (!fileEntry) {
      console.error("没有选择要保存的文件！");
      return;
    }
    // 保存逻辑由上面的 useEffect 处理
    // 在这种简单的流程中，这个按钮可能只是多余的，
    // 或者可以触发对*新*位置的提示。
  };

  // --- UI ---
  return (
    <div>
      <h1>直接到磁盘的文本编辑器</h1>
      <textarea
        ref={editorRef}
        value={fileContent}
        onChange={e => setFileContent(e.target.value)}
        rows={20}
        cols={60}
        placeholder="在此处编辑您的文本..."
      />
      <div>
        <button onClick={handleOpenFile}>打开文件</button>
        <button onClick={handleSaveFile}>保存文件</button>
        {fileName && <p>当前正在编辑：{fileName}</p>}
      </div>
    </div>
  );
}

import { useState, useEffect, useRef, useFileSystem } from 'react'; // Assuming react-use provides useFileSystem

function DirectDiskEditor() {
  const [fileContent, setFileContent] = useState('');
  const [fileName, setFileName] = useState(null);
  const editorRef = useRef(null); // Ref for the text area

  // --- File System Logic ---
  const [fileHandle, setFileHandle] = useState(null);
  const [fileEntry, setFileEntry] = useState(null);

  // Effect to read the file content when a file handle is available
  useEffect(() => {
    if (fileHandle) {
      // Assuming fileHandle is a FileSystemFileHandle
      fileHandle.getFile().then(entry => {
        entry.text().then(text => {
          setFileContent(text);
          setFileName(entry.name);
        }).catch(error => {
          console.error("Error reading file:", error);
          // Handle error (e.g., file is write-protected)
        });
      }).catch(error => {
        console.error("Error getting file handle:", error);
      });
    }
  }, [fileHandle]);

  // Effect to update the file content when it changes in the editor
  useEffect(() => {
    if (fileEntry) {
      // Assuming fileEntry is a FileSystemFileHandle
      fileEntry.createWriter().then(writer => {
        writer.truncate(); // Truncate the file first
        const encoder = new TextEncoder();
        const data = encoder.encode(fileContent);
        writer.write(data);
        writer.flush().then(() => {
          console.log('File saved successfully!');
        }).catch(error => {
          console.error("Error writing file:", error);
        });
      }).catch(error => {
        console.error("Error getting file handle for writing:", error);
      });
    }
  }, [fileContent, fileEntry]);

  // --- Actions ---
  const handleOpenFile = async () => {
    try {
      // Use the hook to prompt for a file
      const [handle] = await useFileSystem({ mode: 'readwrite' });
      setFileHandle(handle);
      // The hook might also provide the entry, or you might need to get it separately
      // For simplicity, assuming it's passed along
      // setFileEntry(...); // Handle the entry appropriately
    } catch (error) {
      console.error("Error opening file:", error);
      // Handle error (e.g., user cancelled)
    }
  };

  const handleSaveFile = async () => {
    if (!fileEntry) {
      console.error("No file selected to save!");
      return;
    }
    // The save logic is handled by the useEffect above
    // This button might just be redundant in this simple flow,
    // or could trigger a prompt for a *new* location if needed.
  };

  // --- UI ---
  return (
    <div>
      <h1>Direct-to-Disk Text Editor</h1>
      <textarea
        ref={editorRef}
        value={fileContent}
        onChange={e => setFileContent(e.target.value)}
        rows={20}
        cols={60}
        placeholder="Edit your text here..."
      />
      <div>
        <button onClick={handleOpenFile}>Open File</button>
        <button onClick={handleSaveFile}>Save File</button>
        {fileName && <p>Currently editing: {fileName}</p>}
      </div>
    </div>
  );
}