editor.tsx 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. 'use client'
  2. import {
  3. memo,
  4. useCallback,
  5. } from 'react'
  6. import type { EditorState } from 'lexical'
  7. import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
  8. import { ContentEditable } from '@lexical/react/LexicalContentEditable'
  9. import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin'
  10. import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
  11. import { ListPlugin } from '@lexical/react/LexicalListPlugin'
  12. import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
  13. import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
  14. import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
  15. import { useWorkflowHistoryStore } from '../../workflow-history-store'
  16. import LinkEditorPlugin from './plugins/link-editor-plugin'
  17. import FormatDetectorPlugin from './plugins/format-detector-plugin'
  18. // import TreeView from '@/app/components/base/prompt-editor/plugins/tree-view'
  19. import Placeholder from '@/app/components/base/prompt-editor/plugins/placeholder'
  20. type EditorProps = {
  21. placeholder?: string
  22. onChange?: (editorState: EditorState) => void
  23. containerElement: HTMLDivElement | null
  24. }
  25. const Editor = ({
  26. placeholder = 'write you note...',
  27. onChange,
  28. containerElement,
  29. }: EditorProps) => {
  30. const handleEditorChange = useCallback((editorState: EditorState) => {
  31. onChange?.(editorState)
  32. }, [onChange])
  33. const { setShortcutsEnabled } = useWorkflowHistoryStore()
  34. return (
  35. <div className='relative'>
  36. <RichTextPlugin
  37. contentEditable={
  38. <div>
  39. <ContentEditable
  40. onFocus={() => setShortcutsEnabled(false)}
  41. onBlur={() => setShortcutsEnabled(true)}
  42. spellCheck={false}
  43. className='w-full h-full outline-none caret-primary-600'
  44. placeholder={placeholder}
  45. />
  46. </div>
  47. }
  48. placeholder={<Placeholder value={placeholder} compact />}
  49. ErrorBoundary={LexicalErrorBoundary}
  50. />
  51. <ClickableLinkPlugin disabled />
  52. <LinkPlugin />
  53. <ListPlugin />
  54. <LinkEditorPlugin containerElement={containerElement} />
  55. <FormatDetectorPlugin />
  56. <HistoryPlugin />
  57. <OnChangePlugin onChange={handleEditorChange} />
  58. {/* <TreeView /> */}
  59. </div>
  60. )
  61. }
  62. export default memo(Editor)