Respect previewOptions className

[malcolm-kee]

Right now the preview className is fixed as ${prefixCls}-preview due to https://github.com/uiwjs/react-md-editor/blob/master/src/Editor.tsx#L276.

I think it should use className from previewOptions if it is provided.

If that's not what you intends, then maybe remove className from previewOptions type definition.

Either way, happy to create a PR if you can confirm the intentional behavior. Thanks!

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/blob/cf68ab6c3aa254a112e515512687717322df6430/src/Editor.tsx#L164

className is passed to the outermost box.

@malcolm-kee

[malcolm-kee]

previewOptions object has className.

[jaywcjlove]

@malcolm-kee Yes, it is passed to the @uiw/react-markdown-preview component.

https://github.com/uiwjs/react-md-editor/blob/cf68ab6c3aa254a112e515512687717322df6430/src/Editor.tsx#L2

[malcolm-kee]

@jaywcjlove it is not.

Reproduction: https://codesandbox.io/s/markdown-editor-for-react-forked-ieyf2?file=/index.js

[jaywcjlove]

<MDEditor.Markdown
  source={value}
  linkTarget="_blank"
+  className="red-bg"
-  previewOptions={{
-    // this applied but ignore
-    className: "red-bg"
-  }}
/>

@malcolm-kee

[malcolm-kee]

@jaywcjlove sorry the previous code is wrong 😅 .

I just updated my example:

function App() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <div className="red-bg">style applied</div>
      <MDEditor
        height={200}
        value={value}
        onChange={setValue}
        previewOptions={{
          // this applied but ignore
          className: "red-bg"
        }}
      />
    </div>
  );
}

[jaywcjlove]

I fixed this issue. @malcolm-kee

[malcolm-kee]

Thanks for the quick fix! You're awesome!