feat: support inserting JSX nodes with children

mdx-editor · Nov 2, 2023 · b303a99 · b303a99
1 parent b958500
commit b303a99
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 22 deletions.
diff --git a/src/examples/jsx.tsx b/src/examples/jsx.tsx
@@ -53,17 +53,32 @@ const jsxComponentDescriptors: JsxComponentDescriptor[] = [
 const InsertMyLeaf = () => {
   const insertJsx = jsxPluginHooks.usePublisher('insertJsx')
   return (
-    <Button
-      onClick={() =>
-        insertJsx({
-          name: 'MyLeaf',
-          kind: 'text',
-          props: { foo: 'bar', bar: 'baz' }
-        })
-      }
-    >
-      Leaf
-    </Button>
+    <>
+      <Button
+        onClick={() =>
+          insertJsx({
+            name: 'MyLeaf',
+            kind: 'text',
+            props: { foo: 'bar', bar: 'baz' }
+          })
+        }
+      >
+        Leaf
+      </Button>
+
+      <Button
+        onClick={() =>
+          insertJsx({
+            name: 'MyLeaf',
+            kind: 'text',
+            props: { foo: 'bar', bar: 'baz' },
+            children: [{ type: 'text', value: 'Hello' }]
+          })
+        }
+      >
+        Leaf with text
+      </Button>
+    </>
   )
 }
 export const Example = () => {

diff --git a/src/plugins/jsx/index.ts b/src/plugins/jsx/index.ts
@@ -77,10 +77,28 @@ export interface JsxEditorProps {
   descriptor: JsxComponentDescriptor
 }
 
-interface InsertJsxPayload {
+type JsxTextPayload = {
+  kind: 'text'
+  name: string
+  props: Record<string, string>
+  children?: MdxJsxTextElement['children']
+}
+
+type JsxFlowPayload = {
+  kind: 'flow'
   name: string
-  kind: 'flow' | 'text'
   props: Record<string, string>
+  children?: MdxJsxFlowElement['children']
+}
+
+type InsertJsxPayload = JsxTextPayload | JsxFlowPayload
+
+function toMdastJsxAttributes(attributes: Record<string, string>): MdastJsx['attributes'] {
+  return Object.entries(attributes).map(([name, value]) => ({
+    type: 'mdxJsxAttribute',
+    name,
+    value
+  }))
 }
 
 /** @internal */
@@ -91,14 +109,26 @@ export const jsxSystem = system(
     r.link(
       r.pipe(
         insertJsx,
-        r.o.map(({ name, kind, props }) => {
-          return () =>
-            $createLexicalJsxNode({
-              name,
-              type: kind === 'flow' ? 'mdxJsxFlowElement' : 'mdxJsxTextElement',
-              attributes: Object.entries(props).map(([name, value]) => ({ type: 'mdxJsxAttribute', name, value })),
-              children: []
-            })
+        r.o.map(({ kind, name, children, props }) => {
+          return () => {
+            const attributes = toMdastJsxAttributes(props)
+
+            if (kind === 'flow') {
+              return $createLexicalJsxNode({
+                type: 'mdxJsxFlowElement',
+                name,
+                children: children ?? [],
+                attributes
+              })
+            } else {
+              return $createLexicalJsxNode({
+                type: 'mdxJsxTextElement',
+                name,
+                children: children ?? [],
+                attributes
+              })
+            }
+          }
         })
       ),
       insertDecoratorNode

diff --git a/src/plugins/link-dialog/index.ts b/src/plugins/link-dialog/index.ts
@@ -178,7 +178,7 @@ const linkDialogSystem = system(
 
       if (url.trim() !== '') {
         editor?.dispatchCommand(TOGGLE_LINK_COMMAND, { url, title })
-        // the dispatch command implementation fails to set the link for a fresh link creation.
+        // the dispatch command implementation fails to set the title for a fresh link creation.
         // Work around with the code below.
         setTimeout(() => {
           editor?.update(() => {