Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improper styles in dark theme: BlockTypeSelect and linkDialogPlugin #225

Closed
timthedev07 opened this issue Dec 7, 2023 · 2 comments
Closed
Labels

Comments

@timthedev07
Copy link

timthedev07 commented Dec 7, 2023

Component source code:

import styles from "../../styles/mdEditor.module.css";
import "@mdxeditor/editor/style.css";
import type { ForwardedRef } from "react";
import {
  headingsPlugin,
  listsPlugin,
  quotePlugin,
  thematicBreakPlugin,
  markdownShortcutPlugin,
  MDXEditor,
  type MDXEditorMethods,
  type MDXEditorProps,
  toolbarPlugin,
  UndoRedo,
  BoldItalicUnderlineToggles,
  imagePlugin,
  tablePlugin,
  InsertImage,
  InsertTable,
  BlockTypeSelect,
  Separator,
  ListsToggle,
  InsertThematicBreak,
  linkPlugin,
  linkDialogPlugin,
  CreateLink,
} from "@mdxeditor/editor";

// Only import this to the next file
export default function InitializedMDXEditor({
  editorRef,
  ...props
}: { editorRef: ForwardedRef<MDXEditorMethods> | null } & MDXEditorProps) {
  return (
    <MDXEditor
      contentEditableClassName={styles.prose}
      className="dark-theme"
      plugins={[
        // Example Plugin Usage
        headingsPlugin(),
        listsPlugin(),
        quotePlugin(),
        thematicBreakPlugin(),
        markdownShortcutPlugin(),
        imagePlugin(),
        linkPlugin(),
        linkDialogPlugin(),
        tablePlugin(),
        toolbarPlugin({
          toolbarContents: () => (
            <>
              <UndoRedo />
              <Separator />
              <BoldItalicUnderlineToggles />
              <Separator></Separator>
              <ListsToggle />
              <Separator />
              <BlockTypeSelect />
              <Separator />
              <CreateLink />
              <InsertImage />
              <InsertTable />
              <InsertThematicBreak />
            </>
          ),
        }),
      ]}
      {...props}
      ref={editorRef}
    />
  );
}

Result:

截屏2023-12-07 13 57 30 截屏2023-12-07 14 14 34

Expected result:

  • Button and menu both in dark theme.
  • Dialogue in dark theme.
@timthedev07 timthedev07 changed the title BlockTypeSelect improper styles in dark theme Improper styles in dark theme: BlockTypeSelect and linkDialogPlugin Dec 7, 2023
@petyosi petyosi closed this as completed in 72ca749 Dec 8, 2023
Copy link

github-actions bot commented Dec 8, 2023

🎉 This issue has been resolved in version 1.13.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@petyosi
Copy link
Contributor

petyosi commented Dec 8, 2023

Thank you; fixed, take a look at the commit, there's one additional variable you need to specify.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants