feat(GenericJsxEditor): customizable property editor (#703)

* feat(GenericJsxEditor): customizable property editor * lint --------- Co-authored-by: Petyo Ivanov <[email protected]>
mdx-editor · Feb 17, 2025 · 86d8c6d · 86d8c6d
1 parent 4ddced4
commit 86d8c6d
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/src/jsx-editors/GenericJsxEditor.tsx b/src/jsx-editors/GenericJsxEditor.tsx
@@ -31,13 +31,28 @@ const isMdxJsxAttribute = (value: MdxJsxAttribute | MdxJsxExpressionAttribute):
   return false
 }
 
+/**
+ * A component capable of editing JSX properties
+ */
+type PropertyEditorType = typeof PropertyPopover
+
+/**
+ * Properties for the Generic Jsx Editor
+ */
+export interface GenericJsxEditorProps extends JsxEditorProps {
+  /**
+   * A custom property editor component {@link PropertyEditorType}
+   */
+  PropertyEditor?: PropertyEditorType
+}
+
 /**
  * A generic editor that can be used as an universal UI for any JSX element.
  * Allows editing of the element content and properties.
  * Use this editor for the {@link JsxComponentDescriptor} Editor option.
  * @group JSX
  */
-export const GenericJsxEditor: React.FC<JsxEditorProps> = ({ mdastNode, descriptor }) => {
+export const GenericJsxEditor: React.FC<GenericJsxEditorProps> = ({ mdastNode, descriptor, PropertyEditor }) => {
   const updateMdastNode = useMdastNodeUpdater()
 
   const properties = React.useMemo(
@@ -95,13 +110,17 @@ export const GenericJsxEditor: React.FC<JsxEditorProps> = ({ mdastNode, descript
     [mdastNode, updateMdastNode, descriptor]
   )
 
+  const PropertyEditorComponent = PropertyEditor ?? PropertyPopover
+
   const shouldRenderComponentName = descriptor.props.length == 0 && descriptor.hasChildren && descriptor.kind === 'flow'
 
   return (
     <div className={descriptor.kind === 'text' ? styles.inlineEditor : styles.blockEditor}>
       {shouldRenderComponentName ? <span className={styles.genericComponentName}>{mdastNode.name ?? 'Fragment'}</span> : null}
 
-      {descriptor.props.length > 0 ? <PropertyPopover properties={properties} title={mdastNode.name ?? ''} onChange={onChange} /> : null}
+      {descriptor.props.length > 0 ? (
+        <PropertyEditorComponent properties={properties} title={mdastNode.name ?? ''} onChange={onChange} />
+      ) : null}
 
       {descriptor.hasChildren ? (
         <NestedLexicalEditor<MdxJsxTextElement | MdxJsxFlowElement>