https://github.com/novartis/mdx-utils
https://github.com/novartis/mdx-utils
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/novartis/mdx-utils
- Owner: Novartis
- Created: 2020-05-11T13:26:22.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T06:47:17.000Z (over 3 years ago)
- Last Synced: 2024-04-16T11:10:09.693Z (about 2 years ago)
- Language: TypeScript
- Size: 4.5 MB
- Stars: 10
- Watchers: 2
- Forks: 6
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mdx-utils
## What's in this package?
This package contains utilities for working with MDX syntax.
Many of its utilities are only available as ES Modules, so you'll need to ensure your build step is configured to handle `import` statements.
### parseMdx
Parses an MDX document and its frontmatter into an AST.
```js
import parseMdx from '@novartis/mdx-utils/dist-src/parse/parseMdx';
console.log(
parseMdx(
`
---
title: Hello world!
---
This is an MDX document.
`.trim()
)
);
```
### createSchema
Create 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.
```js
import createSchema from '@novartis/mdx-utils/dist-src/prosemirror/createSchema';
const mySchema = createSchema({
nodes: {
my_custom_component: {
atom: true,
attrs: {
count: {},
},
toDOM() {
return ['div', { class: 'my_custom_component' }];
},
},
},
marks: {},
});
```
### createMdxConverter
Creates 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.
```js
import createMdxConverter from '@novartis/mdx-utils/dist-src/parse/mdxAstToPm';
import parseMdx from '@novartis/mdx-utils/dist-src/parse/parseMdx';
/** Custom callback that turns JSX into custom nodes. */
function jsxToNode(node) {
if (node.value.startsWith('` component.
```js
const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
const { frontmatterToMeta } = require('@novartis/mdx-utils');
module.exports = {
// 1. register the docs panel (as opposed to '@storybook/addon-docs' which
// will configure everything with a preset)
addons: ['@storybook/addon-docs/register'],
// 2. manually configure webpack, since you're not using the preset
webpackFinal: async (config) => {
config.module.rules.push({
// 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
// the docs page from the markdown
test: /\.(stories|story)\.mdx$/,
use: [
{
loader: 'babel-loader',
// may or may not need this line depending on your app's setup
options: {
plugins: ['@babel/plugin-transform-react-jsx'],
},
},
{
loader: '@mdx-js/loader',
options: {
remarkPlugins: [frontmatterToMeta],
compilers: [createCompiler({})],
},
},
],
});
// 2b. Run `source-loader` on story files to show their source code
// automatically in `DocsPage` or the `Source` doc block.
config.module.rules.push({
test: /\.(stories|story)\.[tj]sx?$/,
loader: require.resolve('@storybook/source-loader'),
exclude: [/node_modules/],
enforce: 'pre',
});
return config;
},
};
```
###