Add example of mdx-editor with Remix V2 in ESM mode

app/components/editor.client.tsx

@@ -0,0 +1,48 @@
+import type { FC } from "react";
+import type { MDXEditorProps } from "@mdxeditor/editor";
+import {
+  MDXEditor,
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  CodeToggle,
+  ListsToggle,
+  Separator,
+  UndoRedo,
+  headingsPlugin,
+  listsPlugin,
+  markdownShortcutPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  toolbarPlugin,
+} from "@mdxeditor/editor";
+
+import "@mdxeditor/editor/style.css";
+
+export const Editor: FC<MDXEditorProps> = (props) => {
+  return (
+    <MDXEditor
+      {...props}
+      plugins={[
+        headingsPlugin(),
+        listsPlugin(),
+        markdownShortcutPlugin(),
+        quotePlugin(),
+        thematicBreakPlugin(),
+        toolbarPlugin({
+          toolbarContents: () => (
+            <>
+              <UndoRedo />
+              <Separator />
+              <BoldItalicUnderlineToggles />
+              <CodeToggle />
+              <Separator />
+              <ListsToggle />
+              <Separator />
+              <BlockTypeSelect />
+            </>
+          ),
+        }),
+      ]}
+    />
+  );
+};

app/entry.server.tsx

@@ -6,8 +6,11 @@
 
 import { PassThrough } from "node:stream";
 
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { Response } from "@remix-run/node";
+import {
+  createReadableStreamFromReadable,
+  type AppLoadContext,
+  type EntryContext,
+} from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
@@ -54,11 +57,12 @@ function handleBotRequest(
         onAllReady() {
           shellRendered = true;
           const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set("Content-Type", "text/html");
 
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             })
@@ -103,11 +107,12 @@ function handleBrowserRequest(
         onShellReady() {
           shellRendered = true;
           const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
 
           responseHeaders.set("Content-Type", "text/html");
 
           resolve(
-            new Response(body, {
+            new Response(stream, {
               headers: responseHeaders,
               status: responseStatusCode,
             })

app/routes/_index.tsx

@@ -1,21 +1,18 @@
-import React from "react";
-import type { V2_MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node";
+import { ClientOnly } from "remix-utils/client-only";
+import { Editor } from "../components/editor.client";
 
-import '@mdxeditor/editor/style.css';
-
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     { name: "description", content: "Welcome to Remix!" },
   ];
 };
 
-const LazyMDXEditor = React.lazy(() => import("@mdxeditor/editor").then(mod => ({default:mod.MDXEditor})));
-
 export default function Index() {
   return (
-    <React.Suspense fallback={<div>Loading...</div>}>
-      <LazyMDXEditor markdown="Hello world" />
-    </React.Suspense>      
+    <ClientOnly fallback={<div>Loading...</div>}>
+      {() => <Editor markdown="Hello world" />}
+    </ClientOnly>
   );
 }