@mdxeditor/editor 0.10.1 → 0.11.1-alpha.1

package/dist/plugins/image/ImageResizer.js

@@ -0,0 +1,214 @@
+import * as React from "react";
+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 ? 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__ */ React.createElement("div", { ref: controlWrapperRef }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerN),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerNe),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north | Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerE),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerSe),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south | Direction.east);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerS),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerSw),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.south | Direction.west);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerW),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.west);
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(styles.imageResizer, styles.imageResizerNw),
+      onPointerDown: (event) => {
+        handlePointerDown(event, Direction.north | Direction.west);
+      }
+    }
+  ));
+}
+export {
+  ImageResizer as default
+};

package/dist/plugins/image/LexicalImageVisitor.d.ts

@@ -0,0 +1,4 @@
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+import { ImageNode } from './ImageNode';
+export declare const LexicalImageVisitor: LexicalExportVisitor<ImageNode, Mdast.Image>;

package/dist/plugins/image/LexicalImageVisitor.js

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

package/dist/plugins/image/MdastImageVisitor.d.ts

@@ -0,0 +1,6 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+import { MdxJsxTextElement, MdxJsxFlowElement } from 'mdast-util-mdx';
+export declare const MdastImageVisitor: MdastImportVisitor<Mdast.Image>;
+export declare const MdastHtmlImageVisitor: MdastImportVisitor<Mdast.HTML>;
+export declare const MdastJsxImageVisitor: MdastImportVisitor<MdxJsxTextElement | MdxJsxFlowElement>;

package/dist/plugins/image/MdastImageVisitor.js

@@ -0,0 +1,87 @@
+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,
+      height
+    });
+    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 image = $createImageNode({
+      src,
+      altText,
+      title,
+      width: width ? parseInt(width, 10) : void 0,
+      height: height ? parseInt(height, 10) : void 0
+    });
+    if (lexicalParent.getType() === "root") {
+      const paragraph = $createParagraphNode();
+      paragraph.append(image);
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(image);
+    }
+  }
+};
+export {
+  MdastHtmlImageVisitor,
+  MdastImageVisitor,
+  MdastJsxImageVisitor
+};