index.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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 { HistoryBlockType } from '../../types'
  13. import {
  14. $createHistoryBlockNode,
  15. HistoryBlockNode,
  16. } from './node'
  17. import { noop } from 'lodash-es'
  18. export const INSERT_HISTORY_BLOCK_COMMAND = createCommand('INSERT_HISTORY_BLOCK_COMMAND')
  19. export const DELETE_HISTORY_BLOCK_COMMAND = createCommand('DELETE_HISTORY_BLOCK_COMMAND')
  20. export type RoleName = {
  21. user: string
  22. assistant: string
  23. }
  24. export type HistoryBlockProps = {
  25. roleName: RoleName
  26. onEditRole: () => void
  27. onInsert?: () => void
  28. onDelete?: () => void
  29. }
  30. const HistoryBlock = memo(({
  31. history = { user: '', assistant: '' },
  32. onEditRole = noop,
  33. onInsert,
  34. onDelete,
  35. }: HistoryBlockType) => {
  36. const [editor] = useLexicalComposerContext()
  37. useEffect(() => {
  38. if (!editor.hasNodes([HistoryBlockNode]))
  39. throw new Error('HistoryBlockPlugin: HistoryBlock not registered on editor')
  40. return mergeRegister(
  41. editor.registerCommand(
  42. INSERT_HISTORY_BLOCK_COMMAND,
  43. () => {
  44. const historyBlockNode = $createHistoryBlockNode(history, onEditRole)
  45. $insertNodes([historyBlockNode])
  46. if (onInsert)
  47. onInsert()
  48. return true
  49. },
  50. COMMAND_PRIORITY_EDITOR,
  51. ),
  52. editor.registerCommand(
  53. DELETE_HISTORY_BLOCK_COMMAND,
  54. () => {
  55. if (onDelete)
  56. onDelete()
  57. return true
  58. },
  59. COMMAND_PRIORITY_EDITOR,
  60. ),
  61. )
  62. }, [editor, history, onEditRole, onInsert, onDelete])
  63. return null
  64. })
  65. HistoryBlock.displayName = 'HistoryBlock'
  66. export { HistoryBlock }
  67. export { HistoryBlockNode } from './node'
  68. export { default as HistoryBlockReplacementBlock } from './history-block-replacement-block'