MarkLite/src/renderer/components/Editor/EditorToolbar.tsx

import React, { useCallback } from 'react'
import type { EditorView } from '@codemirror/view'

interface EditorToolbarProps {
  viewRef: React.MutableRefObject<EditorView | null>
}

export const EditorToolbar = React.memo(function EditorToolbar({ viewRef }: EditorToolbarProps) {
  const insertFormatting = useCallback((before: string, after: string, placeholder: string) => {
    const view = viewRef.current
    if (!view) return
    const { from, to } = view.state.selection.main
    const selected = view.state.sliceDoc(from, to)
    const text = selected || placeholder
    const insert = before + text + after
    view.dispatch({
      changes: { from, to, insert },
      selection: { anchor: from + before.length, head: from + before.length + text.length }
    })
    view.focus()
  }, [viewRef])

  const insertLinePrefix = useCallback((prefix: string) => {
    const view = viewRef.current
    if (!view) return
    const { from } = view.state.selection.main
    const line = view.state.doc.lineAt(from)
    const currentLine = view.state.sliceDoc(line.from, line.to)
    if (currentLine.startsWith(prefix)) {
      view.dispatch({
        changes: { from: line.from, to: line.from + prefix.length, insert: '' }
      })
    } else {
      view.dispatch({
        changes: { from: line.from, to: line.from, insert: prefix }
      })
    }
    view.focus()
  }, [viewRef])

  const insertBlock = useCallback((text: string) => {
    const view = viewRef.current
    if (!view) return
    const { from } = view.state.selection.main
    const line = view.state.doc.lineAt(from)
    const insertPos = line.to + 1
    view.dispatch({
      changes: { from: insertPos, to: insertPos, insert: '\n' + text + '\n' },
      selection: { anchor: insertPos + 1, head: insertPos + 1 + text.length }
    })
    view.focus()
  }, [viewRef])

  return (
    <div className="editor-toolbar" role="toolbar" aria-label="Markdown格式工具">
      <button className="toolbar-btn-sm" onClick={() => insertFormatting('**', '**', '粗体')} title="粗体 (Ctrl+B)" aria-label="粗体">
        <strong>B</strong>
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertFormatting('*', '*', '斜体')} title="斜体 (Ctrl+I)" aria-label="斜体">
        <em>I</em>
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertFormatting('~~', '~~', '删除线')} title="删除线" aria-label="删除线">
        <s>S</s>
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertFormatting('`', '`', '代码')} title="行内代码" aria-label="行内代码">
        {'</>'}
      </button>
      <div className="toolbar-divider-sm" role="separator" />
      <button className="toolbar-btn-sm" onClick={() => insertLinePrefix('# ')} title="标题" aria-label="一级标题">
        H1
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertLinePrefix('## ')} title="二级标题" aria-label="二级标题">
        H2
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertLinePrefix('### ')} title="三级标题" aria-label="三级标题">
        H3
      </button>
      <div className="toolbar-divider-sm" role="separator" />
      <button className="toolbar-btn-sm" onClick={() => insertLinePrefix('- ')} title="无序列表" aria-label="无序列表">
        •≡
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertLinePrefix('1. ')} title="有序列表" aria-label="有序列表">
        1.
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertLinePrefix('> ')} title="引用" aria-label="引用">
        ❝
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertBlock('```\n代码\n```')} title="代码块" aria-label="代码块">
        {'{ }'}
      </button>
      <div className="toolbar-divider-sm" role="separator" />
      <button className="toolbar-btn-sm" onClick={() => insertFormatting('[', '](url)', '链接文本')} title="链接" aria-label="插入链接">
        🔗
      </button>
      <button className="toolbar-btn-sm" onClick={() => insertFormatting('![', '](url)', '图片描述')} title="图片" aria-label="插入图片">
        🖼
      </button>
    </div>
  )
})

EditorToolbar.displayName = 'EditorToolbar'