fix: focus with colorsyntax on multi instances (fix #2413)

[jajugoguma]

Please check if the PR fulfills these requirements

• It's the right issue type on the title
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes/features)
• Docs have been added/updated (for bug fixes/features)
• It does not introduce a breaking change or has a description of the breaking change

Description

• Fixed that set focus to the first editor when using the color syntax plugin in multi-instance.
  • Changed to find the editing area element in the parent element (Editor Container element) of the dropdown element of the current color syntax plugin.
  • The process of finding an edit area element has been changed to before moving focus into the editor, rather than when the editor has focus set.

As-Is

To-Be

---

Thank you for your contribution to TOAST UI product. 🎉 😘 ✨

[adhrinae]

리뷰 완료합니다. 테스트 부분 확인해주시고요.
그리고 다른 플러그인에도 이번 이슈랑 비슷한 경우가 일어날 일은 없나요?
여러 인스턴스를 만들어놓고 플러그인을 사용할 때 현재 포커스중인 에디터를 더 쉽게 찾을 수 있는 방법을 기본적으로 마련하는게 좋겠는데요.

[adhrinae]

혹시 container2.contains(document.activeElement) 로는 안되나요?

https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

[jajugoguma]

현재 activeElement가 정확히 에디터 내 에디팅 요소인지 확인하는게 명확하다고 판단했습니다.

[adhrinae]

네 그런데 저 쿼리 셀렉터는 다분히 구현 의존적인데 비해
"document.activeElement 가 어쨌든 container2 안에 있는거냐" 를 확인하기 위해 contains 를 쓰는게 어떻겠냐는 의미여요.

[jajugoguma]

구현 의존적이라는데 동감하기 때문에 말씀하신 것처럼 요소를 포함하는지 검증하도록 변경했습니다.

[jwlee1108]

리뷰 완료합니다.