@nkzw/mdx-editor 0.1.0

package/dist/plugins/image/ImageEditor.js

@@ -0,0 +1,279 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister } from "@lexical/utils";
+import { useCellValues } from "@mdxeditor/gurx";
+import classNames from "classnames";
+import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
+import { imagePlaceholder$, disableImageResize$, allowSetImageDimensions$, imagePreviewHandler$, editImageToolbarComponent$ } from "./index.js";
+import styles from "../../styles/ui.module.css.js";
+import { readOnly$ } from "../core/index.js";
+import { $isImageNode } from "./ImageNode.js";
+import ImageResizer from "./ImageResizer.js";
+const BROKEN_IMG_URI = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(
+  /* xml */
+  `
+    <svg id="imgLoadError" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+      <rect x="0" y="0" width="100" height="100" fill="none" stroke="red" stroke-width="4" stroke-dasharray="4" />
+      <text x="50" y="55" text-anchor="middle" font-size="20" fill="red">⚠️</text>
+    </svg>
+`
+);
+const imgCache = {
+  __cache: {},
+  read(src) {
+    if (!this.__cache[src]) {
+      this.__cache[src] = new Promise((resolve) => {
+        const img = new Image();
+        img.onerror = () => {
+          this.__cache[src] = BROKEN_IMG_URI;
+          resolve();
+        };
+        img.onload = () => {
+          this.__cache[src] = src;
+          resolve();
+        };
+        img.src = src;
+      });
+    }
+    if (this.__cache[src] instanceof Promise) {
+      throw this.__cache[src];
+    }
+    return this.__cache[src];
+  }
+};
+function LazyImage({
+  title,
+  alt,
+  className,
+  imageRef,
+  src,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: className ?? void 0,
+      alt,
+      src: imgCache.read(src),
+      title,
+      ref: imageRef,
+      draggable: "false",
+      width,
+      height
+    }
+  );
+}
+function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
+  const [ImagePlaceholderComponent, disableImageResize, allowSetImageDimensions, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
+    imagePlaceholder$,
+    disableImageResize$,
+    allowSetImageDimensions$,
+    imagePreviewHandler$,
+    readOnly$,
+    editImageToolbarComponent$
+  );
+  const imageRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const [editor] = useLexicalComposerContext();
+  const [selection, setSelection] = React.useState(null);
+  const activeEditorRef = React.useRef(null);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [imageSource, setImageSource] = React.useState(null);
+  const [initialImagePath, setInitialImagePath] = React.useState(null);
+  const onDelete = React.useCallback(
+    (payload) => {
+      if (isSelected && $isNodeSelection($getSelection())) {
+        const event = payload;
+        event.preventDefault();
+        const node = $getNodeByKey(nodeKey);
+        if ($isImageNode(node)) {
+          node.remove();
+        }
+      }
+      return false;
+    },
+    [isSelected, nodeKey]
+  );
+  const onEnter = React.useCallback(
+    (event) => {
+      const latestSelection = $getSelection();
+      const buttonElem = buttonRef.current;
+      if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+        if (buttonElem !== null && buttonElem !== document.activeElement) {
+          event.preventDefault();
+          buttonElem.focus();
+          return true;
+        }
+      }
+      return false;
+    },
+    [isSelected]
+  );
+  const onEscape = React.useCallback(
+    (event) => {
+      if (buttonRef.current === event.target) {
+        $setSelection(null);
+        editor.update(() => {
+          setSelected(true);
+          const parentRootElement = editor.getRootElement();
+          if (parentRootElement !== null) {
+            parentRootElement.focus();
+          }
+        });
+        return true;
+      }
+      return false;
+    },
+    [editor, setSelected]
+  );
+  React.useEffect(() => {
+    if (imagePreviewHandler) {
+      const callPreviewHandler = async () => {
+        if (!initialImagePath) setInitialImagePath(src);
+        const updatedSrc = await imagePreviewHandler(src);
+        setImageSource(updatedSrc);
+      };
+      callPreviewHandler().catch((e) => {
+        console.error(e);
+      });
+    } else {
+      setImageSource(src);
+    }
+  }, [src, imagePreviewHandler, initialImagePath]);
+  React.useEffect(() => {
+    if (allowSetImageDimensions && imageRef.current) {
+      const { current: image } = imageRef;
+      syncDimensionWithImageResizer(image, "width", width);
+      syncDimensionWithImageResizer(image, "height", height);
+    }
+  }, [allowSetImageDimensions, width, height]);
+  React.useEffect(() => {
+    let isMounted = true;
+    const unregister = mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        if (isMounted) {
+          setSelection(editorState.read(() => $getSelection()));
+        }
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor;
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (payload) => {
+          const event = payload;
+          if (isResizing) {
+            return true;
+          }
+          if (event.target === imageRef.current) {
+            if (event.shiftKey) {
+              setSelected(!isSelected);
+            } else {
+              clearSelection();
+              setSelected(true);
+            }
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        DRAGSTART_COMMAND,
+        (event) => {
+          if (event.target === imageRef.current) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)
+    );
+    return () => {
+      isMounted = false;
+      unregister();
+    };
+  }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  const onResizeEnd = (nextWidth, nextHeight) => {
+    setTimeout(() => {
+      setIsResizing(false);
+    }, 200);
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
+        node.setWidthAndHeight(nextWidth, nextHeight);
+      }
+    });
+  };
+  const onResizeStart = () => {
+    setIsResizing(true);
+  };
+  const draggable = $isNodeSelection(selection);
+  const isFocused = isSelected;
+  const passedClassName = React.useMemo(() => {
+    if (rest.length === 0) {
+      return null;
+    }
+    const className = rest.find((attr) => attr.type === "mdxJsxAttribute" && (attr.name === "class" || attr.name === "className"));
+    if (className) {
+      return className.value;
+    }
+    return null;
+  }, [rest]);
+  return imageSource !== null ? /* @__PURE__ */ jsx(React.Suspense, { fallback: ImagePlaceholderComponent ? /* @__PURE__ */ jsx(ImagePlaceholderComponent, {}) : null, children: /* @__PURE__ */ jsxs("div", { className: styles.imageWrapper, "data-editor-block-type": "image", children: [
+    /* @__PURE__ */ jsx("div", { draggable, children: /* @__PURE__ */ jsx(
+      LazyImage,
+      {
+        width,
+        height,
+        className: classNames(
+          {
+            [styles.focusedImage]: isFocused
+          },
+          passedClassName
+        ),
+        src: imageSource,
+        title: title ?? "",
+        alt: alt ?? "",
+        imageRef
+      }
+    ) }),
+    draggable && isFocused && !disableImageResize && /* @__PURE__ */ jsx(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd }),
+    readOnly || /* @__PURE__ */ jsx(
+      EditImageToolbar,
+      {
+        nodeKey,
+        imageSource,
+        initialImagePath,
+        title: title ?? "",
+        alt: alt ?? "",
+        width,
+        height
+      }
+    )
+  ] }) }) : null;
+}
+const syncDimensionWithImageResizer = (image, key, value) => {
+  if (typeof value === "number") {
+    image.style[key] = `${value}px`;
+  } else {
+    image.style.removeProperty(key);
+  }
+};
+export {
+  ImageEditor
+};

package/dist/plugins/image/ImageNode.js

@@ -0,0 +1,187 @@
+import { jsx } from "react/jsx-runtime";
+import { DecoratorNode } from "lexical";
+import { ImageEditor } from "./ImageEditor.js";
+function convertImageElement(domNode) {
+  if (domNode instanceof HTMLImageElement) {
+    const { alt: altText, src, title, width, height } = domNode;
+    const node = $createImageNode({ altText, src, title, width: width || void 0, height: height || void 0 });
+    return { node };
+  }
+  return null;
+}
+class ImageNode extends DecoratorNode {
+  /** @internal */
+  __src;
+  /** @internal */
+  __altText;
+  /** @internal */
+  __title;
+  /** @internal */
+  __width;
+  /** @internal */
+  __height;
+  /** @internal */
+  __rest;
+  /** @internal */
+  static getType() {
+    return "image";
+  }
+  /** @internal */
+  static clone(node) {
+    return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__rest, node.__key);
+  }
+  /** @internal */
+  afterCloneFrom(prevNode) {
+    super.afterCloneFrom(prevNode);
+    this.__src = prevNode.__src;
+    this.__altText = prevNode.__altText;
+    this.__title = prevNode.__title;
+    this.__width = prevNode.__width;
+    this.__height = prevNode.__height;
+    this.__rest = prevNode.__rest;
+  }
+  /** @internal */
+  static importJSON(serializedNode) {
+    const { altText, title, src, width, rest, height } = serializedNode;
+    const node = $createImageNode({
+      altText,
+      title,
+      src,
+      height,
+      width,
+      rest
+    });
+    return node;
+  }
+  /** @internal */
+  exportDOM() {
+    const element = document.createElement("img");
+    element.setAttribute("src", this.__src);
+    element.setAttribute("alt", this.__altText);
+    if (this.__title) {
+      element.setAttribute("title", this.__title);
+    }
+    if (this.__width !== "inherit" && this.__width) {
+      element.setAttribute("width", this.__width.toString());
+    }
+    if (this.__height !== "inherit" && this.__height) {
+      element.setAttribute("height", this.__height.toString());
+    }
+    return { element };
+  }
+  /** @internal */
+  static importDOM() {
+    return {
+      img: () => ({
+        conversion: convertImageElement,
+        priority: 0
+      })
+    };
+  }
+  /**
+   * Constructs a new {@link ImageNode} with the specified image parameters.
+   * Use {@link $createImageNode} to construct one.
+   */
+  constructor(src, altText, title, width, height, rest, key) {
+    super(key);
+    this.__src = src;
+    this.__title = title;
+    this.__altText = altText;
+    this.__width = width ?? "inherit";
+    this.__height = height ?? "inherit";
+    this.__rest = rest ?? [];
+  }
+  /** @internal */
+  exportJSON() {
+    return {
+      altText: this.getAltText(),
+      title: this.getTitle(),
+      height: this.__height === "inherit" ? void 0 : this.__height,
+      width: this.__width === "inherit" ? void 0 : this.__width,
+      src: this.getSrc(),
+      rest: this.__rest,
+      type: "image",
+      version: 1
+    };
+  }
+  /**
+   * Sets the image dimensions
+   */
+  setWidthAndHeight(width, height) {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
+  /** @internal */
+  createDOM(config, _editor) {
+    const span = document.createElement("span");
+    const theme = config.theme;
+    const className = theme.image;
+    if (className !== void 0) {
+      span.className = className;
+    }
+    return span;
+  }
+  /** @internal */
+  updateDOM() {
+    return false;
+  }
+  getSrc() {
+    return this.__src;
+  }
+  getAltText() {
+    return this.__altText;
+  }
+  getTitle() {
+    return this.__title;
+  }
+  getHeight() {
+    return this.__height;
+  }
+  getWidth() {
+    return this.__width;
+  }
+  getRest() {
+    return this.__rest;
+  }
+  setTitle(title) {
+    this.getWritable().__title = title;
+  }
+  setSrc(src) {
+    this.getWritable().__src = src;
+  }
+  setAltText(altText) {
+    this.getWritable().__altText = altText ?? "";
+  }
+  /** @internal */
+  shouldBeSerializedAsElement() {
+    return this.__width !== "inherit" || this.__height !== "inherit" || this.__rest.length > 0;
+  }
+  /** @internal */
+  decorate(_parentEditor) {
+    return /* @__PURE__ */ jsx(
+      ImageEditor,
+      {
+        src: this.getSrc(),
+        title: this.getTitle(),
+        nodeKey: this.getKey(),
+        width: this.__width,
+        height: this.__height,
+        alt: this.__altText,
+        rest: this.__rest
+      }
+    );
+  }
+}
+function $createImageNode(params) {
+  const { altText, title, src, key, width, height, rest } = params;
+  return new ImageNode(src, altText, title, width, height, rest, key);
+}
+function $isImageNode(node) {
+  return node instanceof ImageNode;
+}
+export {
+  $createImageNode,
+  $isImageNode,
+  ImageNode
+};

package/dist/plugins/image/ImagePlaceholder.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { ImageIcon } from "@radix-ui/react-icons";
+import styles from "../../styles/ui.module.css.js";
+const ImagePlaceholder = () => {
+  return /* @__PURE__ */ jsx("div", { className: styles.imagePlaceholder, children: /* @__PURE__ */ jsx(ImageIcon, {}) });
+};
+export {
+  ImagePlaceholder
+};

package/dist/plugins/image/ImageResizer.js

@@ -0,0 +1,223 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import styles from "../../styles/ui.module.css.js";
+import classNames from "classnames";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2
+};
+function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  imageRef,
+  maxWidth,
+  editor
+}) {
+  const controlWrapperRef = useRef(null);
+  const userSelect = useRef({
+    priority: "",
+    value: "default"
+  });
+  const positioningRef = useRef({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  });
+  const editorRootElement = editor.getRootElement();
+  const maxWidthContainer = maxWidth ?? (editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100);
+  const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+  const minWidth = 100;
+  const minHeight = 100;
+  const setStartCursor = (direction) => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+      userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
+      userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
+      document.body.style.setProperty("-webkit-user-select", `none`, "important");
+    }
+  };
+  const setEndCursor = () => {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "text");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "default");
+      document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
+    }
+  };
+  const handlePointerDown = (event, direction) => {
+    if (!editor.isEditable()) {
+      return;
+    }
+    const image = imageRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null) {
+      event.preventDefault();
+      const { width, height } = image.getBoundingClientRect();
+      const positioning = positioningRef.current;
+      positioning.startWidth = width;
+      positioning.startHeight = height;
+      positioning.ratio = width / height;
+      positioning.currentWidth = width;
+      positioning.currentHeight = height;
+      positioning.startX = event.clientX;
+      positioning.startY = event.clientY;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+      setStartCursor(direction);
+      onResizeStart();
+      controlWrapper.classList.add(styles.imageControlWrapperResizing);
+      image.style.height = `${height}px`;
+      image.style.width = `${width}px`;
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    }
+  };
+  const handlePointerMove = (event) => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+    const isVertical = positioning.direction & (Direction.south | Direction.north);
+    if (image !== null && positioning.isResizing) {
+      if (isHorizontal && isVertical) {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+        positioning.currentWidth = width;
+      } else if (isVertical) {
+        let diff = Math.floor(positioning.startY - event.clientY);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+        const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
+      } else {
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
+      }
+    }
+  };
+  const handlePointerUp = () => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+      controlWrapper.classList.remove(styles.imageControlWrapperResizing);
+      setEndCursor();
+      onResizeEnd(width, height);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: controlWrapperRef, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerN),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerNe),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north | Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerE),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerSe),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south | Direction.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerS),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerSw),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.south | Direction.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerW),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles.imageResizer, styles.imageResizerNw),
+        onPointerDown: (event) => {
+          handlePointerDown(event, Direction.north | Direction.west);
+        }
+      }
+    )
+  ] });
+}
+export {
+  ImageResizer as default
+};