hololake-platform/src/components/editorExternalChangeEvents.ts

41 lines
1.2 KiB
TypeScript

export const RICH_EDITOR_EXTERNAL_CHANGE_EVENT = 'tolaria:rich-editor-external-change'
export type RichEditorExternalChangeSource = object
type RichEditorExternalChangeDetail = {
source: RichEditorExternalChangeSource
}
function isExternalChangeForSource(
event: Event,
source: RichEditorExternalChangeSource,
): event is CustomEvent<RichEditorExternalChangeDetail> {
return event instanceof CustomEvent && event.detail?.source === source
}
export function dispatchRichEditorExternalChange(
source: RichEditorExternalChangeSource,
target: EventTarget = window,
) {
target.dispatchEvent(new CustomEvent<RichEditorExternalChangeDetail>(
RICH_EDITOR_EXTERNAL_CHANGE_EVENT,
{
bubbles: true,
composed: true,
detail: { source },
},
))
}
export function subscribeRichEditorExternalChange(
source: RichEditorExternalChangeSource,
onChange: () => void,
) {
const handleExternalChange = (event: Event) => {
if (isExternalChangeForSource(event, source)) onChange()
}
window.addEventListener(RICH_EDITOR_EXTERNAL_CHANGE_EVENT, handleExternalChange)
return () => window.removeEventListener(RICH_EDITOR_EXTERNAL_CHANGE_EVENT, handleExternalChange)
}