@mdxeditor/editor
Advanced tools
Comparing version 2.11.0 to 2.12.0
@@ -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 @@ { |
@@ -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 @@ }); |
@@ -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": { |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
510260
13336