my blog writing input is removing last line in react

this is the current state where I have 4 lines and 5th line in current input

and this is my react code

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

interface BlogWitterProps {}

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

  // on each new line, update the markdown content

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

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      setMarkdownContent((prev) => {
        return prev + currentLine + "\n";
      });
      setCurrentLine("");
    } else if (e.key === "Backspace" && currentLine === "") {
      e.preventDefault();
      setMarkdownContent((prev) => {
        const lines = prev.split("\n");
        const lastLine = lines.pop();
        console.log("lines", lines);

        setTimeout(() => {
          // If the last line is not empty, update the current line state
          if (lastLine !== "") {
            setCurrentLine(lastLine + "\n");
          } else {
            setCurrentLine("");
          }
        }, 0);

        return lines.join("\n");
      });
    }
  };

  return (
    <div className="">
      <div>
        {markdownContent.split("\n").map((line, index) => {
          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}
      />
    </div>
  );
};

export default BlogWitter;

so if I press backspace and it takes me to last line to edit then press anter again without changing anything it is remove the last line's new line and gives me this

I am trying to get it to work as in medieum where you can edit each line seperatly

The sequence of events is easier to understand when the character codes for markdownContent are printed to the console.

Below, I've re-pasted the code, with some test code in place (LINES 16-21) to display markdownContent as a series of ASCII character codes separated by the pipe (|) character.

Key sequences and markdownContent char codes

Stepping through the code

At step 4, pressing Backspace executes LINE 33. This splits the character codes in step 3 by chr(10) (linefeed). LINE 34 pops the last character (linefeed), and LINE 42 discards it since the input text field is blank (setCurrentLine("") is called).

At step 5 Backspace is pressed again (because the input field did not move after step 4). LINE 33 is executed again, splitting the characters in step 4 by linefeed, popping chr(67) (letter C) at LINE 34, and discarding C. The input form field is blank just prior to pressing Backspace, causing setCurrentLine("") to be called. C is discarded from markdownContent but is re-added to the input text field.

At step 6 Enter is pressed causing the problem described in the question. Here, the characters in step 5 are joined with currentLine: (C) + Enter (the Enter key just pressed). This is where the letters BC are joined together. The original linefeed that would have separated these two characters is consumed by the call to split() at step 5 in LINE 33. LINE 27 adds a second linefeed. This is why we see two linefeeds at step 6.

Notes

There are several cases and edge cases that need to be considered before text input will behave correctly.

Code

1.    import * as React from "react";
2.
3.    const { useEffect, useState } = React;
4.
5.    interface BlogWitterProps {}
6.
7.    const BlogWitter: React.FunctionComponent<BlogWitterProps> = ({}) => {
8.      const [markdownContent, setMarkdownContent] = useState("");
9.      const [currentLine, setCurrentLine] = useState("");
10.
11.      // on each new line, update the markdown content
12.
13.      useEffect(() => {
14.        console.log("markdownContent", markdownContent);
15.        console.log("currentLine", currentLine);
16.        let chars = [];
17.        for ( let c of markdownContent ) {
18.            chars.push( c.charCodeAt( 0 ) );
19.        }
20.        let codeString = chars.join('|');
21.        console.log( 'codes: ' + codeString );
22.      }, [currentLine, markdownContent]);
23.
24.      const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
25.        if (e.key === "Enter") {
26.          setMarkdownContent((prev) => {
27.            return prev + currentLine + "\n";
28.          });
29.          setCurrentLine("");
30.        } else if (e.key === "Backspace" && currentLine === "") {
31.          e.preventDefault();
32.          setMarkdownContent((prev) => {
33.            const lines = prev.split("\n");
34.            const lastLine = lines.pop();
35.            console.log("lines", lines);
36.
37.            setTimeout(() => {
38.              // If the last line is not empty, update the current line state
39.              if (lastLine !== "") {
40.                setCurrentLine(lastLine + "\n");
41.              } else {
42.                setCurrentLine("");
43.              }
44.            }, 0);
45.
46.            return lines.join("\n");
47.          });
48.        }
49.      };
50.
51.      return (
52.        <div className="">
53.          <div>
54.            {markdownContent.split("\n").map((line, index) => {
55.              return (
56.                <div key={index}>{ line }</div>
57.              );
58.            })}
59.          </div>
60.          <input
61.            value={currentLine}
62.            size={ 80 }
63.            onChange={(e) => {
64.              setCurrentLine(e.target.value);
65.            }}
66.            className="w-full resize-none outline-none text-2xl bg-transparent border border-black"
67.            onKeyDown={handleKeyDown}
68.          />
69.        </div>
70.      );
71.    };
72.
73.    export default BlogWitter;