fix: use callback hook in checkbox editor component to cache function

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-08 19:35:20 +02:00
parent 37e1482c46
commit 7f20da0510

View file

@ -10,22 +10,29 @@ import type { TaskCheckedEventPayload } from './event-emitting-task-list-checkbo
import { findCheckBox } from './find-check-box'
import { TaskListCheckboxAppExtension } from './task-list-checkbox-app-extension'
import type React from 'react'
import { useCallback } from 'react'
/**
* Receives task-checkbox-change events and modify the current editor content.
*/
export const SetCheckboxInCheatsheet: React.FC<CheatsheetExtensionComponentProps> = ({ setContent }) => {
useExtensionEventEmitterHandler(TaskListCheckboxAppExtension.EVENT_NAME, (event: TaskCheckedEventPayload) => {
setContent((previousContent) => {
return findCheckBox(previousContent, event.lineInMarkdown)
.map(
([startIndex, endIndex]) =>
previousContent.slice(0, startIndex) +
createCheckboxContent(event.newCheckedState) +
previousContent.slice(endIndex)
useExtensionEventEmitterHandler(
TaskListCheckboxAppExtension.EVENT_NAME,
useCallback(
(event: TaskCheckedEventPayload) => {
setContent((previousContent) =>
findCheckBox(previousContent, event.lineInMarkdown)
.map(
([startIndex, endIndex]) =>
previousContent.slice(0, startIndex) +
createCheckboxContent(event.newCheckedState) +
previousContent.slice(endIndex)
)
.orElse(previousContent)
)
.orElse(previousContent)
})
})
},
[setContent]
)
)
return null
}