# 리치 에디터 + 테마 컴포넌트

**URL:** https://meta.discourse.org/t/rich-editor-theme-component/378773
**Category:** Development
**Created:** [8월 15, 2025, 5:09오후 UTC](https://meta.discourse.org/t/rich-editor-theme-component/378773 "2025-08-15T17:09:26Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Joshua\_Lyon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joshua_lyon/32/117236_2.png) [@Joshua\_Lyon](https://meta.discourse.org/u/Joshua_Lyon)
#### Post date: [8월 15, 2025, 5:09오후 UTC](https://meta.discourse.org/t/rich-editor-theme-component/378773/1 "2025-08-15T17:09:26Z")

</div>

내 목표는 사용자가 특정 URL(도메인 + 기본 경로) 링크를 포함할 때, 이를 자동으로 특수 서식으로 표시하는 것입니다.

`decorateCookedElement()`를 사용하면 렌더링된 게시물에서 이를 달성할 수 있지만, Rich Text Editor의 디스플레이에 개입하여那里的 링크 모양을 커스터마이징하는 방법을 찾지 못하고 있습니다.

**테마 컴포넌트의 `apiInitializer` 내에서 Rich Text Editor 렌더링을 커스터마이징할 수 있는 `api` 기능이 있나요?**

서버 자체에서 실행되는 플러그인을 구축해야 하는 상황을 피하고 싶었습니다… 아직 더 단순한 해결책을 찾지 못했지만, 대안적인 아이디어에는 열려 있습니다! (예: OneBoxing을 전체 도메인 단위로 끄고 싶지 않은 이유는, 비-SPA 마케팅 페이지들이 OneBoxing에 적합한 좋은 OpenGraph 태그를 가지고 있기 때문입니다)

## 기존 접근 방식: `decorateCookedElement()`

과거에 Bunny.net에서 서빙되는 비디오에 대해 비슷한 작업을 수행한 적이 있습니다([참고 게시물](https://meta.discourse.org/t/youtube-vs-vimeo-video-embed-width/231565/19?u=joshua_lyon)). 여기서 표준 렌더링(OneBox 비디오)이 일어나도록 한 후, `decorateCookedElement()`를 사용하여 [Bunny.net](http://Bunny.net) 스트리밍 URL의 OneBox 비디오에 종횡비, 전체 화면 허용 등의 수정을 적용했습니다([theme-initializer.gjs#L8-L15](https://github.com/joshualyon/discourse-bunny-box/blob/3dfb006f39e896732520cc4c32dc0350f57d3be8/javascripts/discourse/api-initializers/theme-initializer.gjs#L8-L15)).

Bunny 비디오의 경우, 에디터에서는 항상 회색으로 표시된 OneBox 비디오 플레이스홀더(흰색 비디오 아이콘이 있는 회색 상자)가 표시되므로 콘텐츠 조정 없이도 잘 작동했습니다.

## Rich Text 문제

`decorateCookedElement()`를 사용하여 특정 URL(도메인 + 기본 경로) 링크를 교체하려는 _현재_ 목표에서 직면한 문제는, 사용자가 Rich Text Editor에서 해당 링크를 단독 줄에 포함시킨 후 엔터를 누르면 에디터가 이를 OneBox로 변환한다는 것입니다. 이 렌더링 플로우에 개입하거나 이를 커스터마이징하는 방법이 있는지 파악하지 못했습니다.

 ![Google Chrome - Custom Tile Import Link Renderer - Staff Drafts - SharpTools Community 2025-08-15 at 10.31.19@2x](https://global.discourse-cdn.com/meta/original/4X/1/a/c/1ac11838ed28d36be0c8d1ba8158d6a4c6c15c91.jpeg)

이 특정 링크는 단일 페이지 애플리케이션(정적 호스팅) 내의 기능으로, Open Graph/메타 태그 세트가 특별히 의미 있는 정보를 제공하지 않아 OneBox가 직관적이지 않습니다. 커뮤니티 멤버들이 임포트 링크를 코드 괄호로 감싸거나 다른 우회 방법을 사용하는 것을 목격했습니다.

따라서, 이 특정 링크가 Rich Text Editor에서도 어떻게 렌더링되는지 커스터마이징할 수 있다면, 사용자가 더 직관적인 형식을 보고 이를 따를 것이라고 생각했습니다.