@mdxeditor/editor 2.8.2 → 2.9.0

package/dist/MDXEditor.js

@@ -37,7 +37,7 @@ const RichTextEditor = () => {
     editorWrappers$,
     placeholder$
   );
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: (classNames(styles.rootContentEditableWrapper), "mdxeditor-root-contenteditable") }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecursiveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper, "mdxeditor-root-contenteditable") }, /* @__PURE__ */ React__default.createElement(
     RichTextPlugin,
     {
       contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { className: classNames(styles.contentEditable, contentEditableClassName) }),

package/dist/plugins/jsx/LexicalMdxTextExpressionNode.js

@@ -0,0 +1,125 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import React__default from "react";
+import { DecoratorNode, $applyNodeReplacement } from "lexical";
+import lexicalThemeStyles from "../../styles/lexical-theme.module.css.js";
+import styles from "../../styles/ui.module.css.js";
+class LexicalMdxTextExpressionNode extends DecoratorNode {
+  /**
+   * Constructs a new {@link GenericHTMLNode} with the specified MDAST HTML node as the object to edit.
+   */
+  constructor(value, key) {
+    super(key);
+    /** @internal */
+    __publicField(this, "__value");
+    this.__value = value;
+  }
+  /** @internal */
+  static getType() {
+    return "mdx-text-expression";
+  }
+  /** @internal */
+  static clone(node) {
+    return new LexicalMdxTextExpressionNode(node.__value, node.__key);
+  }
+  getValue() {
+    return this.__value;
+  }
+  // View
+  createDOM() {
+    const element = document.createElement("span");
+    element.classList.add(lexicalThemeStyles.mdxTextExpression);
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importDOM() {
+    return {};
+  }
+  exportDOM(editor) {
+    const { element } = super.exportDOM(editor);
+    return {
+      element
+    };
+  }
+  static importJSON(serializedNode) {
+    return $createLexicalMdxTextExpressionNode(serializedNode.value);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      value: this.getValue(),
+      type: "mdx-text-expression",
+      version: 1
+    };
+  }
+  /*
+    // Mutation
+    insertNewAfter(selection?: RangeSelection, restoreSelection = true): ParagraphNode | GenericHTMLNode {
+      const anchorOffet = selection ? selection.anchor.offset : 0
+      const newElement =
+        anchorOffet > 0 && anchorOffet < this.getTextContentSize() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const direction = this.getDirection()
+      newElement.setDirection(direction)
+      this.insertAfter(newElement, restoreSelection)
+      return newElement
+    }
+  
+    collapseAtStart(): true {
+      const newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const children = this.getChildren()
+      children.forEach((child) => newElement.append(child))
+      this.replace(newElement)
+      return true
+    }*/
+  extractWithChild() {
+    return true;
+  }
+  isInline() {
+    return true;
+  }
+  decorate(editor) {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "{", /* @__PURE__ */ React__default.createElement("span", { className: styles.inputSizer, "data-value": this.getValue() }, /* @__PURE__ */ React__default.createElement(
+      "input",
+      {
+        size: 1,
+        onKeyDown: (e) => {
+          const value = e.target.value;
+          if (value === "" && e.key === "Backspace" || e.key === "Delete") {
+            e.stopPropagation();
+            e.nativeEvent.stopImmediatePropagation();
+            e.preventDefault();
+            editor.update(() => {
+              this.selectPrevious();
+              this.remove();
+            });
+          }
+        },
+        onChange: (e) => {
+          e.target.parentElement.dataset.value = e.target.value;
+          editor.update(() => {
+            this.getWritable().__value = e.target.value;
+          });
+        },
+        type: "text",
+        value: this.getValue()
+      }
+    )), "}");
+  }
+}
+function $createLexicalMdxTextExpressionNode(value) {
+  return $applyNodeReplacement(new LexicalMdxTextExpressionNode(value));
+}
+function $isLexicalMdxTextExpressionNode(node) {
+  return node instanceof LexicalMdxTextExpressionNode;
+}
+export {
+  $createLexicalMdxTextExpressionNode,
+  $isLexicalMdxTextExpressionNode,
+  LexicalMdxTextExpressionNode
+};

package/dist/plugins/jsx/LexicalMdxTextExpressionVisitor.js

@@ -0,0 +1,14 @@
+import { $isLexicalMdxTextExpressionNode } from "./LexicalMdxTextExpressionNode.js";
+const LexicalMdxTextExpressionVisitor = {
+  testLexicalNode: $isLexicalMdxTextExpressionNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    const mdastNode = {
+      type: "mdxTextExpression",
+      value: lexicalNode.getValue()
+    };
+    actions.appendToParent(mdastParent, mdastNode);
+  }
+};
+export {
+  LexicalMdxTextExpressionVisitor
+};

package/dist/plugins/jsx/MdastMdxTextExpressionVisitor.js

@@ -0,0 +1,11 @@
+import { $createLexicalMdxTextExpressionNode } from "./LexicalMdxTextExpressionNode.js";
+const MdastMdxTextExpressionVisitor = {
+  testNode: "mdxTextExpression",
+  visitNode({ lexicalParent, mdastNode }) {
+    lexicalParent.append($createLexicalMdxTextExpressionNode(mdastNode.value));
+  },
+  priority: -200
+};
+export {
+  MdastMdxTextExpressionVisitor
+};

package/dist/plugins/jsx/index.js

@@ -7,6 +7,9 @@ import { MdastMdxJsEsmVisitor } from "./MdastMdxJsEsmVisitor.js";
 import { MdastMdxJsxElementVisitor } from "./MdastMdxJsxElementVisitor.js";
 import { Signal, map } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";
+import { MdastMdxTextExpressionVisitor } from "./MdastMdxTextExpressionVisitor.js";
+import { LexicalMdxTextExpressionNode } from "./LexicalMdxTextExpressionNode.js";
+import { LexicalMdxTextExpressionVisitor } from "./LexicalMdxTextExpressionVisitor.js";
 function isMdastJsxNode(node) {
   return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
 }
@@ -52,10 +55,10 @@ const jsxPlugin = realmPlugin({
       [jsxIsAvailable$]: true,
       [addMdastExtension$]: mdxFromMarkdown(),
       [addSyntaxExtension$]: mdxjs(),
-      [addImportVisitor$]: [MdastMdxJsxElementVisitor, MdastMdxJsEsmVisitor],
+      [addImportVisitor$]: [MdastMdxJsxElementVisitor, MdastMdxJsEsmVisitor, MdastMdxTextExpressionVisitor],
       // export
-      [addLexicalNode$]: LexicalJsxNode,
-      [addExportVisitor$]: LexicalJsxVisitor,
+      [addLexicalNode$]: [LexicalJsxNode, LexicalMdxTextExpressionNode],
+      [addExportVisitor$]: [LexicalJsxVisitor, LexicalMdxTextExpressionVisitor],
       [addToMarkdownExtension$]: mdxToMarkdown(),
       [jsxComponentDescriptors$]: (params == null ? void 0 : params.jsxComponentDescriptors) || []
     });