DongHyeonka
d2c289c650
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.
37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
// @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);
|
|
});
|
|
});
|