How should FlowElement be returned when defining custom JSX?

[terrinens]

https://mdxeditor.dev/editor/docs/jsx
I basically understood how to make custom jsx with reference to the .
But I don't know how to deal with Flow type.

Desc Codes

function GitMembers {...}

export const gitMemberComponentDescriptors: JsxComponentDescriptor = {
    name: 'GitMembers',
    kind: 'flow',
    source: '@_components/post/proj/GitMembers',
    props: [
        {name: 'orgName', type: 'string', required: true},
        {name: 'token', type: 'string', required: false}
    ],
    hasChildren: false,
    Editor: () => {
        return (
            <NestedLexicalEditor<MdxJsxFlowElement>
                getContent={(node) => node.children}
                getUpdatedMdastNode={(mdastNode, children: any) => {
                    return {...mdastNode, children}
                }}/>
        )
    }
}


export const InsertGitMember = () => {
    const insertJsx = usePublisher(insertJsx$)
    return (
        <Button
            onClick={() =>
                insertJsx({
                    name: 'GitMembers',
                    kind: 'flow',
                    props: {
                        orgName: null,
                        token: null,
                    }
                })
            }
        >
            GitMember
        </Button>
    )
}

How do I transfer the GitMembers function to the editor key value?

It works well if you simply deliver the required values.

But what I want is to modify the element using a modifiable button as in the example.

export const gitMemberComponentDescriptors: JsxComponentDescriptor = {
    name: 'GitMembers',
    kind: 'flow',
    source: '@_components/post/proj/GitMembers',
    props: [
        {name: 'orgName', type: 'string', required: true},
        {name: 'token', type: 'string', required: false}
    ],
    hasChildren: false,
    Editor: () => {
        return (
            <GitMembers orgName={'test'} token={'test'}/>
        )
    }
}

[petyosi]

I'm not sure I understand you correctly, but you're probably looking for the edit feature, see how the cogwheel menu is implemented in the generic JSX editor - https://github.com/mdx-editor/editor/blob/main/src/jsx-editors/GenericJsxEditor.tsx#L41-L96

[terrinens]

Thank you. After analyzing the sauce, I think I was thinking too complicatedly.
Most interpretations are done by GenericJsxEditor
I thought I had to hand over the variables one day. 🤣🤣

[terrinens]

#627 (comment)

This was the way I wanted it to work. :D
I lacked a lot of explanation.

[terrinens]

I'm leaving it for someone who is experiencing a similar problem to me.

After defining the jsx component, I wanted to get the result of rendering it in advance.
However, the existing GenericJsxEditor was only responsible for modifying the options and not addressing the rendering results.

So I opened the source code, and I was able to modify it like this to get the action I wanted.

source code

First, I modified the source code as follows.

Redefined from source code

import {
    MdxJsxAttribute,
    MdxJsxAttributeValueExpression,
    MdxJsxExpressionAttribute,
} from 'mdast-util-mdx-jsx'
import React from 'react'
import {
    JsxEditorProps,
    PropertyPopover,
    useMdastNodeUpdater
} from "@mdxeditor/editor";

const isExpressionValue = (value: string | MdxJsxAttributeValueExpression | null | undefined): value is MdxJsxAttributeValueExpression => {
    if (value !== null && typeof value === 'object' && 'type' in value && 'value' in value && typeof value.value === 'string') {
        return true
    }
    return false
}

const isStringValue = (value: string | MdxJsxAttributeValueExpression | null | undefined): value is string => typeof value === 'string'

const isMdxJsxAttribute = (value: MdxJsxAttribute | MdxJsxExpressionAttribute): value is MdxJsxAttribute => {
    if (value.type === 'mdxJsxAttribute' && typeof value.name === 'string') {
        return true
    }
    return false
}

const useMemoProperties = ({mdastNode, descriptor}: JsxEditorProps) => {
    return React.useMemo(
        () =>
            descriptor.props.reduce<Record<string, string>>((acc, {name}) => {
                const attribute = mdastNode.attributes.find((attr) => (isMdxJsxAttribute(attr) ? attr.name === name : false))

                if (attribute) {
                    if (isExpressionValue(attribute.value)) {
                        acc[name] = attribute.value.value
                        return acc
                    }

                    if (isStringValue(attribute.value)) {
                        acc[name] = attribute.value
                        return acc
                    }
                }

                acc[name] = ''
                return acc
            }, {}),
        [mdastNode, descriptor]
    )
}

const genJsxEditorOnChange = (
    {mdastNode, descriptor}: JsxEditorProps
) => {
    const updateMdastNode = useMdastNodeUpdater()
    return React.useCallback(
        (values: Record<string, string>) => {
            const updatedAttributes = Object.entries(values).reduce<typeof mdastNode.attributes>((acc, [name, value]) => {
                if (value === '') {
                    return acc
                }

                const property = descriptor.props.find((prop) => prop.name === name)

                if (property?.type === 'expression') {
                    acc.push({
                        type: 'mdxJsxAttribute',
                        name,
                        value: {type: 'mdxJsxAttributeValueExpression', value}
                    })
                    return acc
                }

                acc.push({
                    type: 'mdxJsxAttribute',
                    name,
                    value
                })

                return acc
            }, [])

            updateMdastNode({attributes: updatedAttributes})
        },
        [mdastNode, updateMdastNode, descriptor]
    )
}


export const CopyGenericJsxEditor = ({mdastNode, descriptor, TargetNode}: {
    TargetNode: React.ComponentType<any>;
} & JsxEditorProps) => {
    const properties = useMemoProperties({mdastNode, descriptor});
    const onChange = genJsxEditorOnChange({mdastNode, descriptor});
    const shouldRenderComponentName = descriptor.props.length == 0 && descriptor.hasChildren && descriptor.kind === 'flow'

    const element = (<TargetNode {...Object.fromEntries(
        Object.entries(properties).map(([key, value]) => [key, value])
    )} />)

    return (
        <div>
            {shouldRenderComponentName ? <span>{mdastNode.name ?? 'Fragment'}</span> : ''}

            {descriptor.props.length > 0 ?
                <PropertyPopover properties={properties} title={mdastNode.name ?? ''} onChange={onChange}/> : null}

            {descriptor.hasChildren
                ? element
                : (<span>{mdastNode.name}</span>)}
        </div>
    )
}

When you actually use it

export function DummyElement({orgName, token}: { orgName: string, token: string }) {
    return (
        <div className={'not-prose mb-5'}>
            <div className={'flex'}>
               {/*There is actually a code that generates something.*/}
            </div>
        </div>
    )
}

export const gitMemberComponentDescriptors: JsxComponentDescriptor = {
    name: 'GitMembers',
    kind: 'flow',
    source: '@_components/post/proj/GitMembers',
    props: [
        {name: 'orgName', type: 'string', required: true},
        {name: 'token', type: 'string', required: false}
    ],
    hasChildren: true,
    Editor: (props) => CopyGenericJsxEditor({...props, TargetNode: DummyElement}),
}


export const InsertGitMember = () => {
    const insertJsx = usePublisher(insertJsx$)
    return (
        <Button onClick={() =>
            insertJsx({
                name: 'GitMembers',
                kind: 'flow',
                props: {orgName: null, token: null}
            })
        }>
            GitMember
        </Button>
    )
}

And we got satisfactory results.