@mdxeditor/editor 2.10.0 → 2.12.0

package/dist/index.d.ts

@@ -818,6 +818,11 @@ export declare const diffSourcePlugin: (params?: {
      * Optional, additional CodeMirror extensions to load in the diff/source mode.
      */
     codeMirrorExtensions?: Extension_2[] | undefined;
+    /**
+     * Set the diff editor to read-only.
+     * @default false
+     */
+    readOnlyDiff?: boolean | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -1023,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
@@ -1379,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;
 }>;
 
@@ -1491,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)
      */
@@ -1521,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.
@@ -1534,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.
@@ -1559,7 +1586,7 @@ export declare interface JsxPropertyDescriptor {
     /**
      * The type of the property
      */
-    type: 'string' | 'number';
+    type: 'string' | 'number' | 'expression';
     /**
      * Wether the property is required
      */
@@ -2204,6 +2231,8 @@ export declare const quotePlugin: (params?: unknown) => RealmPlugin;
  */
 export declare const readOnly$: NodeRef<boolean>;
 
+/* Excluded from this release type: readOnlyDiff$ */
+
 /**
  * A plugin for the editor.
  * @group Core

package/dist/index.js

@@ -24,7 +24,7 @@ import { ADMONITION_TYPES, AdmonitionDirectiveDescriptor } from "./directive-edi
 import { GenericDirectiveEditor } from "./directive-editors/GenericDirectiveEditor.js";
 import { applyLinkChanges$, cancelLinkEdit$, linkAutocompleteSuggestions$, linkDialogPlugin, linkDialogState$, onClickLinkCallback$, onWindowChange$, openLinkEditDialog$, removeLink$, switchFromPreviewToLinkEdit$, updateLink$ } from "./plugins/link-dialog/index.js";
 import { toolbarContents$, toolbarPlugin } from "./plugins/toolbar/index.js";
-import { cmExtensions$, diffMarkdown$, diffSourcePlugin } from "./plugins/diff-source/index.js";
+import { cmExtensions$, diffMarkdown$, diffSourcePlugin, readOnlyDiff$ } from "./plugins/diff-source/index.js";
 import { markdownShortcutPlugin } from "./plugins/markdown-shortcut/index.js";
 import { BlockTypeSelect } from "./plugins/toolbar/components/BlockTypeSelect.js";
 import { BoldItalicUnderlineToggles } from "./plugins/toolbar/components/BoldItalicUnderlineToggles.js";
@@ -260,6 +260,7 @@ export {
   prop,
   quotePlugin,
   readOnly$,
+  readOnlyDiff$,
   realmPlugin,
   removeFrontmatter$,
   removeLink$,

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/diff-source/DiffViewer.js

@@ -1,6 +1,6 @@
 import React__default from "react";
-import { diffMarkdown$, cmExtensions$ } from "./index.js";
-import { markdown$, markdownSourceEditorValue$, onBlur$ } from "../core/index.js";
+import { diffMarkdown$, readOnlyDiff$, cmExtensions$ } from "./index.js";
+import { markdown$, readOnly$, markdownSourceEditorValue$, onBlur$ } from "../core/index.js";
 import { MergeView } from "@codemirror/merge";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
@@ -13,7 +13,7 @@ function setContent(view, content) {
 }
 const DiffViewer = () => {
   const realm = useRealm();
-  const [newMarkdown, oldMarkdown] = useCellValues(markdown$, diffMarkdown$);
+  const [newMarkdown, oldMarkdown, readOnly, readOnlyDiff] = useCellValues(markdown$, diffMarkdown$, readOnly$, readOnlyDiff$);
   const onUpdate = usePublisher(markdownSourceEditorValue$);
   const elRef = React__default.useRef(null);
   const cmMergeViewRef = React__default.useRef(null);
@@ -32,16 +32,23 @@ const DiffViewer = () => {
     });
   }, [realm]);
   React__default.useEffect(() => {
-    cmMergeViewRef.current = new MergeView({
+    const isReadOnly = readOnly || readOnlyDiff;
+    const revertParams = isReadOnly ? {
+      renderRevertControl: void 0,
+      revertControls: void 0
+    } : {
       renderRevertControl: () => {
         const el = document.createElement("button");
         el.classList.add("cm-merge-revert");
         el.appendChild(document.createTextNode("⮕"));
         return el;
       },
+      revertControls: "a-to-b"
+    };
+    cmMergeViewRef.current = new MergeView({
+      ...revertParams,
       parent: elRef.current,
       orientation: "a-b",
-      revertControls: "a-to-b",
       gutter: true,
       a: {
         doc: oldMarkdown,
@@ -52,6 +59,7 @@ const DiffViewer = () => {
         extensions: [
           ...cmExtensions,
           ...COMMON_STATE_CONFIG_EXTENSIONS,
+          EditorState.readOnly.of(isReadOnly),
           EditorView.updateListener.of(({ state }) => {
             const md = state.doc.toString();
             onUpdate(md);

package/dist/plugins/diff-source/index.js

@@ -4,21 +4,24 @@ import { Cell } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 const diffMarkdown$ = Cell("");
 const cmExtensions$ = Cell([]);
+const readOnlyDiff$ = Cell(false);
 const diffSourcePlugin = realmPlugin({
   update: (r, params) => {
-    r.pub(diffMarkdown$, (params == null ? void 0 : params.diffMarkdown) || "");
+    r.pub(diffMarkdown$, (params == null ? void 0 : params.diffMarkdown) ?? "");
   },
   init(r, params) {
     r.pubIn({
-      [diffMarkdown$]: (params == null ? void 0 : params.diffMarkdown) || "",
-      [cmExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) || [],
+      [diffMarkdown$]: (params == null ? void 0 : params.diffMarkdown) ?? "",
+      [cmExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
       [addEditorWrapper$]: DiffSourceWrapper,
-      [viewMode$]: (params == null ? void 0 : params.viewMode) || "rich-text"
+      [readOnlyDiff$]: (params == null ? void 0 : params.readOnlyDiff) ?? false,
+      [viewMode$]: (params == null ? void 0 : params.viewMode) ?? "rich-text"
     });
   }
 });
 export {
   cmExtensions$,
   diffMarkdown$,
-  diffSourcePlugin
+  diffSourcePlugin,
+  readOnlyDiff$
 };

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.10.0",
+  "version": "2.12.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",