React博客编辑器回退换行后回车异常问题求助

问题描述 #

按下Backspace键回退到已输入的最后一行编辑，未修改内容直接按Enter时，最后一行的换行会被移除，出现异常排版，目标是实现类似Medium的可单独编辑每行的功能。

问题根源 #

原代码在处理Backback时，错误地给回退到currentLine的内容加上了\n，导致按Enter时，会把带换行的currentLine追加到markdownContent，同时又额外添加一个换行，进而在拆分渲染时出现异常。

修复后的完整代码 #

import { FC, useEffect, useState } from "react";

interface BlogWitterProps {}

const BlogWitter: FC<BlogWitterProps> = ({}) => {
  const [markdownContent, setMarkdownContent] = useState("");
  const [currentLine, setCurrentLine] = useState("");

  useEffect(() => {
    console.log("markdownContent", markdownContent);
    console.log("currentLine", currentLine);
  }, [currentLine, markdownContent]);

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      // 直接追加当前行+换行，确保格式统一
      setMarkdownContent((prev) => prev + currentLine + "\n");
      setCurrentLine("");
    } else if (e.key === "Backspace" && currentLine === "") {
      e.preventDefault();
      setMarkdownContent((prev) => {
        const lines = prev.split("\n");
        // 过滤掉空行，避免回退到空内容
        const filteredLines = lines.filter(line => line.trim() !== "" || lines.length === 1);
        const lastLine = filteredLines.pop() || "";
        
        // 直接将最后一行内容赋值给currentLine，不需要加换行
        setCurrentLine(lastLine);
        
        return filteredLines.join("\n");
      });
    }
  };

  return (
    <div className="">
      <div>
        {markdownContent.split("\n").map((line, index) => {
          // 跳过空行渲染，避免多余的换行
          if (!line) return null;
          return (
            <div key={index}>
              {line}
              <br />
            </div>
          );
        })}
      </div>
      <input
        value={currentLine}
        onChange={(e) => setCurrentLine(e.target.value)}
        className="w-full resize-none outline-none text-2xl bg-transparent border border-black"
        onKeyDown={handleKeyDown}
        placeholder="开始输入..."
      />
    </div>
  );
};

export default BlogWitter;

关键修改点 #

• 移除多余换行：Backspace回退时，不再给lastLine添加\n，currentLine只存储纯文本内容，换行统一在Enter时添加。
• 过滤空行：拆分markdownContent时过滤无效空行，避免回退到空内容，同时渲染时跳过空行，优化排版。
• 简化逻辑：去掉不必要的setTimeout，直接在markdownContent更新时同步设置currentLine，避免状态不同步问题。

内容的提问来源于stack exchange，提问作者ibo