transforming JsxEditorProps

[uncor3]

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• I have read the documentation and cannot find an answer.

Describe the bug

Hey, i want to pass JsxEditorProps just like react props to my custom component but i am not familiar with mdast-util-mdx-jsx and mdast (i am guessing these are being used here for JsxEditorProps)

I could not find anything related to this in documentation and before implementing a proper solution i wanted to create an issue

here is a minimal example of what i am trying to achieve, i think something like transform should be available in the library

const jsxComponentDescriptors: JsxComponentDescriptor[] = [
  {
    name: 'Comment',
    kind: 'flow', 
    source: './external',
    props: [
      { content : 'string' },
    ],
    Editor: (editorProps) => {
      const props = transform(editorProps)
      return <CommentComp {...props} />
    }
  },
  {
    name: 'CommentsContainer',
    kind: 'flow',
    hasChildren: true,
    Editor: (editorProps) => {
      const props = transform(editorProps)
      return <CommentsContainerComp {...props} />
    }
  },
]

const InsertCommentsContainer = () => {
  const insertJsx = usePublisher(insertJsx$)
  return (
    <Button
      onClick={() =>
        insertJsx({
          name: 'CommentsContainer',
          kind: 'flow',
        })
      }
    >
      Insert CommentsContainer
    </Button>
  )
}

export const Example = () => {
  return (
    <MDXEditor
      markdown={jsxMarkdown}
      onChange={console.log}
      plugins={[
        jsxPlugin({ jsxComponentDescriptors }),
        toolbarPlugin({
          toolbarContents: () => (
            <>
              <InsertCommentsContainer />
            </>
          )
        })
      ]}
    />
  )
}

and here is my very very sketchy implementation of transform function just for testing (could be recursive and typed)

import * as mdxComponents from '@/mdx-components';


//here i only use it to transform children so editorProps.mdastNode.children
//is passed as props to this function
function transform(
  props: any
) {
  return props
    .map((item, i) => {
      if (item.type === 'paragraph') {
        return React.createElement('p', { key: i }, item.children[0].value);
      }
      if (!item.name) return;
      const props = item.attributes.reduce((attr, item) => {
        return Object.assign(attr, {
          [item.name]: item.value,
        });
      }, {});

      if (!props.children) {
        props.children = item.children?.map((child, i) => {
          if (child.type === 'paragraph') {
            return React.createElement(
              'p',
              { key: i },
              child.children[0].value
            );
          }
          const props = item.attributes.reduce((attr, item) => {
            return Object.assign(attr, {
              [item.name]: item.value,
            });
          }, {});
          const Comp = mdxComponents[child.name];
          return <Comp key={i} {...props} />;
        });
      }

      const Comp = mdxComponents[item.name];
      return <Comp key={i} {...props} />;
    })
    .filter(Boolean);
}

Expected behavior
There should be a way to transform ast to actual react props

As i said i am not familiar with mdast-util-mdx-jsx and mdast so i cannot think of a proper solution lmk if there is any

Thank you for taking the time to read

[Petyo Ivanov]

No idea what you're doing in the code above or why you want to do this.