# 부호 편집기에 붙여넣기 시 클립보드 데이터의 \`white-space\` CSS 속성이 반영되지 않음

**URL:** https://meta.discourse.org/t/white-space-css-property-of-clipboard-data-not-respected-when-pasting-in-rich-text-editor/379035
**Category:** Bug
**Tags:** composer
**Created:** [8월 18, 2025, 12:07오후 UTC](https://meta.discourse.org/t/white-space-css-property-of-clipboard-data-not-respected-when-pasting-in-rich-text-editor/379035 "2025-08-18T12:07:08Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![per1234](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/per1234/32/569645_2.png) [@per1234](https://meta.discourse.org/u/per1234)
#### Post date: [8월 18, 2025, 12:07오후 UTC](https://meta.discourse.org/t/white-space-css-property-of-clipboard-data-not-respected-when-pasting-in-rich-text-editor/379035/1 "2025-08-18T12:07:08Z")

</div>

### 우선순위/심각도:

중간

### 플랫폼:

#### 운영체제

- Windows 11

#### 브라우저

- Google Chrome 139.0.7258.128

#### Discourse

`028c90dd5e7a2799ea5b6e963f71fc0222681943`

### 설명:

일부 출처에서 복사한 텍스트는 일반 텍스트(`text/plain`) 외에도 서식이 적용된 형태(`text/html` 유형)로 클립보드에 저장될 수 있습니다.

편집기에 텍스트를 붙여넣을 때, 클립보드에 서식이 적용된 데이터 유형이 존재하면 일반 텍스트 유형 대신 해당 데이터가 사용됩니다.

기본적으로 HTML 콘텐츠의 공백은 [축소](https://developer.mozilla.org/docs/Web/CSS/CSS_text/Whitespace#collapsing_and_transformation)됩니다. 이 동작은 [`white-space` CSS 속성](https://developer.mozilla.org/docs/Web/CSS/white-space)을 통해 제어할 수 있습니다.

🐛 [“리치 텍스트 에디터” 모드](https://meta.discourse.org/t/introducing-our-new-composer-making-writing-on-discourse-easier-than-ever/369779)에서 편집기에 붙여넣을 때, 클립보드 데이터의 `white-space` CSS 속성이 무시됩니다. 이로 인해 붙여넣은 콘텐츠의 공백이 항상 축소됩니다. 원본 콘텐츠에 `white-space` 속성이 `pre` 값으로 설정되어 있는 경우, 붙여넣은 콘텐츠가 읽기 어렵게 되며, 원본 콘텐츠의 공백이 기술적 의미를 가지는 경우 오류가 발생합니다.

### 재현 단계:

1. 다음 내용을 가진 HTML 파일을 생성합니다:

```html
<html>
  <body>
    <span style="white-space: pre">foo
bar
    </span>
  </body>
</html>

```

2. 웹 브라우저에서 파일을 엽니다.  
페이지 콘텐츠의 공백이 축소되지 않음을 확인하세요:

```plaintext
foo
bar

```

3. 웹 페이지의 내용을 복사합니다.
4. 게시글 편집기를 엽니다.
5. 편집기를 “리치 텍스트 에디터” 모드로 설정합니다.
6. 복사한 내용을 붙여넣습니다.

🐛 복사된 콘텐츠와 동일한 형식이 아니라, 붙여넣은 콘텐츠의 공백이 축소되었습니다:

```plaintext
foo bar

```

### 추가 정보:

ProseMirror가 `white-space: pre`를 지원함을 확인했습니다:

> <https://github.com/ProseMirror/prosemirror-model/blob/1.25.1/CHANGELOG.md?plain=1#L13-L17>

* * *

편집기를 “Markdown 에디터” 모드로 사용할 때 이 오류는 발생하지 않습니다.

* * *

일반적인 에디터 모드 대신 코드 블록에 콘텐츠를 붙여넣을 경우에도 이 오류는 발생하지 않습니다. `white-space: pre`와 같은 것을 사용하는 콘텐츠를 코드 블록에 배치하는 것이 가장 적절할 수 있는 경우가 많긴 합니다. 그러나 사용자가 편집기에 콘텐츠를 추가한 후, 콘텐츠를 선택하고 편집기 툴바를 사용하여 서식을 적용하는 방식으로 사후에 서식을 적용하는 것이 상당히 흔합니다(콘텐츠를 추가하기 전에 코드 블록을 트리거하는 대안적 접근 방식과 반대되는 경우).

* * *

클립보드 콘텐츠의 원시 데이터를 조사하는 데 유용한 도구를 찾았습니다:

> **[Clipboard Inspector](https://evercoder.github.io/clipboard-inspector/)**
>
> Explore the content of your clipboard

* * *

[try.discourse.org](http://try.discourse.org)의 ["안전 모드"](https://meta.discourse.org/t/how-to-use-discourse-safe-mode/53504)에서 이 오류를 재현할 수 있습니다.

#### 관련

- [(Android) pasting with the keyboard's clipboard in code block returns only the first line - #2 by sam](https://meta.discourse.org/t/android-pasting-with-the-keyboards-clipboard-in-code-block-returns-only-the-first-line/377030/2)

---

_[View the full topic](https://meta.discourse.org/t/white-space-css-property-of-clipboard-data-not-respected-when-pasting-in-rich-text-editor/379035)._
