feat(blog): add onChange functionality to BlogEditor and enhance BlogImagePlugin with drag-and-drop support

src/blog/editor/BlogEditor.tsx

@@ -8,6 +8,8 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { HeadingNode, QuoteNode } from '@lexical/rich-text'
 import { CodeNode, CodeHighlightNode } from '@lexical/code'
 import { ListItemNode, ListNode } from '@lexical/list'
@@ -20,12 +22,13 @@ import { LinkNode, AutoLinkNode } from '@lexical/link'
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
 import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin'
 import { HashtagNode } from '@lexical/hashtag'
+import { $generateHtmlFromNodes } from '@lexical/html'
+import type { EditorState } from 'lexical'
 
 import { ImageNode } from '../../editor/nodes/ImageNode'
 import { MentionNode } from '../../editor/nodes/MentionNode'
 import ToolbarPlugin from '../../editor/plugins/ToolbarPlugin'
 import MarkdownPlugin from '../../editor/plugins/MarkdownShortcutPlugin'
-import DragDropPastePlugin from '../../editor/plugins/DragDropPastePlugin'
 import HashtagPlugin from '../../editor/plugins/HashtagPlugin'
 import MentionsPlugin from '../../editor/plugins/MentionsPlugin'
 import editorTheme from '../../editor/themes/EditorTheme'
@@ -69,9 +72,26 @@ const MATCHERS = [
 
 interface BlogEditorProps {
   placeholder?: string
+  onChange?: (html: string) => void
 }
 
-export default function BlogEditor({ placeholder }: BlogEditorProps) {
+/**
+ * OnChange wrapper component that has access to editor context
+ */
+function OnChangeWrapper({ onChange }: { onChange?: (html: string) => void }) {
+  const [editor] = useLexicalComposerContext()
+
+  const handleChange = (editorState: EditorState) => {
+    editorState.read(() => {
+      const html = $generateHtmlFromNodes(editor)
+      onChange?.(html)
+    })
+  }
+
+  return <OnChangePlugin onChange={handleChange} />
+}
+
+export default function BlogEditor({ placeholder, onChange }: BlogEditorProps) {
   const editorConfig = {
     namespace: 'BlogEditor',
     theme: editorTheme,
@@ -111,6 +131,7 @@ export default function BlogEditor({ placeholder }: BlogEditorProps) {
             }
             ErrorBoundary={LexicalErrorBoundary}
           />
+          <OnChangeWrapper onChange={onChange} />
           <HistoryPlugin />
           <ListPlugin />
           <CheckListPlugin />
@@ -118,7 +139,6 @@ export default function BlogEditor({ placeholder }: BlogEditorProps) {
           <AutoLinkPlugin matchers={MATCHERS} />
           <TablePlugin />
           <BlogImagePlugin />
-          <DragDropPastePlugin />
           <HashtagPlugin />
           <MentionsPlugin />
           <MarkdownPlugin />