feat: next.js pages compatability - see readme for details

.gitignore

@@ -58,3 +58,6 @@ yalc.lock
 
 # Compiled plugin
 lib
+
+# Output from pakg-utils we dont care about
+next.js

README.md

@@ -53,6 +53,20 @@ const myDocument = {
   ]
 }
 ```
+### Next.js compatability
+Next.js *without* Next 13 app directory does not support css imports from `node_modules`. 
+
+To use this plugin in this context (`pages` directory), use the `sanity-plugin-markdown/next` import instead of `sanity-plugin-markdown`:
+```js
+import { markdownSchema } from "sanity-plugin-markdown/next";
+```
+
+Then, make sure to add 
+```js
+import 'easymde/dist/easymde.min.css'
+```
+
+to  the top of `pages/_app.tsx`.
 
 ### Customizing the default markdown input editor
 

package.json

@@ -23,16 +23,30 @@
     ".": {
       "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.js",
       "require": "./lib/index.js",
+      "import": "./lib/index.esm.js",
       "default": "./lib/index.esm.js"
     },
+    "./next": {
+      "types": "./lib/index.d.ts",
+      "source": "./src/indexNext.ts",
+      "require": "./lib/indexNext.js",
+      "import": "./lib/indexNext.esm.js",
+      "default": "./lib/indexNext.esm.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.js",
   "module": "./lib/index.esm.js",
   "source": "./src/index.ts",
   "types": "./lib/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "next": [
+        "./lib/index.d.ts"
+      ]
+    }
+  },
   "files": [
     "lib",
     "sanity.json",
@@ -59,8 +73,8 @@
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/pkg-utils": "^2.1.0",
-    "@sanity/plugin-kit": "^3.1.1",
+    "@sanity/pkg-utils": "^2.2.6",
+    "@sanity/plugin-kit": "^3.1.7",
     "@sanity/semantic-release-preset": "^2.0.2",
     "@types/react": "^18.0.26",
     "@types/styled-components": "^5.1.26",

src/commonExports.ts

@@ -0,0 +1,4 @@
+export {markdownSchemaType, type MarkdownDefinition} from './schema'
+export {MarkdownInput, defaultMdeTools, type MarkdownInputProps} from './components/MarkdownInput'
+
+export {markdownSchema, type MarkdownConfig} from './plugin'

src/components/MarkdownInput.tsx

@@ -1,10 +1,12 @@
-import 'easymde/dist/easymde.min.css'
 import {type Options as EasyMdeOptions} from 'easymde'
-import React, {useCallback, useMemo} from 'react'
-import SimpleMdeReact, {SimpleMDEReactProps} from 'react-simplemde-editor'
+import React, {Suspense, useCallback, useMemo} from 'react'
+// dont import non-types here, it will break SSR on next
+import type {SimpleMDEReactProps} from 'react-simplemde-editor'
 import {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'
 import {MarkdownOptions} from '../schema'
 import {MarkdownInputStyles} from './MarkdownInputStyles'
+import {useSimpleMdeReact} from './useSimpleMdeReact'
+import {Box, Text} from '@sanity/ui'
 
 export interface MarkdownInputProps extends StringInputProps {
   /**
@@ -77,18 +79,30 @@ export function MarkdownInput(props: MarkdownInputProps) {
     [onChange]
   )
 
+  const SimpleMdeReact = useSimpleMdeReact()
+
   return (
     <MarkdownInputStyles>
-      <SimpleMdeReact
-        {...reactMdeProps}
-        ref={ref}
-        value={value}
-        onChange={handleChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        options={mdeOptions}
-        spellCheck={false}
-      />
+      {SimpleMdeReact && (
+        <Suspense
+          fallback={
+            <Box padding={3}>
+              <Text>Loading editor...</Text>
+            </Box>
+          }
+        >
+          <SimpleMdeReact
+            {...reactMdeProps}
+            ref={ref}
+            value={value}
+            onChange={handleChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            options={mdeOptions}
+            spellCheck={false}
+          />
+        </Suspense>
+      )}
     </MarkdownInputStyles>
   )
 }

src/components/useSimpleMdeReact.tsx

@@ -0,0 +1,12 @@
+import {lazy, useEffect, useState} from 'react'
+
+export const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))
+
+export function useSimpleMdeReact() {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    requestAnimationFrame(() => setMounted(true))
+  }, [])
+
+  return mounted ? SimpleMdeReact : null
+}

src/index.ts

@@ -1,4 +1,3 @@
-export {markdownSchemaType, type MarkdownDefinition} from './schema'
-export {MarkdownInput, defaultMdeTools, type MarkdownInputProps} from './components/MarkdownInput'
+import 'easymde/dist/easymde.min.css'
 
-export {markdownSchema, type MarkdownConfig} from './plugin'
+export * from './commonExports'

src/indexNext.ts

@@ -0,0 +1 @@
+export * from './commonExports'