index.tsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import {
  2. memo,
  3. useEffect,
  4. } from 'react'
  5. import {
  6. $insertNodes,
  7. COMMAND_PRIORITY_EDITOR,
  8. createCommand,
  9. } from 'lexical'
  10. import { mergeRegister } from '@lexical/utils'
  11. import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
  12. import type { ErrorMessageBlockType } from '../../types'
  13. import {
  14. $createErrorMessageBlockNode,
  15. ErrorMessageBlockNode,
  16. } from './node'
  17. export const INSERT_ERROR_MESSAGE_BLOCK_COMMAND = createCommand('INSERT_ERROR_MESSAGE_BLOCK_COMMAND')
  18. export const DELETE_ERROR_MESSAGE_COMMAND = createCommand('DELETE_ERROR_MESSAGE_COMMAND')
  19. const ErrorMessageBlock = memo(({
  20. onInsert,
  21. onDelete,
  22. }: ErrorMessageBlockType) => {
  23. const [editor] = useLexicalComposerContext()
  24. useEffect(() => {
  25. if (!editor.hasNodes([ErrorMessageBlockNode]))
  26. throw new Error('ERROR_MESSAGEBlockPlugin: ERROR_MESSAGEBlock not registered on editor')
  27. return mergeRegister(
  28. editor.registerCommand(
  29. INSERT_ERROR_MESSAGE_BLOCK_COMMAND,
  30. () => {
  31. const Node = $createErrorMessageBlockNode()
  32. $insertNodes([Node])
  33. if (onInsert)
  34. onInsert()
  35. return true
  36. },
  37. COMMAND_PRIORITY_EDITOR,
  38. ),
  39. editor.registerCommand(
  40. DELETE_ERROR_MESSAGE_COMMAND,
  41. () => {
  42. if (onDelete)
  43. onDelete()
  44. return true
  45. },
  46. COMMAND_PRIORITY_EDITOR,
  47. ),
  48. )
  49. }, [editor, onDelete, onInsert])
  50. return null
  51. })
  52. ErrorMessageBlock.displayName = 'ErrorMessageBlock'
  53. export { ErrorMessageBlock }
  54. export { ErrorMessageBlockNode } from './node'
  55. export { default as ErrorMessageBlockReplacementBlock } from './error-message-block-replacement-block'