fix: add missing exports for plugins

package.json

@@ -181,11 +181,26 @@
     },
     "./package.json": "./package.json",
     "./style.css": "./dist/style.css",
+    "./gurx": {
+      "types": "./dist/gurx/index.d.ts",
+      "import": "./dist/gurx/index.js",
+      "default": "./dist/gurx/index.js"
+    },
     "./MDXEditor": {
       "types": "./dist/MDXEditor.d.ts",
       "import": "./dist/MDXEditor.js",
       "default": "./dist/MDXEditor.js"
     },
+    "./importMarkdownToLexical": {
+      "types": "./dist/importMarkdownToLexical.d.ts",
+      "import": "./dist/importMarkdownToLexical.js",
+      "default": "./dist/importMarkdownToLexical.js"
+    },
+    "./exportMarkdownFromLexical": {
+      "types": "./dist/exportMarkdownFromLexical.d.ts",
+      "import": "./dist/exportMarkdownFromLexical.js",
+      "default": "./dist/exportMarkdownFromLexical.js"
+    },
     "./directive-editors/AdmonitionDirectiveDescriptor": {
       "types": "./dist/directive-editors/AdmonitionDirectiveDescriptor.d.ts",
       "import": "./dist/directive-editors/AdmonitionDirectiveDescriptor.js",

scripts/generate-exports.js

@@ -4,17 +4,24 @@ import path from 'node:path'
 const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf-8'))
 
 const newExports = {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./package.json": "./package.json",
-    "./style.css": "./dist/style.css",
+  ".": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js",
+    "default": "./dist/index.js"
+  },
+  "./package.json": "./package.json",
+  "./style.css": "./dist/style.css",
+  "./gurx": {
+    types: `./dist/gurx/index.d.ts`,
+    import: `./dist/gurx/index.js`,
+    default: `./dist/gurx/index.js`
+  }
 }
 
 const additionalExports = [
   'MDXEditor',
+  'importMarkdownToLexical',
+  'exportMarkdownFromLexical',
   'directive-editors/AdmonitionDirectiveDescriptor',
   'directive-editors/GenericDirectiveEditor',
   'jsx-editors/GenericJsxEditor',

src/examples/directives.tsx

@@ -15,12 +15,26 @@ import {
   listsPlugin,
   markdownShortcutPlugin,
   quotePlugin,
-  toolbarPlugin
+  toolbarPlugin,
+  realmPlugin,
+  system,
+  coreSystem,
+  CreateImageNodeOptions,
+  $createImageNode,
+  imagePlugin,
+  MdastImportVisitor,
+  ImageNode,
+  LexicalExportVisitor,
+  $isImageNode
 } from '../'
-import { YoutubeDirectiveDescriptor } from './_boilerplate'
+
+import * as Mdast from 'mdast'
 
 import admonitionMarkdown from './assets/admonition.md?raw'
-import { ContainerDirective, LeafDirective } from 'mdast-util-directive'
+import { ContainerDirective, Directive, LeafDirective, directiveFromMarkdown, directiveToMarkdown } from 'mdast-util-directive'
+import { directive } from 'micromark-extension-directive'
+import { $createParagraphNode, $createTextNode, ElementNode, RootNode } from 'lexical'
+import { TextDirective } from 'mdast-util-directive/lib'
 
 const youtubeMarkdown = `
 This should be an youtube video:
@@ -70,7 +84,7 @@ export const Youtube: React.FC = () => {
     <MDXEditor
       markdown={youtubeMarkdown}
       plugins={[
-        directivesPlugin({ directiveDescriptors: [YoutubeDirectiveDescriptor] }),
+        directivesPlugin({ directiveDescriptors: [] }),
         toolbarPlugin({
           toolbarContents: () => {
             return <YouTubeButton />
@@ -200,3 +214,58 @@ Copyright (c) 2023 Author. All Rights Reserved.
     />
   )
 }
+
+const MdastImageDirectiveVisitor: MdastImportVisitor<TextDirective> = {
+  testNode: (mdastNode) => {
+    return mdastNode.type === 'textDirective' && mdastNode.name === 'img'
+  },
+
+  visitNode({ mdastNode, lexicalParent }) {
+    const payload: CreateImageNodeOptions = {
+      src: mdastNode.attributes?.src ?? '',
+      altText: (mdastNode.children[0] as Mdast.Text).value
+    }
+    ;(lexicalParent as ElementNode).append($createImageNode(payload))
+  }
+}
+
+const LexicalImageNodeVisitor: LexicalExportVisitor<ImageNode, Directive> = {
+  testLexicalNode: $isImageNode,
+  visitLexicalNode({ lexicalNode, mdastParent, actions }) {
+    const mdastNode: TextDirective = {
+      type: 'textDirective',
+      name: 'img',
+      attributes: {
+        src: lexicalNode.getSrc()
+      },
+      children: [{ type: 'text', value: lexicalNode.getAltText() }]
+    }
+    actions.appendToParent(mdastParent, mdastNode)
+  }
+}
+
+const [imageAsDirectivePlugin] = realmPlugin({
+  id: 'imageAsDirective',
+  systemSpec: system(() => ({}), [coreSystem]),
+  init: (realm) => {
+    realm.pubKey('addMdastExtension', directiveFromMarkdown)
+    realm.pubKey('addSyntaxExtension', directive())
+    realm.pubKey('addImportVisitor', MdastImageDirectiveVisitor)
+    realm.pubKey('addExportVisitor', LexicalImageNodeVisitor)
+    realm.pubKey('addToMarkdownExtension', directiveToMarkdown)
+  }
+})
+
+const imageDirectiveMarkdown = `
+Content
+
+inline images =  :img[alt text]{src="https://via.placeholder.com/150"} :img[alt text]{src="https://via.placeholder.com/150"} :img[alt text]{src="https://via.placeholder.com/150"}
+
+:img[alt text]{src="https://via.placeholder.com/150"}
+
+more
+`
+
+export const ImageAsDirective: React.FC = () => {
+  return <MDXEditor onChange={console.log} markdown={imageDirectiveMarkdown} plugins={[imageAsDirectivePlugin(), imagePlugin()]} />
+}

src/index.ts

@@ -4,9 +4,16 @@
  */
 import './styles/globals.css'
 
-// editor copmonent
+// editor component
 export * from './MDXEditor'
 
+// import/export
+export * from './importMarkdownToLexical'
+export * from './exportMarkdownFromLexical'
+
+// core so that you can build your own plugins
+export * from './plugins/core'
+
 // basics
 export * from './plugins/headings'
 export * from './plugins/thematic-break'
@@ -68,3 +75,5 @@ export * from './plugins/toolbar/primitives/select'
 // Build your own editor
 export * from './plugins/core/NestedLexicalEditor'
 export * from './plugins/core/PropertyPopover'
+
+export * from './gurx'

src/plugins/image/index.ts

@@ -24,9 +24,10 @@ import { coreSystem } from '../core'
 import { $createImageNode, $isImageNode, CreateImageNodeOptions, ImageNode } from './ImageNode'
 import { LexicalImageVisitor } from './LexicalImageVisitor'
 import { MdastHtmlImageVisitor, MdastImageVisitor, MdastJsxImageVisitor } from './MdastImageVisitor'
-
 import { CAN_USE_DOM } from '../../utils/detectMac'
 
+export * from './ImageNode'
+
 /** @internal */
 export const imageSystem = system(
   (r, [{ rootEditor }]) => {