75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import { forwardRef, useImperativeHandle, type ReactNode } from 'react';
|
|
|
|
export type MDXEditorMethods = {
|
|
setMarkdown: (value: string) => void;
|
|
};
|
|
|
|
export type MDXEditorProps = {
|
|
markdown: string;
|
|
onChange?: (value: string) => void;
|
|
readOnly?: boolean;
|
|
className?: string;
|
|
contentEditableClassName?: string;
|
|
plugins?: unknown[];
|
|
};
|
|
|
|
export const MDXEditor = forwardRef<MDXEditorMethods, MDXEditorProps>(function MDXEditor(
|
|
{ markdown, onChange, readOnly, className },
|
|
ref,
|
|
) {
|
|
useImperativeHandle(
|
|
ref,
|
|
() => ({
|
|
setMarkdown: () => undefined,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
if (readOnly) {
|
|
return (
|
|
<div data-testid="md-preview" data-class-name={className}>
|
|
{markdown}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<textarea
|
|
aria-label="Markdown Editor"
|
|
value={markdown}
|
|
data-class-name={className}
|
|
onChange={(event) => onChange?.(event.target.value)}
|
|
/>
|
|
);
|
|
});
|
|
|
|
function Control(): ReactNode {
|
|
return <span />;
|
|
}
|
|
|
|
function plugin(): Record<string, never> {
|
|
return {};
|
|
}
|
|
|
|
export const BlockTypeSelect = Control;
|
|
export const BoldItalicUnderlineToggles = Control;
|
|
export const CodeToggle = Control;
|
|
export const CreateLink = Control;
|
|
export const InsertCodeBlock = Control;
|
|
export const InsertTable = Control;
|
|
export const ListsToggle = Control;
|
|
export const Separator = Control;
|
|
export const UndoRedo = Control;
|
|
|
|
export const codeBlockPlugin = plugin;
|
|
export const codeMirrorPlugin = plugin;
|
|
export const headingsPlugin = plugin;
|
|
export const linkDialogPlugin = plugin;
|
|
export const linkPlugin = plugin;
|
|
export const listsPlugin = plugin;
|
|
export const markdownShortcutPlugin = plugin;
|
|
export const quotePlugin = plugin;
|
|
export const tablePlugin = plugin;
|
|
export const thematicBreakPlugin = plugin;
|
|
export const toolbarPlugin = plugin;
|