Gutenberg 코드 블록에 탭 문자 입력

Gutenberg 코드 블록에 탭 문자 입력

구텐베르크 코드 블록은 워드프레스 게시물과 페이지 내의 코드 블록을 표시하기 위한 것입니다.이상적인 상황에서는 대부분의 사람들이 코드를 직접 복사하여 이 블록에 붙여넣기만 합니다.하지만 블록에 코드만 입력할 수 있으면 좋겠습니다.

탭 문자를 입력하려면 어떻게 해야 합니까?코드를 입력하면서 들여쓰기를 하고 싶습니다.코드 블록을 복사해서 붙여넣어도 탭이 손실되지 않습니다.하지만 하나를 입력할 수 없었습니다.

탭 키를 입력하면 포커스가 다음 블록으로 바뀝니다.Shift-탭을 누르면 포커스가 이전 블록으로 바뀝니다.CTRL-탭은 아무 것도 하지 않습니다.

검색하고 검색해보니 답이 없는 다른 사람들만 같은 질문을 하는 것을 발견할 수 있었습니다.

바닥글 앞에 다음을 스크립트 태그에 추가합니다(올바른 절차에 따라 줄을 이음).

var codeAreas = document.querySelectorAll('code.block-editor-rich-text__editable');
if (codeAreas) {
    for (area of codeAreas) {
        area.addEventListener('keydown', (e) => {
            var TABKEY = 9;
            if (e.keyCode == TABKEY) {

                if (e.preventDefault) {
                    e.preventDefault();
                }

                var text = "\t";
                var selection = document.getSelection();
                var range = selection.getRangeAt(0);
                var startPos = range.startOffset;
                var endPos = range.endOffset;

                area.innerText = area.innerText.substring(0, startPos)
                    + text
                    + area.innerText.substring(endPos, area.innerText.length);

                range = document.createRange();
                range.setStart(area.firstChild, endPos + text.length);
                selection.removeAllRanges();
                selection.addRange(range);

                return false;
            }
        }
            , false);
    }
}

각 파트가 하는 일을 분해해 보겠습니다.

첫째, 편집 가능한 코드 태그가 있는 경우 해당 태그를 찾아서 키다운 이벤트를 추가합니다.

var codeAreas = document.querySelectorAll('code.block-editor-rich-text__editable');
if (codeAreas) {
    for (area of codeAreas) {
        area.addEventListener('keydown', (e) => {
...

탭인지 확인합니다.

...
var TABKEY = 9;
    if(e.keyCode == TABKEY) {

...

그렇다면 먼저 키다운 이벤트의 기본 동작을 방지합니다(다음 요소를 참조).

...
if (e.preventDefault) {
    e.preventDefault();
}
...

그런 다음 삽입할 텍스트를 설정합니다(이 경우에는 탭이지만 4개의 공백이나 기타 항목일 수도 있습니다). 또한 현재 선택한 위치를 가져옵니다.아무것도 강조 표시되지 않으면 선택 범위의 시작과 끝이 동일합니다.

...
var text = "    ";
var selection = document.getSelection();
var range = selection.getRangeAt(0);
var startPos = range.startOffset;
var endPos = range.endOffset;
...

이제 커서에 텍스트를 삽입하고,

...
area.innerText = area.innerText.substring(0, startPos)
    + text
    + area.innerText.substring(endPos, area.innerText.length);
...

선택한 내용을 삽입된 텍스트의 끝으로 다시 설정합니다.

...
range = document.createRange();
range.setStart(area.firstChild, endPos + text.length);
selection.removeAllRanges();
selection.addRange(range);
...

만일의 경우를 대비해 거짓을 반환하기 때문에 이벤트가 다른 핸들러를 해고하지는 않습니다.

저는 "Enlighter - Customizable Syntax Highlighter" 플러그인 설치를 통해 이 문제를 해결했습니다.내 코드는 이제 필요에 따라 잘 포맷되었습니다.

언급URL : https://stackoverflow.com/questions/60008727/type-a-tab-character-into-a-gutenberg-code-block