85 lines
1.6 KiB
TypeScript
85 lines
1.6 KiB
TypeScript
/** @jsxImportSource react */
|
|
// deno-lint-ignore no-unused-vars
|
|
import React from 'react'
|
|
import {
|
|
BoldItalicUnderlineToggles,
|
|
ChangeCodeMirrorLanguage,
|
|
CodeToggle,
|
|
ConditionalContents,
|
|
CreateLink,
|
|
DiffSourceToggleWrapper,
|
|
headingsPlugin,
|
|
InsertCodeBlock,
|
|
InsertFrontmatter,
|
|
InsertImage,
|
|
InsertTable,
|
|
InsertThematicBreak,
|
|
ListsToggle,
|
|
markdownShortcutPlugin,
|
|
MDXEditor,
|
|
Separator,
|
|
StrikeThroughSupSubToggles,
|
|
toolbarPlugin,
|
|
UndoRedo,
|
|
} from '@mdxeditor/editor'
|
|
|
|
export default function MdxEditor(props: { markdown?: string }) {
|
|
return (
|
|
<MDXEditor
|
|
markdown={props.markdown ?? ''}
|
|
plugins={[
|
|
headingsPlugin(),
|
|
markdownShortcutPlugin(),
|
|
toolbarPlugin({
|
|
toolbarContents: () => <KitchenSinkToolbar />,
|
|
}),
|
|
]}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function KitchenSinkToolbar() {
|
|
return (
|
|
<DiffSourceToggleWrapper>
|
|
<ConditionalContents
|
|
options={[
|
|
{
|
|
when: (editor: Record<string, unknown>) =>
|
|
editor?.editorType === 'codeblock',
|
|
contents: () => <ChangeCodeMirrorLanguage />,
|
|
},
|
|
{
|
|
fallback: () => (
|
|
<>
|
|
<UndoRedo />
|
|
<Separator />
|
|
<BoldItalicUnderlineToggles />
|
|
<CodeToggle />
|
|
<Separator />
|
|
<StrikeThroughSupSubToggles />
|
|
<Separator />
|
|
<ListsToggle />
|
|
<Separator />
|
|
|
|
<CreateLink />
|
|
<InsertImage />
|
|
|
|
<Separator />
|
|
|
|
<InsertTable />
|
|
<InsertThematicBreak />
|
|
|
|
<Separator />
|
|
<InsertCodeBlock />
|
|
|
|
<Separator />
|
|
<InsertFrontmatter />
|
|
</>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</DiffSourceToggleWrapper>
|
|
)
|
|
}
|