Trix에 추가 작업 추가

Trix에 추가 "작업"을 추가하는 방법은 문서화되어 있지 않습니다.

현재 작업은 여기에서 찾을 수 있습니다.

https://github.com/basecamp/trix/blob/7940a9a3b7129f8190ef37e086809260d7ccfe32/src/trix/controllers/editor_controller.coffee#L301-L318

그러나 추가 작업을 수행하려면 어떻게 해야 합니까?

액션이 객체인 것 같습니다:

{
  test: Boolean,
  perform: void
}

그래서 test는 "이봐 우리가 그 행동을 해야 할까?"

그리고 perform 는 if test === true 라고 불리는 것입니다. 합리적인 것 같습니다.

이제 어려운 부분으로, 추가 Trix 작업을 추가하는 문서를 찾을 수 없습니다.

그러나 콘솔을 통해 조사한 결과 다음과 같은 사실을 발견했습니다.

document.querySelector("trix-editor").editorController.actions

/* 
Object { 
  attachFiles: Object { test: test(), perform: perform() }
  decreaseNestingLevel: Object { test: test(), perform: perform() }
  increaseNestingLevel: Object { test: test(), perform: perform() }
  link: Object { test: test() }
  redo: Object { test: test(), perform: perform() }
  undo: Object { test: test(), perform: perform() }
}
*/

따라서 현재 활성화된 "trix-editor"인스턴스에서 editorController.actions를 탭하여 추가 작업을 추가할 수 있는 것으로 보입니다.

따라서 작업을 추가하는 간단한 예는 다음과 같습니다.

document.addEventListener('trix-initialize', updateActions);

function updateActions() {
  const editors = document.querySelectorAll("trix-editor")
  const myAction = { test: true, perform: console.log("Hi!") }
  editors.forEach((editor) => Object.assign(editor.editorController.actions, { myAction })
}

이제 도구 모음에 항목을 추가할 때 다음과 같이 작업을 트리거할 수 있어야 합니다.

<button data-trix-action="myAction"></button>

이것은 내가 테이블 지원을 탐구하기 위한 작은 선구자이지만 추적하는 데 시간이 걸리므로 공유할 것이라고 생각했습니다!