[question, bug] fixed cursor on table when i using toolbar to make table element on tui.editor

[gloud-mook]

Summary

Hello, I'm Kwangmook Jung, and I'm trying to apply the @toast-ui/react-editor package to my in-house React project.

The version of the package I'm applying is 3.2.2.

The reason why I'm contacting you this time is that when I add a table through the editor toolbar in the applied editor, the cursor cannot move outside the table.

The mouse cursor can be moved outside the table by clicking the down button on the keyboard, but it may be inconvenient for users who use the service, so I tried several methods.

First, I tried selecting the DOM element directly and defocusing it.

Secondly, I tried to detect the change in the nodeList value below when adding a table element and add a br tag to the end of the table element with useEffect to avoid focusing.

const nodeList = document.querySelectorAll("#toast-editor-editor table")

const tableElements = useMemo(() => {
    return nodeList;
    //eslint-disable-next-line
}, [nodeList.length]);

useEffect(() => {
    const br = document.createElement("br");
    (tableElements || []).forEach((table) => {
        table.parentNode?.appendChild(br);
    });
}, [tableElements]);

The first is something we want to avoid as much as possible, but it hasn't worked well for us. In the second case, after creating a table, the cursor does not move outside the table again when I press the keyboard up key.

I respectfully ask if you could take a look at these issues if you can.

Thank you for taking the time to look into this in your busy schedule.

Screenshots

If applicable, add screenshots to help explain your question.

Version

3.2.2

Additional context

안녕하세요. @toast-ui/react-editor 패키지를 사용하여 사내 리액트 프로젝트에 적용을 시도하고 있는 정광묵 이라고 합니다.

적용중인 패키지의 버전은 3.2.2 버전입니다.

다름 아니라 이번에 문의를 드리게 된 이유는 적용한 에디터에서 에디터 툴바를 통해 테이블을 넣었을 때, 커서가 테이블 바깥으로 이동할 수 없는 이슈가 있어서 입니다.

키보드에서 방향키 (down) 버튼을 클릭시 마우스 커서가 테이블 바깥으로 이동할 수 있습니다만, 서비스를 사용하는 사용자들로서는 아무래도 불편함이 있을 수 있기 때문에 여러 시도를 해보았습니다.

첫 번째로는 dom 요소를 직접 선택해서 포커싱을 해제 하는 방식을 시도해 보았고

두 번째로는 테이블 요소를 추가할 때 아래 nodeList 값의 변화가 생기는 것을 감지하고 useEffect 를 가지고 table 의 요소 마지막에 br 태그를 추가해서 포커싱을 피하는 방식을 시도해 보았습니다.

첫번째 방식은 가급적 피하고 싶은 방식이지만, 적용이 잘 되지 않았고 두번째 방식은 테이블 하나를 생성 후 키보드 상향 방향키 를 눌렀을 때 다시 커서가 테이블 바깥으로 이동이 되지 않는 이슈가 있습니다.

혹시 가능하다면 해당 이슈에 대해 확인해 주실 수 있을지 정중히 여쭤봅니다.

바쁘신 와중에 내용을 확인해 주셔서 감사합니다.