@mdxeditor/editor - npm Package Compare versions

Comparing version 2.11.0 to 2.12.0

dist/jsx-editors/GenericJsxEditor.js

@@ -5,44 +5,63 @@ import React__default from "react";
 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,
@@ -49,0 +68,0 @@ {

dist/plugins/jsx/index.js

@@ -13,12 +13,19 @@ import { mdxFromMarkdown, mdxToMarkdown } from "mdast-util-mdx";
 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) => {
@@ -52,2 +59,18 @@ r.link(
 });
+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({
@@ -65,7 +88,7 @@ init: (realm, params) => {
       [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));
   }
@@ -72,0 +95,0 @@ });

package.json

@@ -14,3 +14,3 @@ {
   "type": "module",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "React component for rich text markdown editing",
@@ -17,0 +17,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

510260

increased by0.39%

Lines of code

13336

increased by0.45%

No dependency changes