@mdxeditor/editor - npm Package Compare versions

Comparing version 0.10.0-alpha.1 to 0.10.0-alpha.2

dist/importMarkdownToLexical.js

@@ -31,3 +31,3 @@ import { fromMarkdown } from "mdast-util-from-markdown";
     if (!visitor) {
-      throw new Error(`no MdastImportVisitor found for ${mdastNode.type}`, {
+      throw new Error(`no MdastImportVisitor found for ${mdastNode.type} ${JSON.stringify(mdastNode)}`, {
         cause: mdastNode
@@ -34,0 +34,0 @@ });

dist/MDXEditor.js

@@ -65,3 +65,3 @@ import React__default from "react";
   }, [editorRootElementRef, setEditorRootElementRef]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className), ref: editorRootElementRef }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor"), ref: editorRootElementRef }, children);
 };
@@ -68,0 +68,0 @@ const Methods = ({ mdxRef }) => {

dist/plugins/diff-source/SourceEditor.js

@@ -6,2 +6,3 @@ import { markdown } from "@codemirror/lang-markdown";
 import { corePluginHooks } from "../core/index.js";
+import { EditorView } from "@codemirror/view";
 const SourceEditor = () => {
@@ -14,2 +15,3 @@ const [markdown$1] = corePluginHooks.useEmitterValues("markdown");
     {
+      extensions: [EditorView.lineWrapping],
       showLineNumbers: true,
@@ -16,0 +18,0 @@ additionalLanguages: [{ name: "markdown", extensions: ["md"], language: markdown() }],

dist/plugins/image/ImageEditor.d.ts

@@ -6,3 +6,5 @@ /// <reference types="react" />
     title?: string;
+    width: number | 'inherit';
+    height: number | 'inherit';
 }
-export declare function ImageEditor({ src, title, nodeKey }: ImageEditorProps): JSX.Element;
+export declare function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element;

dist/plugins/image/ImageEditor.js

@@ -9,2 +9,3 @@ import React__default from "react";
 import { $isImageNode } from "./ImageNode.js";
+import ImageResizer from "./ImageResizer.js";
 const imageCache = /* @__PURE__ */ new Set();
@@ -27,8 +28,10 @@ function useSuspenseImage(src) {
   imageRef,
-  src
+  src,
+  width,
+  height
 }) {
   useSuspenseImage(src);
-  return /* @__PURE__ */ React__default.createElement("img", { className: className || void 0, src, title, ref: imageRef, draggable: "false" });
+  return /* @__PURE__ */ React__default.createElement("img", { className: className || void 0, src, title, ref: imageRef, draggable: "false", width, height });
 }
-function ImageEditor({ src, title, nodeKey }) {
+function ImageEditor({ src, title, nodeKey, width, height }) {
   const imageRef = React__default.useRef(null);
@@ -40,2 +43,3 @@ const buttonRef = React__default.useRef(null);
   const activeEditorRef = React__default.useRef(null);
+  const [isResizing, setIsResizing] = React__default.useState(false);
   const onDelete = React__default.useCallback(
@@ -107,2 +111,5 @@ (payload) => {
           const event = payload;
+          if (isResizing) {
+            return true;
+          }
           if (event.target === imageRef.current) {
@@ -141,8 +148,24 @@ if (event.shiftKey) {
     };
-  }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  }, [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;
-  return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { draggable, className: styles.imageWrapper, "data-editor-block-type": "image" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement("div", { className: styles.imageWrapper, "data-editor-block-type": "image" }, /* @__PURE__ */ React__default.createElement("div", { draggable }, /* @__PURE__ */ React__default.createElement(
     LazyImage,
     {
+      width,
+      height,
       className: classNames({
@@ -155,3 +178,3 @@ [styles.focusedImage]: isFocused
     }
-  ))));
+  )), draggable && isFocused && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd })));
 }
@@ -158,0 +181,0 @@ export {

dist/plugins/image/ImageNode.d.ts

@@ -10,2 +10,4 @@ /// <reference types="react" />
     title?: string;
+    width?: number;
+    height?: number;
     src: string;
@@ -22,2 +24,4 @@ type: 'image';
     __title: string | undefined;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
     static getType(): string;
@@ -28,4 +32,5 @@ static clone(node: ImageNode): ImageNode;
     static importDOM(): DOMConversionMap | null;
-    constructor(src: string, altText: string, title: string | undefined, key?: NodeKey);
+    constructor(src: string, altText: string, title: string | undefined, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
     exportJSON(): SerializedImageNode;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
     createDOM(config: EditorConfig): HTMLElement;
@@ -36,2 +41,5 @@ updateDOM(): false;
     getTitle(): string | undefined;
+    getHeight(): 'inherit' | number;
+    getWidth(): 'inherit' | number;
+    hasExplicitDimensions(): boolean;
     setTitle(title: string | undefined): void;
@@ -45,2 +53,4 @@ decorate(_parentEditor: LexicalEditor): JSX.Element;
     altText: string;
+    width?: number;
+    height?: number;
     title?: string;
@@ -47,0 +57,0 @@ key?: NodeKey;

dist/plugins/image/ImageNode.js

@@ -12,4 +12,4 @@ var __defProp = Object.defineProperty;
   if (domNode instanceof HTMLImageElement) {
-    const { alt: altText, src, title } = domNode;
-    const node = $createImageNode({ altText, src, title });
+    const { alt: altText, src, title, width, height } = domNode;
+    const node = $createImageNode({ altText, src, title, width, height });
     return { node };
@@ -20,3 +20,3 @@ }
 class ImageNode extends DecoratorNode {
-  constructor(src, altText, title, key) {
+  constructor(src, altText, title, width, height, key) {
     super(key);
@@ -26,5 +26,9 @@ __publicField(this, "__src");
     __publicField(this, "__title");
+    __publicField(this, "__width");
+    __publicField(this, "__height");
     this.__src = src;
     this.__title = title;
     this.__altText = altText;
+    this.__width = width || "inherit";
+    this.__height = height || "inherit";
   }
@@ -35,10 +39,12 @@ static getType() {
   static clone(node) {
-    return new ImageNode(node.__src, node.__altText, node.__title, node.__key);
+    return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__key);
   }
   static importJSON(serializedNode) {
-    const { altText, title, src } = serializedNode;
+    const { altText, title, src, width, height } = serializedNode;
     const node = $createImageNode({
       altText,
       title,
-      src
+      src,
+      height,
+      width
     });
@@ -54,2 +60,8 @@ return node;
     }
+    if (this.__width) {
+      element.setAttribute("width", this.__width.toString());
+    }
+    if (this.__height) {
+      element.setAttribute("height", this.__height.toString());
+    }
     return { element };
@@ -69,2 +81,4 @@ }
       title: this.getTitle(),
+      height: this.__height === "inherit" ? 0 : this.__height,
+      width: this.__width === "inherit" ? 0 : this.__width,
       src: this.getSrc(),
@@ -75,2 +89,7 @@ type: "image",
   }
+  setWidthAndHeight(width, height) {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
   createDOM(config) {
@@ -97,2 +116,11 @@ const span = document.createElement("span");
   }
+  getHeight() {
+    return this.__height;
+  }
+  getWidth() {
+    return this.__width;
+  }
+  hasExplicitDimensions() {
+    return this.__width !== "inherit" || this.__height !== "inherit";
+  }
   setTitle(title) {
@@ -102,8 +130,8 @@ this.getWritable().__title = title;
   decorate(_parentEditor) {
-    return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey() });
+    return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey(), width: this.__width, height: this.__height });
   }
 }
 function $createImageNode(options) {
-  const { altText, title, src, key } = options;
-  return new ImageNode(src, altText, title, key);
+  const { altText, title, src, key, width, height } = options;
+  return new ImageNode(src, altText, title, width, height, key);
 }
@@ -110,0 +138,0 @@ function $isImageNode(node) {

dist/plugins/image/index.js

@@ -6,3 +6,3 @@ import { $wrapNodeInElement } from "@lexical/utils";
 import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
-import { MdastImageVisitor } from "./MdastImageVisitor.js";
+import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "./MdastImageVisitor.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
@@ -110,2 +110,4 @@ import { system } from "../../gurx/realmFactory.js";
     realm.pubKey("addImportVisitor", MdastImageVisitor);
+    realm.pubKey("addImportVisitor", MdastHtmlImageVisitor);
+    realm.pubKey("addImportVisitor", MdastJsxImageVisitor);
     realm.pubKey("addLexicalNode", ImageNode);
@@ -112,0 +114,0 @@ realm.pubKey("addExportVisitor", LexicalImageVisitor);

dist/plugins/image/LexicalImageVisitor.js

@@ -5,8 +5,29 @@ import { $isImageNode } from "./ImageNode.js";
   visitLexicalNode({ mdastParent, lexicalNode, actions }) {
-    actions.appendToParent(mdastParent, {
-      type: "image",
-      url: lexicalNode.getSrc(),
-      alt: lexicalNode.getAltText(),
-      title: lexicalNode.getTitle()
-    });
+    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()
+      });
+    }
   }
@@ -13,0 +34,0 @@ };

dist/plugins/image/MdastImageVisitor.d.ts

 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>;

dist/plugins/image/MdastImageVisitor.js

 import { $createImageNode } from "./ImageNode.js";
+import { $createParagraphNode } from "lexical";
 const MdastImageVisitor = {
@@ -14,4 +15,74 @@ testNode: "image",
 };
+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 {
-  MdastImageVisitor
+  MdastHtmlImageVisitor,
+  MdastImageVisitor,
+  MdastJsxImageVisitor
 };

dist/plugins/jsx/MdastMdxJsxElementVisitor.js

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

dist/plugins/table/TableEditor.js

@@ -80,14 +80,22 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
   }, [lexicalTable, setActiveCellWithBoundaries]);
-  const addRowToBottom = React__default.useCallback(() => {
-    parentEditor.update(() => {
-      lexicalTable.addRowToBottom();
-      setActiveCell([0, lexicalTable.getRowCount()]);
-    });
-  }, [parentEditor, lexicalTable]);
-  const addColumnToRight = React__default.useCallback(() => {
-    parentEditor.update(() => {
-      lexicalTable.addColumnToRight();
-      setActiveCell([lexicalTable.getColCount(), 0]);
-    });
-  }, [parentEditor, lexicalTable]);
+  const addRowToBottom = React__default.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addRowToBottom();
+        setActiveCell([0, lexicalTable.getRowCount()]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const addColumnToRight = React__default.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addColumnToRight();
+        setActiveCell([lexicalTable.getColCount(), 0]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
   const [highlightedCoordinates, setHighlightedCoordinates] = React__default.useState([-1, -1]);
@@ -120,4 +128,6 @@ const onTableMouseOver = React__default.useCallback((e) => {
       className: styles.iconButton,
+      type: "button",
       title: "Delete table",
-      onClick: () => {
+      onClick: (e) => {
+        e.preventDefault();
         parentEditor.update(() => {
@@ -163,4 +173,4 @@ lexicalTable.selectNext();
       );
-    }), rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { className: styles.addColumnButton, onClick: addColumnToRight }, /* @__PURE__ */ React__default.createElement(AddColumnIcon, null))));
-  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { className: styles.addRowButton, onClick: addRowToBottom }, /* @__PURE__ */ React__default.createElement(AddRowIcon, null))), /* @__PURE__ */ React__default.createElement("th", null))));
+    }), rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addColumnButton, onClick: addColumnToRight }, /* @__PURE__ */ React__default.createElement(AddColumnIcon, null))));
+  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addRowButton, onClick: addRowToBottom }, /* @__PURE__ */ React__default.createElement(AddRowIcon, null))), /* @__PURE__ */ React__default.createElement("th", null))));
 };
@@ -167,0 +177,0 @@ const Cell = ({ align, ...props }) => {

dist/styles/ui.module.css.js

@@ -1,75 +0,85 @@
-const editorRoot = "_editorRoot_1tl3n_36";
-const dropZone = "_dropZone_1tl3n_129";
-const editorWrapper = "_editorWrapper_1tl3n_137";
-const nestedListItem = "_nestedListItem_1tl3n_141";
-const toolbarRoot = "_toolbarRoot_1tl3n_145";
-const toolbarModeSwitch = "_toolbarModeSwitch_1tl3n_169";
-const toolbarToggleItem = "_toolbarToggleItem_1tl3n_178";
-const toolbarGroupOfGroups = "_toolbarGroupOfGroups_1tl3n_188";
-const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_1tl3n_193";
-const toolbarButton = "_toolbarButton_1tl3n_207";
-const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_1tl3n_241";
-const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_1tl3n_242";
-const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_1tl3n_243";
-const selectContainer = "_selectContainer_1tl3n_244";
-const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_1tl3n_258";
-const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_1tl3n_259";
-const selectTrigger = "_selectTrigger_1tl3n_260";
-const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_1tl3n_293";
-const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_1tl3n_299";
-const selectItem = "_selectItem_1tl3n_300";
-const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_1tl3n_324";
-const selectDropdownArrow = "_selectDropdownArrow_1tl3n_325";
-const contentEditable = "_contentEditable_1tl3n_329";
-const sandpackWrapper = "_sandpackWrapper_1tl3n_337";
-const frontmatterWrapper = "_frontmatterWrapper_1tl3n_341";
-const frontmatterToggleButton = "_frontmatterToggleButton_1tl3n_351";
-const propertyPanelTitle = "_propertyPanelTitle_1tl3n_359";
-const propertyEditorTable = "_propertyEditorTable_1tl3n_367";
-const iconButton = "_iconButton_1tl3n_384";
-const readOnlyColumnCell = "_readOnlyColumnCell_1tl3n_389";
-const propertyEditorLabelCell = "_propertyEditorLabelCell_1tl3n_394";
-const buttonsFooter = "_buttonsFooter_1tl3n_402";
-const propertyEditorInput = "_propertyEditorInput_1tl3n_408";
-const primaryButton = "_primaryButton_1tl3n_423";
-const secondaryButton = "_secondaryButton_1tl3n_423";
-const linkDialogEditForm = "_linkDialogEditForm_1tl3n_439";
-const linkDialogInputContainer = "_linkDialogInputContainer_1tl3n_445";
-const linkDialogInputWrapper = "_linkDialogInputWrapper_1tl3n_451";
-const linkDialogInput = "_linkDialogInput_1tl3n_445";
-const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_1tl3n_481";
-const linkDialogAnchor = "_linkDialogAnchor_1tl3n_526";
-const linkDialogPopoverContent = "_linkDialogPopoverContent_1tl3n_540";
-const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_1tl3n_540";
-const dialogContent = "_dialogContent_1tl3n_540";
-const popoverContent = "_popoverContent_1tl3n_552";
-const popoverArrow = "_popoverArrow_1tl3n_563";
-const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_1tl3n_569";
-const tooltipContent = "_tooltipContent_1tl3n_591";
-const actionButton = "_actionButton_1tl3n_605";
-const primaryActionButton = "_primaryActionButton_1tl3n_611";
-const tableEditor = "_tableEditor_1tl3n_620";
-const toolCell = "_toolCell_1tl3n_631";
-const tableColumnEditorTrigger = "_tableColumnEditorTrigger_1tl3n_648";
-const tableRowEditorTrigger = "_tableRowEditorTrigger_1tl3n_648";
-const addRowButton = "_addRowButton_1tl3n_648";
-const addColumnButton = "_addColumnButton_1tl3n_648";
-const tableColumnEditorToolbar = "_tableColumnEditorToolbar_1tl3n_682";
-const toggleGroupRoot = "_toggleGroupRoot_1tl3n_694";
-const tableToolsColumn = "_tableToolsColumn_1tl3n_711";
-const leftAlignedCell = "_leftAlignedCell_1tl3n_719";
-const rightAlignedCell = "_rightAlignedCell_1tl3n_723";
-const centeredCell = "_centeredCell_1tl3n_727";
-const dialogOverlay = "_dialogOverlay_1tl3n_755";
-const overlayShow = "_overlayShow_1tl3n_1";
-const contentShow = "_contentShow_1tl3n_1";
-const focusedImage = "_focusedImage_1tl3n_797";
-const imageWrapper = "_imageWrapper_1tl3n_801";
-const inlineEditor = "_inlineEditor_1tl3n_812";
-const blockEditor = "_blockEditor_1tl3n_821";
-const nestedEditor = "_nestedEditor_1tl3n_830";
-const genericComponentName = "_genericComponentName_1tl3n_847";
-const diffSourceToggle = "_diffSourceToggle_1tl3n_853";
-const selectWithLabel = "_selectWithLabel_1tl3n_867";
-const toolbarTitleMode = "_toolbarTitleMode_1tl3n_881";
+const editorRoot = "_editorRoot_1i155_36";
+const dropZone = "_dropZone_1i155_130";
+const editorWrapper = "_editorWrapper_1i155_138";
+const nestedListItem = "_nestedListItem_1i155_142";
+const toolbarRoot = "_toolbarRoot_1i155_146";
+const toolbarModeSwitch = "_toolbarModeSwitch_1i155_170";
+const toolbarToggleItem = "_toolbarToggleItem_1i155_179";
+const toolbarGroupOfGroups = "_toolbarGroupOfGroups_1i155_189";
+const toolbarToggleSingleGroup = "_toolbarToggleSingleGroup_1i155_194";
+const toolbarButton = "_toolbarButton_1i155_208";
+const toolbarNodeKindSelectContainer = "_toolbarNodeKindSelectContainer_1i155_242";
+const toolbarButtonDropdownContainer = "_toolbarButtonDropdownContainer_1i155_243";
+const toolbarCodeBlockLanguageSelectContent = "_toolbarCodeBlockLanguageSelectContent_1i155_244";
+const selectContainer = "_selectContainer_1i155_245";
+const toolbarNodeKindSelectTrigger = "_toolbarNodeKindSelectTrigger_1i155_259";
+const toolbarButtonSelectTrigger = "_toolbarButtonSelectTrigger_1i155_260";
+const selectTrigger = "_selectTrigger_1i155_261";
+const toolbarCodeBlockLanguageSelectTrigger = "_toolbarCodeBlockLanguageSelectTrigger_1i155_294";
+const toolbarNodeKindSelectItem = "_toolbarNodeKindSelectItem_1i155_300";
+const selectItem = "_selectItem_1i155_301";
+const toolbarNodeKindSelectDropdownArrow = "_toolbarNodeKindSelectDropdownArrow_1i155_325";
+const selectDropdownArrow = "_selectDropdownArrow_1i155_326";
+const contentEditable = "_contentEditable_1i155_330";
+const sandpackWrapper = "_sandpackWrapper_1i155_338";
+const frontmatterWrapper = "_frontmatterWrapper_1i155_342";
+const frontmatterToggleButton = "_frontmatterToggleButton_1i155_352";
+const propertyPanelTitle = "_propertyPanelTitle_1i155_360";
+const propertyEditorTable = "_propertyEditorTable_1i155_368";
+const iconButton = "_iconButton_1i155_385";
+const readOnlyColumnCell = "_readOnlyColumnCell_1i155_390";
+const propertyEditorLabelCell = "_propertyEditorLabelCell_1i155_395";
+const buttonsFooter = "_buttonsFooter_1i155_403";
+const propertyEditorInput = "_propertyEditorInput_1i155_409";
+const primaryButton = "_primaryButton_1i155_424";
+const secondaryButton = "_secondaryButton_1i155_424";
+const linkDialogEditForm = "_linkDialogEditForm_1i155_440";
+const linkDialogInputContainer = "_linkDialogInputContainer_1i155_446";
+const linkDialogInputWrapper = "_linkDialogInputWrapper_1i155_452";
+const linkDialogInput = "_linkDialogInput_1i155_446";
+const linkDialogAutocompleteContainer = "_linkDialogAutocompleteContainer_1i155_482";
+const linkDialogAnchor = "_linkDialogAnchor_1i155_527";
+const linkDialogPopoverContent = "_linkDialogPopoverContent_1i155_541";
+const tableColumnEditorPopoverContent = "_tableColumnEditorPopoverContent_1i155_541";
+const dialogContent = "_dialogContent_1i155_541";
+const popoverContent = "_popoverContent_1i155_553";
+const popoverArrow = "_popoverArrow_1i155_564";
+const linkDialogPreviewAnchor = "_linkDialogPreviewAnchor_1i155_570";
+const tooltipContent = "_tooltipContent_1i155_592";
+const actionButton = "_actionButton_1i155_606";
+const primaryActionButton = "_primaryActionButton_1i155_612";
+const tableEditor = "_tableEditor_1i155_621";
+const toolCell = "_toolCell_1i155_632";
+const tableColumnEditorTrigger = "_tableColumnEditorTrigger_1i155_649";
+const tableRowEditorTrigger = "_tableRowEditorTrigger_1i155_649";
+const addRowButton = "_addRowButton_1i155_649";
+const addColumnButton = "_addColumnButton_1i155_649";
+const tableColumnEditorToolbar = "_tableColumnEditorToolbar_1i155_683";
+const toggleGroupRoot = "_toggleGroupRoot_1i155_695";
+const tableToolsColumn = "_tableToolsColumn_1i155_712";
+const leftAlignedCell = "_leftAlignedCell_1i155_720";
+const rightAlignedCell = "_rightAlignedCell_1i155_724";
+const centeredCell = "_centeredCell_1i155_728";
+const dialogOverlay = "_dialogOverlay_1i155_756";
+const overlayShow = "_overlayShow_1i155_1";
+const contentShow = "_contentShow_1i155_1";
+const focusedImage = "_focusedImage_1i155_798";
+const imageWrapper = "_imageWrapper_1i155_802";
+const inlineEditor = "_inlineEditor_1i155_814";
+const blockEditor = "_blockEditor_1i155_823";
+const nestedEditor = "_nestedEditor_1i155_832";
+const genericComponentName = "_genericComponentName_1i155_849";
+const diffSourceToggle = "_diffSourceToggle_1i155_855";
+const selectWithLabel = "_selectWithLabel_1i155_869";
+const toolbarTitleMode = "_toolbarTitleMode_1i155_883";
+const imageControlWrapperResizing = "_imageControlWrapperResizing_1i155_889";
+const imageResizer = "_imageResizer_1i155_893";
+const imageResizerN = "_imageResizerN_1i155_902";
+const imageResizerNe = "_imageResizerNe_1i155_908";
+const imageResizerE = "_imageResizerE_1i155_914";
+const imageResizerSe = "_imageResizerSe_1i155_920";
+const imageResizerS = "_imageResizerS_1i155_920";
+const imageResizerSw = "_imageResizerSw_1i155_932";
+const imageResizerW = "_imageResizerW_1i155_938";
+const imageResizerNw = "_imageResizerNw_1i155_944";
 const styles = {
@@ -149,3 +159,13 @@ editorRoot,
   selectWithLabel,
-  toolbarTitleMode
+  toolbarTitleMode,
+  imageControlWrapperResizing,
+  imageResizer,
+  imageResizerN,
+  imageResizerNe,
+  imageResizerE,
+  imageResizerSe,
+  imageResizerS,
+  imageResizerSw,
+  imageResizerW,
+  imageResizerNw
 };
@@ -173,2 +193,12 @@ export {
   iconButton,
+  imageControlWrapperResizing,
+  imageResizer,
+  imageResizerE,
+  imageResizerN,
+  imageResizerNe,
+  imageResizerNw,
+  imageResizerS,
+  imageResizerSe,
+  imageResizerSw,
+  imageResizerW,
   imageWrapper,
@@ -175,0 +205,0 @@ inlineEditor,

dist/utils/lexicalHelpers.js

@@ -36,4 +36,4 @@ import { $getSelection } from "lexical";
     return {
-      top: rect.top + window.scrollY,
-      left: rect.left + window.scrollX,
+      top: rect.top,
+      left: rect.left,
       width: rect.width,
@@ -40,0 +40,0 @@ height: rect.height

package.json

@@ -12,3 +12,3 @@ {
   "type": "module",
-  "version": "0.10.0-alpha.1",
+  "version": "0.10.0-alpha.2",
   "description": "React component for rich text markdown editing",
@@ -41,2 +41,3 @@ "scripts": {
     "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "6.15.3",
     "@codesandbox/sandpack-react": "^2.6.7",
@@ -43,0 +44,0 @@ "@lexical/clipboard": "^0.11.1",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1159198

increased by1.45%

Number of package files

275

increased by0.73%

Lines of code

18545

increased by2.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

46

increased by2.22%

Dependency changes

• + Added@codemirror/view@6.15.3

• + Added@codemirror/view@6.15.3(transitive)