{"_id":"@bojidar-bg/tina-mdx-editor","_rev":"2-a28519ba083d35c55982543f735ff345","name":"@bojidar-bg/tina-mdx-editor","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@bojidar-bg/tina-mdx-editor","version":"0.1.0","keywords":["tinacms","mdx","markdown"],"author":{"name":"Bojidar Marinov","email":"bojidar.marinov.bg@gmail.com"},"license":"Apache-2.0","_id":"@bojidar-bg/tina-mdx-editor@0.1.0","maintainers":[{"name":"bojidar-bg","email":"bojidar.marinov.bg@gmail.com"}],"dist":{"shasum":"789e9b549914d11228bc256b65c62620e918c9a4","tarball":"https://registry.npmjs.org/@bojidar-bg/tina-mdx-editor/-/tina-mdx-editor-0.1.0.tgz","fileCount":10,"integrity":"sha512-AtNbZmQlQq2RvQfcchRrDfoNJ79DM8MUWF+nMPBSkd/CWb16NG8FL3CzY0yNNejLGwAt/85FP1Y3fLg8ozOSAA==","signatures":[{"sig":"MEYCIQCgmy9AV0lECj2xpnR1ap3TRbrDTHC98EOyrza7NzhU7QIhAPufre1kCawfCviz4PQQsX6Y2uF+grVqjYWj5JHHgCln","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18596},"main":"dist/dummy.js","_from":"file:bojidar-bg-tina-mdx-editor-0.1.0.tgz","types":"dist/index.d.ts","browser":"dist/index.js","scripts":{},"_npmUser":{"name":"bojidar-bg","email":"bojidar.marinov.bg@gmail.com"},"_resolved":"/tmp/c4b1a4a7dede010ca68f5abc740a2120/bojidar-bg-tina-mdx-editor-0.1.0.tgz","_integrity":"sha512-AtNbZmQlQq2RvQfcchRrDfoNJ79DM8MUWF+nMPBSkd/CWb16NG8FL3CzY0yNNejLGwAt/85FP1Y3fLg8ozOSAA==","_npmVersion":"10.9.2","description":"An alternative markdown editor for TinaCMS built on top of MDXEditor","directories":{},"_nodeVersion":"22.17.0","dependencies":{"react":"^18.3.1","tinacms":"^2.8.1","@mdxeditor/editor":"^3.47.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/react":"^19.2.2"},"_npmOperationalInternal":{"tmp":"tmp/tina-mdx-editor_0.1.0_1760720262534_0.15855063032483319","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@bojidar-bg/tina-mdx-editor","version":"0.1.1","description":"An alternative markdown editor for TinaCMS built on top of MDXEditor","author":{"name":"Bojidar Marinov","email":"bojidar.marinov.bg@gmail.com"},"license":"Apache-2.0","main":"dist/dummy.js","browser":"dist/index.js","types":"dist/index.d.ts","keywords":["tinacms","mdx","markdown"],"dependencies":{"@mdxeditor/editor":"^3.47.0","react":"^18.3.1","tinacms":"^2.8.1"},"devDependencies":{"@types/react":"^19.2.2"},"scripts":{},"_id":"@bojidar-bg/tina-mdx-editor@0.1.1","_integrity":"sha512-n/8qAB6n0d7inVoFPz2+ncipF4iUB+uXqaUFGS3UcRx4CDJ/K67kxl8YiZhuJZaA1Y4r6YxvDNcDjYBauAcJJA==","_resolved":"/tmp/cf42dbfe6051fb86e0a56b1dc6732890/bojidar-bg-tina-mdx-editor-0.1.1.tgz","_from":"file:bojidar-bg-tina-mdx-editor-0.1.1.tgz","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-n/8qAB6n0d7inVoFPz2+ncipF4iUB+uXqaUFGS3UcRx4CDJ/K67kxl8YiZhuJZaA1Y4r6YxvDNcDjYBauAcJJA==","shasum":"acfd706b231115ff0534094bbb3c2e25dbaf6528","tarball":"https://registry.npmjs.org/@bojidar-bg/tina-mdx-editor/-/tina-mdx-editor-0.1.1.tgz","fileCount":10,"unpackedSize":19810,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGEbJswoKY1Q3g1VPeVrexUtRiiWSAIcKIqw5o77qjhOAiAhYUm1soJ5xcPoNFzT9LyyAewHUH44YKTubh1eLASxcw=="}]},"_npmUser":{"name":"bojidar-bg","email":"bojidar.marinov.bg@gmail.com"},"directories":{},"maintainers":[{"name":"bojidar-bg","email":"bojidar.marinov.bg@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tina-mdx-editor_0.1.1_1761140205594_0.462567181071623"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-17T16:57:42.437Z","modified":"2025-10-22T13:36:45.972Z","0.1.0":"2025-10-17T16:57:42.733Z","0.1.1":"2025-10-22T13:36:45.810Z"},"author":{"name":"Bojidar Marinov","email":"bojidar.marinov.bg@gmail.com"},"license":"Apache-2.0","keywords":["tinacms","mdx","markdown"],"description":"An alternative markdown editor for TinaCMS built on top of MDXEditor","maintainers":[{"name":"bojidar-bg","email":"bojidar.marinov.bg@gmail.com"}],"readme":"# MDXEditor for TinaCMS\n\nDo you want a better Markdown editor for your TinaCMS-powered site? Perhaps one which allows for resizing images? And looking at differences from the previous version of the article? And harnesses all the other amazing features of [MDXEditor](https://mdxeditor.dev/)?\n\nWell, you are in the right place!\n\n## Usage\n\nTo use this editor in your [TinaCMS schema](https://tina.io/docs/reference/fields), you can import it in your `tina/config.ts` file and use it like so:\n\n```ts\nimport { defineConfig, wrapFieldsWithMeta } from \"tinacms\";\nimport { MDXEditorField, MDXEditorFieldProps } from \"@bojidar-bg/tina-mdx-editor\";\n\nexport default defineConfig({\n  // ... Other config options\n  schema: {\n    collections: [\n      // ... Other collections\n      {\n        // ... Collection config\n        fields: [\n          // ... Other fields\n          {\n            type: \"string\",\n            name: \"body\",\n            label: \"Body\",\n            isBody: true,\n            ui: {\n              component: wrapFieldsWithMeta(MDXEditorField)\n            }\n          },\n        ],\n      },\n    ],\n  },\n});\n```\n\n### Customizing\n\nThe `MDXEditorField` comes with a default set of MDXEditor plugins and toolbar elements configured. You should be able to customize those as follows:\n\n```tsx\n// custom.tsx\nimport { BlockTypeSelect, BoldItalicUnderlineToggles, CreateLink, DiffSourceToggleWrapper, InsertThematicBreak, ListsToggle, UndoRedo, diffSourcePlugin, headingsPlugin, imagePlugin, linkDialogPlugin, linkPlugin, listsPlugin, quotePlugin, thematicBreakPlugin, toolbarPlugin } from '@mdxeditor/editor';\nimport { MDXEditorField, MDXEditorFieldProps, InsertTinaImage } from \"@bojidar-bg/tina-mdx-editor\";\n\nexport const CustomMDXEditorField = (props: MDXEditorFieldProps) => {\n  return <MDXEditorField \n    {...props}\n    // You can override just the toolbar contents...\n    toolbarContents={() => <>\n      <UndoRedo />\n      <DiffSourceToggleWrapper>\n        <BlockTypeSelect />\n        <BoldItalicUnderlineToggles />\n        <CreateLink />\n        <InsertTinaImage />\n        <ListsToggle options={['bullet', 'number']} />\n        <InsertThematicBreak />\n      </DiffSourceToggleWrapper>\n    </>}\n    // ...or the whole plugins array\n    plugins={({meta, toolbarContents}) => [\n      headingsPlugin(),\n      quotePlugin(),\n      listsPlugin(),\n      thematicBreakPlugin(),\n      toolbarPlugin({toolbarContents}),\n      linkPlugin(),\n      linkDialogPlugin(),\n      imagePlugin({\n        imageUploadHandler: null,\n        allowSetImageDimensions: true,\n      }),\n      diffSourcePlugin({\n        diffMarkdown: meta.initial\n      })\n    ]}\n  />;\n};\n\n// then, use CustomMDXEditorField instead of MDXEditorField in the example from before\n```\n\nIf you get a \"top-level await is not available in the configured target environment\" error related to importing `@mdxeditor/editor` from your Tina `config.ts`, you can work around it by:\n\n1. Creating a new folder\n2. Moving the `custom.tsx` file into that folders—this is the file that will be loaded by the browser.\n3. Creating an extra `dummy.tsx` file which will be loaded by Tina's esbuild. It can contain something like:\n```tsx\nimport { MDXEditorField } from \"@bojidar-bg/tina-mdx-editor\";\nexport const CustomMDXEditorField = MDXEditorField;\n```\n4. Creating a `package.json` file in the new folder, with the following content:\n```json\n{\n  \"main\": \"dummy.tsx\",\n  \"browser\": \"custom.tsx\"\n}\n```\n5. Finally, adjust your own `config.ts` to import the whole folder.\n\n## Credits\n\nThis package was initially created as part of [tina-true-selfhosted-example](https://github.com/bojidar-bg/tina-true-selfhosted-example).\n\n[`@mdxeditor/editor`](https://www.npmjs.com/package/@mdxeditor/editor) is awesome!\n","readmeFilename":"README.md"}