@studiocms/mdx 0.1.0-beta.13

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 StudioCMS - Adam Matthiesen, Jacob Jenkins, Paul Valladares
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# @StudioCMS/MDX Plugin
+
+Add MDX support to StudioCMS
+
+## Usage
+
+Add this plugin in your StudioCMS config. (`studiocms.config.mjs`)
+
+```ts
+import { defineStudioCMSConfig } from 'studiocms/config';
+import mdxPlugin from '@studiocms/mdx';
+
+export default defineStudioCMSConfig({
+    // other options here
+    plugins: [mdxPlugin()]
+});
+```
+
+## Options
+
+### remarkPlugins
+**Type:** `PluggableList` | `undefined`
+
+Optional list of Remark plugins
+
+### rehypePlugins
+**Type:** `PluggableList` | `undefined`
+
+Optional list of Rehype plugins
+
+### recmaPlugins
+**Type:** `PluggableList` | `undefined`
+
+Optional list of recma plugins
+
+### remarkRehypeOptions
+**Type:** `remarkRehypeOptions` | `undefined`
+
+Optional: options for remarkRehype
+
+## License
+
+[MIT Licensed](./LICENSE).

package/dist/components/MDXRenderer.astro

@@ -0,0 +1,15 @@
+---
+import renderMDX from 'studiocms:mdx/renderer';
+import type { PluginPageTypeRendererProps } from 'studiocms/types';
+
+interface Props extends PluginPageTypeRendererProps {}
+
+// Get default content
+const { defaultContent } = Astro.props.data;
+
+// Get content to render
+const contentToRender = defaultContent?.content || '# Error: No content found';
+
+const renderedContent = await renderMDX(contentToRender);
+---
+<Fragment set:html={renderedContent} />

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * These triple-slash directives defines dependencies to various declaration files that will be
+ * loaded when a user imports the StudioCMS plugin in their Astro configuration file. These
+ * directives must be first at the top of the file and can only be preceded by this comment.
+ */
+/// <reference types="./virtual.d.ts" preserve="true" />
+import { type StudioCMSPlugin } from 'studiocms/plugins';
+import type { MDXPluginOptions } from './types.js';
+/**
+ * Creates and configures the StudioCMS MDX plugin.
+ *
+ * @param {MDXPluginOptions} [options] - Optional configuration options for the MDX plugin.
+ * @returns {StudioCMSPlugin} The configured StudioCMS plugin.
+ *
+ * @example
+ * ```typescript
+ * plugins: [
+ *   studiocmsMDX({
+ *     remarkPlugins: [],
+ *     rehypePlugins: [],
+ *     recmaPlugins: [],
+ *     remarkRehypeOptions: {}
+ *   }),
+ * ]
+ * ```
+ */
+export declare function studiocmsMDX(options?: MDXPluginOptions): StudioCMSPlugin;
+export default studiocmsMDX;

package/dist/index.js

@@ -0,0 +1,56 @@
+import { addVirtualImports, createResolver } from "astro-integration-kit";
+import { definePlugin } from "studiocms/plugins";
+import { shared } from "./lib/shared.js";
+function studiocmsMDX(options) {
+  const { resolve } = createResolver(import.meta.url);
+  const packageIdentifier = "@studiocms/mdx";
+  const renderer = resolve("./components/MDXRenderer.astro");
+  const internalRenderer = resolve("./lib/render.js");
+  const resolvedOptions = {
+    remarkPlugins: options?.remarkPlugins || [],
+    rehypePlugins: options?.rehypePlugins || [],
+    recmaPlugins: options?.recmaPlugins || [],
+    remarkRehypeOptions: options?.remarkRehypeOptions || {}
+  };
+  return definePlugin({
+    identifier: packageIdentifier,
+    name: "StudioCMS MDX",
+    studiocmsMinimumVersion: "0.1.0-beta.12",
+    pageTypes: [
+      // Define the MDX page type
+      {
+        identifier: "studiocms/mdx",
+        label: "MDX",
+        pageContentComponent: "studiocms/markdown",
+        // Fallback to the default content editor for now, might build a custom MDX editor in the future
+        rendererComponent: renderer
+      }
+    ],
+    integration: {
+      name: packageIdentifier,
+      hooks: {
+        "astro:config:setup": (params) => {
+          addVirtualImports(params, {
+            name: packageIdentifier,
+            imports: {
+              "studiocms:mdx/renderer": `
+                                import { renderMDX as _render } from '${internalRenderer}';
+
+                                export const renderMDX = _render;
+                                export default renderMDX;
+                            `
+            }
+          });
+        },
+        "astro:config:done": () => {
+          shared.mdxConfig = resolvedOptions;
+        }
+      }
+    }
+  });
+}
+var index_default = studiocmsMDX;
+export {
+  index_default as default,
+  studiocmsMDX
+};

package/dist/lib/render.d.ts

@@ -0,0 +1,2 @@
+export declare function renderMDX(content: string): Promise<string>;
+export default renderMDX;

package/dist/lib/render.js

@@ -0,0 +1,35 @@
+import { evaluate } from "@mdx-js/mdx";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import * as runtime from "react/jsx-runtime";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { shared } from "./shared.js";
+const baseRemarkPlugins = [remarkGfm];
+const baseRehypePlugins = [rehypeHighlight];
+const { recmaPlugins, rehypePlugins, remarkPlugins, remarkRehypeOptions } = shared.mdxConfig;
+const makeList = (included, userDefinedPlugins) => {
+  const Plugins = included;
+  if (userDefinedPlugins) {
+    for (const plugin of userDefinedPlugins) {
+      Plugins.push(plugin);
+    }
+  }
+  return Plugins;
+};
+async function renderMDX(content) {
+  const { default: MDXContent } = await evaluate(content, {
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    ...runtime,
+    remarkPlugins: makeList(baseRemarkPlugins, remarkPlugins),
+    rehypePlugins: makeList(baseRehypePlugins, rehypePlugins),
+    recmaPlugins,
+    remarkRehypeOptions
+  });
+  return renderToString(createElement(MDXContent));
+}
+var render_default = renderMDX;
+export {
+  render_default as default,
+  renderMDX
+};

package/dist/lib/shared.d.ts

@@ -0,0 +1,14 @@
+import type { MDXPluginOptions } from '../types.js';
+export declare const symbol: symbol;
+/**
+ * A shared object that is either retrieved from the global scope using a symbol or
+ * initialized as a new object with a `mdxConfig` property.
+ *
+ * @remarks
+ * The `@ts-ignore` comments are used to suppress TypeScript errors related to the use of
+ * the global scope and assignment within expressions. The `biome-ignore` comment is used
+ * to suppress linting errors for the same reason.
+ */
+export declare const shared: {
+    mdxConfig: MDXPluginOptions;
+};

package/dist/lib/shared.js

@@ -0,0 +1,13 @@
+const symbol = Symbol.for("@studiocms/mdx");
+const shared = (
+  // @ts-ignore
+  globalThis[symbol] || // @ts-ignore
+  // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
+  (globalThis[symbol] = {
+    mdxConfig: {}
+  })
+);
+export {
+  shared,
+  symbol
+};

package/dist/types.d.ts

@@ -0,0 +1,8 @@
+import type { EvaluateOptions } from '@mdx-js/mdx';
+import type { PluggableList } from 'unified';
+export interface MDXPluginOptions {
+    remarkPlugins?: PluggableList;
+    rehypePlugins?: PluggableList;
+    recmaPlugins?: PluggableList;
+    remarkRehypeOptions?: EvaluateOptions['remarkRehypeOptions'];
+}

package/dist/virtual.d.ts

@@ -0,0 +1,8 @@
+declare module 'studiocms:mdx/renderer' {
+	export const renderMDX: typeof import('./lib/render').renderMDX;
+	export default renderMDX;
+}
+
+declare module 'virtual:studiocms/plugins/renderers' {
+	export const studiocms_mdx: typeof import('./components/MDXRenderer.astro').default;
+}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@studiocms/mdx",
+  "version": "0.1.0-beta.13",
+  "description": "Add MDX Support to your StudioCMS project with ease!",
+  "author": {
+    "name": "Adam Matthiesen | Jacob Jenkins | Paul Valladares",
+    "url": "https://studiocms.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/withstudiocms/studiocms.git",
+    "directory": "packages/studiocms_mdx"
+  },
+  "contributors": [
+    "Adammatthiesen",
+    "jdtjenkins",
+    "dreyfus92",
+    "code.spirit"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "astro",
+    "astrocms",
+    "astrodb",
+    "astrostudio",
+    "astro-integration",
+    "astro-studio",
+    "astro-studiocms",
+    "cms",
+    "studiocms",
+    "withastro",
+    "plugin",
+    "studiocms-plugin"
+  ],
+  "homepage": "https://studiocms.dev",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.js"
+    },
+    "./v/types": {
+      "types": "./dist/virtual.d.ts",
+      "default": "./dist/virtual.d.js"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "@mdx-js/mdx": "^3.1.0",
+    "astro-integration-kit": "^0.18",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1",
+    "unified": "^11.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4"
+  },
+  "peerDependencies": {
+    "astro": "^5.5.0",
+    "vite": "^6.2.0",
+    "studiocms": "0.1.0-beta.13"
+  },
+  "scripts": {
+    "build": "build-scripts build 'src/**/*.ts'",
+    "dev": "build-scripts dev 'src/**/*.ts'"
+  }
+}