@mdxeditor/editor 2.11.0 → 2.12.0

package/dist/index.d.ts

@@ -1028,6 +1028,11 @@ export declare type EditorSubscription = (activeEditor: LexicalEditor) => () =>
 
 /* Excluded from this release type: exportVisitors$ */
 
+declare type ExpressionValue = {
+    type: 'expression';
+    value: string;
+};
+
 /**
  * A default option to be displayed in the {@link ConditionalContents} component if none of the other options match.
  * @group Toolbar Primitives
@@ -1384,12 +1389,12 @@ export declare interface InsertImageParameters {
 export declare const insertJsx$: NodeRef<{
     kind: 'text';
     name: string;
-    props: Record<string, string>;
+    props: JsxProperties;
     children?: Mdast.PhrasingContent[] | undefined;
 } | {
     kind: 'flow';
     name: string;
-    props: Record<string, string>;
+    props: JsxProperties;
     children?: (Mdast.BlockContent | Mdast.DefinitionContent)[] | undefined;
 }>;
 
@@ -1496,9 +1501,10 @@ export declare function joinProc(...procs: Array<() => unknown>): () => void;
  */
 export declare interface JsxComponentDescriptor {
     /**
-     * The tag name
+     * The tag name. For example: 'div', 'span', 'MyComponent'.
+     * Note: For fragments, use null.
      */
-    name: string;
+    name: string | null;
     /**
      * Wether the component is a flow or text component (inline or block)
      */
@@ -1526,7 +1532,11 @@ export declare interface JsxComponentDescriptor {
     Editor: React_2.ComponentType<JsxEditorProps>;
 }
 
-/* Excluded from this release type: jsxComponentDescriptors$ */
+/**
+ * Contains the currently registered JSX component descriptors.
+ * @group JSX
+ */
+export declare const jsxComponentDescriptors$: NodeRef<JsxComponentDescriptor[]>;
 
 /**
  * The properties passed to a custom JSX Editor component.
@@ -1539,18 +1549,30 @@ export declare interface JsxEditorProps {
     descriptor: JsxComponentDescriptor;
 }
 
-/* Excluded from this release type: jsxIsAvailable$ */
+/**
+ * This JSX plugin will fill this value.
+ * @group JSX
+ */
+export declare const jsxIsAvailable$: NodeRef<boolean>;
 
 /**
  * a plugin that adds support for JSX elements (MDX).
  * @group JSX
  */
-export declare const jsxPlugin: (params?: {
+export declare const jsxPlugin: (params?: JsxPluginParams | undefined) => RealmPlugin;
+
+declare type JsxPluginParams = {
     /**
      * A set of descriptors that document the JSX elements used in the document.
      */
     jsxComponentDescriptors: JsxComponentDescriptor[];
-} | undefined) => RealmPlugin;
+    /**
+     * Wether or not to allow default React fragments <></> processing in MDX.
+     */
+    allowFragment?: boolean;
+};
+
+declare type JsxProperties = Record<string, string | ExpressionValue>;
 
 /**
  * Defines the structure of a JSX component property.
@@ -1564,7 +1586,7 @@ export declare interface JsxPropertyDescriptor {
     /**
      * The type of the property
      */
-    type: 'string' | 'number';
+    type: 'string' | 'number' | 'expression';
     /**
      * Wether the property is required
      */

package/dist/jsx-editors/GenericJsxEditor.js

@@ -2,48 +2,67 @@ import React__default from "react";
 import { useMdastNodeUpdater, NestedLexicalEditor } from "../plugins/core/NestedLexicalEditor.js";
 import { PropertyPopover } from "../plugins/core/PropertyPopover.js";
 import styles from "../styles/ui.module.css.js";
+const isExpressionValue = (value) => {
+  if (typeof value === "object" && value !== null && "type" in value && value.type === "mdxJsxAttributeValueExpression" && "value" in value && typeof value.value === "string") {
+    return true;
+  }
+  return false;
+};
+const isStringValue = (value) => typeof value === "string";
+const isMdxJsxAttribute = (value) => {
+  if (value.type === "mdxJsxAttribute" && typeof value.name === "string") {
+    return true;
+  }
+  return false;
+};
 const GenericJsxEditor = ({ mdastNode, descriptor }) => {
   const updateMdastNode = useMdastNodeUpdater();
-  const properties = React__default.useMemo(() => {
-    return descriptor.props.reduce(
-      (acc, descriptor2) => {
-        const attribute = mdastNode.attributes.find((attr) => attr.name === descriptor2.name);
-        if (attribute) {
-          acc[descriptor2.name] = attribute.value;
-        } else {
-          acc[descriptor2.name] = "";
+  const properties = React__default.useMemo(
+    () => descriptor.props.reduce((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;
         }
-        return acc;
-      },
-      {}
-    );
-  }, [mdastNode, descriptor]);
+        if (isStringValue(attribute.value)) {
+          acc[name] = attribute.value;
+          return acc;
+        }
+      }
+      acc[name] = "";
+      return acc;
+    }, {}),
+    [mdastNode, descriptor]
+  );
   const onChange = React__default.useCallback(
     (values) => {
-      const newAttributes = mdastNode.attributes.slice();
-      Object.entries(values).forEach(([key, value]) => {
-        const attributeToUpdate = newAttributes.find((attr) => attr.name === key);
+      const updatedAttributes = Object.entries(values).reduce((acc, [name, value]) => {
         if (value === "") {
-          if (attributeToUpdate) {
-            newAttributes.splice(newAttributes.indexOf(attributeToUpdate), 1);
-          }
-        } else {
-          if (attributeToUpdate) {
-            attributeToUpdate.value = value;
-          } else {
-            newAttributes.push({
-              type: "mdxJsxAttribute",
-              name: key,
-              value
-            });
-          }
+          return acc;
         }
-      });
-      updateMdastNode({ attributes: newAttributes });
+        const property = descriptor.props.find((prop) => prop.name === name);
+        if ((property == null ? void 0 : 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]
+    [mdastNode, updateMdastNode, descriptor]
   );
-  return /* @__PURE__ */ React__default.createElement("div", { className: descriptor.kind === "text" ? styles.inlineEditor : styles.blockEditor }, descriptor.props.length == 0 && descriptor.hasChildren && descriptor.kind === "flow" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name) : null, descriptor.props.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyPopover, { properties, title: mdastNode.name || "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
+  const shouldRenderComponentName = descriptor.props.length == 0 && descriptor.hasChildren && descriptor.kind === "flow";
+  return /* @__PURE__ */ React__default.createElement("div", { className: descriptor.kind === "text" ? styles.inlineEditor : styles.blockEditor }, shouldRenderComponentName ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name ?? "Fragment") : null, descriptor.props.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyPopover, { properties, title: mdastNode.name ?? "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
     NestedLexicalEditor,
     {
       block: descriptor.kind === "flow",

package/dist/plugins/jsx/index.js

@@ -10,16 +10,23 @@ import { realmPlugin } from "../../RealmWithPlugins.js";
 import { MdastMdxTextExpressionVisitor } from "./MdastMdxTextExpressionVisitor.js";
 import { LexicalMdxTextExpressionNode } from "./LexicalMdxTextExpressionNode.js";
 import { LexicalMdxTextExpressionVisitor } from "./LexicalMdxTextExpressionVisitor.js";
+import { GenericJsxEditor } from "../../jsx-editors/GenericJsxEditor.js";
 function isMdastJsxNode(node) {
   return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
 }
-function toMdastJsxAttributes(attributes) {
-  return Object.entries(attributes).map(([name, value]) => ({
+const isExpressionValue = (value) => {
+  if (typeof value === "object" && value !== null && "type" in value && value.type === "expression" && "value" in value && typeof value.value === "string") {
+    return true;
+  }
+  return false;
+};
+const toMdastJsxAttributes = (attributes) => Object.entries(attributes).map(
+  ([name, value]) => ({
     type: "mdxJsxAttribute",
     name,
-    value
-  }));
-}
+    value: isExpressionValue(value) ? { type: "mdxJsxAttributeValueExpression", value: value.value } : value
+  })
+);
 const insertJsx$ = Signal((r) => {
   r.link(
     r.pipe(
@@ -48,6 +55,22 @@ const insertJsx$ = Signal((r) => {
     insertDecoratorNode$
   );
 });
+const fragmentDescriptor = {
+  name: null,
+  kind: "flow",
+  props: [],
+  hasChildren: true,
+  Editor: GenericJsxEditor
+};
+const getDescriptors = (params) => {
+  if (params) {
+    if (params.allowFragment ?? true) {
+      return [fragmentDescriptor, ...params.jsxComponentDescriptors];
+    }
+    return params.jsxComponentDescriptors;
+  }
+  return [fragmentDescriptor];
+};
 const jsxPlugin = realmPlugin({
   init: (realm, params) => {
     realm.pubIn({
@@ -60,11 +83,11 @@ const jsxPlugin = realmPlugin({
       [addLexicalNode$]: [LexicalJsxNode, LexicalMdxTextExpressionNode],
       [addExportVisitor$]: [LexicalJsxVisitor, LexicalMdxTextExpressionVisitor],
       [addToMarkdownExtension$]: mdxToMarkdown(),
-      [jsxComponentDescriptors$]: (params == null ? void 0 : params.jsxComponentDescriptors) || []
+      [jsxComponentDescriptors$]: getDescriptors(params)
     });
   },
   update(realm, params) {
-    realm.pub(jsxComponentDescriptors$, (params == null ? void 0 : params.jsxComponentDescriptors) || []);
+    realm.pub(jsxComponentDescriptors$, getDescriptors(params));
   }
 });
 export {

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",