diff --git a/src/examples/assets/jsx.md b/src/examples/assets/jsx.md index 5f988f9..639ad83 100644 --- a/src/examples/assets/jsx.md +++ b/src/examples/assets/jsx.md @@ -11,3 +11,7 @@ more Content something more. What + +Some content + + diff --git a/src/importMarkdownToLexical.ts b/src/importMarkdownToLexical.ts index c3f0496..03c3f12 100644 --- a/src/importMarkdownToLexical.ts +++ b/src/importMarkdownToLexical.ts @@ -30,9 +30,9 @@ export interface MdastImportVisitor { /** * The test function that determines if this visitor should be used for the given node. * As a convenience, you can also pass a string here, which will be compared to the node's type. - * @param options - the registered descriptors for composite nodes (jsx, directives, code blocks). + * @param descriptors - the registered descriptors for composite nodes (jsx, directives, code blocks). */ - testNode: ((mdastNode: Mdast.Nodes, options: Descriptors) => boolean) | string + testNode: ((mdastNode: Mdast.Nodes, descriptors: Descriptors) => boolean) | string visitNode(params: { /** * The node that is currently being visited. @@ -46,6 +46,10 @@ export interface MdastImportVisitor { * The parent lexical node to which the results of the processing should be added. */ lexicalParent: LexicalNode + /** + * The descriptors for composite nodes (jsx, directives, code blocks). + */ + descriptors: Descriptors /** * A set of convenience utilities that can be used to add nodes to the lexical tree. */ @@ -219,6 +223,7 @@ export function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descrip mdastNode, lexicalParent, mdastParent, + descriptors, actions: { visitChildren, addAndStepInto(lexicalNode) { diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts index 85ce3be..1604b72 100644 --- a/src/plugins/core/index.ts +++ b/src/plugins/core/index.ts @@ -9,7 +9,6 @@ import { $getRoot, $getSelection, $insertNodes, - $isDecoratorNode, $isRangeSelection, $isRootOrShadowRoot, $setSelection, @@ -20,7 +19,6 @@ import { ElementNode, FOCUS_COMMAND, FORMAT_TEXT_COMMAND, - KEY_DOWN_COMMAND, Klass, LexicalEditor, LexicalNode, @@ -50,7 +48,6 @@ import { UnrecognizedMarkdownConstructError, importMarkdownToLexical } from '../../importMarkdownToLexical' -import { controlOrMeta } from '../../utils/detectMac' import { noop } from '../../utils/fp' import type { JsxComponentDescriptor } from '../jsx' import { GenericHTMLNode } from './GenericHTMLNode' diff --git a/src/plugins/frontmatter/index.ts b/src/plugins/frontmatter/index.ts index 1ad2319..8cef266 100644 --- a/src/plugins/frontmatter/index.ts +++ b/src/plugins/frontmatter/index.ts @@ -15,7 +15,6 @@ import { $getSelection, $isRangeSelection, $isTextNode, - $setSelection, COMMAND_PRIORITY_CRITICAL, ElementNode, KEY_DOWN_COMMAND, diff --git a/src/plugins/jsx/MdastMdxJsxElementVisitor.ts b/src/plugins/jsx/MdastMdxJsxElementVisitor.ts index 21a34c0..76c2b58 100644 --- a/src/plugins/jsx/MdastMdxJsxElementVisitor.ts +++ b/src/plugins/jsx/MdastMdxJsxElementVisitor.ts @@ -1,9 +1,10 @@ -import { ElementNode } from 'lexical' +import { $createParagraphNode, ElementNode, RootNode } from 'lexical' import { MdxJsxTextElement } from 'mdast-util-mdx' import { $createLexicalJsxNode } from './LexicalJsxNode' import { MdastImportVisitor } from '../../importMarkdownToLexical' +import { MdxJsxFlowElement } from 'mdast-util-mdx-jsx/lib' -export const MdastMdxJsxElementVisitor: MdastImportVisitor = { +export const MdastMdxJsxElementVisitor: MdastImportVisitor = { testNode: (node, { jsxComponentDescriptors }) => { if (node.type === 'mdxJsxTextElement' || node.type === 'mdxJsxFlowElement') { const descriptor = @@ -13,8 +14,20 @@ export const MdastMdxJsxElementVisitor: MdastImportVisitor = } return false }, - visitNode({ lexicalParent, mdastNode }) { - ;(lexicalParent as ElementNode).append($createLexicalJsxNode(mdastNode)) + visitNode({ lexicalParent, mdastNode, descriptors: { jsxComponentDescriptors } }) { + const descriptor = + jsxComponentDescriptors.find((descriptor) => descriptor.name === mdastNode.name) ?? + jsxComponentDescriptors.find((descriptor) => descriptor.name === '*') + + // the parser does not know that the node should be treated as an inline element, but our descriptor does. + if (descriptor?.kind === 'text' && mdastNode.type === 'mdxJsxFlowElement') { + const patchedNode = { ...mdastNode, type: 'mdxJsxTextElement' } as MdxJsxTextElement + const paragraph = $createParagraphNode() + paragraph.append($createLexicalJsxNode(patchedNode)) + ;(lexicalParent as RootNode).append(paragraph) + } else { + ;(lexicalParent as ElementNode).append($createLexicalJsxNode(mdastNode)) + } }, priority: -200 }