Issues when using Next and Sanity Studio

[iamhectorsosa]

Hello, I'm configuring a local Sanity Studio with my Next project. I'm getting this issue. Following the steps as indicated in the README of this repository.

./node_modules/easymde/dist/easymde.min.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/sanity-plugin-markdown/lib/index.esm.js

[pedrobonamin]

Hello, I'm getting the same issue, have you been able to fix it? Trying to use the plugin in a NextJs embebed editor.

[iamhectorsosa]

@pedrobonamin Nope. I've got nothing so far. I've reached out to the Sanity folks on their Slack channel but they've advised me to contact the plugin creators. Hence, here we are.

[pedrobonamin]

I managed to fix it, following the recommendation from here: https://github.com/sanity-io/sanity-plugin-markdown/issues/27

What I did:

• Copied the src folder from this project into my project.
• Updated the MarkdownInput component into this:

export const MarkdownInput = React.forwardRef(
  (props: MarkdownInputProps, ref: React.MutableRefObject<any>) => {
    const {
      value = '',
      onChange,
      elementProps: { onBlur, onFocus },
      reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
      schemaType,
    } = props;
    const client = useClient({ apiVersion: '2022-01-01' });
    const { imageUrl } =
      (schemaType.options as MarkdownOptions | undefined) ?? {};

    const imageUpload = useCallback(
      (
        file: File,
        onSuccess: (url: string) => void,
        onError: (error: string) => void,
      ) => {
        client.assets
          .upload('image', file)
          .then((doc) =>
            onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`),
          )
          .catch((e) => {
            console.error(e);
            onError(e.message);
          });
      },
      [client, imageUrl],
    );

    const mdeOptions: EasyMdeOptions = useMemo(() => {
      return {
        autofocus: false,
        spellChecker: false,
        sideBySideFullscreen: false,
        uploadImage: true,
        imageUploadFunction: imageUpload,
        toolbar: defaultMdeTools,
        status: false,
        ...mdeCustomOptions,
      };
    }, [imageUpload, mdeCustomOptions]);

    const handleChange = useCallback(
      (newValue: string) => {
        onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
      },
      [onChange],
    );

    return (
      <MarkdownInputStyles focused={props.focused}> // Added some focused styles for this component
        <SimpleMdeReact
          {...reactMdeProps}
          ref={ref}
          value={value}
          onChange={handleChange}
          onBlur={onBlur}
          onFocus={onFocus}
          options={mdeOptions}
          spellCheck={false}
        />
      </MarkdownInputStyles>
    );
  },
);

• Used the plugin from my project instead of the installed one.