tiptap 에디터 focus border 없애기, 영역 클릭시 focus 하기

 

1) focus border 없애기

 

에디터 영역을 잡아주려다 보면 겉에 border 로 영역을 잡는데, 이때 tiptap 을 사용하면 다음처럼 텍스트 입력영역에 border가 또 활성화 된다. 예를들어 다음과 같은 화면이다.

 

회색영역은 아무런 활성화가 안되었을때 '여기가 입력칸'이라고 보여주는 곳이고, 실제로 클릭하면 푸른색 border 가 활성화된다.

 

이 부분이 이전에는 이런식으로 스타일 되었다. 참고로 사용하는 스타일은 tailwindcss 이다

<div
  className={`editor p-2 rounded-md transition-all duration-200 border-0 ring-1 ring-gray-400
`}
>
  <EditorContent
    editor={editor}
    className="w-full min-h-[150px]"
  />
</div>

 

 

그래서 tiptap에서 포커스 될때 주는 css를 제거할 필요가 있었다. 그래서 다음과 같이 css에 추가했다.

.editor{
    .ProseMirror:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }
}

 

이렇게 하면 이제 커서가 활성화 되어도 border가 보이질 않는다.

 

 

 

 

2) 영역 클릭시 focus 하기

에디터 영역과 그것을 감싸 border를 준 것이 엄연히 다르다보니 빈 공간을 클릭하면 focus가 안되는 문제가 있었다. 그래서 다음을 추가했다.

{/* 에디터 영역 */}
<div
  className={`editor p-2 rounded-md transition-all duration-200 border-0 ring-1 ring-gray-400
`}
  onClick={() => editor.commands.focus()}
>
  <EditorContent editor={editor} className="w-full min-h-[150px]" />
</div>

 

이렇게 하면 감싸는 영역을 클릭하더라도 에디터에 Focus가 되어 커서가 깜박인다.