55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
|
import * as React from 'react'
|
||
|
|
import type { MarkdownEditorHandle } from './EditorPane'
|
||
|
|
|
||
|
|
const BUTTONS: { id: string; label: string }[] = [
|
||
|
|
{ id: 'h1', label: 'H1' },
|
||
|
|
{ id: 'h2', label: 'H2' },
|
||
|
|
{ id: 'h3', label: 'H3' },
|
||
|
|
{ id: 'h4', label: 'H4' },
|
||
|
|
{ id: 'h5', label: 'H5' },
|
||
|
|
{ id: 'h6', label: 'H6' },
|
||
|
|
{ id: 'bold', label: '加粗' },
|
||
|
|
{ id: 'italic', label: '斜体' },
|
||
|
|
{ id: 'strike', label: '删除线' },
|
||
|
|
{ id: 'code', label: '行内代码' },
|
||
|
|
{ id: 'codeBlock', label: '代码块' },
|
||
|
|
{ id: 'link', label: '链接' },
|
||
|
|
{ id: 'image', label: '图片' },
|
||
|
|
{ id: 'ul', label: '无序列表' },
|
||
|
|
{ id: 'ol', label: '有序列表' },
|
||
|
|
{ id: 'task', label: '任务' },
|
||
|
|
{ id: 'quote', label: '引用' },
|
||
|
|
{ id: 'hr', label: '分隔线' },
|
||
|
|
{ id: 'table', label: '表格' },
|
||
|
|
{ id: 'mark', label: '高亮' },
|
||
|
|
{ id: 'color', label: '颜色' },
|
||
|
|
{ id: 'sup', label: '上标' },
|
||
|
|
{ id: 'sub', label: '下标' },
|
||
|
|
{ id: 'kbd', label: '按键' },
|
||
|
|
{ id: 'details', label: '折叠' },
|
||
|
|
{ id: 'footnote', label: '脚注' }
|
||
|
|
]
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
editorRef: React.RefObject<MarkdownEditorHandle | null>
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MarkdownFormatToolbar({ editorRef }: Props): React.ReactElement {
|
||
|
|
return (
|
||
|
|
<div className="md-format-wrap">
|
||
|
|
<div className="md-format-bar">
|
||
|
|
{BUTTONS.map((b) => (
|
||
|
|
<button
|
||
|
|
key={b.id}
|
||
|
|
type="button"
|
||
|
|
title={b.label}
|
||
|
|
onClick={() => void editorRef.current?.applyAction(b.id)}
|
||
|
|
>
|
||
|
|
{b.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|