@mdxeditor/editor 3.31.1 → 3.32.0

package/dist/index.d.ts

@@ -1383,6 +1383,20 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     /* Excluded from this release type: decorate */
 }
 
+/**
+ * Holds the image placeholder.
+ * @group Image
+ */
+export declare const imagePlaceholder$: NodeRef<typeof ImagePlaceholder | null>;
+
+declare function ImagePlaceholder(): JSX.Element {
+    return (
+    <div className={styles.imagePlaceholder}>
+    <ImageIcon />
+    </div>
+    )
+}
+
 /**
  * A plugin that adds support for images.
  * @group Image
@@ -1395,6 +1409,7 @@ export declare const imagePlugin: (params?: {
     imagePreviewHandler?: ImagePreviewHandler | undefined;
     ImageDialog?: FC<{}> | (() => JSX.Element) | undefined;
     EditImageToolbar?: FC<{}> | (() => JSX.Element) | undefined;
+    imagePlaceholder?: (() => JSX.Element) | null | undefined;
 } | undefined) => RealmPlugin;
 
 /**

package/dist/index.js

@@ -10,7 +10,7 @@ import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-br
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
 import { insertTable$, tablePlugin } from "./plugins/table/index.js";
 import { disableAutoLink$, linkPlugin } from "./plugins/link/index.js";
-import { INSERT_IMAGE_COMMAND, closeImageDialog$, disableImageResize$, disableImageSettingsButton$, editImageToolbarComponent$, imageAutocompleteSuggestions$, imageDialogState$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, saveImage$ } from "./plugins/image/index.js";
+import { INSERT_IMAGE_COMMAND, closeImageDialog$, disableImageResize$, disableImageSettingsButton$, editImageToolbarComponent$, imageAutocompleteSuggestions$, imageDialogState$, imagePlaceholder$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, saveImage$ } from "./plugins/image/index.js";
 import { frontmatterDialogOpen$, frontmatterPlugin, hasFrontmatter$, insertFrontmatter$, removeFrontmatter$ } from "./plugins/frontmatter/index.js";
 import { quotePlugin } from "./plugins/quote/index.js";
 import { maxLengthPlugin } from "./plugins/maxlength/index.js";
@@ -236,6 +236,7 @@ export {
   iconComponentFor$,
   imageAutocompleteSuggestions$,
   imageDialogState$,
+  imagePlaceholder$,
   imagePlugin,
   imagePreviewHandler$,
   imageUploadHandler$,

package/dist/plugins/image/ImageEditor.js

@@ -3,26 +3,33 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister } from "@lexical/utils";
 import { useCellValues } from "@mdxeditor/gurx";
+import { ImageIcon } from "@radix-ui/react-icons";
 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 { disableImageResize$, imagePreviewHandler$, editImageToolbarComponent$ } from "./index.js";
+import { imagePlaceholder$, disableImageResize$, 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 imageCache = /* @__PURE__ */ new Set();
-function useSuspenseImage(src) {
-  if (!imageCache.has(src)) {
-    throw new Promise((resolve) => {
-      const img = new Image();
-      img.src = src;
-      img.onerror = img.onload = () => {
-        imageCache.add(src);
-        resolve(null);
-      };
-    });
+const imgCache = {
+  __cache: {},
+  read(src) {
+    if (!this.__cache[src]) {
+      this.__cache[src] = new Promise((resolve) => {
+        const img = new Image();
+        img.onload = () => {
+          this.__cache[src] = true;
+          resolve();
+        };
+        img.src = src;
+      });
+    }
+    if (this.__cache[src] instanceof Promise) {
+      throw this.__cache[src];
+    }
+    return this.__cache[src];
   }
-}
+};
 function LazyImage({
   title,
   alt,
@@ -32,7 +39,7 @@ function LazyImage({
   width,
   height
 }) {
-  useSuspenseImage(src);
+  void imgCache.read(src);
   return /* @__PURE__ */ React__default.createElement(
     "img",
     {
@@ -48,7 +55,8 @@ function LazyImage({
   );
 }
 function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
-  const [disableImageResize, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
+  const [ImagePlaceholderComponent, disableImageResize, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
+    imagePlaceholder$,
     disableImageResize$,
     imagePreviewHandler$,
     readOnly$,
@@ -207,7 +215,7 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
     }
     return null;
   }, [rest]);
-  return imageSource !== null ? /* @__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(
+  return imageSource !== null ? /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: ImagePlaceholderComponent ? /* @__PURE__ */ React__default.createElement(ImagePlaceholderComponent, null) : 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,
@@ -234,6 +242,10 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
     }
   ))) : null;
 }
+function ImagePlaceholder() {
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.imagePlaceholder }, /* @__PURE__ */ React__default.createElement(ImageIcon, null));
+}
 export {
-  ImageEditor
+  ImageEditor,
+  ImagePlaceholder
 };

package/dist/plugins/image/index.js

@@ -1,3 +1,4 @@
+import { ImagePlaceholder } from "./ImageEditor.js";
 import { mergeRegister, $wrapNodeInElement } from "@lexical/utils";
 import { Signal, Cell, Action, withLatestFrom, mapTo, 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";
@@ -38,6 +39,7 @@ 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) => {
@@ -170,7 +172,8 @@ const imagePlugin = realmPlugin({
       [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
       [disableImageSettingsButton$]: Boolean(params == null ? void 0 : params.disableImageSettingsButton),
       [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
-      [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar
+      [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar,
+      [imagePlaceholder$]: (params == null ? void 0 : params.imagePlaceholder) ?? ImagePlaceholder
     });
   },
   update(realm, params) {
@@ -179,7 +182,8 @@ const imagePlugin = realmPlugin({
       [imageAutocompleteSuggestions$]: (params == null ? void 0 : params.imageAutocompleteSuggestions) ?? [],
       [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
       [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
-      [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar
+      [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar,
+      [imagePlaceholder$]: (params == null ? void 0 : params.imagePlaceholder) ?? ImagePlaceholder
     });
   }
 });
@@ -324,6 +328,7 @@ export {
   editImageToolbarComponent$,
   imageAutocompleteSuggestions$,
   imageDialogState$,
+  imagePlaceholder$,
   imagePlugin,
   imagePreviewHandler$,
   imageUploadHandler$,