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