@mdxeditor/editor 0.0.0-development

package/dist/plugins/image/index.js

@@ -0,0 +1,300 @@
+import { $wrapNodeInElement } from "@lexical/utils";
+import { $getNodeByKey, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, DRAGSTART_COMMAND, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, COMMAND_PRIORITY_LOW, DROP_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_CRITICAL, createCommand, $createRangeSelection, $setSelection, $getSelection, $isNodeSelection } from "lexical";
+import { coreSystem } from "../core/index.js";
+import { $createImageNode, $isImageNode, ImageNode } from "./ImageNode.js";
+import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
+import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
+import { CAN_USE_DOM } from "../../utils/detectMac.js";
+import { ImageDialog } from "./ImageDialog.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const imageSystem = system(
+  (r, [{ rootEditor }]) => {
+    const insertImage = r.node();
+    const imageAutocompleteSuggestions = r.node([]);
+    const disableImageResize = r.node(false);
+    const imageUploadHandler = r.node(null);
+    const imagePreviewHandler = r.node(null);
+    const imageDialogState = r.node({ type: "inactive" });
+    const openNewImageDialog = r.node();
+    const openEditImageDialog = r.node();
+    const closeImageDialog = r.node();
+    const saveImage = r.node();
+    r.link(r.pipe(closeImageDialog, r.o.mapTo({ type: "inactive" })), imageDialogState);
+    r.link(r.pipe(openNewImageDialog, r.o.mapTo({ type: "new" })), imageDialogState);
+    r.link(
+      r.pipe(
+        openEditImageDialog,
+        r.o.map((payload) => ({ type: "editing", ...payload }))
+      ),
+      imageDialogState
+    );
+    r.sub(
+      r.pipe(saveImage, r.o.withLatestFrom(rootEditor, imageUploadHandler, imageDialogState)),
+      ([values, theEditor, imageUploadHandler2, dialogState]) => {
+        const handler = dialogState.type === "editing" ? (src) => {
+          theEditor == null ? void 0 : theEditor.update(() => {
+            const { nodeKey } = dialogState;
+            const imageNode = $getNodeByKey(nodeKey);
+            imageNode.setTitle(values.title);
+            imageNode.setAltText(values.altText);
+            imageNode.setSrc(src);
+          });
+          r.pub(imageDialogState, { type: "inactive" });
+        } : (src) => {
+          theEditor == null ? void 0 : theEditor.update(() => {
+            const imageNode = $createImageNode({ altText: values.altText ?? "", src, title: values.title ?? "" });
+            $insertNodes([imageNode]);
+            if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+              $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+            }
+          });
+          r.pub(imageDialogState, { type: "inactive" });
+        };
+        if (values.file.length > 0) {
+          imageUploadHandler2 == null ? void 0 : imageUploadHandler2(values.file.item(0)).then(handler).catch((e) => {
+            throw e;
+          });
+        } else if (values.src) {
+          handler(values.src);
+        }
+      }
+    );
+    r.sub(rootEditor, (editor) => {
+      editor == null ? void 0 : 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
+      );
+      const theUploadHandler = r.getValue(imageUploadHandler);
+      editor == null ? void 0 : editor.registerCommand(
+        DRAGSTART_COMMAND,
+        (event) => {
+          return onDragStart(event);
+        },
+        COMMAND_PRIORITY_HIGH
+      );
+      editor == null ? void 0 : editor.registerCommand(
+        DRAGOVER_COMMAND,
+        (event) => {
+          return onDragover(event);
+        },
+        COMMAND_PRIORITY_LOW
+      );
+      editor == null ? void 0 : editor.registerCommand(
+        DROP_COMMAND,
+        (event) => {
+          return onDrop(event, editor, r.getValue(imageUploadHandler));
+        },
+        COMMAND_PRIORITY_HIGH
+      );
+      if (theUploadHandler === null) {
+        return;
+      }
+      editor == null ? void 0 : editor.registerCommand(
+        PASTE_COMMAND,
+        (event) => {
+          var _a;
+          let cbPayload = Array.from(((_a = event.clipboardData) == null ? void 0 : _a.items) || []);
+          cbPayload = cbPayload.filter((i) => /image/.test(i.type));
+          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
+      );
+    });
+    return {
+      imageDialogState,
+      saveImage,
+      openNewImageDialog,
+      openEditImageDialog,
+      closeImageDialog,
+      imageUploadHandler,
+      imageAutocompleteSuggestions,
+      disableImageResize,
+      insertImage,
+      imagePreviewHandler
+    };
+  },
+  [coreSystem]
+);
+const [
+  /** @internal */
+  imagePlugin,
+  /** @internal */
+  imagePluginHooks
+] = realmPlugin({
+  id: "image",
+  systemSpec: imageSystem,
+  applyParamsToSystem: (realm, params) => {
+    realm.pubKey("imageUploadHandler", (params == null ? void 0 : params.imageUploadHandler) || null);
+    realm.pubKey("imageAutocompleteSuggestions", (params == null ? void 0 : params.imageAutocompleteSuggestions) || []);
+    realm.pubKey("disableImageResize", Boolean(params == null ? void 0 : params.disableImageResize));
+    realm.pubKey("imagePreviewHandler", (params == null ? void 0 : params.imagePreviewHandler) || null);
+  },
+  init: (realm) => {
+    realm.pubKey("addImportVisitor", MdastImageVisitor);
+    realm.pubKey("addImportVisitor", MdastHtmlImageVisitor);
+    realm.pubKey("addImportVisitor", MdastJsxImageVisitor);
+    realm.pubKey("addLexicalNode", ImageNode);
+    realm.pubKey("addExportVisitor", LexicalImageVisitor);
+    realm.pubKey("addComposerChild", ImageDialog);
+  }
+});
+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) {
+  var _a;
+  let cbPayload = Array.from(((_a = event.dataTransfer) == null ? void 0 : _a.items) || []);
+  cbPayload = cbPayload.filter((i) => /image/.test(i.type));
+  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) {
+  var _a;
+  let cbPayload = Array.from(((_a = event.dataTransfer) == null ? void 0 : _a.items) || []);
+  cbPayload = cbPayload.filter((i) => /image/.test(i.type));
+  if (cbPayload.length > 0) {
+    if (imageUploadHandler !== null) {
+      event.preventDefault();
+      Promise.all(cbPayload.map((image) => 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) {
+  var _a;
+  const dragData = (_a = event.dataTransfer) == null ? void 0 : _a.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,
+  imagePlugin,
+  imagePluginHooks,
+  imageSystem
+};

package/dist/plugins/jsx/LexicalJsxNode.d.ts

@@ -0,0 +1,54 @@
+import type { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import React from 'react';
+import { MdastJsx } from '.';
+import { VoidEmitter } from '../../utils/voidEmitter';
+/**
+ * A serialized representation of an {@link LexicalJsxNode}.
+ */
+export type SerializedLexicalJsxNode = Spread<{
+    mdastNode: MdastJsx;
+    type: 'jsx';
+    version: 1;
+}, SerializedLexicalNode>;
+/**
+ * A lexical node that represents an image. Use {@link "$createLexicalJsxNode"} to construct one.
+ */
+export declare class LexicalJsxNode extends DecoratorNode<JSX.Element> {
+    __mdastNode: MdastJsx;
+    __focusEmitter: {
+        publish: () => void;
+        subscribe: (cb: () => void) => void;
+    };
+    static getType(): string;
+    static clone(node: LexicalJsxNode): LexicalJsxNode;
+    static importJSON(serializedNode: SerializedLexicalJsxNode): LexicalJsxNode;
+    constructor(mdastNode: MdastJsx, key?: NodeKey);
+    getMdastNode(): MdastJsx;
+    exportJSON(): SerializedLexicalJsxNode;
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    setMdastNode(mdastNode: MdastJsx): void;
+    select: () => void;
+    decorate(parentEditor: LexicalEditor, config: EditorConfig): JSX.Element;
+    isInline(): boolean;
+    isKeyboardSelectable(): boolean;
+}
+export declare function JsxEditorContainer(props: {
+    /** The Lexical editor that contains the node */
+    parentEditor: LexicalEditor;
+    /** The Lexical node that is being edited */
+    lexicalJsxNode: LexicalJsxNode;
+    /** The MDAST node that is being edited */
+    mdastNode: MdastJsx;
+    config: EditorConfig;
+    focusEmitter: VoidEmitter;
+}): React.JSX.Element;
+/**
+ * Creates an {@link LexicalJsxNode}.
+ */
+export declare function $createLexicalJsxNode(mdastNode: MdastJsx): LexicalJsxNode;
+/**
+ * Retruns true if the node is an {@link LexicalJsxNode}.
+ */
+export declare function $isLexicalJsxNode(node: LexicalNode | null | undefined): node is LexicalJsxNode;

package/dist/plugins/jsx/LexicalJsxNode.js

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

package/dist/plugins/jsx/LexicalJsxVisitor.d.ts

@@ -0,0 +1,4 @@
+import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
+import { LexicalJsxNode } from './LexicalJsxNode';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalJsxVisitor: LexicalExportVisitor<LexicalJsxNode, MdxJsxFlowElement | MdxJsxTextElement>;

package/dist/plugins/jsx/LexicalJsxVisitor.js

@@ -0,0 +1,12 @@
+import { $isLexicalJsxNode } from "./LexicalJsxNode.js";
+const LexicalJsxVisitor = {
+  testLexicalNode: $isLexicalJsxNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    const mdastNode = lexicalNode.getMdastNode();
+    actions.registerReferredComponent(mdastNode.name);
+    actions.appendToParent(mdastParent, mdastNode);
+  }
+};
+export {
+  LexicalJsxVisitor
+};

package/dist/plugins/jsx/MdastMdxJsEsmVisitor.d.ts

@@ -0,0 +1,3 @@
+import { MdxjsEsm } from 'mdast-util-mdx';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastMdxJsEsmVisitor: MdastImportVisitor<MdxjsEsm>;

package/dist/plugins/jsx/MdastMdxJsEsmVisitor.js

@@ -0,0 +1,8 @@
+const MdastMdxJsEsmVisitor = {
+  testNode: "mdxjsEsm",
+  visitNode() {
+  }
+};
+export {
+  MdastMdxJsEsmVisitor
+};

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.d.ts

@@ -0,0 +1,3 @@
+import { MdxJsxTextElement } from 'mdast-util-mdx';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastMdxJsxElementVisitor: MdastImportVisitor<MdxJsxTextElement>;

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -0,0 +1,12 @@
+import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
+const MdastMdxJsxElementVisitor = {
+  testNode: (node) => {
+    return (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") && node.name !== "img";
+  },
+  visitNode({ lexicalParent, mdastNode }) {
+    lexicalParent.append($createLexicalJsxNode(mdastNode));
+  }
+};
+export {
+  MdastMdxJsxElementVisitor
+};