@studiocms/markdoc 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,55 @@
+# @StudioCMS/MarkDoc Plugin
+
+Add MarkDoc support to StudioCMS
+
+## Usage
+
+Add this plugin in your StudioCMS config. (`studiocms.config.mjs`)
+
+```ts
+import { defineStudioCMSConfig } from 'studiocms/config';
+import markdocPlugin from '@studiocms/markdoc';
+
+export default defineStudioCMSConfig({
+    // other options here
+    plugins: [markdocPlugin()]
+});
+```
+
+## Options
+
+### type
+**Type:** `'html'` | `'react-static'` | [`MarkDocRenderer`](#markdocrenderer)
+**Default:** `'html'`
+
+Set the type of MarkDoc rendering that you would like to do.
+
+### argParse
+**Type:** `ParserArgs` | `undefined`
+
+Optional Parser args for MarkDoc
+
+### transformConfig
+**Type:** `ConfigType` | `undefined`
+
+Optional Transform config for MarkDoc
+
+#### MarkDocRenderer
+**Type:** `{ name: string; render: (content: import('@markdoc/markdoc').RenderableTreeNode) => Promise<string>; }`
+
+Example Renderer
+```ts
+import type { RenderableTreeNode } from '@markdoc/markdoc';
+import type { MarkDocRenderer } from '@studiocms/markdoc/types';
+
+export const renderHTML: MarkDocRenderer = {
+	name: 'html',
+	render: async (content: RenderableTreeNode) => {
+		return Markdoc.renderers.html(content);
+	},
+};
+```
+
+## License
+
+[MIT Licensed](./LICENSE).

package/dist/components/MarkDocRenderer.astro

@@ -0,0 +1,15 @@
+---
+import renderMarkDoc from 'studiocms:markdoc/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 renderMarkDoc(contentToRender);
+---
+<Fragment set:html={renderedContent} />

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { MarkDocPluginOptions } from './types.js';
+export declare function studiocmsMarkDoc(options?: MarkDocPluginOptions): StudioCMSPlugin;
+export default studiocmsMarkDoc;

package/dist/index.js

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

package/dist/lib/render.d.ts

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

package/dist/lib/render.js

@@ -0,0 +1,45 @@
+import Markdoc from "@markdoc/markdoc";
+import { shared } from "./shared.js";
+const { argParse, transformConfig, type } = shared.markDocConfig;
+const renderHTML = {
+  name: "html",
+  render: async (content) => {
+    return Markdoc.renderers.html(content);
+  }
+};
+const renderReactStatic = {
+  name: "react-static",
+  render: async (content) => {
+    return Markdoc.renderers.reactStatic(content);
+  }
+};
+async function renderMarkDoc(content) {
+  const ast = Markdoc.parse(content, argParse);
+  const MarkDocContent = Markdoc.transform(ast, transformConfig);
+  switch (type) {
+    case "html": {
+      const data = await renderHTML.render(MarkDocContent);
+      return data;
+    }
+    case "react-static": {
+      const data = await renderReactStatic.render(MarkDocContent);
+      return data;
+    }
+    default: {
+      if (!type) {
+        throw new Error("Error in MarkDoc config, renderer not found.");
+      }
+      try {
+        const data = await type.render(MarkDocContent);
+        return data;
+      } catch {
+        throw new Error(`Error in MarkDoc renderer, Unable to render with ${type.name}`);
+      }
+    }
+  }
+}
+var render_default = renderMarkDoc;
+export {
+  render_default as default,
+  renderMarkDoc
+};

package/dist/lib/shared.d.ts

@@ -0,0 +1,14 @@
+import type { MarkDocPluginOptions } 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 `markDocConfig` 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: {
+    markDocConfig: MarkDocPluginOptions;
+};

package/dist/lib/shared.js

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

package/dist/react-renderer/MarkDocReactRenderer.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+/**
+ * React component for rendering generated MarkDoc React content within StudioCMS using the Astro Container API
+ */
+export declare function MarkDocReactRenderer({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export default MarkDocReactRenderer;

package/dist/react-renderer/MarkDocReactRenderer.tsx

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+/**
+ * React component for rendering generated MarkDoc React content within StudioCMS using the Astro Container API
+ */
+export function MarkDocReactRenderer({ children }: { children: React.ReactNode }) {
+	return <>{children}</>;
+}
+
+export default MarkDocReactRenderer;

package/dist/react-renderer/ReactWrapper.astro

@@ -0,0 +1,13 @@
+---
+import React from 'react';
+import { MarkDocReactRenderer } from './MarkDocReactRenderer.jsx';
+
+interface Props {
+	content: React.ReactNode;
+}
+
+const { content } = Astro.props;
+---
+<MarkDocReactRenderer client:load>
+	{content}
+</MarkDocReactRenderer>

package/dist/react-renderer/renderReact.d.ts

@@ -0,0 +1,10 @@
+import type { MarkDocRenderer } from '../types.js';
+/**
+ * MarkDoc React Components
+ *
+ * The React components to use for rendering the content
+ *
+ * @type {Object} - The React components to use for rendering the content
+ */
+export type markdocReactComponents = {} | undefined;
+export declare const renderReact: (components?: markdocReactComponents) => MarkDocRenderer;

package/dist/react-renderer/renderReact.js

@@ -0,0 +1,30 @@
+import reactRenderer from "@astrojs/react/server.js";
+import Markdoc from "@markdoc/markdoc";
+import { experimental_AstroContainer } from "astro/container";
+import * as React from "react";
+import ReactWrapper from "./ReactWrapper.astro";
+const renderReact = (components) => ({
+  name: "react",
+  render: async (content) => {
+    const container = await experimental_AstroContainer.create();
+    container.addServerRenderer({
+      name: "@astrojs/react",
+      renderer: reactRenderer
+    });
+    container.addClientRenderer({
+      name: "@astrojs/react",
+      entrypoint: "@astrojs/react/client.js"
+    });
+    const renderedContent = await container.renderToString(ReactWrapper, {
+      props: {
+        content: Markdoc.renderers.react(content, React, {
+          components
+        })
+      }
+    });
+    return renderedContent;
+  }
+});
+export {
+  renderReact
+};

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+import type { ConfigType, ParserArgs, RenderableTreeNode } from '@markdoc/markdoc';
+export interface MarkDocRenderer {
+    name: string;
+    render: (content: RenderableTreeNode) => Promise<string>;
+}
+export interface MarkDocPluginOptions {
+    type?: 'html' | 'react-static' | MarkDocRenderer;
+    argParse?: ParserArgs | undefined;
+    transformConfig?: ConfigType | undefined;
+}

package/dist/virtual.d.ts

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

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@studiocms/markdoc",
+  "version": "0.1.0-beta.13",
+  "description": "Add MarkDoc 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_markdoc"
+  },
+  "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"
+    },
+    "./react": {
+      "types": "./dist/react-renderer/renderReact.d.ts",
+      "default": "./dist/react-renderer/renderReact.js"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "@markdoc/markdoc": "^0.5.1",
+    "astro-integration-kit": "^0.18",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4"
+  },
+  "peerDependencies": {
+    "@astrojs/react": "^4.2.1",
+    "astro": "^5.5.0",
+    "vite": "^6.2.0",
+    "studiocms": "0.1.0-beta.13"
+  },
+  "peerDependenciesMeta": {
+    "@astrojs/react": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "build-scripts build 'src/**/*.ts'",
+    "dev": "build-scripts dev 'src/**/*.ts'"
+  }
+}