fix: keep the line breaks an author typed
Text written across several lines rendered as one run-on line. Markdown reads a single newline as a space that joins a paragraph, the parser leaves that newline inside the text node, and HTML then collapses it — so the break the author pressed Enter for disappeared at the last step. This was never a preview artifact: the Studio preview and the public page go through the same renderer, so a published record ran its lines together too. Newlines inside a paragraph now render as <br>. Paragraphs separated by a blank line are already two paragraphs by the time they reach here, so this only affects the breaks an author put inside one.
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { render } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { InlineRenderer } from "../../src/features/tech-log/presentation/shared/public-render/inline-renderer.tsx";
|
||||
|
||||
/**
|
||||
* 작성자가 엔터로 나눠 쓴 글이 한 줄로 이어져 보였다. Markdown 이 한 번의 줄바꿈을 문단 내 공백으로
|
||||
* 읽고, 파서가 그 줄바꿈을 텍스트에 남긴 뒤, HTML 이 다시 공백으로 접기 때문이다. 미리보기와 공개
|
||||
* 화면이 같은 렌더러를 쓰므로 두 곳 모두에서 그랬다.
|
||||
*/
|
||||
describe("문단 안의 줄바꿈", () => {
|
||||
it("줄바꿈을 <br> 로 그린다", () => {
|
||||
const { container } = render(
|
||||
<InlineRenderer content={[{ type: "TEXT", text: "첫째 줄\n둘째 줄" }]} />,
|
||||
);
|
||||
expect(container.querySelectorAll("br")).toHaveLength(1);
|
||||
expect(container.textContent).toBe("첫째 줄둘째 줄");
|
||||
});
|
||||
|
||||
it("줄바꿈이 없으면 <br> 를 넣지 않는다", () => {
|
||||
const { container } = render(
|
||||
<InlineRenderer content={[{ type: "TEXT", text: "한 줄" }]} />,
|
||||
);
|
||||
expect(container.querySelectorAll("br")).toHaveLength(0);
|
||||
expect(container.textContent).toBe("한 줄");
|
||||
});
|
||||
|
||||
it("여러 번 엔터를 친 만큼 내려간다", () => {
|
||||
const { container } = render(
|
||||
<InlineRenderer content={[{ type: "TEXT", text: "가\n나\n다" }]} />,
|
||||
);
|
||||
expect(container.querySelectorAll("br")).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user