From 2f7f53b49b8ee06db25992e4bf9a2cc2409b6bc4 Mon Sep 17 00:00:00 2001 From: Petyo Ivanov Date: Sun, 13 Aug 2023 08:04:56 +0300 Subject: [PATCH] fix: add missing exports for plugins --- package.json | 15 ++++++++ scripts/generate-exports.js | 21 ++++++---- src/examples/directives.tsx | 77 +++++++++++++++++++++++++++++++++++-- src/index.ts | 11 +++++- src/plugins/image/index.ts | 3 +- 5 files changed, 114 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 105ef029..440ebb8a 100644 --- a/package.json +++ b/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", diff --git a/scripts/generate-exports.js b/scripts/generate-exports.js index 2dd75f50..ac4e32e5 100644 --- a/scripts/generate-exports.js +++ b/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', diff --git a/src/examples/directives.tsx b/src/examples/directives.tsx index b3232f1d..6398ab86 100644 --- a/src/examples/directives.tsx +++ b/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 = () => { { return @@ -200,3 +214,58 @@ Copyright (c) 2023 Author. All Rights Reserved. /> ) } + +const MdastImageDirectiveVisitor: MdastImportVisitor = { + 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 = { + 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 +} diff --git a/src/index.ts b/src/index.ts index d6a7eba5..5fa82393 100644 --- a/src/index.ts +++ b/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' diff --git a/src/plugins/image/index.ts b/src/plugins/image/index.ts index 924181ba..2e1e6ca5 100644 --- a/src/plugins/image/index.ts +++ b/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 }]) => {