Skip to content

fix: 클라이언트 사이드 이동 후 코드 블록 복사 버튼 동작 - #229

Open
hyoseong1994 wants to merge 2 commits into
mainfrom
222-bugfix-copy
Open

fix: 클라이언트 사이드 이동 후 코드 블록 복사 버튼 동작#229
hyoseong1994 wants to merge 2 commits into
mainfrom
222-bugfix-copy

Conversation

@hyoseong1994

@hyoseong1994 hyoseong1994 commented Nov 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Expressive Code는 복사 스크립트를 코드 블록 옆 인라인 <script type="module">로 넣습니다. MDX는 이걸 React 엘리먼트로 컴파일하고 브라우저는 그런 script를 실행하지 않으므로, 코드 블록 없는 문서로 먼저 들어온 뒤 내부 이동하면 복사 기능이 초기화되지 않았습니다.

  • src/mdx/expressive-code.ts — 같은 스크립트를 virtual:expressive-code-scripts 가상 모듈로 내보내는 Vite 플러그인, 그리고 컴파일된 MDX에서 인라인 script를 걷어내는 rehype 플러그인
  • src/root.tsx — 가상 모듈을 진입점에서 한 번 import. 스크립트 안의 MutationObserver가 이후 클라이언트 사이드로 추가되는 코드 블록까지 처리합니다
  • 스크롤 가능한 코드 블록의 tabindex 스크립트도 같은 구조라 함께 살아납니다

테스팅

  • lint, tsc -b, format, coverage, build 통과

체크 리스트

  • 코드 리뷰를 요청하기 전에 반드시 CI가 통과하는지 확인해주세요.
  • Cloudflare Preview URL에서 수정한 내용이 의도대로 잘 동작하는지 확인해 주세요.

@hyoseong1994
fix: run expressive code scripts from the app entry
4e080da 
Expressive Code injects its copy-button and scrollable-block scripts as
inline `<script type="module">` next to each code block. MDX compiles
them into React elements, which browsers never execute, so a client-side
navigation into the first page that has a code block left the copy button
dead.

Expose the same scripts as a virtual module, import it once from the root
route, and drop the inline scripts from the compiled MDX so nothing is
bound twice.

Closes #222
@hyoseong1994 hyoseong1994 linked an issue Nov 2, 2026 that may be closed by this pull request
클라이언트 사이드 문서 이동 후 코드 블록 복사 버튼이 동작하지 않음 #222
Open
@hyoseong1994
hyoseong1994 requested a review from a team as a code owner November 2, 2026 03:18
@hyoseong1994
hyoseong1994 marked this pull request as draft November 2, 2026 04:09
@hyoseong1994
hyoseong1994 marked this pull request as ready for review November 2, 2026 04:32
@hyoseong1994
hyoseong1994 marked this pull request as draft November 2, 2026 04:34
@hyoseong1994
hyoseong1994 marked this pull request as ready for review November 5, 2026 06:38
@RiaOh

RiaOh commented Nov 10, 2026

Copy link
Copy Markdown
Contributor

@hyoseong1994 님, 내일까지 코드리뷰하겠습니다!

RiaOh
RiaOh reviewed Nov 11, 2026
View reviewed changes

@RiaOh RiaOh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cloudflare Preview URL을 확인하고 싶은데, 어디서 확인할 수 있나요~?

Comment thread src/root.tsx Outdated
// 코드 블록 옆 인라인 script 는 클라이언트 사이드 이동에서 실행되지 않으므로,
// Expressive Code 스크립트는 첫 페이지의 코드 블록 유무와 무관하게 여기서 한 번 실행합니다.
useEffect(() => {
void import("virtual:expressive-code-scripts");

@RiaOh RiaOh Nov 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

void는 에러를 처리해주지 않아, 만약 import("virtual:expressive-code-scripts")가 반환한 Promise가 reject되어도 아무런 처리를 해주지 않습니다.
.catch(console.error)를 추가하여 로그를 남기는 것도 좋을 것 같은데, 어떻게 생각하시나요?

@hyoseong1994 hyoseong1994 Nov 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰 감사합니다. .catch(console.error) 로 변경했습니다.

우측에 deployments로 이동하여 댓글로 남기는 기능은 제거된걸로 알고있습니다.

image

#220

@RiaOh RiaOh Nov 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyoseong1994 오잉, 저는 왜 우측하단에 Deployments가 안보이는걸까요?ㅠ

@hyoseong1994
hyoseong1994 requested a review from RiaOh November 13, 2026 00:35
@yolophg

yolophg commented Nov 13, 2026

Copy link
Copy Markdown
Collaborator

@codex review

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Codex Review Summary: ✅ Completed

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-13T06:20:36.846477Z 6115018 Manual request
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 13, 2026

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Keep them coming!

Reviewed commit: 6115018f03

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

yolophg
yolophg approved these changes Nov 13, 2026
View reviewed changes

@yolophg yolophg left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했는데 별다른 이슈 없어 보여서 승인합니다! Codex 리뷰어도 따봉이군요!👍 수정해주셔서 감사합니다!

This branch was successfully deployed

2 active (1 outdated) deployments
preview — 6115018f Deployed Nov 12, 2026 by hyoseong1994 via preview #321
View deployment
previews — 4e080dac Deployed Nov 12, 2026 by hyoseong1994 via preview #301
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@yolophg yolophg yolophg approved these changes
@RiaOh RiaOh RiaOh approved these changes

Assignees

@hyoseong1994 hyoseong1994

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

클라이언트 사이드 문서 이동 후 코드 블록 복사 버튼이 동작하지 않음

3 participants

@hyoseong1994 @RiaOh @yolophg