{"id":29625202,"url":"https://github.com/novartis/mdx-utils","last_synced_at":"2025-07-21T06:07:37.695Z","repository":{"id":40286054,"uuid":"263050030","full_name":"Novartis/mdx-utils","owner":"Novartis","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-06T06:47:17.000Z","size":4722,"stargazers_count":10,"open_issues_count":23,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-16T11:10:09.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Novartis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-11T13:26:22.000Z","updated_at":"2023-05-26T06:51:53.000Z","dependencies_parsed_at":"2023-02-05T13:45:26.260Z","dependency_job_id":null,"html_url":"https://github.com/Novartis/mdx-utils","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Novartis/mdx-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novartis%2Fmdx-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novartis%2Fmdx-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novartis%2Fmdx-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novartis%2Fmdx-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novartis","download_url":"https://codeload.github.com/Novartis/mdx-utils/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novartis%2Fmdx-utils/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266248501,"owners_count":23899056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-21T06:07:37.103Z","updated_at":"2025-07-21T06:07:37.684Z","avatar_url":"https://github.com/Novartis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mdx-utils\n\n## What's in this package?\n\nThis package contains utilities for working with MDX syntax.\n\nMany of its utilities are only available as ES Modules, so you'll need to ensure your build step is configured to handle `import` statements.\n\n### parseMdx\n\nParses an MDX document and its frontmatter into an AST.\n\n```js\nimport parseMdx from '@novartis/mdx-utils/dist-src/parse/parseMdx';\n\nconsole.log(\n  parseMdx(\n    `\n---\ntitle: Hello world!\n---\n\nThis is an MDX document.\n\n\u003cMyCustomComponent /\u003e\n`.trim()\n  )\n);\n```\n\n### createSchema\n\nCreate a custom [Prosemirror](https://prosemirror.net/) schema. This extends the Prosemirror Markdown schema with your custom elements, allowing its AST to represent your MDX document.\n\n```js\nimport createSchema from '@novartis/mdx-utils/dist-src/prosemirror/createSchema';\n\nconst mySchema = createSchema({\n  nodes: {\n    my_custom_component: {\n      atom: true,\n      attrs: {\n        count: {},\n      },\n      toDOM() {\n        return ['div', { class: 'my_custom_component' }];\n      },\n    },\n  },\n  marks: {},\n});\n```\n\n### createMdxConverter\n\nCreates a utility function that transforms an MDX syntax tree into a [Prosemirror](https://prosemirror.net/) syntax tree. This way, you can load it into a Prosemirror editor and allow rich-text editing with your custom components.\n\n```js\nimport createMdxConverter from '@novartis/mdx-utils/dist-src/parse/mdxAstToPm';\nimport parseMdx from '@novartis/mdx-utils/dist-src/parse/parseMdx';\n\n/** Custom callback that turns JSX into custom nodes. */\nfunction jsxToNode(node) {\n  if (node.value.startsWith('\u003cMyCustomComponent')) {\n    // In a real implementation, you would use Babel or another real parser to extract information.\n    return schema.nodes.my_custom_component.create({ count: 1 });\n  }\n  return null;\n}\n\nconst mdxAstToPm = createMdxConverter(schema, { jsxToNode });\n\nfunction parseMdx(source) {\n  const ast = parseMdx(source);\n  return mdxAstToPm(ast);\n}\n```\n\n### createMdxSerializer\n\nCreate a class that allows you to serialize a Prosemirror MDX document.\n\n```js\nimport createMdxSerializer from '@novartis/mdx-utils/dist-src/serialize/createMdxSerializer';\n\n// Minimal example; in a real application you would add your custom nodes here\nconst serializer = createMdxSerializer({ nodes: {}, marks: {} });\n\nconsole.log(serializer.serialize(myPmDocument));\n```\n\n### frontmatterToMeta\n\nAllows [Storybook](https://storybook.js.org/) MDX stories to be written using YAML frontmatter instead of importing the `\u003cMeta/\u003e` component.\n\n```js\nconst createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');\nconst { frontmatterToMeta } = require('@novartis/mdx-utils');\n\nmodule.exports = {\n  // 1. register the docs panel (as opposed to '@storybook/addon-docs' which\n  //    will configure everything with a preset)\n  addons: ['@storybook/addon-docs/register'],\n  // 2. manually configure webpack, since you're not using the preset\n  webpackFinal: async (config) =\u003e {\n    config.module.rules.push({\n      // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate\n      //     the docs page from the markdown\n      test: /\\.(stories|story)\\.mdx$/,\n      use: [\n        {\n          loader: 'babel-loader',\n          // may or may not need this line depending on your app's setup\n          options: {\n            plugins: ['@babel/plugin-transform-react-jsx'],\n          },\n        },\n        {\n          loader: '@mdx-js/loader',\n          options: {\n            remarkPlugins: [frontmatterToMeta],\n            compilers: [createCompiler({})],\n          },\n        },\n      ],\n    });\n    // 2b. Run `source-loader` on story files to show their source code\n    //     automatically in `DocsPage` or the `Source` doc block.\n    config.module.rules.push({\n      test: /\\.(stories|story)\\.[tj]sx?$/,\n      loader: require.resolve('@storybook/source-loader'),\n      exclude: [/node_modules/],\n      enforce: 'pre',\n    });\n    return config;\n  },\n};\n```\n\n###\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovartis%2Fmdx-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovartis%2Fmdx-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovartis%2Fmdx-utils/lists"}