@nkzw/mdx-editor 0.1.0

package/dist/plugins/image/LexicalImageVisitor.js

@@ -0,0 +1,42 @@
+import { $isImageNode } from "./ImageNode.js";
+const LexicalImageVisitor = {
+  testLexicalNode: $isImageNode,
+  visitLexicalNode({ mdastParent, lexicalNode, actions }) {
+    if (lexicalNode.shouldBeSerializedAsElement()) {
+      const img = new Image();
+      if (lexicalNode.getHeight() !== "inherit") {
+        img.height = lexicalNode.getHeight();
+      }
+      if (lexicalNode.getWidth() !== "inherit") {
+        img.width = lexicalNode.getWidth();
+      }
+      if (lexicalNode.getAltText()) {
+        img.alt = lexicalNode.getAltText();
+      }
+      if (lexicalNode.getTitle()) {
+        img.title = lexicalNode.getTitle();
+      }
+      for (const attr of lexicalNode.getRest()) {
+        if (attr.type === "mdxJsxAttribute") {
+          if (typeof attr.value === "string") {
+            img.setAttribute(attr.name, attr.value);
+          }
+        }
+      }
+      actions.appendToParent(mdastParent, {
+        type: "html",
+        value: img.outerHTML.replace(/>$/, ` src="${lexicalNode.getSrc()}" />`)
+      });
+    } else {
+      actions.appendToParent(mdastParent, {
+        type: "image",
+        url: lexicalNode.getSrc(),
+        alt: lexicalNode.getAltText(),
+        title: lexicalNode.getTitle()
+      });
+    }
+  }
+};
+export {
+  LexicalImageVisitor
+};

package/dist/plugins/image/MdastImageVisitor.js

@@ -0,0 +1,91 @@
+import { $createImageNode } from "./ImageNode.js";
+import { $createParagraphNode } from "lexical";
+const MdastImageVisitor = {
+  testNode: "image",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto(
+      $createImageNode({
+        src: mdastNode.url,
+        altText: mdastNode.alt ?? "",
+        title: mdastNode.title ?? ""
+      })
+    );
+  }
+};
+const MdastHtmlImageVisitor = {
+  testNode: (node) => {
+    return node.type === "html" && node.value.trim().startsWith("<img");
+  },
+  visitNode({ mdastNode, lexicalParent }) {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = mdastNode.value;
+    const img = wrapper.querySelector("img");
+    if (!img) {
+      throw new Error("Invalid HTML image");
+    }
+    const src = img.src;
+    const altText = img.alt;
+    const title = img.title;
+    const width = img.width;
+    const height = img.height;
+    const image = $createImageNode({
+      src: src || "",
+      altText,
+      title,
+      width: width || void 0,
+      height: height || void 0
+    });
+    if (lexicalParent.getType() === "root") {
+      const paragraph = $createParagraphNode();
+      paragraph.append(image);
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(image);
+    }
+  }
+};
+function getAttributeValue(node, attributeName) {
+  const attribute = node.attributes.find((a) => a.type === "mdxJsxAttribute" && a.name === attributeName);
+  if (!attribute) {
+    return void 0;
+  }
+  return attribute.value;
+}
+const MdastJsxImageVisitor = {
+  testNode: (node) => {
+    return (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") && node.name === "img";
+  },
+  visitNode({ mdastNode, lexicalParent }) {
+    const src = getAttributeValue(mdastNode, "src");
+    if (!src) {
+      return;
+    }
+    const altText = getAttributeValue(mdastNode, "alt") ?? "";
+    const title = getAttributeValue(mdastNode, "title");
+    const height = getAttributeValue(mdastNode, "height");
+    const width = getAttributeValue(mdastNode, "width");
+    const rest = mdastNode.attributes.filter((a) => {
+      return a.type === "mdxJsxAttribute" && !["src", "alt", "title", "height", "width"].includes(a.name);
+    });
+    const image = $createImageNode({
+      src,
+      altText,
+      title,
+      width: width ? parseInt(width, 10) : void 0,
+      height: height ? parseInt(height, 10) : void 0,
+      rest
+    });
+    if (lexicalParent.getType() === "root") {
+      const paragraph = $createParagraphNode();
+      paragraph.append(image);
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(image);
+    }
+  }
+};
+export {
+  MdastHtmlImageVisitor,
+  MdastImageVisitor,
+  MdastJsxImageVisitor
+};

package/dist/plugins/image/index.js

@@ -0,0 +1,364 @@
+import { ImagePlaceholder } from "./ImagePlaceholder.js";
+import { mergeRegister, $wrapNodeInElement } from "@lexical/utils";
+import { Cell, Action, mapTo, withLatestFrom, Signal, map } from "@mdxeditor/gurx";
+import { createCommand, $getNodeByKey, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, COMMAND_PRIORITY_LOW, DROP_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_CRITICAL, $createRangeSelection, $setSelection, $getSelection, $isNodeSelection } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { CAN_USE_DOM } from "../../utils/detectMac.js";
+import { activeEditor$, createActiveEditorSubscription$, addComposerChild$, addExportVisitor$, addLexicalNode$, addImportVisitor$ } from "../core/index.js";
+import { EditImageToolbar } from "./EditImageToolbar.js";
+import { ImageDialog } from "./ImageDialog.js";
+import { $createImageNode, $isImageNode, ImageNode } from "./ImageNode.js";
+import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
+import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
+const internalInsertImage$ = Signal((r) => {
+  r.sub(r.pipe(internalInsertImage$, withLatestFrom(activeEditor$)), ([values, theEditor]) => {
+    theEditor?.update(() => {
+      const imageNode = $createImageNode({
+        altText: values.altText ?? "",
+        src: values.src,
+        title: values.title ?? "",
+        width: parseImageDimension(values.width),
+        height: parseImageDimension(values.height)
+      });
+      $insertNodes([imageNode]);
+      if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+        $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+      }
+    });
+  });
+});
+const insertImage$ = Signal((r) => {
+  r.sub(r.pipe(insertImage$, withLatestFrom(imageUploadHandler$)), ([values, imageUploadHandler]) => {
+    const handler = (src) => {
+      r.pub(internalInsertImage$, { ...values, src });
+    };
+    if ("file" in values) {
+      imageUploadHandler?.(values.file).then(handler).catch((e) => {
+        throw e;
+      });
+    } else {
+      handler(values.src);
+    }
+  });
+});
+const imageAutocompleteSuggestions$ = Cell([]);
+const disableImageResize$ = Cell(false);
+const imageUploadHandler$ = Cell(null);
+const imagePreviewHandler$ = Cell(null);
+const imagePlaceholder$ = Cell(null);
+const imageDialogState$ = Cell(
+  { type: "inactive" },
+  (r) => {
+    r.sub(
+      r.pipe(saveImage$, withLatestFrom(activeEditor$, imageUploadHandler$, imageDialogState$, allowSetImageDimensions$)),
+      ([values, theEditor, imageUploadHandler, dialogState, allowSetImageDimensions]) => {
+        const handler = dialogState.type === "editing" ? (src) => {
+          theEditor?.update(() => {
+            const { nodeKey } = dialogState;
+            const imageNode = $getNodeByKey(nodeKey);
+            imageNode.setTitle(values.title);
+            imageNode.setAltText(values.altText);
+            imageNode.setSrc(src);
+            if (allowSetImageDimensions) {
+              const width = parseImageDimension(values.width);
+              const height = parseImageDimension(values.height);
+              imageNode.setWidthAndHeight(width ?? "inherit", height ?? "inherit");
+            }
+          });
+          r.pub(imageDialogState$, { type: "inactive" });
+        } : (src) => {
+          r.pub(internalInsertImage$, { ...values, src });
+          r.pub(imageDialogState$, { type: "inactive" });
+        };
+        if (values.file && values.file.length > 0) {
+          imageUploadHandler?.(values.file.item(0)).then(handler).catch((e) => {
+            throw e;
+          });
+        } else if (values.src) {
+          handler(values.src);
+        }
+      }
+    );
+    r.pub(createActiveEditorSubscription$, (editor) => {
+      const theUploadHandler = r.getValue(imageUploadHandler$);
+      return mergeRegister(
+        editor.registerCommand(
+          INSERT_IMAGE_COMMAND,
+          (payload) => {
+            const imageNode = $createImageNode(payload);
+            $insertNodes([imageNode]);
+            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+              $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+          },
+          COMMAND_PRIORITY_EDITOR
+        ),
+        editor.registerCommand(
+          DRAGSTART_COMMAND,
+          (event) => {
+            return onDragStart(event);
+          },
+          COMMAND_PRIORITY_HIGH
+        ),
+        editor.registerCommand(
+          DRAGOVER_COMMAND,
+          (event) => {
+            return onDragover(event, !!theUploadHandler);
+          },
+          COMMAND_PRIORITY_LOW
+        ),
+        editor.registerCommand(
+          DROP_COMMAND,
+          (event) => {
+            return onDrop(event, editor, r.getValue(imageUploadHandler$));
+          },
+          COMMAND_PRIORITY_HIGH
+        ),
+        editor.registerCommand(
+          PASTE_COMMAND,
+          (event) => {
+            if (!theUploadHandler) {
+              let fromWeb = Array.from(event.clipboardData?.items ?? []);
+              fromWeb = fromWeb.filter((i) => i.type.includes("text"));
+              if (!fromWeb.length || fromWeb.length === 0) {
+                return true;
+              }
+              return false;
+            }
+            const cbPayload = Array.from(event.clipboardData?.items ?? []);
+            const isMixedPayload = cbPayload.some((item) => !item.type.includes("image"));
+            if (isMixedPayload) return false;
+            if (!cbPayload.length || cbPayload.length === 0) {
+              return false;
+            }
+            const imageUploadHandlerValue = r.getValue(imageUploadHandler$);
+            Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()))).then((urls) => {
+              urls.forEach((url) => {
+                editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                  src: url,
+                  altText: ""
+                });
+              });
+            }).catch((e) => {
+              throw e;
+            });
+            return true;
+          },
+          COMMAND_PRIORITY_CRITICAL
+        )
+      );
+    });
+  }
+);
+const openNewImageDialog$ = Action((r) => {
+  r.link(r.pipe(openNewImageDialog$, mapTo({ type: "new" })), imageDialogState$);
+});
+const openEditImageDialog$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      openEditImageDialog$,
+      map((payload) => ({ type: "editing", ...payload }))
+    ),
+    imageDialogState$
+  );
+});
+const closeImageDialog$ = Action((r) => {
+  r.link(r.pipe(closeImageDialog$, mapTo({ type: "inactive" })), imageDialogState$);
+});
+const disableImageSettingsButton$ = Cell(false);
+const allowSetImageDimensions$ = Cell(false);
+const saveImage$ = Signal();
+const editImageToolbarComponent$ = Cell(EditImageToolbar);
+const parseImageDimension = (value) => {
+  if (typeof value === "undefined") return void 0;
+  const parsed = parseInt(String(value), 10);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+};
+const imagePlugin = realmPlugin({
+  init(realm, params) {
+    realm.pubIn({
+      [addImportVisitor$]: [MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor],
+      [addLexicalNode$]: ImageNode,
+      [addExportVisitor$]: LexicalImageVisitor,
+      [addComposerChild$]: params?.ImageDialog ?? ImageDialog,
+      [imageUploadHandler$]: params?.imageUploadHandler ?? null,
+      [imageAutocompleteSuggestions$]: params?.imageAutocompleteSuggestions ?? [],
+      [disableImageResize$]: Boolean(params?.disableImageResize),
+      [disableImageSettingsButton$]: Boolean(params?.disableImageSettingsButton),
+      [allowSetImageDimensions$]: Boolean(params?.allowSetImageDimensions),
+      [imagePreviewHandler$]: params?.imagePreviewHandler ?? null,
+      [editImageToolbarComponent$]: params?.EditImageToolbar ?? EditImageToolbar,
+      [imagePlaceholder$]: params?.imagePlaceholder ?? ImagePlaceholder
+    });
+  },
+  update(realm, params) {
+    realm.pubIn({
+      [imageUploadHandler$]: params?.imageUploadHandler ?? null,
+      [imageAutocompleteSuggestions$]: params?.imageAutocompleteSuggestions ?? [],
+      [disableImageResize$]: Boolean(params?.disableImageResize),
+      [imagePreviewHandler$]: params?.imagePreviewHandler ?? null,
+      [allowSetImageDimensions$]: Boolean(params?.allowSetImageDimensions),
+      [editImageToolbarComponent$]: params?.EditImageToolbar ?? EditImageToolbar,
+      [imagePlaceholder$]: params?.imagePlaceholder ?? ImagePlaceholder
+    });
+  }
+});
+const getDOMSelection = (targetWindow) => CAN_USE_DOM ? (targetWindow ?? window).getSelection() : null;
+const INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
+const TRANSPARENT_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+function onDragStart(event) {
+  const node = getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const dataTransfer = event.dataTransfer;
+  if (!dataTransfer) {
+    return false;
+  }
+  dataTransfer.setData("text/plain", "_");
+  const img = document.createElement("img");
+  img.src = TRANSPARENT_IMAGE;
+  dataTransfer.setDragImage(img, 0, 0);
+  dataTransfer.setData(
+    "application/x-lexical-drag",
+    JSON.stringify({
+      data: {
+        altText: node.__altText,
+        title: node.__title,
+        key: node.getKey(),
+        src: node.__src
+      },
+      type: "image"
+    })
+  );
+  return true;
+}
+function onDragover(event, hasUploadHandler) {
+  if (hasUploadHandler) {
+    let cbPayload = Array.from(event.dataTransfer?.items ?? []);
+    cbPayload = cbPayload.filter((i) => i.type.includes("image"));
+    if (cbPayload.length > 0) {
+      event.preventDefault();
+      return true;
+    }
+  }
+  const node = getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  if (!canDropImage(event)) {
+    event.preventDefault();
+  }
+  return true;
+}
+function onDrop(event, editor, imageUploadHandler) {
+  let cbPayload = Array.from(event.dataTransfer?.items ?? []);
+  cbPayload = cbPayload.filter((i) => i.type.includes("image"));
+  if (cbPayload.length > 0) {
+    if (imageUploadHandler !== null) {
+      event.preventDefault();
+      Promise.all(
+        cbPayload.map((image) => {
+          if (image.kind === "string") {
+            return new Promise((rs) => {
+              image.getAsString(rs);
+            });
+          }
+          return imageUploadHandler(image.getAsFile());
+        })
+      ).then((urls) => {
+        urls.forEach((url) => {
+          editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+            src: url,
+            altText: ""
+          });
+        });
+      }).catch((e) => {
+        throw e;
+      });
+      return true;
+    }
+  }
+  const node = getImageNodeInSelection();
+  if (!node) {
+    return false;
+  }
+  const data = getDragImageData(event);
+  if (!data) {
+    return false;
+  }
+  event.preventDefault();
+  if (canDropImage(event)) {
+    const range = getDragSelection(event);
+    node.remove();
+    const rangeSelection = $createRangeSelection();
+    if (range !== null && range !== void 0) {
+      rangeSelection.applyDOMRange(range);
+    }
+    $setSelection(rangeSelection);
+    editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+  }
+  return true;
+}
+function getImageNodeInSelection() {
+  const selection = $getSelection();
+  if (!$isNodeSelection(selection)) {
+    return null;
+  }
+  const nodes = selection.getNodes();
+  const node = nodes[0];
+  return $isImageNode(node) ? node : null;
+}
+function getDragImageData(event) {
+  const dragData = event.dataTransfer?.getData("application/x-lexical-drag");
+  if (!dragData) {
+    return null;
+  }
+  const { type, data } = JSON.parse(dragData);
+  if (type !== "image") {
+    return null;
+  }
+  return data;
+}
+function canDropImage(event) {
+  const target = event.target;
+  return !!(target && target instanceof HTMLElement && target.parentElement);
+}
+function getDragSelection(event) {
+  let range;
+  const target = event.target;
+  const targetWindow = target == null ? null : target.nodeType === 9 ? target.defaultView : target.ownerDocument.defaultView;
+  const domSelection = getDOMSelection(targetWindow);
+  if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(event.clientX, event.clientY);
+  } else if (event.rangeParent && domSelection !== null) {
+    domSelection.collapse(event.rangeParent, event.rangeOffset ?? 0);
+    range = domSelection.getRangeAt(0);
+  } else {
+    throw Error(`Cannot get the selection when dragging`);
+  }
+  return range;
+}
+export {
+  $createImageNode,
+  $isImageNode,
+  INSERT_IMAGE_COMMAND,
+  ImageNode,
+  allowSetImageDimensions$,
+  closeImageDialog$,
+  disableImageResize$,
+  disableImageSettingsButton$,
+  editImageToolbarComponent$,
+  imageAutocompleteSuggestions$,
+  imageDialogState$,
+  imagePlaceholder$,
+  imagePlugin,
+  imagePreviewHandler$,
+  imageUploadHandler$,
+  insertImage$,
+  openEditImageDialog$,
+  openNewImageDialog$,
+  parseImageDimension,
+  saveImage$
+};

package/dist/plugins/jsx/LexicalJsxNode.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import { DecoratorNode } from "lexical";
+import { NestedEditorsContext } from "../core/NestedLexicalEditor.js";
+import { voidEmitter } from "../../utils/voidEmitter.js";
+import { useCellValue } from "@mdxeditor/gurx";
+import { jsxComponentDescriptors$ } from "../core/index.js";
+class LexicalJsxNode extends DecoratorNode {
+  __mdastNode;
+  __focusEmitter = voidEmitter();
+  __importStatement;
+  static getType() {
+    return "jsx";
+  }
+  static clone(node) {
+    return new LexicalJsxNode(structuredClone(node.__mdastNode), structuredClone(node.__importStatement), node.__key);
+  }
+  static importJSON(serializedNode) {
+    return $createLexicalJsxNode(serializedNode.mdastNode, serializedNode.importStatement);
+  }
+  constructor(mdastNode, importStatement, key) {
+    super(key);
+    this.__mdastNode = mdastNode;
+    this.__importStatement = importStatement;
+  }
+  getMdastNode() {
+    return this.__mdastNode;
+  }
+  getImportStatement() {
+    return this.__importStatement;
+  }
+  exportJSON() {
+    return {
+      mdastNode: this.getMdastNode(),
+      importStatement: this.getImportStatement(),
+      type: "jsx",
+      version: 1
+    };
+  }
+  createDOM() {
+    return document.createElement(this.__mdastNode.type === "mdxJsxTextElement" ? "span" : "div");
+  }
+  updateDOM() {
+    return false;
+  }
+  setMdastNode(mdastNode) {
+    this.getWritable().__mdastNode = mdastNode;
+  }
+  select = () => {
+    this.__focusEmitter.publish();
+  };
+  decorate(parentEditor, config) {
+    return /* @__PURE__ */ jsx(
+      JsxEditorContainer,
+      {
+        lexicalJsxNode: this,
+        config,
+        mdastNode: this.getMdastNode(),
+        parentEditor,
+        focusEmitter: this.__focusEmitter
+      }
+    );
+  }
+  isInline() {
+    return this.__mdastNode.type === "mdxJsxTextElement";
+  }
+  isKeyboardSelectable() {
+    return true;
+  }
+}
+function JsxEditorContainer(props) {
+  const { mdastNode } = props;
+  const jsxComponentDescriptors = useCellValue(jsxComponentDescriptors$);
+  const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
+  if (!descriptor) {
+    throw new Error(`No JSX descriptor found for ${mdastNode.name}`);
+  }
+  const Editor = descriptor.Editor;
+  return /* @__PURE__ */ jsx(
+    NestedEditorsContext.Provider,
+    {
+      value: {
+        config: props.config,
+        focusEmitter: props.focusEmitter,
+        mdastNode,
+        parentEditor: props.parentEditor,
+        lexicalNode: props.lexicalJsxNode
+      },
+      children: /* @__PURE__ */ jsx(Editor, { descriptor, mdastNode })
+    }
+  );
+}
+function $createLexicalJsxNode(mdastNode, importStatement) {
+  return new LexicalJsxNode(mdastNode, importStatement);
+}
+function $isLexicalJsxNode(node) {
+  return node instanceof LexicalJsxNode;
+}
+export {
+  $createLexicalJsxNode,
+  $isLexicalJsxNode,
+  JsxEditorContainer,
+  LexicalJsxNode
+};

package/dist/plugins/jsx/LexicalJsxVisitor.js

@@ -0,0 +1,27 @@
+import { $isLexicalJsxNode } from "./LexicalJsxNode.js";
+import { isMdastJsxNode } from "./index.js";
+import { isHtmlTagName } from "./jsxTagName.js";
+const LexicalJsxVisitor = {
+  testLexicalNode: $isLexicalJsxNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    function traverseNestedJsxNodes(node) {
+      if ("children" in node && node.children instanceof Array) {
+        node.children.forEach((child) => {
+          if (isMdastJsxNode(child) && !isHtmlTagName(child.name)) {
+            actions.registerReferredComponent(child.name);
+          }
+          traverseNestedJsxNodes(child);
+        });
+      }
+    }
+    const mdastNode = lexicalNode.getMdastNode();
+    const importStatement = lexicalNode.getImportStatement();
+    actions.registerReferredComponent(mdastNode.name, importStatement);
+    traverseNestedJsxNodes(mdastNode);
+    actions.appendToParent(mdastParent, mdastNode);
+  },
+  priority: -200
+};
+export {
+  LexicalJsxVisitor
+};