Function Editor

src/components/editor.tsx:27–68

({
  onValueChange,
  className,
  contentEditableClassName,
  ...props
}: EditorProps)

 * proxying the ref is necessary. Next.js dynamically imported components don't support refs.
 */
const Editor: FC<EditorProps> = ({
  onValueChange,
  className,
  contentEditableClassName,
  ...props
}: EditorProps) => {
  return (
    <MDXEditor
      onChange={onValueChange}
      className={className}
      contentEditableClassName={cn(
        "prose prose-stone !p-0",
        contentEditableClassName,
      )}
      {...props}
      plugins={[
        headingsPlugin({}),
        listsPlugin(),
        tablePlugin(),
        codeBlockPlugin({
          defaultCodeBlockLanguage: "js",
        }),
        codeMirrorPlugin({
          codeBlockLanguages: {
            js: "JavaScript",
            css: "CSS",
            ts: "TypeScript",
            html: "HTML",
            python: "Python",
            bash: "Bash",
            json: "JSON",
            yaml: "YAML",
            markdown: "Markdown",
            sql: "SQL",
            xml: "XML",
          },
        }),
        markdownShortcutPlugin(),
      ]}
    />
  );
};

export default Editor;